refactor(settings): use jss instead of css (#11149)
This commit is contained in:
parent
e3c2823655
commit
736667d0e9
|
@ -38,7 +38,6 @@ $flagsImagePath: "../images/";
|
||||||
@import 'modals/embed-meeting/embed-meeting';
|
@import 'modals/embed-meeting/embed-meeting';
|
||||||
@import 'modals/feedback/feedback';
|
@import 'modals/feedback/feedback';
|
||||||
@import 'modals/invite/info';
|
@import 'modals/invite/info';
|
||||||
@import 'modals/settings/settings';
|
|
||||||
@import 'modals/screen-share/share-audio';
|
@import 'modals/screen-share/share-audio';
|
||||||
@import 'modals/screen-share/share-screen-warning';
|
@import 'modals/screen-share/share-screen-warning';
|
||||||
@import 'modals/virtual-background/virtual-background';
|
@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
|
// @flow
|
||||||
|
|
||||||
|
import { withStyles } from '@material-ui/styles';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
import { getAvailableDevices } from '../../../base/devices';
|
import { getAvailableDevices } from '../../../base/devices';
|
||||||
|
@ -39,6 +40,11 @@ declare var interfaceConfig: Object;
|
||||||
*/
|
*/
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An object containing the CSS classes.
|
||||||
|
*/
|
||||||
|
classes: Object,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Which settings tab should be initially displayed. If not defined then
|
* Which settings tab should be initially displayed. If not defined then
|
||||||
* the first tab will be displayed.
|
* the first tab will be displayed.
|
||||||
|
@ -56,6 +62,116 @@ type Props = {
|
||||||
dispatch: Function
|
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
|
* A React {@code Component} for displaying a dialog to modify local settings
|
||||||
* and conference-wide (moderator) settings. This version is connected to
|
* and conference-wide (moderator) settings. This version is connected to
|
||||||
|
@ -130,12 +246,14 @@ class SettingsDialog extends Component<Props> {
|
||||||
* {@code ConnectedSettingsDialog} component.
|
* {@code ConnectedSettingsDialog} component.
|
||||||
*
|
*
|
||||||
* @param {Object} state - The Redux state.
|
* @param {Object} state - The Redux state.
|
||||||
|
* @param {Object} ownProps - The props passed to the component.
|
||||||
* @private
|
* @private
|
||||||
* @returns {{
|
* @returns {{
|
||||||
* tabs: Array<Object>
|
* tabs: Array<Object>
|
||||||
* }}
|
* }}
|
||||||
*/
|
*/
|
||||||
function _mapStateToProps(state) {
|
function _mapStateToProps(state, ownProps) {
|
||||||
|
const { classes } = ownProps;
|
||||||
const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
|
const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
|
||||||
|
|
||||||
// The settings sections to display.
|
// The settings sections to display.
|
||||||
|
@ -173,7 +291,7 @@ function _mapStateToProps(state) {
|
||||||
selectedVideoInputId: tabState.selectedVideoInputId
|
selectedVideoInputId: tabState.selectedVideoInputId
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
styles: 'settings-pane devices-pane',
|
styles: `${classes.settingsDialog} devices-pane`,
|
||||||
submit: submitDeviceSelectionTab
|
submit: submitDeviceSelectionTab
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -184,7 +302,7 @@ function _mapStateToProps(state) {
|
||||||
component: ProfileTab,
|
component: ProfileTab,
|
||||||
label: 'profile.title',
|
label: 'profile.title',
|
||||||
props: getProfileTabProps(state),
|
props: getProfileTabProps(state),
|
||||||
styles: 'settings-pane profile-pane',
|
styles: `${classes.settingsDialog} profile-pane`,
|
||||||
submit: submitProfileTab
|
submit: submitProfileTab
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -206,7 +324,7 @@ function _mapStateToProps(state) {
|
||||||
startReactionsMuted: tabState?.startReactionsMuted
|
startReactionsMuted: tabState?.startReactionsMuted
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
styles: 'settings-pane moderator-pane',
|
styles: `${classes.settingsDialog} moderator-pane`,
|
||||||
submit: submitModeratorTab
|
submit: submitModeratorTab
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -216,7 +334,7 @@ function _mapStateToProps(state) {
|
||||||
name: SETTINGS_TABS.CALENDAR,
|
name: SETTINGS_TABS.CALENDAR,
|
||||||
component: CalendarTab,
|
component: CalendarTab,
|
||||||
label: 'settings.calendar.title',
|
label: 'settings.calendar.title',
|
||||||
styles: 'settings-pane calendar-pane'
|
styles: `${classes.settingsDialog} calendar-pane`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -226,7 +344,7 @@ function _mapStateToProps(state) {
|
||||||
component: SoundsTab,
|
component: SoundsTab,
|
||||||
label: 'settings.sounds',
|
label: 'settings.sounds',
|
||||||
props: getSoundsTabProps(state),
|
props: getSoundsTabProps(state),
|
||||||
styles: 'settings-pane profile-pane',
|
styles: `${classes.settingsDialog} profile-pane`,
|
||||||
submit: submitSoundsTab
|
submit: submitSoundsTab
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -249,7 +367,7 @@ function _mapStateToProps(state) {
|
||||||
enabledNotifications: tabState?.enabledNotifications
|
enabledNotifications: tabState?.enabledNotifications
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
styles: 'settings-pane more-pane',
|
styles: `${classes.settingsDialog} more-pane`,
|
||||||
submit: submitMoreTab
|
submit: submitMoreTab
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -257,4 +375,4 @@ function _mapStateToProps(state) {
|
||||||
return { _tabs: tabs };
|
return { _tabs: tabs };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(_mapStateToProps)(SettingsDialog);
|
export default withStyles(styles)(connect(_mapStateToProps)(SettingsDialog));
|
||||||
|
|
Loading…
Reference in New Issue