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

feat(native): Last mobile release UI fixes (#12603) 

* feat(base/modal): order props alphabetically

* feat(base/ui): added ripple color for tertiary button

* feat(prejoin): removed autoFocus from input and adjusted content

* feat(conference): adjusted RaisedHandCountLabel and added extra code spaces

* feat(prejoin): fixed content to fit tablets

* feat(conference): moved header button styles to navigation styles

* feat(mobile/navigation): updated header navigation button styles

* feat(prejoin): updated elements width, removed left inset
This commit is contained in:
Calinteodor 2022-11-22 18:13:36 +02:00 committed by GitHub
parent a7c653bc30
commit 93566e313e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 75 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/features/base/modal/components/JitsiKeyboardAvoidingView.js
View File

@ -53,9 +53,9 @@ const JitsiKeyboardAvoidingView = (
addBottomPadding = true,
children,
contentContainerStyle,
disableForcedKeyboardDismiss,
hasTabNavigator,
hasBottomTextInput,
disableForcedKeyboardDismiss,
style
}: Props) => {
const headerHeight = useHeaderHeight();

2
react/features/base/modal/components/JitsiScreen.js
View File

@ -60,10 +60,10 @@ const JitsiScreen = ({
addBottomPadding,
contentContainerStyle,
children,
disableForcedKeyboardDismiss = false,
footerComponent,
hasTabNavigator = false,
hasBottomTextInput = false,
disableForcedKeyboardDismiss = false,
safeAreaInsets = [ 'left', 'right' ],
style
}: Props) => {

2
react/features/base/ui/components/native/Button.tsx
View File

@ -74,7 +74,7 @@ const Button: React.FC<IProps> = ({
accessibilityLabel = { accessibilityLabel }
disabled = { disabled }
onPress = { onPress }
rippleColor = 'transparent'
rippleColor = { BaseTheme.palette.action03Active }
style = { [
buttonStyles,
style

4
react/features/conference/components/native/RaisedHandsCountLabel.js
View File

@ -1,11 +1,9 @@
// @flow
import React from 'react';
import { useSelector } from 'react-redux';
import { IconRaiseHand } from '../../../base/icons';
import { Label } from '../../../base/label';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import styles from './styles';

29
react/features/conference/components/native/styles.js
View File

@ -4,7 +4,6 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
const TITLE_BAR_BUTTON_SIZE = 24;
const HEADER_ACTION_BUTTON_SIZE = 17;
/**
@ -35,29 +34,6 @@ export default {
margin: 10
},
headerNavigationButton: {
height: BaseTheme.spacing[6],
marginTop: 20,
width: BaseTheme.spacing[6]
},
headerNavigationIcon: {
marginLeft: 12
},
headerNavigationText: {
color: BaseTheme.palette.text01,
marginLeft: BaseTheme.spacing[3],
fontSize: HEADER_ACTION_BUTTON_SIZE
},
headerNavigationTextBold: {
...BaseTheme.typography.labelButton,
color: BaseTheme.palette.text01,
marginRight: BaseTheme.spacing[3],
fontSize: HEADER_ACTION_BUTTON_SIZE
},
/**
* View that contains the indicators.
*/
@ -212,12 +188,11 @@ export default {
},
raisedHandsCountLabel: {
alignItems: 'center',
backgroundColor: BaseTheme.palette.warning02,
flexDirection: 'row',
alignItems: 'center',
marginLeft: BaseTheme.spacing[0],
marginBottom: BaseTheme.spacing[0],
marginRight: BaseTheme.spacing[1]
marginBottom: BaseTheme.spacing[0]
},
raisedHandsCountLabelText: {

8
react/features/filmstrip/components/native/Thumbnail.js
View File

@ -1,5 +1,3 @@
// @flow
import React, { PureComponent } from 'react';
import { Image, View } from 'react-native';
import type { Dispatch } from 'redux';
@ -226,11 +224,11 @@ class Thumbnail extends PureComponent<Props> {
] }>
{ !_isVirtualScreenshare && <ConnectionIndicator participantId = { participantId } /> }
{ !_isVirtualScreenshare && <RaisedHandIndicator participantId = { participantId } /> }
{tileView && isScreenShare && (
{ tileView && isScreenShare && (
<View style = { styles.indicatorContainer }>
<ScreenShareIndicator />
</View>
)}
) }
</View>);
indicators.push(<Container
key = 'bottom-indicators'
@ -369,7 +367,7 @@ class Thumbnail extends PureComponent<Props> {
_renderDominantSpeakerIndicator && !_isVirtualScreenshare ? styles.thumbnailDominantSpeaker : null
] }
touchFeedback = { false }>
{_gifSrc ? <Image
{ _gifSrc ? <Image
source = {{ uri: _gifSrc }}
style = { styles.thumbnailGif } />
: <>

18
react/features/mobile/navigation/components/HeaderNavigationButton.js
View File

@ -1,11 +1,11 @@
// @flow
import React from 'react';
import { Text, TouchableRipple } from 'react-native-paper';
import { Icon } from '../../../base/icons';
import type { StyleType } from '../../../base/styles';
import styles from '../../../conference/components/native/styles';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { navigationStyles } from './styles';
type Props = {
@ -55,25 +55,25 @@ const HeaderNavigationButton
src ? (
<TouchableRipple
onPress = { onPress }
rippleColor = { 'transparent' }
style = { [
buttonStyle,
styles.headerNavigationButton ] } >
navigationStyles.headerNavigationButtonIcon ] } >
<Icon
color = { BaseTheme.palette.link01Active }
size = { 24 }
src = { src }
style = { styles.headerNavigationIcon } />
style = { navigationStyles.headerNavigationIcon } />
</TouchableRipple>
) : (
<TouchableRipple
disabled = { disabled }
onPress = { onPress }
rippleColor = { 'transparent' }>
style = { navigationStyles.headerNavigationButtonText } >
<Text
style = {
twoActions
? styles.headerNavigationTextBold
: styles.headerNavigationText
? navigationStyles.headerNavigationTextBold
: navigationStyles.headerNavigationText
}>
{ label }
</Text>

40
react/features/mobile/navigation/components/styles.js
View File

@ -4,6 +4,19 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const TEXT_COLOR = BaseTheme.palette.text01;
const HEADER_ACTION_BUTTON_SIZE = 17;
const headerNavigationButton = {
alignContent: 'center',
height: '100%',
justifyItems: 'center'
};
const headerNavigationText = {
color: BaseTheme.palette.link01,
fontSize: HEADER_ACTION_BUTTON_SIZE
};
const unreadCounterDescription = {
...BaseTheme.typography.bodyShortBoldLarge,
color: BaseTheme.palette.text03
@ -34,6 +47,33 @@ export const navigationStyles = {
color: TEXT_COLOR
},
headerNavigationButtonIcon: {
...headerNavigationButton,
paddingTop: 18,
width: BaseTheme.spacing[7]
},
headerNavigationButtonText: {
...headerNavigationButton,
paddingTop: 10,
width: BaseTheme.spacing[10]
},
headerNavigationIcon: {
marginLeft: 12
},
headerNavigationText: {
...headerNavigationText,
marginLeft: BaseTheme.spacing[3]
},
headerNavigationTextBold: {
...headerNavigationText,
...BaseTheme.typography.labelButton,
marginRight: BaseTheme.spacing[3]
},
unreadCounterContainer: {
alignItems: 'center',
display: 'flex',

4
react/features/participants-pane/components/native/ParticipantItem.js
View File

@ -1,5 +1,3 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import { useTranslation } from 'react-i18next';
@ -121,7 +119,7 @@ function ParticipantItem({
{
!isKnockingParticipant
&& <>
{raisedHand && <RaisedHandIndicator />}
{ raisedHand && <RaisedHandIndicator /> }
<View style = { styles.participantStatesContainer }>
<View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
<View>{AudioStateIcons[audioMediaState]}</View>

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

@ -143,7 +143,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
return (
<JitsiScreen
addBottomPadding = { false }
safeAreaInsets = { [ 'left', 'right' ] }
safeAreaInsets = { [ 'right' ] }
style = { contentWrapperStyles }>
<BrandingImageBackground />
{
@ -172,7 +172,6 @@ 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') }
@ -190,6 +189,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
onClick = { onJoinLowBandwidth }
style = { styles.joinButton }
type = { TERTIARY } />
</View>
</View>

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

@ -3,7 +3,8 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
export default {
joinButton: {
marginVertical: BaseTheme.spacing[3]
marginTop: BaseTheme.spacing[3],
width: 352
},
buttonStylesBorderless: {
@ -38,33 +39,33 @@ export default {
height: '100%',
marginRight: 'auto',
position: 'absolute',
width: '60%'
width: '50%'
},
contentContainer: {
alignSelf: 'center',
alignItems: 'center',
backgroundColor: BaseTheme.palette.uiBackground,
bottom: 0,
display: 'flex',
height: 284,
height: 316,
justifyContent: 'center',
position: 'absolute',
width: 390,
width: '100%',
zIndex: 1
},
contentContainerWide: {
alignSelf: 'center',
alignItems: 'center',
height: '100%',
justifyContent: 'center',
left: '60%',
left: '50%',
padding: BaseTheme.spacing[3],
position: 'absolute',
width: '40%'
width: '50%'
},
toolboxContainer: {
alignSelf: 'center',
alignItems: 'center',
backgroundColor: BaseTheme.palette.ui01,
borderRadius: BaseTheme.shape.borderRadius,
display: 'flex',
@ -82,13 +83,13 @@ export default {
},
formWrapper: {
alignSelf: 'stretch',
justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[3]
alignItems: 'center',
justifyContent: 'center'
},
customInput: {
textAlign: 'center'
textAlign: 'center',
width: 352
},
preJoinRoomName: {