From d305caf91073876ef1160f0ec8b845a1d010bb7e Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Fri, 12 Jul 2019 10:32:47 +0200 Subject: [PATCH] feat: borderless toolbox icons --- .../toolbox/components/native/Toolbox.js | 70 ++++++++----------- .../toolbox/components/native/styles.js | 15 ++-- react/features/toolbox/constants.js | 7 -- react/features/toolbox/index.js | 1 - 4 files changed, 40 insertions(+), 53 deletions(-) delete mode 100644 react/features/toolbox/constants.js diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index 85ecd9ac7..387401bc4 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/react/features/toolbox/components/native/Toolbox.js @@ -12,7 +12,6 @@ import { ChatButton } from '../../../chat'; import { InfoDialogButton } from '../../../invite'; import { isToolboxVisible } from '../../functions'; -import { HANGUP_BUTTON_SIZE } from '../../constants'; import AudioMuteButton from '../AudioMuteButton'; import HangupButton from '../HangupButton'; @@ -22,21 +21,13 @@ import styles from './styles'; import VideoMuteButton from '../VideoMuteButton'; /** - * The number of buttons other than {@link HangupButton} to render in + * The number of buttons to render in * {@link Toolbox}. * * @private * @type number */ -const _BUTTON_COUNT = 4; - -/** - * Factor relating the hangup button and other toolbar buttons. - * - * @private - * @type number - */ -const _BUTTON_SIZE_FACTOR = 0.85; +const _BUTTON_COUNT = 5; /** * The type of {@link Toolbox}'s React {@code Component} props. @@ -129,29 +120,18 @@ class Toolbox extends Component { return width; } - const hangupButtonSize = HANGUP_BUTTON_SIZE; const { style } = _styles.buttonStyles; let buttonSize = (width - // Account for HangupButton without its margin which is not - // included in _BUTTON_COUNT: - - hangupButtonSize - // Account for the horizontal margins of all buttons: - - ((_BUTTON_COUNT + 1) * style.marginHorizontal * 2)) - / _BUTTON_COUNT; + - (_BUTTON_COUNT * style.marginHorizontal * 2)) / _BUTTON_COUNT; // Well, don't return a non-positive button size. if (buttonSize <= 0) { buttonSize = style.width; } - // The button should be at most _BUTTON_SIZE_FACTOR of the hangup - // button's size. - buttonSize - = Math.min(buttonSize, hangupButtonSize * _BUTTON_SIZE_FACTOR); - // Make sure it's an even number. return 2 * Math.round(buttonSize / 2); } @@ -187,6 +167,24 @@ class Toolbox extends Component { }; } + /** + * Applies the recalculated size to the button style object, if needed. + * + * @param {Object} baseStyle - The base style object of the button. + * @param {Object} extraStyle - The extra style object of the button. + * @returns {Object} + */ + _getResizedStyle(baseStyle, extraStyle) { + if (baseStyle.style.width !== extraStyle.width) { + return { + ...baseStyle, + style: [ baseStyle.style, extraStyle ] + }; + } + + return baseStyle; + } + _onLayout: (Object) => void; /** @@ -211,7 +209,7 @@ class Toolbox extends Component { _renderToolbar() { const { _chatEnabled, _styles } = this.props; const buttonSize = this._calculateButtonSize(); - let { buttonStyles, toggledButtonStyles } = _styles; + let { buttonStyles, buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles; if (buttonSize > 0) { const extraButtonStyle = { @@ -222,18 +220,12 @@ class Toolbox extends Component { // XXX The following width equality checks attempt to minimize // unnecessary objects and possibly re-renders. - if (buttonStyles.style.width !== extraButtonStyle.width) { - buttonStyles = { - ...buttonStyles, - style: [ buttonStyles.style, extraButtonStyle ] - }; - } - if (toggledButtonStyles.style.width !== extraButtonStyle.width) { - toggledButtonStyles = { - ...toggledButtonStyles, - style: [ toggledButtonStyles.style, extraButtonStyle ] - }; - } + // + // TODO: This needs a refactor! + buttonStyles = this._getResizedStyle(buttonStyles, extraButtonStyle); + buttonStylesBorderless = this._getResizedStyle(buttonStylesBorderless, extraButtonStyle); + hangupButtonStyles = this._getResizedStyle(hangupButtonStyles, extraButtonStyle); + toggledButtonStyles = this._getResizedStyle(toggledButtonStyles, extraButtonStyle); } else { // XXX In order to avoid a weird visual effect in which the toolbar // is (visually) rendered and then visibly changes its size, it is @@ -249,7 +241,7 @@ class Toolbox extends Component { { _chatEnabled && @@ -264,12 +256,12 @@ class Toolbox extends Component { styles = { buttonStyles } toggledStyles = { toggledButtonStyles } /> + styles = { hangupButtonStyles } /> ); diff --git a/react/features/toolbox/components/native/styles.js b/react/features/toolbox/components/native/styles.js index f7077353d..189734bff 100644 --- a/react/features/toolbox/components/native/styles.js +++ b/react/features/toolbox/components/native/styles.js @@ -3,8 +3,6 @@ import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme'; import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles'; -import { HANGUP_BUTTON_SIZE } from '../../constants'; - // Toolbox, toolbar: /** @@ -90,6 +88,14 @@ ColorSchemeRegistry.register('Toolbox', { style: toolbarButton }, + buttonStylesBorderless: { + iconStyle: whiteToolbarButtonIcon, + style: { + ...toolbarButton, + backgroundColor: 'transparent' + } + }, + /** * Overrides to the standard styles that we apply to the chat button, as * that behaves slightly differently to other buttons. @@ -104,10 +110,7 @@ ColorSchemeRegistry.register('Toolbox', { iconStyle: whiteToolbarButtonIcon, style: { ...toolbarButton, - backgroundColor: schemeColor('hangup'), - borderRadius: HANGUP_BUTTON_SIZE / 2, - height: HANGUP_BUTTON_SIZE, - width: HANGUP_BUTTON_SIZE + backgroundColor: schemeColor('hangup') }, underlayColor: ColorPalette.buttonUnderlay }, diff --git a/react/features/toolbox/constants.js b/react/features/toolbox/constants.js deleted file mode 100644 index 192d9affb..000000000 --- a/react/features/toolbox/constants.js +++ /dev/null @@ -1,7 +0,0 @@ -// @flow - -/** - * The size of the hangup button. As that is the largest button, it defines - * the size of the {@code ToolBox}, so other components may relate to that. - */ -export const HANGUP_BUTTON_SIZE = 60; diff --git a/react/features/toolbox/index.js b/react/features/toolbox/index.js index 0a8f4ad7b..44000a1a7 100644 --- a/react/features/toolbox/index.js +++ b/react/features/toolbox/index.js @@ -1,7 +1,6 @@ export * from './actions'; export * from './actionTypes'; export * from './components'; -export * from './constants'; export * from './functions'; import './middleware';