haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui/polls/security/native): style fixes and updates (#12761) 

* feat(base/ui/native): button fixes and ui updates
This commit is contained in:
Calinteodor 2023-01-12 12:11:27 +02:00 committed by GitHub
parent 9422f48536
commit c50111a57d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/features/base/ui/components/native/buttonStyles.ts
View File

@ -55,6 +55,7 @@ export default {
buttonLabelTertiary: { buttonLabelTertiary: {
...buttonLabel, ...buttonLabel,
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
margin: BaseTheme.spacing[3],
textAlign: 'center' textAlign: 'center'
}, },

23
react/features/polls/components/native/PollCreate.js
View File

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FlatList, Platform, Text, View } from 'react-native'; import { FlatList, Platform, View } from 'react-native';
import { Divider, TouchableRipple } from 'react-native-paper'; import { Divider } from 'react-native-paper';
import Button from '../../../base/ui/components/native/Button'; import Button from '../../../base/ui/components/native/Button';
import Input from '../../../base/ui/components/native/Input'; import Input from '../../../base/ui/components/native/Input';
@ -52,7 +52,7 @@ const PollCreate = (props: AbstractProps) => {
* about whether a newly created input field has been rendered yet or not. * about whether a newly created input field has been rendered yet or not.
*/ */
const [ lastFocus, requestFocus ] = useState(null); const [ lastFocus, requestFocus ] = useState(null);
const { PRIMARY, SECONDARY } = BUTTON_TYPES; const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
useEffect(() => { useEffect(() => {
if (lastFocus === null) { if (lastFocus === null) {
@ -85,13 +85,12 @@ const PollCreate = (props: AbstractProps) => {
/* eslint-disable react/no-multi-comp */ /* eslint-disable react/no-multi-comp */
const createRemoveOptionButton = onPress => ( const createRemoveOptionButton = onPress => (
<TouchableRipple <Button
onPress = { onPress } labelKey = 'polls.create.removeOption'
rippleColor = { 'transparent' } > labelStyle = { dialogStyles.optionRemoveButtonText }
<Text style = { dialogStyles.optionRemoveButtonText }> onClick = { onPress }
{ t('polls.create.removeOption') } style = { dialogStyles.optionRemoveButton }
</Text> type = { TERTIARY } />
</TouchableRipple>
); );
@ -120,6 +119,8 @@ const PollCreate = (props: AbstractProps) => {
); );
const buttonRowStyles = Platform.OS === 'android' const buttonRowStyles = Platform.OS === 'android'
? chatStyles.buttonRowAndroid : chatStyles.buttonRowIos; ? chatStyles.buttonRowAndroid : chatStyles.buttonRowIos;
const pollCreateButtonsContainerStyles = Platform.OS === 'android'
? chatStyles.pollCreateButtonsContainerAndroid : chatStyles.pollCreateButtonsContainerIos;
return ( return (
<View style = { chatStyles.pollCreateContainer }> <View style = { chatStyles.pollCreateContainer }>
@ -143,7 +144,7 @@ const PollCreate = (props: AbstractProps) => {
keyExtractor = { (item, index) => index.toString() } keyExtractor = { (item, index) => index.toString() }
ref = { answerListRef } ref = { answerListRef }
renderItem = { renderListItem } /> renderItem = { renderListItem } />
<View style = { chatStyles.pollCreateButtonsContainer }> <View style = { pollCreateButtonsContainerStyles }>
<Button <Button
accessibilityLabel = 'polls.create.addOption' accessibilityLabel = 'polls.create.addOption'
disabled = { answers.length >= ANSWERS_LIMIT } disabled = { answers.length >= ANSWERS_LIMIT }

34
react/features/polls/components/native/PollResults.js
View File

@ -1,10 +1,12 @@
// @flow // @flow
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native'; import { FlatList, Text, View } from 'react-native';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { getLocalParticipant } from '../../../base/participants'; import { getLocalParticipant } from '../../../base/participants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
import AbstractPollResults from '../AbstractPollResults'; import AbstractPollResults from '../AbstractPollResults';
import type { AbstractProps, AnswerInfo } from '../AbstractPollResults'; import type { AbstractProps, AnswerInfo } from '../AbstractPollResults';
@ -101,26 +103,24 @@ const PollResults = (props: AbstractProps) => {
keyExtractor = { (item, index) => index.toString() } keyExtractor = { (item, index) => index.toString() }
renderItem = { answer => renderRow(answer.item) } /> renderItem = { answer => renderRow(answer.item) } />
<View style = { chatStyles.bottomLinks }> <View style = { chatStyles.bottomLinks }>
<TouchableOpacity onPress = { toggleIsDetailed }> <Button
<Text labelKey = {
style = { chatStyles.toggleText }>
{
showDetails showDetails
? t('polls.results.hideDetailedResults') ? 'polls.results.hideDetailedResults'
: t('polls.results.showDetailedResults') : 'polls.results.showDetailedResults'
} }
</Text> labelStyle = { chatStyles.toggleText }
</TouchableOpacity> onClick = { toggleIsDetailed }
<TouchableOpacity onPress = { changeVote }> type = { BUTTON_TYPES.TERTIARY } />
<Text <Button
style = { chatStyles.toggleText }> labelKey = {
{
haveVoted haveVoted
? t('polls.results.changeVote') ? 'polls.results.changeVote'
: t('polls.results.vote') : 'polls.results.vote'
} }
</Text> labelStyle = { chatStyles.toggleText }
</TouchableOpacity> onClick = { changeVote }
type = { BUTTON_TYPES.TERTIARY } />
</View> </View>
</View> </View>
); );

6
react/features/polls/components/native/PollsPane.js
View File

@ -2,6 +2,7 @@
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import JitsiScreen from '../../../base/modal/components/JitsiScreen'; import JitsiScreen from '../../../base/modal/components/JitsiScreen';
@ -39,6 +40,9 @@ const PollsPane = (props: AbstractProps) => {
}, [ isPollsTabFocused, nbUnreadPolls ]); }, [ isPollsTabFocused, nbUnreadPolls ]);
const createPollButtonStyles = Platform.OS === 'android'
? chatStyles.createPollButtonAndroid : chatStyles.createPollButtonIos;
return ( return (
<JitsiScreen <JitsiScreen
contentContainerStyle = { chatStyles.pollPane } contentContainerStyle = { chatStyles.pollPane }
@ -56,7 +60,7 @@ const PollsPane = (props: AbstractProps) => {
accessibilityLabel = 'polls.create.create' accessibilityLabel = 'polls.create.create'
labelKey = 'polls.create.create' labelKey = 'polls.create.create'
onClick = { onCreate } onClick = { onCreate }
style = { chatStyles.createPollButton } style = { createPollButtonStyles }
type = { BUTTON_TYPES.PRIMARY } /> type = { BUTTON_TYPES.PRIMARY } />
} }
</JitsiScreen> </JitsiScreen>

59
react/features/polls/components/native/styles.js
View File

@ -13,15 +13,14 @@ export const dialogStyles = createStyleSheet({
questionText: { questionText: {
...BaseTheme.typography.bodyShortBold, ...BaseTheme.typography.bodyShortBold,
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
marginBottom: BaseTheme.spacing[2], marginLeft: BaseTheme.spacing[1]
marginLeft: BaseTheme.spacing[2]
}, },
questionOwnerText: { questionOwnerText: {
...BaseTheme.typography.bodyShortBold, ...BaseTheme.typography.bodyShortBold,
color: BaseTheme.palette.text03, color: BaseTheme.palette.text03,
marginBottom: BaseTheme.spacing[2], marginBottom: BaseTheme.spacing[2],
marginLeft: BaseTheme.spacing[2] marginLeft: BaseTheme.spacing[1]
}, },
optionContainer: { optionContainer: {
@ -30,6 +29,10 @@ export const dialogStyles = createStyleSheet({
marginHorizontal: BaseTheme.spacing[3] marginHorizontal: BaseTheme.spacing[3]
}, },
optionRemoveButton: {
width: 128
},
optionRemoveButtonText: { optionRemoveButtonText: {
color: BaseTheme.palette.actionDangerActive color: BaseTheme.palette.actionDangerActive
}, },
@ -82,7 +85,7 @@ export const resultsStyles = createStyleSheet({
}, },
answerContainer: { answerContainer: {
marginHorizontal: BaseTheme.spacing[2], marginHorizontal: BaseTheme.spacing[1],
marginVertical: BaseTheme.spacing[3], marginVertical: BaseTheme.spacing[3],
maxWidth: '100%' maxWidth: '100%'
}, },
@ -126,7 +129,7 @@ export const chatStyles = createStyleSheet({
}, },
pollItemContainer: { pollItemContainer: {
backgroundColor: BaseTheme.palette.ui02, backgroundColor: BaseTheme.palette.uiBackground,
borderColor: BaseTheme.palette.border05, borderColor: BaseTheme.palette.border05,
borderRadius: BaseTheme.shape.borderRadius, borderRadius: BaseTheme.shape.borderRadius,
boxShadow: BaseTheme.shape.boxShadow, boxShadow: BaseTheme.shape.boxShadow,
@ -144,14 +147,14 @@ export const chatStyles = createStyleSheet({
marginTop: BaseTheme.spacing[3] marginTop: BaseTheme.spacing[3]
}, },
pollCreateButtonsContainer: { pollCreateButtonsContainerAndroid: {
marginHorizontal: BaseTheme.spacing[3], marginBottom: BaseTheme.spacing[8],
marginVertical: '8%' marginHorizontal: BaseTheme.spacing[3]
}, },
pollCreateButton: { pollCreateButtonsContainerIos: {
flex: 1, marginBottom: BaseTheme.spacing[5],
marginHorizontal: BaseTheme.spacing[1] marginHorizontal: BaseTheme.spacing[3]
}, },
pollSendLabel: { pollSendLabel: {
@ -165,20 +168,22 @@ export const chatStyles = createStyleSheet({
}, },
buttonRow: { buttonRow: {
flexDirection: 'row' flexDirection: 'row',
justifyContent: 'center'
}, },
buttonRowAndroid: { buttonRowAndroid: {
flexDirection: 'row', flexDirection: 'row',
marginBottom: BaseTheme.spacing[3] justifyContent: 'space-between'
}, },
buttonRowIos: { buttonRowIos: {
flexDirection: 'row' flexDirection: 'row',
justifyContent: 'space-between'
}, },
answerContent: { answerContent: {
paddingBottom: 8 marginBottom: BaseTheme.spacing[2]
}, },
switchRow: { switchRow: {
@ -197,19 +202,27 @@ export const chatStyles = createStyleSheet({
marginVertical: BaseTheme.spacing[2] marginVertical: BaseTheme.spacing[2]
}, },
toggleText: { pollCreateButton: {
color: BaseTheme.palette.action01, marginHorizontal: BaseTheme.spacing[1],
paddingTop: BaseTheme.spacing[3] width: 160
}, },
createPollButton: { toggleText: {
marginHorizontal: BaseTheme.spacing[3], color: BaseTheme.palette.action01
marginVertical: 34 },
createPollButtonIos: {
marginHorizontal: 20,
marginVertical: BaseTheme.spacing[5]
},
createPollButtonAndroid: {
marginHorizontal: 20
}, },
pollPane: { pollPane: {
flex: 1, flex: 1,
padding: 8 padding: BaseTheme.spacing[2]
}, },
pollPaneContainer: { pollPaneContainer: {
@ -220,7 +233,7 @@ export const chatStyles = createStyleSheet({
bottomLinks: { bottomLinks: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginHorizontal: BaseTheme.spacing[2] marginHorizontal: BaseTheme.spacing[1]
}, },
unreadPollsCounterContainer: { unreadPollsCounterContainer: {

10
react/features/security/components/security-dialog/native/styles.js
View File

@ -61,7 +61,6 @@ export default {
savedPasswordContainer: { savedPasswordContainer: {
flexDirection: 'row', flexDirection: 'row',
marginTop: 14,
width: 208 width: 208
}, },
@ -79,8 +78,7 @@ export default {
}, },
passwordSetupButtonLabel: { passwordSetupButtonLabel: {
color: BaseTheme.palette.link01, color: BaseTheme.palette.link01
marginTop: BaseTheme.spacing[3]
}, },
passwordSetRemotelyContainer: { passwordSetRemotelyContainer: {
@ -90,12 +88,10 @@ export default {
}, },
passwordSetRemotelyText: { passwordSetRemotelyText: {
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01
marginTop: BaseTheme.spacing[3]
}, },
passwordSetRemotelyTextDisabled: { passwordSetRemotelyTextDisabled: {
color: BaseTheme.palette.text02, color: BaseTheme.palette.text02
marginTop: BaseTheme.spacing[3]
} }
}; };