feat(ui/polls/security/native): style fixes and updates (#12761)
* feat(base/ui/native): button fixes and ui updates
This commit is contained in:
parent
9422f48536
commit
c50111a57d
|
@ -55,6 +55,7 @@ export default {
|
|||
buttonLabelTertiary: {
|
||||
...buttonLabel,
|
||||
color: BaseTheme.palette.text01,
|
||||
margin: BaseTheme.spacing[3],
|
||||
textAlign: 'center'
|
||||
},
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FlatList, Platform, Text, View } from 'react-native';
|
||||
import { Divider, TouchableRipple } from 'react-native-paper';
|
||||
import { FlatList, Platform, View } from 'react-native';
|
||||
import { Divider } from 'react-native-paper';
|
||||
|
||||
import Button from '../../../base/ui/components/native/Button';
|
||||
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.
|
||||
*/
|
||||
const [ lastFocus, requestFocus ] = useState(null);
|
||||
const { PRIMARY, SECONDARY } = BUTTON_TYPES;
|
||||
const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
|
||||
|
||||
useEffect(() => {
|
||||
if (lastFocus === null) {
|
||||
|
@ -85,13 +85,12 @@ const PollCreate = (props: AbstractProps) => {
|
|||
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
const createRemoveOptionButton = onPress => (
|
||||
<TouchableRipple
|
||||
onPress = { onPress }
|
||||
rippleColor = { 'transparent' } >
|
||||
<Text style = { dialogStyles.optionRemoveButtonText }>
|
||||
{ t('polls.create.removeOption') }
|
||||
</Text>
|
||||
</TouchableRipple>
|
||||
<Button
|
||||
labelKey = 'polls.create.removeOption'
|
||||
labelStyle = { dialogStyles.optionRemoveButtonText }
|
||||
onClick = { onPress }
|
||||
style = { dialogStyles.optionRemoveButton }
|
||||
type = { TERTIARY } />
|
||||
);
|
||||
|
||||
|
||||
|
@ -120,6 +119,8 @@ const PollCreate = (props: AbstractProps) => {
|
|||
);
|
||||
const buttonRowStyles = Platform.OS === 'android'
|
||||
? chatStyles.buttonRowAndroid : chatStyles.buttonRowIos;
|
||||
const pollCreateButtonsContainerStyles = Platform.OS === 'android'
|
||||
? chatStyles.pollCreateButtonsContainerAndroid : chatStyles.pollCreateButtonsContainerIos;
|
||||
|
||||
return (
|
||||
<View style = { chatStyles.pollCreateContainer }>
|
||||
|
@ -143,7 +144,7 @@ const PollCreate = (props: AbstractProps) => {
|
|||
keyExtractor = { (item, index) => index.toString() }
|
||||
ref = { answerListRef }
|
||||
renderItem = { renderListItem } />
|
||||
<View style = { chatStyles.pollCreateButtonsContainer }>
|
||||
<View style = { pollCreateButtonsContainerStyles }>
|
||||
<Button
|
||||
accessibilityLabel = 'polls.create.addOption'
|
||||
disabled = { answers.length >= ANSWERS_LIMIT }
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
// @flow
|
||||
|
||||
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 { 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 type { AbstractProps, AnswerInfo } from '../AbstractPollResults';
|
||||
|
||||
|
@ -101,26 +103,24 @@ const PollResults = (props: AbstractProps) => {
|
|||
keyExtractor = { (item, index) => index.toString() }
|
||||
renderItem = { answer => renderRow(answer.item) } />
|
||||
<View style = { chatStyles.bottomLinks }>
|
||||
<TouchableOpacity onPress = { toggleIsDetailed }>
|
||||
<Text
|
||||
style = { chatStyles.toggleText }>
|
||||
{
|
||||
showDetails
|
||||
? t('polls.results.hideDetailedResults')
|
||||
: t('polls.results.showDetailedResults')
|
||||
}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress = { changeVote }>
|
||||
<Text
|
||||
style = { chatStyles.toggleText }>
|
||||
{
|
||||
haveVoted
|
||||
? t('polls.results.changeVote')
|
||||
: t('polls.results.vote')
|
||||
}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Button
|
||||
labelKey = {
|
||||
showDetails
|
||||
? 'polls.results.hideDetailedResults'
|
||||
: 'polls.results.showDetailedResults'
|
||||
}
|
||||
labelStyle = { chatStyles.toggleText }
|
||||
onClick = { toggleIsDetailed }
|
||||
type = { BUTTON_TYPES.TERTIARY } />
|
||||
<Button
|
||||
labelKey = {
|
||||
haveVoted
|
||||
? 'polls.results.changeVote'
|
||||
: 'polls.results.vote'
|
||||
}
|
||||
labelStyle = { chatStyles.toggleText }
|
||||
onClick = { changeVote }
|
||||
type = { BUTTON_TYPES.TERTIARY } />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Platform } from 'react-native';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
|
||||
|
@ -39,6 +40,9 @@ const PollsPane = (props: AbstractProps) => {
|
|||
|
||||
}, [ isPollsTabFocused, nbUnreadPolls ]);
|
||||
|
||||
const createPollButtonStyles = Platform.OS === 'android'
|
||||
? chatStyles.createPollButtonAndroid : chatStyles.createPollButtonIos;
|
||||
|
||||
return (
|
||||
<JitsiScreen
|
||||
contentContainerStyle = { chatStyles.pollPane }
|
||||
|
@ -56,7 +60,7 @@ const PollsPane = (props: AbstractProps) => {
|
|||
accessibilityLabel = 'polls.create.create'
|
||||
labelKey = 'polls.create.create'
|
||||
onClick = { onCreate }
|
||||
style = { chatStyles.createPollButton }
|
||||
style = { createPollButtonStyles }
|
||||
type = { BUTTON_TYPES.PRIMARY } />
|
||||
}
|
||||
</JitsiScreen>
|
||||
|
|
|
@ -13,15 +13,14 @@ export const dialogStyles = createStyleSheet({
|
|||
questionText: {
|
||||
...BaseTheme.typography.bodyShortBold,
|
||||
color: BaseTheme.palette.text01,
|
||||
marginBottom: BaseTheme.spacing[2],
|
||||
marginLeft: BaseTheme.spacing[2]
|
||||
marginLeft: BaseTheme.spacing[1]
|
||||
},
|
||||
|
||||
questionOwnerText: {
|
||||
...BaseTheme.typography.bodyShortBold,
|
||||
color: BaseTheme.palette.text03,
|
||||
marginBottom: BaseTheme.spacing[2],
|
||||
marginLeft: BaseTheme.spacing[2]
|
||||
marginLeft: BaseTheme.spacing[1]
|
||||
},
|
||||
|
||||
optionContainer: {
|
||||
|
@ -30,6 +29,10 @@ export const dialogStyles = createStyleSheet({
|
|||
marginHorizontal: BaseTheme.spacing[3]
|
||||
},
|
||||
|
||||
optionRemoveButton: {
|
||||
width: 128
|
||||
},
|
||||
|
||||
optionRemoveButtonText: {
|
||||
color: BaseTheme.palette.actionDangerActive
|
||||
},
|
||||
|
@ -82,7 +85,7 @@ export const resultsStyles = createStyleSheet({
|
|||
},
|
||||
|
||||
answerContainer: {
|
||||
marginHorizontal: BaseTheme.spacing[2],
|
||||
marginHorizontal: BaseTheme.spacing[1],
|
||||
marginVertical: BaseTheme.spacing[3],
|
||||
maxWidth: '100%'
|
||||
},
|
||||
|
@ -126,7 +129,7 @@ export const chatStyles = createStyleSheet({
|
|||
},
|
||||
|
||||
pollItemContainer: {
|
||||
backgroundColor: BaseTheme.palette.ui02,
|
||||
backgroundColor: BaseTheme.palette.uiBackground,
|
||||
borderColor: BaseTheme.palette.border05,
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
boxShadow: BaseTheme.shape.boxShadow,
|
||||
|
@ -144,14 +147,14 @@ export const chatStyles = createStyleSheet({
|
|||
marginTop: BaseTheme.spacing[3]
|
||||
},
|
||||
|
||||
pollCreateButtonsContainer: {
|
||||
marginHorizontal: BaseTheme.spacing[3],
|
||||
marginVertical: '8%'
|
||||
pollCreateButtonsContainerAndroid: {
|
||||
marginBottom: BaseTheme.spacing[8],
|
||||
marginHorizontal: BaseTheme.spacing[3]
|
||||
},
|
||||
|
||||
pollCreateButton: {
|
||||
flex: 1,
|
||||
marginHorizontal: BaseTheme.spacing[1]
|
||||
pollCreateButtonsContainerIos: {
|
||||
marginBottom: BaseTheme.spacing[5],
|
||||
marginHorizontal: BaseTheme.spacing[3]
|
||||
},
|
||||
|
||||
pollSendLabel: {
|
||||
|
@ -165,20 +168,22 @@ export const chatStyles = createStyleSheet({
|
|||
},
|
||||
|
||||
buttonRow: {
|
||||
flexDirection: 'row'
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
|
||||
buttonRowAndroid: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: BaseTheme.spacing[3]
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
|
||||
buttonRowIos: {
|
||||
flexDirection: 'row'
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
|
||||
answerContent: {
|
||||
paddingBottom: 8
|
||||
marginBottom: BaseTheme.spacing[2]
|
||||
},
|
||||
|
||||
switchRow: {
|
||||
|
@ -197,19 +202,27 @@ export const chatStyles = createStyleSheet({
|
|||
marginVertical: BaseTheme.spacing[2]
|
||||
},
|
||||
|
||||
toggleText: {
|
||||
color: BaseTheme.palette.action01,
|
||||
paddingTop: BaseTheme.spacing[3]
|
||||
pollCreateButton: {
|
||||
marginHorizontal: BaseTheme.spacing[1],
|
||||
width: 160
|
||||
},
|
||||
|
||||
createPollButton: {
|
||||
marginHorizontal: BaseTheme.spacing[3],
|
||||
marginVertical: 34
|
||||
toggleText: {
|
||||
color: BaseTheme.palette.action01
|
||||
},
|
||||
|
||||
createPollButtonIos: {
|
||||
marginHorizontal: 20,
|
||||
marginVertical: BaseTheme.spacing[5]
|
||||
},
|
||||
|
||||
createPollButtonAndroid: {
|
||||
marginHorizontal: 20
|
||||
},
|
||||
|
||||
pollPane: {
|
||||
flex: 1,
|
||||
padding: 8
|
||||
padding: BaseTheme.spacing[2]
|
||||
},
|
||||
|
||||
pollPaneContainer: {
|
||||
|
@ -220,7 +233,7 @@ export const chatStyles = createStyleSheet({
|
|||
bottomLinks: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginHorizontal: BaseTheme.spacing[2]
|
||||
marginHorizontal: BaseTheme.spacing[1]
|
||||
},
|
||||
|
||||
unreadPollsCounterContainer: {
|
||||
|
|
|
@ -61,7 +61,6 @@ export default {
|
|||
|
||||
savedPasswordContainer: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 14,
|
||||
width: 208
|
||||
},
|
||||
|
||||
|
@ -79,8 +78,7 @@ export default {
|
|||
},
|
||||
|
||||
passwordSetupButtonLabel: {
|
||||
color: BaseTheme.palette.link01,
|
||||
marginTop: BaseTheme.spacing[3]
|
||||
color: BaseTheme.palette.link01
|
||||
},
|
||||
|
||||
passwordSetRemotelyContainer: {
|
||||
|
@ -90,12 +88,10 @@ export default {
|
|||
},
|
||||
|
||||
passwordSetRemotelyText: {
|
||||
color: BaseTheme.palette.text01,
|
||||
marginTop: BaseTheme.spacing[3]
|
||||
color: BaseTheme.palette.text01
|
||||
},
|
||||
|
||||
passwordSetRemotelyTextDisabled: {
|
||||
color: BaseTheme.palette.text02,
|
||||
marginTop: BaseTheme.spacing[3]
|
||||
color: BaseTheme.palette.text02
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue