Browse Source

feat: borderless toolbox icons

master
Bettenbuk Zoltan 6 years ago
parent
commit
d305caf910

+ 31
- 39
react/features/toolbox/components/native/Toolbox.js View File

12
 import { InfoDialogButton } from '../../../invite';
12
 import { InfoDialogButton } from '../../../invite';
13
 
13
 
14
 import { isToolboxVisible } from '../../functions';
14
 import { isToolboxVisible } from '../../functions';
15
-import { HANGUP_BUTTON_SIZE } from '../../constants';
16
 
15
 
17
 import AudioMuteButton from '../AudioMuteButton';
16
 import AudioMuteButton from '../AudioMuteButton';
18
 import HangupButton from '../HangupButton';
17
 import HangupButton from '../HangupButton';
22
 import VideoMuteButton from '../VideoMuteButton';
21
 import VideoMuteButton from '../VideoMuteButton';
23
 
22
 
24
 /**
23
 /**
25
- * The number of buttons other than {@link HangupButton} to render in
24
+ * The number of buttons to render in
26
  * {@link Toolbox}.
25
  * {@link Toolbox}.
27
  *
26
  *
28
  * @private
27
  * @private
29
  * @type number
28
  * @type number
30
  */
29
  */
31
-const _BUTTON_COUNT = 4;
32
-
33
-/**
34
- * Factor relating the hangup button and other toolbar buttons.
35
- *
36
- * @private
37
- * @type number
38
- */
39
-const _BUTTON_SIZE_FACTOR = 0.85;
30
+const _BUTTON_COUNT = 5;
40
 
31
 
41
 /**
32
 /**
42
  * The type of {@link Toolbox}'s React {@code Component} props.
33
  * The type of {@link Toolbox}'s React {@code Component} props.
129
             return width;
120
             return width;
130
         }
121
         }
131
 
122
 
132
-        const hangupButtonSize = HANGUP_BUTTON_SIZE;
133
         const { style } = _styles.buttonStyles;
123
         const { style } = _styles.buttonStyles;
134
         let buttonSize
124
         let buttonSize
135
             = (width
125
             = (width
136
 
126
 
137
-                    // Account for HangupButton without its margin which is not
138
-                    // included in _BUTTON_COUNT:
139
-                    - hangupButtonSize
140
-
141
                     // Account for the horizontal margins of all buttons:
127
                     // Account for the horizontal margins of all buttons:
142
-                    - ((_BUTTON_COUNT + 1) * style.marginHorizontal * 2))
143
-                / _BUTTON_COUNT;
128
+                    - (_BUTTON_COUNT * style.marginHorizontal * 2)) / _BUTTON_COUNT;
144
 
129
 
145
         // Well, don't return a non-positive button size.
130
         // Well, don't return a non-positive button size.
146
         if (buttonSize <= 0) {
131
         if (buttonSize <= 0) {
147
             buttonSize = style.width;
132
             buttonSize = style.width;
148
         }
133
         }
149
 
134
 
150
-        // The button should be at most _BUTTON_SIZE_FACTOR of the hangup
151
-        // button's size.
152
-        buttonSize
153
-            = Math.min(buttonSize, hangupButtonSize * _BUTTON_SIZE_FACTOR);
154
-
155
         // Make sure it's an even number.
135
         // Make sure it's an even number.
156
         return 2 * Math.round(buttonSize / 2);
136
         return 2 * Math.round(buttonSize / 2);
157
     }
137
     }
187
         };
167
         };
188
     }
168
     }
189
 
169
 
170
+    /**
171
+     * Applies the recalculated size to the button style object, if needed.
172
+     *
173
+     * @param {Object} baseStyle - The base style object of the button.
174
+     * @param {Object} extraStyle - The extra style object of the button.
175
+     * @returns {Object}
176
+     */
177
+    _getResizedStyle(baseStyle, extraStyle) {
178
+        if (baseStyle.style.width !== extraStyle.width) {
179
+            return {
180
+                ...baseStyle,
181
+                style: [ baseStyle.style, extraStyle ]
182
+            };
183
+        }
184
+
185
+        return baseStyle;
186
+    }
187
+
190
     _onLayout: (Object) => void;
188
     _onLayout: (Object) => void;
191
 
189
 
192
     /**
190
     /**
211
     _renderToolbar() {
209
     _renderToolbar() {
212
         const { _chatEnabled, _styles } = this.props;
210
         const { _chatEnabled, _styles } = this.props;
213
         const buttonSize = this._calculateButtonSize();
211
         const buttonSize = this._calculateButtonSize();
214
-        let { buttonStyles, toggledButtonStyles } = _styles;
212
+        let { buttonStyles, buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
215
 
213
 
216
         if (buttonSize > 0) {
214
         if (buttonSize > 0) {
217
             const extraButtonStyle = {
215
             const extraButtonStyle = {
222
 
220
 
223
             // XXX The following width equality checks attempt to minimize
221
             // XXX The following width equality checks attempt to minimize
224
             // unnecessary objects and possibly re-renders.
222
             // unnecessary objects and possibly re-renders.
225
-            if (buttonStyles.style.width !== extraButtonStyle.width) {
226
-                buttonStyles = {
227
-                    ...buttonStyles,
228
-                    style: [ buttonStyles.style, extraButtonStyle ]
229
-                };
230
-            }
231
-            if (toggledButtonStyles.style.width !== extraButtonStyle.width) {
232
-                toggledButtonStyles = {
233
-                    ...toggledButtonStyles,
234
-                    style: [ toggledButtonStyles.style, extraButtonStyle ]
235
-                };
236
-            }
223
+            //
224
+            // TODO: This needs a refactor!
225
+            buttonStyles = this._getResizedStyle(buttonStyles, extraButtonStyle);
226
+            buttonStylesBorderless = this._getResizedStyle(buttonStylesBorderless, extraButtonStyle);
227
+            hangupButtonStyles = this._getResizedStyle(hangupButtonStyles, extraButtonStyle);
228
+            toggledButtonStyles = this._getResizedStyle(toggledButtonStyles, extraButtonStyle);
237
         } else {
229
         } else {
238
             // XXX In order to avoid a weird visual effect in which the toolbar
230
             // XXX In order to avoid a weird visual effect in which the toolbar
239
             // is (visually) rendered and then visibly changes its size, it is
231
             // is (visually) rendered and then visibly changes its size, it is
249
                 {
241
                 {
250
                     _chatEnabled
242
                     _chatEnabled
251
                         && <ChatButton
243
                         && <ChatButton
252
-                            styles = { buttonStyles }
244
+                            styles = { buttonStylesBorderless }
253
                             toggledStyles = {
245
                             toggledStyles = {
254
                                 this._getChatButtonToggledStyle(toggledButtonStyles)
246
                                 this._getChatButtonToggledStyle(toggledButtonStyles)
255
                             } />
247
                             } />
264
                     styles = { buttonStyles }
256
                     styles = { buttonStyles }
265
                     toggledStyles = { toggledButtonStyles } />
257
                     toggledStyles = { toggledButtonStyles } />
266
                 <HangupButton
258
                 <HangupButton
267
-                    styles = { _styles.hangupButtonStyles } />
259
+                    styles = { hangupButtonStyles } />
268
                 <VideoMuteButton
260
                 <VideoMuteButton
269
                     styles = { buttonStyles }
261
                     styles = { buttonStyles }
270
                     toggledStyles = { toggledButtonStyles } />
262
                     toggledStyles = { toggledButtonStyles } />
271
                 <OverflowMenuButton
263
                 <OverflowMenuButton
272
-                    styles = { buttonStyles }
264
+                    styles = { buttonStylesBorderless }
273
                     toggledStyles = { toggledButtonStyles } />
265
                     toggledStyles = { toggledButtonStyles } />
274
             </View>
266
             </View>
275
         );
267
         );

+ 9
- 6
react/features/toolbox/components/native/styles.js View File

3
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
3
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
4
 import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
4
 import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
5
 
5
 
6
-import { HANGUP_BUTTON_SIZE } from '../../constants';
7
-
8
 // Toolbox, toolbar:
6
 // Toolbox, toolbar:
9
 
7
 
10
 /**
8
 /**
90
         style: toolbarButton
88
         style: toolbarButton
91
     },
89
     },
92
 
90
 
91
+    buttonStylesBorderless: {
92
+        iconStyle: whiteToolbarButtonIcon,
93
+        style: {
94
+            ...toolbarButton,
95
+            backgroundColor: 'transparent'
96
+        }
97
+    },
98
+
93
     /**
99
     /**
94
      * Overrides to the standard styles that we apply to the chat button, as
100
      * Overrides to the standard styles that we apply to the chat button, as
95
      * that behaves slightly differently to other buttons.
101
      * that behaves slightly differently to other buttons.
104
         iconStyle: whiteToolbarButtonIcon,
110
         iconStyle: whiteToolbarButtonIcon,
105
         style: {
111
         style: {
106
             ...toolbarButton,
112
             ...toolbarButton,
107
-            backgroundColor: schemeColor('hangup'),
108
-            borderRadius: HANGUP_BUTTON_SIZE / 2,
109
-            height: HANGUP_BUTTON_SIZE,
110
-            width: HANGUP_BUTTON_SIZE
113
+            backgroundColor: schemeColor('hangup')
111
         },
114
         },
112
         underlayColor: ColorPalette.buttonUnderlay
115
         underlayColor: ColorPalette.buttonUnderlay
113
     },
116
     },

+ 0
- 7
react/features/toolbox/constants.js View File

1
-// @flow
2
-
3
-/**
4
- * The size of the hangup button. As that is the largest button, it defines
5
- * the size of the {@code ToolBox}, so other components may relate to that.
6
- */
7
-export const HANGUP_BUTTON_SIZE = 60;

+ 0
- 1
react/features/toolbox/index.js View File

1
 export * from './actions';
1
 export * from './actions';
2
 export * from './actionTypes';
2
 export * from './actionTypes';
3
 export * from './components';
3
 export * from './components';
4
-export * from './constants';
5
 export * from './functions';
4
 export * from './functions';
6
 
5
 
7
 import './middleware';
6
 import './middleware';

Loading…
Cancel
Save