feat(device-selection): design tweaks (#2802)

- Change copy
- Add labels to dropdowns
- Adjust color and positioning

css/modals/device-selection/_device-selection.scss

@@ -4,11 +4,7 @@
 
         > div {
             display: block;
-            margin-bottom: 10px;
-        }
-
-        > div:last-child {
-            margin-bottom: 5px;
+            margin-bottom: 4px;
         }
 
         .device-selector-icon {
@@ -18,6 +14,10 @@
             margin-left: 3px;
         }
 
+        .device-selector-label {
+            margin-bottom: 1px;
+        }
+
         /* device-selector-trigger stylings attempt to mimic AtlasKit button */
         .device-selector-trigger {
             background-color: #0E1624;
@@ -101,7 +101,6 @@
 
     .audio-output-preview {
         font-size: 14px;
-        margin-top: 10px;
 
         a {
             color: 4C9AFF;
@@ -111,9 +110,9 @@
     }
 
     .audio-input-preview {
-        background: #7b7b7b;
+        background: #1B2638;
         border-radius: 5px;
-        height: 6px;
+        height: 8px;
 
         .audio-input-preview-level {
             background: #4C9AFF;

lang/main.json

@@ -440,7 +440,7 @@
         "noPermission": "Permission not granted",
         "previewUnavailable": "Preview unavailable",
         "selectADevice": "Select a device",
-        "testAudio": "Test sound"
+        "testAudio": "Play a test sound"
     },
     "videoStatus": {
         "callQuality": "Call Quality",

modules/UI/UI.js

@@ -35,6 +35,7 @@ import {
     setNotificationsEnabled,
     showWarningNotification
 } from '../../react/features/notifications';
+import { shouldShowOnlyDeviceSelection } from '../../react/features/settings';
 import {
     dockToolbox,
     showToolbox
@@ -104,8 +105,7 @@ const UIListeners = new Map([
             // opened through a button in settings and not directly displayed in
             // settings itself. As it is not useful to only have a settings menu
             // with a button to open a dialog, open the dialog directly instead.
-            if (interfaceConfig.SETTINGS_SECTIONS.length === 1
-                    && UIUtil.isSettingEnabled('devices')) {
+            if (shouldShowOnlyDeviceSelection()) {
                 APP.store.dispatch(openDeviceSelectionDialog());
             } else {
                 UI.toggleSidePanel('settings_container');

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -8,7 +8,10 @@ import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 
 import { i18next } from '../../../../react/features/base/i18n';
-import { SettingsMenu } from '../../../../react/features/settings';
+import {
+    SettingsMenu,
+    isSettingEnabled
+} from '../../../../react/features/settings';
 import UIUtil from '../../util/UIUtil';
 
 /* eslint-enable no-unused-vars */
@@ -23,9 +26,9 @@ export default {
         $('#sideToolbarContainer').append(settingsMenuContainer);
 
         const props = {
-            showDeviceSettings: UIUtil.isSettingEnabled('devices'),
-            showLanguageSettings: UIUtil.isSettingEnabled('language'),
-            showModeratorSettings: UIUtil.isSettingEnabled('moderator'),
+            showDeviceSettings: isSettingEnabled('devices'),
+            showLanguageSettings: isSettingEnabled('language'),
+            showModeratorSettings: isSettingEnabled('moderator'),
             showTitles: interfaceConfig.SETTINGS_SECTIONS.length > 1
         };
 

modules/UI/util/UIUtil.js

@@ -121,18 +121,6 @@ const UIUtil = {
         }
     },
 
-    /**
-     * Indicates if the setting section is enabled.
-     *
-     * @param name the name of the setting section as defined in
-     * interface_config.js and SettingsMenu.js
-     * @returns {boolean} {true} to indicate that the given setting section
-     * is enabled, {false} - otherwise
-     */
-    isSettingEnabled(name) {
-        return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1;
-    },
-
     /**
      * Indicates if Authentication Section should be shown
      *

react/features/device-selection/components/DeviceSelectionDialogBase.js

@@ -5,6 +5,8 @@ import { StatelessDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { createLocalTrack } from '../../base/lib-jitsi-meet';
 
+import { shouldShowOnlyDeviceSelection } from '../../settings';
+
 import AudioInputPreview from './AudioInputPreview';
 import AudioOutputPreview from './AudioOutputPreview';
 import DeviceSelector from './DeviceSelector';
@@ -218,7 +220,7 @@ class DeviceSelectionDialogBase extends Component {
                 okTitleKey = { 'dialog.Save' }
                 onCancel = { this._onCancel }
                 onSubmit = { this._onSubmit }
-                titleKey = 'deviceSelection.deviceSettings'>
+                titleKey = { this._getModalTitle() }>
                 <div className = 'device-selection'>
                     <div className = 'device-selection-column column-video'>
                         <div className = 'device-selection-video-container'>
@@ -275,6 +277,22 @@ class DeviceSelectionDialogBase extends Component {
             ? this.state.previewVideoTrack.dispose() : Promise.resolve();
     }
 
+    /**
+     * Returns what the title of the device selection modal should be.
+     *
+     * Note: This is temporary logic to appease design sooner. Device selection
+     * and all other settings will be combined into one modal.
+     *
+     * @returns {string}
+     */
+    _getModalTitle() {
+        if (shouldShowOnlyDeviceSelection()) {
+            return 'settings.title';
+        }
+
+        return 'deviceSelection.deviceSettings';
+    }
+
     /**
      * Disposes preview tracks and signals to
      * close DeviceSelectionDialogBase.
@@ -362,12 +380,18 @@ class DeviceSelectionDialogBase extends Component {
      * Creates a DeviceSelector instance based on the passed in configuration.
      *
      * @private
-     * @param {Object} props - The props for the DeviceSelector.
+     * @param {Object} deviceSelectorProps - The props for the DeviceSelector.
      * @returns {ReactElement}
      */
-    _renderSelector(props) {
+    _renderSelector(deviceSelectorProps) {
+
         return (
-            <DeviceSelector { ...props } />
+            <div key = { deviceSelectorProps.label }>
+                <div className = 'device-selector-label'>
+                    { this.props.t(deviceSelectorProps.label) }
+                </div>
+                <DeviceSelector { ...deviceSelectorProps } />
+            </div>
         );
     }
 
@@ -419,7 +443,7 @@ class DeviceSelectionDialogBase extends Component {
             });
         }
 
-        return configurations.map(this._renderSelector);
+        return configurations.map(config => this._renderSelector(config));
     }
 
     /**

react/features/settings/functions.js

@@ -2,6 +2,20 @@
 
 import { parseStandardURIString } from '../base/util';
 
+declare var interfaceConfig: Object;
+
+/**
+ * Used for web. Indicates if the setting section is enabled.
+ *
+ * @param {string} settingName - The name of the setting section as defined in
+ * interface_config.js and SettingsMenu.js.
+ * @returns {boolean} True to indicate that the given setting section
+ * is enabled, false otherwise.
+ */
+export function isSettingEnabled(settingName: string) {
+    return interfaceConfig.SETTINGS_SECTIONS.includes(settingName);
+}
+
 /**
  * Normalizes a URL entered by the user.
  * FIXME: Consider adding this to base/util/uri.
@@ -35,3 +49,14 @@ export function normalizeUserInputURL(url: string) {
 
     /* eslint-enable no-param-reassign */
 }
+
+/**
+ * Used for web. Returns whether or not only Device Selection is configured to
+ * display as a setting.
+ *
+ * @returns {boolean}
+ */
+export function shouldShowOnlyDeviceSelection() {
+    return interfaceConfig.SETTINGS_SECTIONS.length === 1
+        && isSettingEnabled('devices');
+}

react/features/settings/index.js

@@ -1,6 +1,7 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './components';
+export * from './functions';
 
 import './middleware';
 import './reducer';

react/features/toolbox/components/Toolbox.web.js

@@ -25,6 +25,7 @@ import { AddPeopleDialog, InfoDialogButton } from '../../invite';
 import { openKeyboardShortcutsDialog } from '../../keyboard-shortcuts';
 import { RECORDING_TYPES, toggleRecording } from '../../recording';
 import { toggleSharedVideo } from '../../shared-video';
+import { shouldShowOnlyDeviceSelection } from '../../settings';
 import { toggleChat, toggleProfile, toggleSettings } from '../../side-panel';
 import { SpeakerStats } from '../../speaker-stats';
 import {
@@ -535,8 +536,7 @@ class Toolbox extends Component<Props, State> {
      * @returns {void}
      */
     _doToggleSettings() {
-        if (interfaceConfig.SETTINGS_SECTIONS.length === 1
-            && interfaceConfig.SETTINGS_SECTIONS.includes('devices')) {
+        if (shouldShowOnlyDeviceSelection()) {
             this.props.dispatch(openDeviceSelectionDialog());
         } else {
             this.props.dispatch(toggleSettings());