diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss index 128975bf5..ab1428856 100644 --- a/css/modals/device-selection/_device-selection.scss +++ b/css/modals/device-selection/_device-selection.scss @@ -36,6 +36,12 @@ background-color: rgba(9,30,66,.08); } } + .device-selector-trigger-disabled { + .device-selector-trigger { + color: #a5adba; + cursor: default; + } + } .device-selector-trigger-text { overflow: hidden; diff --git a/lang/main.json b/lang/main.json index 6ef74e6c3..2ce2bb640 100644 --- a/lang/main.json +++ b/lang/main.json @@ -149,7 +149,6 @@ "selectAudioOutput": "Audio output", "followMe": "Everyone follows me", "noDevice": "None", - "noPermission": "Permission to use device is not granted", "cameraAndMic": "Camera and microphone", "moderator": "MODERATOR", "password": "SET PASSWORD", @@ -423,7 +422,7 @@ "deviceSelection": { "currentlyVideoMuted": "Video is currently muted", "deviceSettings": "Device settings", - "noOtherDevices": "No other devices available", + "noPermission": "Permission not granted", "selectADevice": "Select a device", "testAudio": "Test sound" }, diff --git a/react/features/device-selection/components/DeviceSelector.js b/react/features/device-selection/components/DeviceSelector.js index c82df9f2b..4b5263ece 100644 --- a/react/features/device-selection/components/DeviceSelector.js +++ b/react/features/device-selection/components/DeviceSelector.js @@ -138,13 +138,15 @@ class DeviceSelector extends Component { } /** - * Creates a AKDropdownMenu Component using passed in props and options. + * Creates a AKDropdownMenu Component using passed in props and options. If + * the dropdown needs to be disabled, then only the AKDropdownMenu trigger + * element is returned to simulate a disabled state. * * @param {Object} options - Additional configuration for display. * @param {Object} options.defaultSelected - The option that should be set * as currently chosen. - * @param {boolean} options.isDisabled - If true, AKDropdownMenu will not - * open on click. + * @param {boolean} options.isDisabled - If true, only the AKDropdownMenu + * trigger component will be returned to simulate a disabled dropdown. * @param {Array} options.items - All the selectable options to display. * @param {string} options.placeholder - The translation key to display when * no selection has been made. @@ -155,16 +157,22 @@ class DeviceSelector extends Component { const triggerText = (options.defaultSelected && options.defaultSelected.content) || options.placeholder; + const trigger = this._createDropdownTrigger(triggerText); + + if (options.isDisabled) { + return ( +
+ { trigger } +
+ ); + } return ( - { this._createDropdownTrigger(triggerText) } + { trigger } ); } @@ -208,7 +216,7 @@ class DeviceSelector extends Component { _renderNoPermission() { return this._createDropdown({ isDisabled: true, - placeholder: this.props.t('settings.noPermission') + placeholder: this.props.t('deviceSelection.noPermission') }); } }