From 17faefd757e6965f89fe1ff5e571541380f30762 Mon Sep 17 00:00:00 2001 From: Shahab <45701680+c0m1t@users.noreply.github.com> Date: Tue, 29 Mar 2022 13:20:32 +0430 Subject: [PATCH] refactor(settings): use jss instead of css (#11149) --- css/main.scss | 1 - css/modals/settings/_settings.scss | 102 ------------- .../settings/components/web/SettingsDialog.js | 134 ++++++++++++++++-- 3 files changed, 126 insertions(+), 111 deletions(-) delete mode 100644 css/modals/settings/_settings.scss diff --git a/css/main.scss b/css/main.scss index ff925c924..e9703c469 100644 --- a/css/main.scss +++ b/css/main.scss @@ -38,7 +38,6 @@ $flagsImagePath: "../images/"; @import 'modals/embed-meeting/embed-meeting'; @import 'modals/feedback/feedback'; @import 'modals/invite/info'; -@import 'modals/settings/settings'; @import 'modals/screen-share/share-audio'; @import 'modals/screen-share/share-screen-warning'; @import 'modals/virtual-background/virtual-background'; diff --git a/css/modals/settings/_settings.scss b/css/modals/settings/_settings.scss deleted file mode 100644 index b46ebcd2d..000000000 --- a/css/modals/settings/_settings.scss +++ /dev/null @@ -1,102 +0,0 @@ -.settings-pane { - display: flex; - width: 100%; - - &.profile-pane { - flex-direction: column; - } - - .auth-name { - margin-bottom: 4px; - } - - .calendar-tab, - .device-selection { - margin-top: 20px; - } - - .mock-atlaskit-label { - color: #b8c7e0; - font-size: 12px; - font-weight: 600; - line-height: 1.33; - padding: 20px 0px 4px 0px; - } - input[type="checkbox"]:checked + svg { - --checkbox-background-color: #6492e7; - --checkbox-border-color: #6492e7; - } - input[type="checkbox"] + svg + span { - color: #b8c7e0; - } - - input[type="checkbox"] + svg + span { - color: #9FB0CC; - } - - .calendar-tab, - .more-tab, - .box { - display: flex; - justify-content: space-between; - width: 100%; - } - - .profile-edit { - display: flex; - width: 100%; - } - - .profile-edit-field { - flex: .5; - } - .settings-sub-pane { - flex: 1; - } - - .settings-sub-pane .right { - flex: 1; - } - .settings-sub-pane .left { - flex: 1; - } - - .settings-sub-pane-element { - text-align: left; - flex: 1; - } - - .moderator-settings-wrapper { - padding-top: 20px; - } - - .profile-edit-field { - margin-right: 20px; - } - - .calendar-tab { - align-items: center; - flex-direction: column; - font-size: 14px; - min-height: 100px; - text-align: center; - } - - .calendar-tab-sign-in { - margin-top: 20px; - } - - .sign-out-cta { - margin-bottom: 20px; - } - - @media only screen and (max-width: $smallScreen) { - .device-selection { - display: flex; - flex-direction: column; - } - .more-tab { - flex-direction: column; - } - } -} diff --git a/react/features/settings/components/web/SettingsDialog.js b/react/features/settings/components/web/SettingsDialog.js index 09fc9fc46..5875db559 100644 --- a/react/features/settings/components/web/SettingsDialog.js +++ b/react/features/settings/components/web/SettingsDialog.js @@ -1,5 +1,6 @@ // @flow +import { withStyles } from '@material-ui/styles'; import React, { Component } from 'react'; import { getAvailableDevices } from '../../../base/devices'; @@ -39,6 +40,11 @@ declare var interfaceConfig: Object; */ type Props = { + /** + * An object containing the CSS classes. + */ + classes: Object, + /** * Which settings tab should be initially displayed. If not defined then * the first tab will be displayed. @@ -56,6 +62,116 @@ type Props = { dispatch: Function }; +/** + * Creates the styles for the component. + * + * @param {Object} theme - The current UI theme. + * + * @returns {Object} + */ +const styles = theme => { + return { + settingsDialog: { + display: 'flex', + width: '100%', + + '&.profile-pane': { + flexDirection: 'column' + }, + + '& .auth-name': { + marginBottom: `${theme.spacing(1)}px` + }, + + '& .calendar-tab, & .device-selection': { + marginTop: '20px' + }, + + '& .mock-atlaskit-label': { + color: '#b8c7e0', + fontSize: '12px', + fontWeight: 600, + lineHeight: 1.33, + padding: `20px 0px ${theme.spacing(1)}px 0px` + }, + + '& input[type="checkbox"]:checked + svg': { + '--checkbox-background-color': '#6492e7', + '--checkbox-border-color': '#6492e7' + }, + + '& input[type="checkbox"] + svg + span': { + color: '#9FB0CC' + }, + + [[ '& .calendar-tab', + '& .more-tab', + '& .box' ]]: { + display: 'flex', + justifyContent: 'space-between', + width: '100%' + }, + + '& .profile-edit': { + display: 'flex', + width: '100%' + }, + + '& .profile-edit-field': { + flex: 0.5, + marginRight: '20px' + }, + + '& .settings-sub-pane': { + flex: 1 + }, + + '& .settings-sub-pane .right': { + flex: 1 + }, + '& .settings-sub-pane .left': { + flex: 1 + }, + + '& .settings-sub-pane-element': { + textAlign: 'left', + flex: 1 + }, + + '& .moderator-settings-wrapper': { + paddingTop: '20px' + }, + + '& .calendar-tab': { + alignItems: 'center', + flexDirection: 'column', + fontSize: '14px', + minHeight: '100px', + textAlign: 'center' + }, + + '& .calendar-tab-sign-in': { + marginTop: '20px' + }, + + '& .sign-out-cta': { + marginBottom: '20px' + }, + + '@media only screen and (max-width: 700px)': { + '& .device-selection': { + display: 'flex', + flexDirection: 'column' + }, + + '& .more-tab': { + flexDirection: 'column' + } + } + } + }; +}; + /** * A React {@code Component} for displaying a dialog to modify local settings * and conference-wide (moderator) settings. This version is connected to @@ -130,12 +246,14 @@ class SettingsDialog extends Component { * {@code ConnectedSettingsDialog} component. * * @param {Object} state - The Redux state. + * @param {Object} ownProps - The props passed to the component. * @private * @returns {{ * tabs: Array * }} */ -function _mapStateToProps(state) { +function _mapStateToProps(state, ownProps) { + const { classes } = ownProps; const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || []; // The settings sections to display. @@ -173,7 +291,7 @@ function _mapStateToProps(state) { selectedVideoInputId: tabState.selectedVideoInputId }; }, - styles: 'settings-pane devices-pane', + styles: `${classes.settingsDialog} devices-pane`, submit: submitDeviceSelectionTab }); } @@ -184,7 +302,7 @@ function _mapStateToProps(state) { component: ProfileTab, label: 'profile.title', props: getProfileTabProps(state), - styles: 'settings-pane profile-pane', + styles: `${classes.settingsDialog} profile-pane`, submit: submitProfileTab }); } @@ -206,7 +324,7 @@ function _mapStateToProps(state) { startReactionsMuted: tabState?.startReactionsMuted }; }, - styles: 'settings-pane moderator-pane', + styles: `${classes.settingsDialog} moderator-pane`, submit: submitModeratorTab }); } @@ -216,7 +334,7 @@ function _mapStateToProps(state) { name: SETTINGS_TABS.CALENDAR, component: CalendarTab, label: 'settings.calendar.title', - styles: 'settings-pane calendar-pane' + styles: `${classes.settingsDialog} calendar-pane` }); } @@ -226,7 +344,7 @@ function _mapStateToProps(state) { component: SoundsTab, label: 'settings.sounds', props: getSoundsTabProps(state), - styles: 'settings-pane profile-pane', + styles: `${classes.settingsDialog} profile-pane`, submit: submitSoundsTab }); } @@ -249,7 +367,7 @@ function _mapStateToProps(state) { enabledNotifications: tabState?.enabledNotifications }; }, - styles: 'settings-pane more-pane', + styles: `${classes.settingsDialog} more-pane`, submit: submitMoreTab }); } @@ -257,4 +375,4 @@ function _mapStateToProps(state) { return { _tabs: tabs }; } -export default connect(_mapStateToProps)(SettingsDialog); +export default withStyles(styles)(connect(_mapStateToProps)(SettingsDialog));