From 06bd279f225e2a6ea0c7121ca184e1c124a0d5f9 Mon Sep 17 00:00:00 2001 From: Calin Chitu Date: Tue, 8 Feb 2022 17:09:22 +0200 Subject: [PATCH] feat(dialog) refinaments --- .../components/native/LoginDialog.js | 33 +++------------ .../dialog/components/native/ConfirmDialog.js | 37 ++++------------- .../dialog/components/native/InputDialog.js | 4 +- .../base/react/components/native/styles.js | 7 +++- .../mobile/navigation/screenOptions.js | 41 +++++++++++++++---- .../security-dialog/native/SecurityDialog.js | 30 -------------- .../welcome/components/WelcomePage.native.js | 2 +- react/features/welcome/components/styles.js | 8 ++-- 8 files changed, 60 insertions(+), 102 deletions(-) diff --git a/react/features/authentication/components/native/LoginDialog.js b/react/features/authentication/components/native/LoginDialog.js index a11d4639e..73ffa1a12 100644 --- a/react/features/authentication/components/native/LoginDialog.js +++ b/react/features/authentication/components/native/LoginDialog.js @@ -1,7 +1,7 @@ /* @flow */ import React, { Component } from 'react'; -import { Platform, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import Dialog from 'react-native-dialog'; import { connect as reduxConnect } from 'react-redux'; import type { Dispatch } from 'redux'; @@ -142,26 +142,6 @@ class LoginDialog extends Component { _connecting: connecting, t } = this.props; - let rightKey; - let leftKey; - let rightOnPress; - let leftOnPress; - let rightDisabled; - let leftDisabled; - - if (Platform.OS === 'android') { - rightKey = 'dialog.Ok'; - rightOnPress = () => this._onLogin(); - rightDisabled = connecting; - leftKey = 'dialog.Cancel'; - leftOnPress = () => this._onCancel(); - } else { - rightKey = 'dialog.Cancel'; - rightOnPress = () => this._onCancel(); - leftKey = 'dialog.Ok'; - leftOnPress = () => this._onLogin(); - leftDisabled = connecting; - } return ( @@ -187,13 +167,12 @@ class LoginDialog extends Component { { this._renderMessage() } + label = { t('dialog.Cancel') } + onPress = { this._onCancel } /> + disabled = { connecting } + label = { t('dialog.Ok') } + onPress = { this._onLogin } /> ); diff --git a/react/features/base/dialog/components/native/ConfirmDialog.js b/react/features/base/dialog/components/native/ConfirmDialog.js index 943a840ba..56fcbca14 100644 --- a/react/features/base/dialog/components/native/ConfirmDialog.js +++ b/react/features/base/dialog/components/native/ConfirmDialog.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; -import { Platform, View } from 'react-native'; +import { View } from 'react-native'; import Dialog from 'react-native-dialog'; import { translate } from '../../../i18n'; @@ -110,29 +110,6 @@ class ConfirmDialog extends AbstractDialog { = isConfirmDestructive ? styles.destructiveDialogButton : styles.dialogButton; - let rightLabel; - let leftLabel; - let rightOnPress; - let leftOnPress; - let rightStyle; - let leftStyle; - - if (Platform.OS === 'android') { - rightLabel = confirmLabel || 'dialog.confirmYes'; - rightOnPress = () => this._onSubmit(); - rightStyle = dialogButtonStyle; - leftLabel = cancelLabel || 'dialog.confirmNo'; - leftOnPress = () => this._onCancel(); - leftStyle = styles.dialogButton; - } else { - rightLabel = cancelLabel || 'dialog.confirmNo'; - rightOnPress = () => this._onCancel(); - rightStyle = styles.dialogButton; - leftLabel = confirmLabel || 'dialog.confirmYes'; - leftOnPress = () => this._onSubmit(); - leftStyle = dialogButtonStyle; - } - return ( @@ -144,13 +121,13 @@ class ConfirmDialog extends AbstractDialog { { this._renderDescription() } { children } + label = { cancelLabel || t('dialog.confirmNo') } + onPress = { this._onCancel } + style = { styles.dialogButton } /> + label = { confirmLabel || t('dialog.confirmYes') } + onPress = { this._onSubmit } + style = { dialogButtonStyle } /> ); diff --git a/react/features/base/dialog/components/native/InputDialog.js b/react/features/base/dialog/components/native/InputDialog.js index 0052c0394..12607b315 100644 --- a/react/features/base/dialog/components/native/InputDialog.js +++ b/react/features/base/dialog/components/native/InputDialog.js @@ -97,7 +97,6 @@ class InputDialog extends AbstractDialog { return ( { t(titleKey) } @@ -122,6 +121,9 @@ class InputDialog extends AbstractDialog { ) } + diff --git a/react/features/base/react/components/native/styles.js b/react/features/base/react/components/native/styles.js index 9dbc0ff73..c588ae08f 100644 --- a/react/features/base/react/components/native/styles.js +++ b/react/features/base/react/components/native/styles.js @@ -1,6 +1,7 @@ // @flow import { BoxModel, ColorPalette } from '../../../styles'; +import BaseTheme from '../../../ui/components/BaseTheme.native'; const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)'; const SECONDARY_ACTION_BUTTON_SIZE = 30; @@ -130,7 +131,8 @@ const SECTION_LIST_STYLES = { alignItems: 'center', flex: 1, flexDirection: 'row', - padding: 5 + marginHorizontal: BaseTheme.spacing[3], + marginVertical: BaseTheme.spacing[2] }, listItemDetails: { @@ -162,7 +164,8 @@ const SECTION_LIST_STYLES = { listSectionText: { color: OVERLAY_FONT_COLOR, fontSize: 14, - fontWeight: 'normal' + fontWeight: 'normal', + marginLeft: BaseTheme.spacing[2] }, pullToRefresh: { diff --git a/react/features/mobile/navigation/screenOptions.js b/react/features/mobile/navigation/screenOptions.js index 495383a70..f13f76cb7 100644 --- a/react/features/mobile/navigation/screenOptions.js +++ b/react/features/mobile/navigation/screenOptions.js @@ -1,9 +1,10 @@ // @flow -/* eslint-disable react/no-multi-comp */ import { TransitionPresets } from '@react-navigation/stack'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Platform } from 'react-native'; +import { Text, TouchableRipple } from 'react-native-paper'; import { Icon, @@ -13,11 +14,20 @@ import { IconInfo, IconSettings } from '../../base/icons'; -import BaseTheme from '../../base/ui/components/BaseTheme'; +import BaseTheme from '../../base/ui/components/BaseTheme.native'; import HeaderNavigationButton from './components/HeaderNavigationButton'; import { goBack } from './components/conference/ConferenceNavigationContainerRef'; + +/** + * Close button text color. + */ +export const closeTextColor = { + color: BaseTheme.palette.text01, + marginLeft: BaseTheme.spacing[3] +}; + /** * Navigation container theme. */ @@ -196,11 +206,28 @@ export const chatTabBarOptions = { export const presentationScreenOptions = { ...conferenceModalPresentation, headerBackTitleVisible: false, - headerLeft: () => ( - - ), + headerLeft: () => { + const { t } = useTranslation(); + + if (Platform.OS === 'ios') { + return ( + + + { t('dialog.close') } + + + ); + } + + return ( + + ); + + }, headerStatusBarHeight: 0, headerStyle: { backgroundColor: BaseTheme.palette.screen01Header diff --git a/react/features/security/components/security-dialog/native/SecurityDialog.js b/react/features/security/components/security-dialog/native/SecurityDialog.js index 4229e76c6..a133294e8 100644 --- a/react/features/security/components/security-dialog/native/SecurityDialog.js +++ b/react/features/security/components/security-dialog/native/SecurityDialog.js @@ -14,7 +14,6 @@ import { ColorSchemeRegistry } from '../../../../base/color-scheme'; import { FIELD_UNDERLINE } from '../../../../base/dialog'; import { getFeatureFlag, MEETING_PASSWORD_ENABLED } from '../../../../base/flags'; import { translate } from '../../../../base/i18n'; -import { IconClose } from '../../../../base/icons'; import JitsiScreen from '../../../../base/modal/components/JitsiScreen'; import { isLocalParticipantModerator } from '../../../../base/participants'; import { connect } from '../../../../base/redux'; @@ -24,10 +23,6 @@ import { isInBreakoutRoom } from '../../../../breakout-rooms/functions'; import { toggleLobbyMode } from '../../../../lobby/actions.any'; import LobbyModeSwitch from '../../../../lobby/components/native/LobbyModeSwitch'; -import HeaderNavigationButton - from '../../../../mobile/navigation/components/HeaderNavigationButton'; -import { goBack } - from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; import { LOCKED_LOCALLY, LOCKED_REMOTELY } from '../../../../room-lock'; import { endRoomLockRequest, @@ -107,11 +102,6 @@ type Props = { */ dispatch: Dispatch, - /** - * Default prop for navigation between screen components(React Navigation). - */ - navigation: Object, - /** * Invoked to obtain translated strings. */ @@ -162,26 +152,6 @@ class SecurityDialog extends PureComponent { this._onAddPassword = this._onAddPassword.bind(this); } - /** - * Implements React's {@link Component#componentDidMount()}. Invoked - * immediately after this component is mounted. - * - * @inheritdoc - * @returns {void} - */ - componentDidMount() { - const { navigation } = this.props; - - navigation.setOptions({ - headerLeft: () => ( - - ) - }); - } - /** * Implements {@code SecurityDialog.render}. * diff --git a/react/features/welcome/components/WelcomePage.native.js b/react/features/welcome/components/WelcomePage.native.js index 29d6af780..92ae1f78d 100644 --- a/react/features/welcome/components/WelcomePage.native.js +++ b/react/features/welcome/components/WelcomePage.native.js @@ -113,7 +113,7 @@ class WelcomePage extends AbstractWelcomePage<*> { } style = { styles.drawerNavigationIcon }> diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js index d4c59d72f..3d74310d7 100644 --- a/react/features/welcome/components/styles.js +++ b/react/features/welcome/components/styles.js @@ -39,7 +39,7 @@ export default { audioVideoSwitchContainer: { alignItems: 'center', flexDirection: 'row', - marginRight: BaseTheme.spacing[2] + marginRight: BaseTheme.spacing[3] }, blankPageText: { @@ -180,7 +180,8 @@ export default { */ roomContainer: { alignSelf: 'stretch', - flexDirection: 'column' + flexDirection: 'column', + marginHorizontal: BaseTheme.spacing[2] }, /** @@ -196,8 +197,7 @@ export default { drawerNavigationIcon: { height: BaseTheme.spacing[6], - marginLeft: BaseTheme.spacing[1], - marginTop: BaseTheme.spacing[1], + marginLeft: BaseTheme.spacing[3], width: BaseTheme.spacing[6] },