From 1ec06f4bf04b1e262adb8c3f486068ba3ac04d6c Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Tue, 11 Apr 2017 12:00:41 -0500 Subject: [PATCH] React (Native) optimizations/performance Remove toolbar button and icon style literals from the render method of Toolbox.native.js. Additionally, comply w/ coding style. --- .../toolbox/components/Toolbox.native.js | 23 +-- react/features/toolbox/components/styles.js | 188 ++++++++++-------- 2 files changed, 113 insertions(+), 98 deletions(-) diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js index 393dfed08..6a3be5fce 100644 --- a/react/features/toolbox/components/Toolbox.native.js +++ b/react/features/toolbox/components/Toolbox.native.js @@ -120,18 +120,16 @@ class Toolbox extends Component { _getMuteButtonStyles(mediaType) { let iconName; let iconStyle; - let style = styles.primaryToolbarButton; + let style; if (this.props[`_${mediaType}Muted`]) { iconName = this[`${mediaType}MutedIcon`]; - iconStyle = styles.whiteIcon; - style = { - ...style, - backgroundColor: ColorPalette.buttonUnderlay - }; + iconStyle = styles.whitePrimaryToolbarButtonIcon; + style = styles.whitePrimaryToolbarButton; } else { iconName = this[`${mediaType}Icon`]; - iconStyle = styles.icon; + iconStyle = styles.primaryToolbarButtonIcon; + style = styles.primaryToolbarButton; } return { @@ -163,12 +161,9 @@ class Toolbox extends Component { style = { audioButtonStyles.style } /> diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/styles.js index ec194703c..ebe0490f5 100644 --- a/react/features/toolbox/components/styles.js +++ b/react/features/toolbox/components/styles.js @@ -1,92 +1,91 @@ import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles'; -/** - * The base style for (toolbar) buttons. - * - * @type {Object} - */ -const button = { - borderRadius: 30, - borderWidth: 0, - flex: 0, - flexDirection: 'row', - height: 60, - justifyContent: 'center', - margin: BoxModel.margin, - width: 60 -}; - -/** - * Small toolbar button. - * - * @type {{borderRadius: number, flex: number, flexDirection: string, - * height: number, justifyContent: string, margin: number, width: number}} - */ -const smallButton = { - borderRadius: 20, - flex: 0, - flexDirection: 'column', - height: 40, - justifyContent: 'center', - margin: BoxModel.margin / 2, - width: 40 -}; - -/** - * The base style for icons. - * - * @type {Object} - */ -const icon = { - alignSelf: 'center', - color: ColorPalette.darkGrey, - fontSize: 24 -}; - -/** - * Small toolbar button icon. - * - * @type {{fontSize: number}} - */ -const smallIcon = { - ...icon, - fontSize: 18 -}; - /** * The base style for toolbars. * * @type {Object} */ -const toolbar = { +const _toolbar = { flex: 1, position: 'absolute' }; +/** + * The base style of toolbar buttons (in primaryToolbar and secondaryToolbar). + * + * @type {Object} + */ +const _toolbarButton = { + flex: 0, + justifyContent: 'center', + opacity: 0.7 +}; + +/** + * The base icon style of toolbar buttons (in primaryToolbar and + * secondaryToolbar). + * + * @type {Object} + */ +const _toolbarButtonIcon = { + alignSelf: 'center' +}; + +/** + * The style of toolbar buttons in primaryToolbar. + */ +const primaryToolbarButton = { + ..._toolbarButton, + backgroundColor: ColorPalette.white, + borderRadius: 30, + borderWidth: 0, + flexDirection: 'row', + height: 60, + margin: BoxModel.margin, + width: 60 +}; + +/** + * The icon style of the toolbar buttons in primaryToolbar. + * + * @type {Object} + */ +const primaryToolbarButtonIcon = { + ..._toolbarButtonIcon, + color: ColorPalette.darkGrey, + fontSize: 24 +}; + +/** + * The icon style of the toolbar buttons in secondaryToolbar. + * + * @type {Object} + */ +const secondaryToolbarButtonIcon = { + ..._toolbarButtonIcon, + color: ColorPalette.white, + fontSize: 18 +}; + /** * The (conference) Toolbox/Toolbar related styles. */ export const styles = createStyleSheet({ /** - * The audio only (secondary) toolbar icon style. + * The style of the toolbar button in {@link #primaryToolbar} which + * hangs the current conference up. */ - audioOnlyIcon: { - ...smallIcon, - color: ColorPalette.white, - transform: [ { rotate: '135deg' } ] + hangup: { + ...primaryToolbarButton, + backgroundColor: ColorPalette.red }, - /** - * The toolbar button icon style. - */ - icon, - /** * The style of the toolbar which contains the primary buttons such as * hangup, audio and video mute. */ primaryToolbar: { - ...toolbar, + ..._toolbar, bottom: 3 * BoxModel.margin, flexDirection: 'row', justifyContent: 'center', @@ -95,20 +94,21 @@ export const styles = createStyleSheet({ }, /** - * The style of button in primaryToolbar. + * The style of toolbar buttons in {@link #primaryToolbar}. */ - primaryToolbarButton: { - ...button, - backgroundColor: ColorPalette.white, - opacity: 0.7 - }, + primaryToolbarButton, + + /** + * The icon style of the toolbar buttons in {@link #primaryToolbar}. + */ + primaryToolbarButtonIcon, /** * The style of the toolbar which contains the secondary buttons such as * toggle camera facing mode. */ secondaryToolbar: { - ...toolbar, + ..._toolbar, bottom: 0, flexDirection: 'column', right: BoxModel.margin, @@ -116,25 +116,35 @@ export const styles = createStyleSheet({ }, /** - * The style of button in secondaryToolbar. + * The style of toolbar buttons in {@link #secondaryToolbar}. */ secondaryToolbarButton: { - ...smallButton, + ..._toolbarButton, backgroundColor: ColorPalette.darkGrey, - opacity: 0.7 + borderRadius: 20, + flexDirection: 'column', + height: 40, + margin: BoxModel.margin / 2, + width: 40 }, /** - * The secondary toolbar icon style. + * The icon style of the toolbar buttons in {@link #secondaryToolbar}. */ - secondaryToolbarIcon: { - ...smallIcon, - color: ColorPalette.white + secondaryToolbarButtonIcon, + + /** + * The icon style of the toolbar button in {@link #secondaryToolbar} which + * toggles the audio-only mode of the current conference. + */ + toggleAudioOnlyIcon: { + ...secondaryToolbarButtonIcon, + transform: [ { rotate: '135deg' } ] }, /** - * The style of the root/top-level Container of Toolbar that contains - * toolbars. + * The style of the root/top-level {@link Container} of {@link Toolbox} + * which contains {@link Toolbar}s. */ toolbarContainer: { bottom: 0, @@ -145,10 +155,20 @@ export const styles = createStyleSheet({ }, /** - * The toolbar white button icon style. + * The style of toolbar buttons in {@link #primaryToolbar} which display + * white icons. */ - whiteIcon: { - ...icon, + whitePrimaryToolbarButton: { + ...primaryToolbarButton, + backgroundColor: ColorPalette.buttonUnderlay + }, + + /** + * The icon style of toolbar buttons in {@link #primaryToolbar} which + * display white icons. + */ + whitePrimaryToolbarButtonIcon: { + ...primaryToolbarButtonIcon, color: ColorPalette.white } });