Browse Source

fix(toolbox): Restructure items order for desktop & mobile

master
Vlad Piersec 4 years ago
parent
commit
c2ad06c5e6

+ 17
- 0
css/_toolbars.scss View File

292
     }
292
     }
293
 
293
 
294
 }
294
 }
295
+
296
+/**
297
+ * On small mobile devices make the toolbar full width.
298
+ */
299
+.toolbox-content-mobile {
300
+    @media (max-width: 500px) {
301
+        margin-bottom: 0;
302
+
303
+        .toolbox-content-items {
304
+            border-radius: 0;
305
+            display: flex;
306
+            justify-content: space-evenly;
307
+            padding: 6px 0;
308
+            width: 100%;
309
+        }
310
+    }
311
+}

+ 18
- 3
react/features/toolbox/components/web/Toolbox.js View File

10
 } from '../../../analytics';
10
 } from '../../../analytics';
11
 import { getToolbarButtons } from '../../../base/config';
11
 import { getToolbarButtons } from '../../../base/config';
12
 import { openDialog, toggleDialog } from '../../../base/dialog';
12
 import { openDialog, toggleDialog } from '../../../base/dialog';
13
+import { isMobileBrowser } from '../../../base/environment/utils';
13
 import { translate } from '../../../base/i18n';
14
 import { translate } from '../../../base/i18n';
14
 import {
15
 import {
15
     IconChat,
16
     IconChat,
127
      */
128
      */
128
     _fullScreen: boolean,
129
     _fullScreen: boolean,
129
 
130
 
131
+    /**
132
+     * Whether or not the app is running in mobile browser.
133
+     */
134
+    _isMobile: boolean,
135
+
130
     /**
136
     /**
131
      * Whether or not the profile is disabled.
137
      * Whether or not the profile is disabled.
132
      */
138
      */
928
      * @returns {boolean}
934
      * @returns {boolean}
929
      */
935
      */
930
     _isEmbedMeetingVisible() {
936
     _isEmbedMeetingVisible() {
931
-        return !this.props._isVpaasMeeting && this._shouldShowButton('embedmeeting');
937
+        return !this.props._isVpaasMeeting
938
+            && !this.props._isMobile
939
+            && this._shouldShowButton('embedmeeting');
932
     }
940
     }
933
 
941
 
934
     /**
942
     /**
951
         const {
959
         const {
952
             _feedbackConfigured,
960
             _feedbackConfigured,
953
             _fullScreen,
961
             _fullScreen,
962
+            _isMobile,
954
             _screensharing,
963
             _screensharing,
955
             t
964
             t
956
         } = this.props;
965
         } = this.props;
963
                     key = 'videoquality'
972
                     key = 'videoquality'
964
                     onClick = { this._onToolbarOpenVideoQuality } />,
973
                     onClick = { this._onToolbarOpenVideoQuality } />,
965
             this._shouldShowButton('fullscreen')
974
             this._shouldShowButton('fullscreen')
975
+                && !_isMobile
966
                 && <OverflowMenuItem
976
                 && <OverflowMenuItem
967
                     accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
977
                     accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
968
                     icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
978
                     icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
1049
                     key = 'settings'
1059
                     key = 'settings'
1050
                     showLabel = { true } />,
1060
                     showLabel = { true } />,
1051
             this._shouldShowButton('shortcuts')
1061
             this._shouldShowButton('shortcuts')
1062
+                && !_isMobile
1052
                 && <OverflowMenuItem
1063
                 && <OverflowMenuItem
1053
                     accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
1064
                     accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
1054
                     icon = { IconDeviceDocument }
1065
                     icon = { IconDeviceDocument }
1228
      */
1239
      */
1229
     _renderToolboxContent() {
1240
     _renderToolboxContent() {
1230
         const {
1241
         const {
1242
+            _isMobile,
1231
             _overflowMenuVisible,
1243
             _overflowMenuVisible,
1232
             t
1244
             t
1233
         } = this.props;
1245
         } = this.props;
1234
 
1246
 
1235
-        const buttonSet = getToolbarAdditionalButtons(this.state.windowWidth);
1247
+        const buttonSet = getToolbarAdditionalButtons(this.state.windowWidth, _isMobile);
1236
         const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
1248
         const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
1237
         const showOverflowMenuButton = buttonSet.has('overflow');
1249
         const showOverflowMenuButton = buttonSet.has('overflow');
1250
+        const containerClassName = `toolbox-content${_isMobile ? ' toolbox-content-mobile' : ''}`;
1238
         let overflowMenuAdditionalButtons = [];
1251
         let overflowMenuAdditionalButtons = [];
1239
         let mainMenuAdditionalButtons = [];
1252
         let mainMenuAdditionalButtons = [];
1240
 
1253
 
1254
+
1241
         if (showOverflowMenuButton) {
1255
         if (showOverflowMenuButton) {
1242
             ({ overflowMenuAdditionalButtons, mainMenuAdditionalButtons } = this._getAdditionalButtons(buttonSet));
1256
             ({ overflowMenuAdditionalButtons, mainMenuAdditionalButtons } = this._getAdditionalButtons(buttonSet));
1243
         }
1257
         }
1244
 
1258
 
1245
         return (
1259
         return (
1246
-            <div className = 'toolbox-content'>
1260
+            <div className = { containerClassName }>
1247
                 <div className = 'toolbox-content-items'>
1261
                 <div className = 'toolbox-content-items'>
1248
                     { this._renderAudioButton() }
1262
                     { this._renderAudioButton() }
1249
                     { this._renderVideoButton() }
1263
                     { this._renderVideoButton() }
1322
         _dialog: Boolean(state['features/base/dialog'].component),
1336
         _dialog: Boolean(state['features/base/dialog'].component),
1323
         _feedbackConfigured: Boolean(callStatsID),
1337
         _feedbackConfigured: Boolean(callStatsID),
1324
         _isProfileDisabled: Boolean(state['features/base/config'].disableProfile),
1338
         _isProfileDisabled: Boolean(state['features/base/config'].disableProfile),
1339
+        _isMobile: isMobileBrowser(),
1325
         _isVpaasMeeting: isVpaasMeeting(state),
1340
         _isVpaasMeeting: isVpaasMeeting(state),
1326
         _fullScreen: fullScreen,
1341
         _fullScreen: fullScreen,
1327
         _tileViewEnabled: shouldDisplayTileView(state),
1342
         _tileViewEnabled: shouldDisplayTileView(state),

+ 49
- 18
react/features/toolbox/functions.web.js View File

4
 import { hasAvailableDevices } from '../base/devices';
4
 import { hasAvailableDevices } from '../base/devices';
5
 
5
 
6
 const WIDTH = {
6
 const WIDTH = {
7
-    MEDIUM: 500,
8
-    SMALL: 390,
9
-    VERY_SMALL: 332,
10
-    NARROW: 224
7
+    FIT_9_ICONS: 520,
8
+    FIT_8_ICONS: 470,
9
+    FIT_7_ICONS: 420,
10
+    FIT_6_ICONS: 370,
11
+    FIT_5_ICONS: 320,
12
+    FIT_4_ICONS: 280
11
 };
13
 };
12
 
14
 
13
 /**
15
 /**
14
- * Returns a set of button names to be displayed in the toolbox, based on the screen width.
16
+ * Returns a set of button names to be displayed in the toolbox, based on the screen width and platform.
15
  *
17
  *
16
  * @param {number} width - The width of the screen.
18
  * @param {number} width - The width of the screen.
19
+ * @param {number} isMobile - The device is a mobile one.
17
  * @returns {Set} The button set.
20
  * @returns {Set} The button set.
18
  */
21
  */
19
-export function getToolbarAdditionalButtons(width: number): Set<string> {
20
-    if (width <= WIDTH.MEDIUM) {
21
-        if (width <= WIDTH.SMALL) {
22
-            if (width <= WIDTH.VERY_SMALL) {
23
-                if (width <= WIDTH.NARROW) {
24
-                    return new Set();
25
-                }
22
+export function getToolbarAdditionalButtons(width: number, isMobile: boolean): Set<string> {
23
+    let buttons = [];
24
+
25
+    switch (true) {
26
+    case width >= WIDTH.FIT_9_ICONS: {
27
+        buttons = isMobile
28
+            ? [ 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]
29
+            : [ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ];
30
+        break;
31
+    }
32
+
33
+    case width >= WIDTH.FIT_8_ICONS: {
34
+        buttons = [ 'desktop', 'chat', 'raisehand', 'invite', 'overflow' ];
35
+        break;
36
+    }
37
+
38
+    case width >= WIDTH.FIT_7_ICONS: {
39
+        buttons = [ 'desktop', 'chat', 'invite', 'overflow' ];
40
+        break;
41
+    }
26
 
42
 
27
-                return new Set([ 'overflow' ]);
28
-            }
43
+    case width >= WIDTH.FIT_6_ICONS: {
44
+        buttons = [ 'chat', 'invite', 'overflow' ];
45
+        break;
46
+    }
29
 
47
 
30
-            return new Set([ 'chat', 'tileview', 'overflow' ]);
31
-        }
48
+    case width >= WIDTH.FIT_5_ICONS: {
49
+        buttons = [ 'chat', 'overflow' ];
50
+        break;
51
+    }
32
 
52
 
33
-        return new Set([ 'chat', 'raisehand', 'tileview', 'overflow' ]);
53
+    case width >= WIDTH.FIT_4_ICONS: {
54
+        buttons = isMobile
55
+            ? [ 'chat', 'overflow' ]
56
+            : [ 'overflow' ];
57
+        break;
58
+    }
59
+
60
+    default: {
61
+        buttons = isMobile
62
+            ? [ 'chat', 'overflow' ]
63
+            : [];
64
+    }
34
     }
65
     }
35
 
66
 
36
-    return new Set([ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]);
67
+    return new Set(buttons);
37
 }
68
 }
38
 
69
 
39
 /**
70
 /**

Loading…
Cancel
Save