From cc63ff1c3c83543d126f4dd4f455b6169f740ec8 Mon Sep 17 00:00:00 2001 From: Calinteodor Date: Thu, 25 Nov 2021 18:41:03 +0200 Subject: [PATCH] feat(conference) UI updates for mobile navigation bar (#10437) * feat(conference) updated native navigation bar and toolbox styles --- react/features/base/ui/Tokens.js | 5 ++ .../components/native/Conference.js | 8 ++- .../conference/components/native/styles.js | 56 +++++++++++++------ .../add-people-dialog/native/InviteButton.js | 4 +- .../toolbox/components/native/styles.js | 27 ++++----- 5 files changed, 66 insertions(+), 34 deletions(-) diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js index 7869264c1..6f2e38508 100644 --- a/react/features/base/ui/Tokens.js +++ b/react/features/base/ui/Tokens.js @@ -34,6 +34,7 @@ export const colors = { surface11: '#FFF', surface12: '#AAAAAA', surface13: '#495258', + surface14: '#555555', success04: '#189B55', success05: '#1EC26A', @@ -67,6 +68,7 @@ export const colorMap = { ui04: 'surface05', ui05: 'surface06', ui12: 'surface11', + ui13: 'surface14', // Primary buttons action01: 'primary05', @@ -168,6 +170,9 @@ export const colorMap = { // Tertiary color for disabled actions icon03: 'surface07', + // Quaternary color for disabled actions + icon04: 'surface14', + // Error message iconError: 'error06', diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index 6365193ef..121cc9be7 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -254,7 +254,8 @@ class Conference extends AbstractConference { _connecting, _largeVideoParticipantId, _reducedUI, - _shouldDisplayTileView + _shouldDisplayTileView, + _toolboxVisible } = this.props; if (_reducedUI) { @@ -304,7 +305,10 @@ class Conference extends AbstractConference { + style = { + _toolboxVisible + ? styles.navBarSafeViewColor + : styles.navBarSafeViewTransparent }> { this._renderNotificationsContainer() } diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js index c965c5718..7c8401694 100644 --- a/react/features/conference/components/native/styles.js +++ b/react/features/conference/components/native/styles.js @@ -6,6 +6,17 @@ export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.warning03; const NAVBAR_BUTTON_SIZE = 24; + +/** + * The styles of the safe area view that contains the navigation bar. + */ +const navBarSafeView = { + left: 0, + position: 'absolute', + right: 0, + top: 0 +}; + /** * The styles of the feature conference. */ @@ -43,16 +54,21 @@ export default { }, inviteButtonContainer: { + borderRadius: 3, + height: BaseTheme.spacing[7], position: 'absolute', + marginTop: BaseTheme.spacing[1], + marginRight: BaseTheme.spacing[1], top: 0, right: 0, - zIndex: 1 + zIndex: 1, + width: BaseTheme.spacing[7] }, inviteButton: { iconStyle: { - padding: 10, color: BaseTheme.palette.icon01, + padding: 12, fontSize: NAVBAR_BUTTON_SIZE }, underlayColor: BaseTheme.spacing.underlay01 @@ -82,35 +98,41 @@ export default { }, pipButtonContainer: { + borderRadius: 3, + height: BaseTheme.spacing[7], position: 'absolute', + marginTop: BaseTheme.spacing[1], + marginLeft: BaseTheme.spacing[1], top: 0, left: 0, - zIndex: 1 + zIndex: 1, + width: BaseTheme.spacing[7] }, pipButton: { iconStyle: { - padding: 10, color: BaseTheme.palette.icon01, + padding: 12, fontSize: NAVBAR_BUTTON_SIZE }, - underlayColor: BaseTheme.palette.underlay01 + underlayColor: BaseTheme.spacing.underlay01 }, - navBarSafeView: { - left: 0, - position: 'absolute', - right: 0, - top: 0 + navBarSafeViewColor: { + ...navBarSafeView, + backgroundColor: BaseTheme.palette.uiBackground + }, + + navBarSafeViewTransparent: { + ...navBarSafeView }, navBarWrapper: { alignItems: 'center', flex: 1, flexDirection: 'row', - height: 44, - justifyContent: 'center', - paddingHorizontal: 14 + height: BaseTheme.spacing[8], + justifyContent: 'center' }, roomTimer: { @@ -121,9 +143,8 @@ export default { }, roomTimerView: { - backgroundColor: 'rgba(0,0,0,0.8)', - borderBottomRightRadius: 3, - borderTopRightRadius: 3, + backgroundColor: BaseTheme.palette.action02, + borderRadius: 3, height: 28, justifyContent: 'center', minWidth: 50 @@ -142,7 +163,8 @@ export default { flexShrink: 1, height: 28, justifyContent: 'center', - paddingHorizontal: 10 + paddingHorizontal: 10, + maxWidth: 168 }, roomNameWrapper: { diff --git a/react/features/invite/components/add-people-dialog/native/InviteButton.js b/react/features/invite/components/add-people-dialog/native/InviteButton.js index 23f75c3a9..360d35aad 100644 --- a/react/features/invite/components/add-people-dialog/native/InviteButton.js +++ b/react/features/invite/components/add-people-dialog/native/InviteButton.js @@ -4,7 +4,7 @@ import type { Dispatch } from 'redux'; import { getFeatureFlag, INVITE_ENABLED } from '../../../../base/flags'; import { translate } from '../../../../base/i18n'; -import { IconAddPeople } from '../../../../base/icons'; +import { IconInviteMore } from '../../../../base/icons'; import { connect } from '../../../../base/redux'; import { AbstractButton, type AbstractButtonProps } from '../../../../base/toolbox/components'; import { doInvitePeople } from '../../../actions.native'; @@ -23,7 +23,7 @@ type Props = AbstractButtonProps & { */ class InviteButton extends AbstractButton { accessibilityLabel = 'toolbar.accessibilityLabel.shareRoom'; - icon = IconAddPeople; + icon = IconInviteMore; label = 'toolbar.shareRoom'; /** diff --git a/react/features/toolbox/components/native/styles.js b/react/features/toolbox/components/native/styles.js index 101e67b58..b8ff6c74b 100644 --- a/react/features/toolbox/components/native/styles.js +++ b/react/features/toolbox/components/native/styles.js @@ -1,7 +1,8 @@ // @flow import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme'; -import { BoxModel, ColorPalette } from '../../../base/styles'; +import { BoxModel } from '../../../base/styles'; +import BaseTheme from '../../../base/ui/components/BaseTheme'; const BUTTON_SIZE = 48; @@ -27,7 +28,7 @@ const toolbarButton = { */ const toolbarButtonIcon = { alignSelf: 'center', - color: ColorPalette.darkGrey, + color: BaseTheme.palette.icon04, fontSize: 24 }; @@ -37,7 +38,7 @@ const toolbarButtonIcon = { */ const whiteToolbarButtonIcon = { ...toolbarButtonIcon, - color: ColorPalette.white + color: BaseTheme.palette.icon01 }; /** @@ -56,14 +57,14 @@ const reactionButton = { */ const reactionEmoji = { fontSize: 20, - color: ColorPalette.white + color: BaseTheme.palette.icon01 }; const reactionMenu = { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - backgroundColor: ColorPalette.black, + backgroundColor: BaseTheme.palette.bottomSheet, padding: 16 }; @@ -82,7 +83,7 @@ const styles = { */ toolbox: { alignItems: 'center', - backgroundColor: ColorPalette.darkBackground, + backgroundColor: BaseTheme.palette.uiBackground, borderTopLeftRadius: 3, borderTopRightRadius: 3, flexDirection: 'row', @@ -128,7 +129,7 @@ ColorSchemeRegistry.register('Toolbox', { }, backgroundToggle: { - backgroundColor: ColorPalette.toggled + backgroundColor: BaseTheme.palette.ui13 }, hangupButtonStyles: { @@ -137,7 +138,7 @@ ColorSchemeRegistry.register('Toolbox', { ...toolbarButton, backgroundColor: schemeColor('hangup') }, - underlayColor: ColorPalette.buttonUnderlay + underlayColor: BaseTheme.palette.underlay01 }, reactionDialog: { @@ -165,21 +166,21 @@ ColorSchemeRegistry.register('Toolbox', { reactionButton: { style: reactionButton, - underlayColor: ColorPalette.toggled, + underlayColor: BaseTheme.palette.ui13, emoji: reactionEmoji }, raiseHandButton: { style: { ...reactionButton, - backgroundColor: ColorPalette.toggled, + backgroundColor: BaseTheme.palette.ui13, width: '100%', borderRadius: 6 }, - underlayColor: ColorPalette.toggled, + underlayColor: BaseTheme.palette.ui13, emoji: reactionEmoji, text: { - color: ColorPalette.white, + color: BaseTheme.palette.text01, fontWeight: '600', marginLeft: 8, lineHeight: 24 @@ -192,7 +193,7 @@ ColorSchemeRegistry.register('Toolbox', { }, emojiAnimation: { - color: ColorPalette.white, + color: BaseTheme.palette.icon01, position: 'absolute', zIndex: 1001, elevation: 2,