feat(native): New mobile release UI fixes (#12592)

This commit is contained in:
Calinteodor 2022-11-21 16:07:27 +02:00 committed by GitHub
parent 94ec2c720d
commit a795e0797a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 29 additions and 31 deletions

View File

@ -66,6 +66,9 @@ const Button: React.FC<IProps> = ({
}
if (type === TERTIARY) {
buttonLabelStyles
= disabled ? styles.buttonLabelTertiaryDisabled : styles.buttonLabelTertiary;
return (
<TouchableRipple
accessibilityLabel = { accessibilityLabel }

View File

@ -23,15 +23,15 @@ export default {
...buttonLabel
},
buttonContent: {
height: BUTTON_HEIGHT
},
buttonLabelDisabled: {
...buttonLabel,
color: BaseTheme.palette.text03
},
buttonContent: {
height: BUTTON_HEIGHT
},
buttonDisabled: {
...button,
backgroundColor: BaseTheme.palette.actionDisabled
@ -54,6 +54,13 @@ export default {
buttonLabelTertiary: {
...buttonLabel,
color: BaseTheme.palette.text01
color: BaseTheme.palette.text01,
textAlign: 'center'
},
buttonLabelTertiaryDisabled: {
...buttonLabel,
color: BaseTheme.palette.text03,
textAlign: 'center'
}
};

View File

@ -79,7 +79,7 @@ class ChatInputBar extends Component<Props, State> {
] }>
<Input
blurOnSubmit = { false }
customStyles = {{ input: styles.customInput }}
customStyles = {{ container: styles.customInputContainer }}
multiline = { false }
onBlur = { this._onFocused(false) }
onChange = { this._onChangeText }

View File

@ -124,8 +124,8 @@ export default {
width: '100%'
},
customInput: {
width: 272
customInputContainer: {
width: '75%'
},
messageBubble: {

View File

@ -1,5 +1,3 @@
// @flow
import React, { Component } from 'react';
import { TouchableOpacity, View } from 'react-native';

View File

@ -100,7 +100,6 @@ class LonelyMeetingExperience extends PureComponent<Props> {
icon = { this._renderAddPeopleIcon }
labelKey = 'lonelyMeetingExperience.button'
onClick = { this._onPress }
style = { styles.lonelyButton }
type = { BUTTON_TYPES.PRIMARY } />
) }
</View>

View File

@ -66,14 +66,13 @@ const TitleBar = (props: IProps): JSX.Element => {
<RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
<RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
</View>
{
props._meetingNameEnabled
&& <View style = { styles.roomNameView as StyleProp<ViewStyle> }>
<Text
numberOfLines = { 1 }
style = { styles.roomName }>
{props._meetingName}
{ props._meetingName }
</Text>
</View>
}

View File

@ -84,10 +84,6 @@ export default {
underlayColor: 'transparent'
},
lonelyButton: {
borderRadius: BaseTheme.spacing[4]
},
lonelyMeetingContainer: {
alignSelf: 'stretch',
alignItems: 'center',
@ -210,7 +206,9 @@ export default {
},
insecureRoomNameLabel: {
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR,
borderRadius: BaseTheme.shape.borderRadius,
height: 32
},
raisedHandsCountLabel: {

View File

@ -107,7 +107,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
};
const { PRIMARY, TERTIARY } = BUTTON_TYPES;
const joinButtonDisabled = isJoining || (!displayName && isDisplayNameMandatory);
const joinButtonDisabled = !displayName && isDisplayNameMandatory;
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', goBack);
@ -156,6 +156,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
{ roomName }
</Text>
</View>
{/* @ts-ignore */}
<LargeVideo />
</View>
}
@ -171,6 +172,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
<View style = { styles.formWrapper as StyleProp<ViewStyle> }>
<Input
// @ts-ignore
autoFocus = { true }
customStyles = {{ input: styles.customInput }}
onChange = { onChangeDisplayName }
placeholder = { t('dialog.enterDisplayName') }
@ -179,14 +181,14 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
accessibilityLabel = 'prejoin.joinMeeting'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeeting'
onClick = { onJoin }
// @ts-ignore
onClick = { !isJoining && onJoin }
style = { styles.joinButton }
type = { PRIMARY } />
<Button
accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
labelStyle = { styles.joinLowBandwidthLabel }
onClick = { onJoinLowBandwidth }
type = { TERTIARY } />
</View>

View File

@ -3,13 +3,7 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
export default {
joinButton: {
marginTop: BaseTheme.spacing[3]
},
joinLowBandwidthLabel: {
color: BaseTheme.palette.text01,
marginTop: BaseTheme.spacing[3],
textAlign: 'center'
marginVertical: BaseTheme.spacing[3]
},
buttonStylesBorderless: {

View File

@ -1,5 +1,3 @@
// @flow
import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
@ -11,7 +9,7 @@ const BUTTON_SIZE = 48;
* The style of toolbar buttons.
*/
const toolbarButton = {
borderRadius: 3,
borderRadius: BaseTheme.shape.borderRadius,
borderWidth: 0,
flex: 0,
flexDirection: 'row',