From f4060975d16f610e891df75609c32cd5cc28041e Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Fri, 27 Apr 2018 18:43:11 -0700 Subject: [PATCH] feat(device-selection): design tweaks (#2802) - Change copy - Add labels to dropdowns - Adjust color and positioning --- .../device-selection/_device-selection.scss | 15 ++++---- lang/main.json | 2 +- modules/UI/UI.js | 4 +-- .../UI/side_pannels/settings/SettingsMenu.js | 11 +++--- modules/UI/util/UIUtil.js | 12 ------- .../components/DeviceSelectionDialogBase.js | 34 ++++++++++++++++--- react/features/settings/functions.js | 25 ++++++++++++++ react/features/settings/index.js | 1 + .../toolbox/components/Toolbox.web.js | 4 +-- 9 files changed, 74 insertions(+), 34 deletions(-) diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss index 3dc68ef32..d608a909d 100644 --- a/css/modals/device-selection/_device-selection.scss +++ b/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; diff --git a/lang/main.json b/lang/main.json index 0de3da582..efd6f46dd 100644 --- a/lang/main.json +++ b/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", diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 47b190cea..a71c5954e 100644 --- a/modules/UI/UI.js +++ b/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'); diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index fbf7ff372..8e72c9e85 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/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 }; diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index be71e5e21..c070a8c25 100644 --- a/modules/UI/util/UIUtil.js +++ b/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 * diff --git a/react/features/device-selection/components/DeviceSelectionDialogBase.js b/react/features/device-selection/components/DeviceSelectionDialogBase.js index f2d199b4c..e302a3488 100644 --- a/react/features/device-selection/components/DeviceSelectionDialogBase.js +++ b/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() }>
@@ -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 ( - +
+
+ { this.props.t(deviceSelectorProps.label) } +
+ +
); } @@ -419,7 +443,7 @@ class DeviceSelectionDialogBase extends Component { }); } - return configurations.map(this._renderSelector); + return configurations.map(config => this._renderSelector(config)); } /** diff --git a/react/features/settings/functions.js b/react/features/settings/functions.js index 9ca8fcf27..d7b9e904a 100644 --- a/react/features/settings/functions.js +++ b/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'); +} diff --git a/react/features/settings/index.js b/react/features/settings/index.js index a29aa08e0..44000a1a7 100644 --- a/react/features/settings/index.js +++ b/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'; diff --git a/react/features/toolbox/components/Toolbox.web.js b/react/features/toolbox/components/Toolbox.web.js index be5aed113..cd4bb2499 100644 --- a/react/features/toolbox/components/Toolbox.web.js +++ b/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 { * @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());