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

feat(prejoin/native): updated UI (#12528)

This commit is contained in:
Calinteodor 2022-11-08 19:14:29 +02:00 committed by GitHub
parent 2c7dc5e40e
commit 1731d5188d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
react/features/prejoin/components/native/Prejoin.tsx
View File

@ -89,7 +89,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
return true;
}, [ dispatch ]);
const headerLeft = useCallback(() => {
const headerLeft = () => {
if (Platform.OS === 'ios') {
return (
<HeaderNavigationButton
@ -103,9 +103,9 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
onPress = { goBack }
src = { IconCloseLarge } />
);
}, []);
};
const { PRIMARY, SECONDARY } = BUTTON_TYPES;
const { PRIMARY, TERTIARY } = BUTTON_TYPES;
const joinButtonDisabled = isJoining || (!displayName && isDisplayNameMandatory);
useEffect(() => {
@ -148,21 +148,26 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
{
isFocused
&& <View style = { largeVideoContainerStyles }>
<LargeVideo />
<View style = { styles.displayRoomNameBackdrop }>
<View style = { styles.displayRoomNameBackdrop as StyleProp<TextStyle> }>
<Text
numberOfLines = { 1 }
style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
{ roomName }
</Text>
</View>
<LargeVideo />
</View>
}
<View style = { contentContainerStyles }>
<View style = { toolboxContainerStyles }>
<AudioMuteButton
styles = { styles.buttonStylesBorderless } />
<VideoMuteButton
styles = { styles.buttonStylesBorderless } />
</View>
<View style = { styles.formWrapper as StyleProp<ViewStyle> }>
<Input
// @ts-ignore
autoFocus = { true }
customStyles = {{ input: styles.customInput }}
onChange = { onChangeDisplayName }
placeholder = { t('dialog.enterDisplayName') }
@ -178,14 +183,9 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
labelStyle = { styles.joinLowBandwidthLabel }
onClick = { onJoinLowBandwidth }
type = { SECONDARY } />
</View>
<View style = { toolboxContainerStyles }>
<AudioMuteButton
styles = { styles.buttonStylesBorderless } />
<VideoMuteButton
styles = { styles.buttonStylesBorderless } />
type = { TERTIARY } />
</View>
</View>
</JitsiScreen>

47
react/features/prejoin/components/styles.js
View File

@ -1,12 +1,16 @@
import BaseTheme from '../../base/ui/components/BaseTheme.native';
const SECONDARY_COLOR = BaseTheme.palette.border04;
export default {
joinButton: {
marginVertical: BaseTheme.spacing[3]
},
joinLowBandwidthLabel: {
color: BaseTheme.palette.text01,
textAlign: 'center'
},
buttonStylesBorderless: {
iconStyle: {
color: BaseTheme.palette.icon01,
@ -32,7 +36,7 @@ export default {
},
largeVideoContainer: {
minHeight: '60%'
height: '60%'
},
largeVideoContainerWide: {
@ -44,11 +48,14 @@ export default {
contentContainer: {
alignSelf: 'center',
backgroundColor: BaseTheme.palette.uiBackground,
bottom: 0,
display: 'flex',
height: 284,
justifyContent: 'center',
minHeight: '40%',
padding: BaseTheme.spacing[3],
width: 400
position: 'absolute',
width: 390,
zIndex: 1
},
contentContainerWide: {
@ -63,9 +70,15 @@ export default {
toolboxContainer: {
alignSelf: 'center',
backgroundColor: BaseTheme.palette.ui01,
borderRadius: BaseTheme.shape.borderRadius,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center'
height: 60,
justifyContent: 'space-between',
marginVertical: BaseTheme.spacing[3],
paddingHorizontal: BaseTheme.spacing[2],
width: 148
},
toolboxContainerWide: {
@ -83,16 +96,6 @@ export default {
textAlign: 'center'
},
field: {
backgroundColor: BaseTheme.palette.field02,
borderColor: SECONDARY_COLOR,
borderRadius: BaseTheme.shape.borderRadius,
borderWidth: 2,
color: BaseTheme.palette.text06,
height: BaseTheme.spacing[7],
textAlign: 'center'
},
preJoinRoomName: {
...BaseTheme.typography.heading5,
color: BaseTheme.palette.text01,
@ -101,12 +104,14 @@ export default {
displayRoomNameBackdrop: {
alignSelf: 'center',
backgroundColor: BaseTheme.palette.ui16,
bottom: BaseTheme.spacing[3],
borderRadius: 4,
margin: BaseTheme.spacing[3],
backgroundColor: BaseTheme.palette.uiBackground,
borderRadius: BaseTheme.shape.borderRadius,
marginTop: BaseTheme.spacing[3],
opacity: 0.7,
paddingHorizontal: BaseTheme.spacing[3],
paddingVertical: BaseTheme.spacing[1],
position: 'absolute'
position: 'absolute',
width: 243,
zIndex: 1
}
};