From c05ca1d9fcfdf84f8bbbcb880ab39d40e6d3db45 Mon Sep 17 00:00:00 2001 From: Vlad Piersec Date: Mon, 30 Mar 2020 17:44:45 +0300 Subject: [PATCH] fix(prejoin_page) Add labels for video & more UI fixes --- css/_atlaskit_overrides.scss | 16 --- css/_audio-preview.css | 6 + css/_meter.css | 9 +- css/_settings-button.scss | 21 +-- css/_video-preview.css | 22 ++++ lang/main.json | 1 + .../components/ToolboxButtonWithIcon.js | 123 ++++++++++++++---- .../settings/components/web/SettingsDialog.js | 4 +- .../web/audio/AudioSettingsContent.js | 2 +- .../web/video/VideoSettingsContent.js | 4 +- 10 files changed, 146 insertions(+), 62 deletions(-) diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index 66e9f4a1f..0b110c0a3 100644 --- a/css/_atlaskit_overrides.scss +++ b/css/_atlaskit_overrides.scss @@ -48,19 +48,3 @@ .toolbox-button-wth-dialog .eYJELv { max-height: initial; } - -/** - * Override @atlaskit/InlineDialog styling for the video preview - */ -.video-preview .eYJELv { - outline: none; - padding: 16px; -} - -/** - * Override @atlaskit/InlineDialog styling for the audio preview - */ -.audio-preview .eYJELv { - outline: none; - padding: 0; -} diff --git a/css/_audio-preview.css b/css/_audio-preview.css index 19f71c81d..c6a31e5b4 100644 --- a/css/_audio-preview.css +++ b/css/_audio-preview.css @@ -121,4 +121,10 @@ right: 16px; top: 18px; } + + // Override @atlaskit/InlineDialog container which is made with styled components + & > div > div:nth-child(2) > div > div { + outline: none; + padding: 0; + } } diff --git a/css/_meter.css b/css/_meter.css index 7d5c4c80a..98f779815 100644 --- a/css/_meter.css +++ b/css/_meter.css @@ -3,21 +3,21 @@ display: inline-block; & > svg { - fill: #76CF9C; + fill: #4E5E6C; width: 38px; } } &.metr--disabled { & > svg { - fill: #5E6D7A; + fill: #4E5E6C; } } } .metr-l-0 { rect:first-child { - fill: #279255; + fill: #31B76A; } } @@ -26,8 +26,5 @@ rect:nth-child(-n+#{$i+1}) { fill: #31B76A; } - rect:first-child { - fill: #279255; - } } } diff --git a/css/_settings-button.scss b/css/_settings-button.scss index 94009ba48..0cb8ebaa2 100644 --- a/css/_settings-button.scss +++ b/css/_settings-button.scss @@ -50,15 +50,11 @@ bottom: 0; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; - height: 18px; + height: 16px; position: absolute; text-align: center; - right: 2px; - width: 18px; - - &:hover { - background-color: #daebfa; - } + right: 4px; + width: 16px; &> svg { margin-top: 5px; @@ -67,9 +63,16 @@ &--disabled { background-color: #a4b8d1; cursor: default; + } - &:hover { - background-color: #a4b8d1; + &--hovered { + bottom: -1px; + height: 20px; + right: 2px; + width: 20px; + + &> svg { + margin-top: 6px; } } } diff --git a/css/_video-preview.css b/css/_video-preview.css index e2c6ec58a..084714dbb 100644 --- a/css/_video-preview.css +++ b/css/_video-preview.css @@ -1,4 +1,7 @@ .video-preview { + max-height: 290px; + overflow: auto; + &-entry { cursor: pointer; height: 135px; @@ -40,4 +43,23 @@ position: absolute; width: 100%; } + + &-label { + color: #fff; + font-size: 13px; + line-height: 20px; + overflow: hidden; + padding: 8px; + position: absolute; + text-align: center; + text-overflow: ellipsis; + width: 220px; + z-index: 2; + } + + // Override @atlaskit/InlineDialog container which is made with styled components + & > div > div:nth-child(2) > div > div { + outline: none; + padding: 16px; + } } diff --git a/lang/main.json b/lang/main.json index 9fbe33947..4be8f468e 100644 --- a/lang/main.json +++ b/lang/main.json @@ -525,6 +525,7 @@ "followMe": "Everyone follows me", "language": "Language", "loggedIn": "Logged in as {{name}}", + "microphones": "Microphones", "moderator": "Moderator", "more": "More", "name": "Name", diff --git a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js index ad2b46486..879a1f401 100644 --- a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js +++ b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js @@ -1,6 +1,6 @@ // @flow -import React from 'react'; +import React, { Component } from 'react'; import { Icon } from '../../icons'; type Props = { @@ -29,38 +29,109 @@ type Props = { * Additional styles. */ styles?: Object, -} +}; + +type State = { + + /** + * Whether the button is hovered or not. + */ + isHovered: boolean, +}; /** * Displayes the `ToolboxButtonWithIcon` component. * * @returns {ReactElement} */ -export default function ToolboxButtonWithIcon({ - children, - icon, - iconDisabled, - onIconClick, - styles -}: Props) { - const iconProps = {}; +export default class ToolboxButtonWithIcon extends Component { - if (iconDisabled) { - iconProps.className = 'settings-button-small-icon settings-button-small-icon--disabled'; - } else { - iconProps.className = 'settings-button-small-icon'; - iconProps.onClick = onIconClick; + /** + * Initializes a new {@code ToolboxButtonWithIcon} instance. + * + * @param {Props} props - The props of the component. + */ + constructor(props: Props) { + super(props); + + this.state = { + isHovered: false + }; + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onMouseLeave = this._onMouseLeave.bind(this); } - return ( -
- { children } - -
- ); + _onMouseEnter: () => void; + + /** + * Handler for when the small button has the mouse over. + * + * @returns {void}. + */ + _onMouseEnter() { + this.setState({ + isHovered: true + }); + } + + _onMouseLeave: () => void; + + /** + * Handler for when the mouse leaves the small button. + * + * @returns {void} + */ + _onMouseLeave() { + this.setState({ + isHovered: false + }); + } + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {React$Node} + */ + render() { + const { + children, + icon, + iconDisabled, + onIconClick, + styles + } = this.props; + + const iconProps = {}; + let size = 9; + + if (iconDisabled) { + iconProps.className + = 'settings-button-small-icon settings-button-small-icon--disabled'; + } else { + iconProps.className = 'settings-button-small-icon'; + iconProps.onClick = onIconClick; + + if (this.state.isHovered) { + iconProps.className = `${iconProps.className} settings-button-small-icon--hovered`; + size = 11; + } + } + + return ( +
+ {children} +
+ +
+
+ ); + } } diff --git a/react/features/settings/components/web/SettingsDialog.js b/react/features/settings/components/web/SettingsDialog.js index c54d89244..ea2d7de11 100644 --- a/react/features/settings/components/web/SettingsDialog.js +++ b/react/features/settings/components/web/SettingsDialog.js @@ -127,11 +127,9 @@ class SettingsDialog extends Component { function _mapStateToProps(state) { const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || []; const jwt = state['features/base/jwt']; - const { prejoinPageEnabled } = state['features/base/config']; // The settings sections to display. - const showDeviceSettings = !prejoinPageEnabled - && configuredTabs.includes('devices'); + const showDeviceSettings = configuredTabs.includes('devices'); const moreTabProps = getMoreTabProps(state); const { showModeratorSettings, showLanguageSettings } = moreTabProps; const showProfileSettings diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.js b/react/features/settings/components/web/audio/AudioSettingsContent.js index 313c79918..cf2783ba0 100644 --- a/react/features/settings/components/web/audio/AudioSettingsContent.js +++ b/react/features/settings/components/web/audio/AudioSettingsContent.js @@ -243,7 +243,7 @@ class AudioSettingsContent extends Component {
+ text = { t('settings.microphones') } /> {microphoneDevices.map((data, i) => this._renderMicrophoneEntry(data, i), )} diff --git a/react/features/settings/components/web/video/VideoSettingsContent.js b/react/features/settings/components/web/video/VideoSettingsContent.js index c214e3a42..870e5234b 100644 --- a/react/features/settings/components/web/video/VideoSettingsContent.js +++ b/react/features/settings/components/web/video/VideoSettingsContent.js @@ -153,6 +153,7 @@ class VideoSettingsContent extends Component { className, key }; + const label = jitsiTrack && jitsiTrack.getTrackLabel(); if (isSelected) { props.className = `${className} video-preview-entry--selected`; @@ -162,6 +163,7 @@ class VideoSettingsContent extends Component { return (
+
{label}