refactor(settings): use jss instead of css (#11149)
This commit is contained in:
Shahab
GitHub
parent
c4db12cbd6
commit
17faefd757
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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<Props> {
|
|||
* {@code ConnectedSettingsDialog} component.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @param {Object} ownProps - The props passed to the component.
|
||||
* @private
|
||||
* @returns {{
|
||||
* tabs: Array<Object>
|
||||
* }}
|
||||
*/
|
||||
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));
|
||||
|
|
|
|||
Loading…
Reference in New Issue