From bad8911fe883844b8b7e770b7d041f5238f8605d Mon Sep 17 00:00:00 2001 From: Vlad Piersec Date: Wed, 29 Sep 2021 15:06:03 +0300 Subject: [PATCH] feat(Labels): Redo video quality label Video quality label now becomes "performance settings". All CSS for labels is moved to JS. Overflow menu button is also changed to "performance settings". --- css/_labels.scss | 37 ------ css/main.scss | 1 - lang/main.json | 1 + react/features/base/icons/svg/gauge.svg | 8 ++ react/features/base/icons/svg/index.js | 1 + .../base/label/components/Label.web.js | 92 +++++++++++++-- react/features/base/label/constants.js | 7 ++ .../components/web/InsecureRoomNameLabel.js | 3 +- .../components/web/ParticipantsCount.js | 14 +-- react/features/e2ee/components/E2EELabel.js | 3 +- .../components/VideoQualityButton.web.js | 72 +----------- .../components/VideoQualityLabel.native.js | 20 +--- .../components/VideoQualityLabel.web.js | 111 +++--------------- 13 files changed, 130 insertions(+), 240 deletions(-) delete mode 100644 css/_labels.scss create mode 100644 react/features/base/icons/svg/gauge.svg create mode 100644 react/features/base/label/constants.js diff --git a/css/_labels.scss b/css/_labels.scss deleted file mode 100644 index b43caffa6..000000000 --- a/css/_labels.scss +++ /dev/null @@ -1,37 +0,0 @@ -.label { - align-items: center; - background: #36383C; - border-radius: 3px; - color: #fff; - display: flex; - font-size: 12px; - font-weight: 600; - height: 28px; - margin: 0 0 4px 4px; - padding: 0 8px; - - &--green { - background: #31B76A; - } - - &--red { - background: #E34F56 - } - - &--white { - background: #fff; - color: #5e6d7a; - - svg { - fill: #5e6d7a; - } - } -} - -.label-text-with-icon { - margin-left: 8px; -} - -.participants-count { - cursor: pointer; -} diff --git a/css/main.scss b/css/main.scss index 79d558c8d..ed08fa42b 100644 --- a/css/main.scss +++ b/css/main.scss @@ -78,7 +78,6 @@ $flagsImagePath: "../images/"; @import 'filmstrip/tile_view_overrides'; @import 'filmstrip/vertical_filmstrip'; @import 'filmstrip/vertical_filmstrip_overrides'; -@import 'labels'; @import 'unsupported-browser/main'; @import 'modals/invite/add-people'; @import 'deep-linking/main'; diff --git a/lang/main.json b/lang/main.json index 73d48d44b..61520e00a 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1056,6 +1056,7 @@ "ld": "LD", "ldTooltip": "Viewing low definition video", "lowDefinition": "Low definition", + "performanceSettings": "Performance settings", "sd": "SD", "sdTooltip": "Viewing standard definition video", "standardDefinition": "Standard definition" diff --git a/react/features/base/icons/svg/gauge.svg b/react/features/base/icons/svg/gauge.svg new file mode 100644 index 000000000..95562743f --- /dev/null +++ b/react/features/base/icons/svg/gauge.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 9f2a660a0..4409de55a 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -33,6 +33,7 @@ export { default as IconCloseX } from './close-x.svg'; export { default as IconClosedCaption } from './closed_caption.svg'; export { default as IconCloseSmall } from './close-small.svg'; export { default as IconCodeBlock } from './code-block.svg'; +export { default as IconGauge } from './gauge.svg'; export { default as IconConnectionActive } from './gsm-bars.svg'; export { default as IconConnectionInactive } from './ninja.svg'; export { default as IconCopy } from './copy.svg'; diff --git a/react/features/base/label/components/Label.web.js b/react/features/base/label/components/Label.web.js index f7377778e..4e0fcb955 100644 --- a/react/features/base/label/components/Label.web.js +++ b/react/features/base/label/components/Label.web.js @@ -1,8 +1,11 @@ // @flow - +import { withStyles } from '@material-ui/core/styles'; +import clsx from 'clsx'; import React from 'react'; import Icon from '../../icons/components/Icon'; +import { withPixelLineHeight } from '../../styles/functions.web'; +import { COLORS } from '../constants'; import AbstractLabel, { type Props as AbstractProps @@ -11,23 +14,84 @@ import AbstractLabel, { type Props = AbstractProps & { /** - * Additional CSS class names to add to the root of {@code Label}. + * An object containing the CSS classes. + */ + classes: Object, + + /** + * Own CSS class name. */ className: string, + /** + * The color of the label. + */ + color: string, + + /** * HTML ID attribute to add to the root of {@code Label}. */ - id: string + id: string, + + /** + * Click handler if any. + */ + onClick?: Function, }; +/** + * Creates the styles for the component. + * + * @param {Object} theme - The current UI theme. + * + * @returns {Object} + */ +const styles = theme => { + return { + label: { + ...withPixelLineHeight(theme.typography.labelRegular), + + alignItems: 'center', + background: theme.palette.ui04, + borderRadius: theme.shape.borderRadius / 2, + color: theme.palette.text01, + display: 'flex', + height: 28, + margin: '0 0 4px 4px', + padding: '0 8px' + }, + withIcon: { + marginLeft: 8 + }, + clickable: { + cursor: 'pointer' + }, + [COLORS.white]: { + background: theme.palette.text01, + color: theme.palette.ui04, + + '& svg': { + fill: theme.palette.ui04 + } + }, + [COLORS.green]: { + background: theme.palette.success02 + }, + [COLORS.red]: { + background: theme.palette.actionDanger + } + }; +}; + + /** * React Component for showing short text in a circle. * * @extends Component */ -export default class Label extends AbstractLabel { +class Label extends AbstractLabel { /** * Implements React's {@link Component#render()}. * @@ -35,23 +99,33 @@ export default class Label extends AbstractLabel { */ render() { const { + classes, className, + color, icon, id, + onClick, text } = this.props; - - const labelClassName = icon ? 'label-text-with-icon' : ''; + const labelClassName = clsx( + classes.label, + onClick && classes.clickable, + color && classes[color], + className + ); return (
+ className = { labelClassName } + id = { id } + onClick = { onClick }> { icon && } - { text && {text} } + { text && {text} }
); } } + +export default withStyles(styles)(Label); diff --git a/react/features/base/label/constants.js b/react/features/base/label/constants.js new file mode 100644 index 000000000..4eaf920a0 --- /dev/null +++ b/react/features/base/label/constants.js @@ -0,0 +1,7 @@ +// @flow + +export const COLORS = { + white: 'white', + green: 'green', + red: 'red' +}; diff --git a/react/features/conference/components/web/InsecureRoomNameLabel.js b/react/features/conference/components/web/InsecureRoomNameLabel.js index 136d1fefe..048da241d 100644 --- a/react/features/conference/components/web/InsecureRoomNameLabel.js +++ b/react/features/conference/components/web/InsecureRoomNameLabel.js @@ -6,6 +6,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; import { IconWarning } from '../../../base/icons'; import { Label } from '../../../base/label'; +import { COLORS } from '../../../base/label/constants'; import { connect } from '../../../base/redux'; import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel'; @@ -24,7 +25,7 @@ class InsecureRoomNameLabel extends AbstractInsecureRoomNameLabel { content = { this.props.t('security.insecureRoomNameWarning') } position = 'bottom'>