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

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

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());