diff --git a/bigbluebutton-html5/imports/ui/components/settings/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/component.jsx
index a8b5da9736c78b347211ff04c554c89c9d2e88e2..c27a3fc662571829d54f46e195df9abcbdfa6c94 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/component.jsx
@@ -63,6 +63,14 @@ const intlMessages = defineMessages({
id: 'app.settings.save-notification.label',
description: 'label shown in toast when settings are saved',
},
+ on: {
+ id: 'app.switch.onLabel',
+ description: 'label for toggle switch on state',
+ },
+ off: {
+ id: 'app.switch.offLabel',
+ description: 'label for toggle switch off state',
+ },
});
const propTypes = {
@@ -88,6 +96,7 @@ const propTypes = {
updateSettings: PropTypes.func.isRequired,
availableLocales: PropTypes.objectOf(PropTypes.array).isRequired,
mountModal: PropTypes.func.isRequired,
+ showToggleLabel: PropTypes.bool.isRequired,
};
class Settings extends Component {
@@ -117,6 +126,7 @@ class Settings extends Component {
this.updateSettings = props.updateSettings;
this.handleUpdateSettings = this.handleUpdateSettings.bind(this);
this.handleSelectTab = this.handleSelectTab.bind(this);
+ this.displaySettingsStatus = this.displaySettingsStatus.bind(this);
}
componentDidMount() {
@@ -139,10 +149,22 @@ class Settings extends Component {
});
}
+ displaySettingsStatus(status) {
+ const { intl } = this.props;
+
+ return (
+ <span className={styles.toggleLabel}>
+ {status ? intl.formatMessage(intlMessages.on)
+ : intl.formatMessage(intlMessages.off)}
+ </span>
+ );
+ }
+
renderModalContent() {
const {
intl,
isModerator,
+ showToggleLabel,
} = this.props;
const {
@@ -168,13 +190,8 @@ class Settings extends Component {
<Icon iconName="application" className={styles.icon} />
<span id="appTab">{intl.formatMessage(intlMessages.appTabLabel)}</span>
</Tab>
- {/* <Tab className={styles.tabSelector} aria-labelledby="videoTab"> */}
- {/* <Icon iconName='video' className={styles.icon}/> */}
- {/* <span id="videoTab">{intl.formatMessage(intlMessages.videoTabLabel)}</span> */}
- {/* </Tab> */}
<Tab
className={styles.tabSelector}
- // aria-labelledby="appTab"
selectedClassName={styles.selected}
>
<Icon iconName="alert" className={styles.icon} />
@@ -188,37 +205,31 @@ class Settings extends Component {
<Icon iconName="network" className={styles.icon} />
<span id="dataSaving">{intl.formatMessage(intlMessages.dataSavingLabel)}</span>
</Tab>
- {/* { isModerator ? */}
- {/* <Tab className={styles.tabSelector} aria-labelledby="usersTab"> */}
- {/* <Icon iconName="user" className={styles.icon} /> */}
- {/* <span id="usersTab">{intl.formatMessage(intlMessages.usersTabLabel)}</span> */}
- {/* </Tab> */}
- {/* : null } */}
</TabList>
<TabPanel className={styles.tabPanel}>
<Application
allLocales={allLocales}
handleUpdateSettings={this.handleUpdateSettings}
settings={current.application}
+ showToggleLabel={showToggleLabel}
+ displaySettingsStatus={this.displaySettingsStatus}
/>
</TabPanel>
<TabPanel className={styles.tabPanel}>
<Notification
handleUpdateSettings={this.handleUpdateSettings}
settings={current.application}
+ showToggleLabel={showToggleLabel}
+ displaySettingsStatus={this.displaySettingsStatus}
{...{ isModerator }}
/>
</TabPanel>
- {/* <TabPanel className={styles.tabPanel}> */}
- {/* <Video */}
- {/* handleUpdateSettings={this.handleUpdateSettings} */}
- {/* settings={this.state.current.video} */}
- {/* /> */}
- {/* </TabPanel> */}
<TabPanel className={styles.tabPanel}>
<DataSaving
settings={current.dataSaving}
handleUpdateSettings={this.handleUpdateSettings}
+ showToggleLabel={showToggleLabel}
+ displaySettingsStatus={this.displaySettingsStatus}
/>
</TabPanel>
</Tabs>
diff --git a/bigbluebutton-html5/imports/ui/components/settings/container.jsx b/bigbluebutton-html5/imports/ui/components/settings/container.jsx
index 4f68d638e4c7d24d21b1ea5c347782ea19f8edf5..7442eabc2bacf6b5ea7b2247d8ec89ac5e428dc8 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/container.jsx
@@ -20,4 +20,5 @@ export default withTracker(() => ({
updateSettings,
availableLocales: getAvailableLocales(),
isModerator: getUserRoles() === 'MODERATOR',
+ showToggleLabel: false,
}))(SettingsContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/settings/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
index 6d3aacb6581c329f4168d25df7e7cb67ec8122fd..69203ad4dc610b283f01afb53fd027984030e345 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
@@ -100,3 +100,11 @@
.selectedTab {
display: block;
}
+
+.toggleLabel {
+ margin-right: var(--sm-padding-x);
+
+ [dir="rtl"] & {
+ margin: 0 0 0 var(--sm-padding-x);
+ }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
index 4e38f60e101b09557ad2a089c53211045cde9b1f..4ad6c6787ac53f259c3f57d2a886273f17b5d20f 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
@@ -208,7 +208,8 @@ class ApplicationMenu extends BaseMenu {
// See VideoService's method for an explanation
if (!VideoService.shouldRenderPaginationToggle()) return;
- const { intl } = this.props;
+ const { intl, showToggleLabel, displaySettingsStatus } = this.props;
+ const { settings } = this.state;
return (
<div className={styles.row}>
@@ -221,11 +222,13 @@ class ApplicationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentRight)}>
+ {displaySettingsStatus(settings.paginationEnabled)}
<Toggle
icons={false}
- defaultChecked={this.state.settings.paginationEnabled}
+ defaultChecked={settings.paginationEnabled}
onChange={() => this.handleToggle('paginationEnabled')}
ariaLabel={intl.formatMessage(intlMessages.paginationEnabledLabel)}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -234,7 +237,9 @@ class ApplicationMenu extends BaseMenu {
}
render() {
- const { allLocales, intl } = this.props;
+ const {
+ allLocales, intl, showToggleLabel, displaySettingsStatus,
+ } = this.props;
const {
isLargestFontSize, isSmallestFontSize, settings,
} = this.state;
@@ -273,11 +278,13 @@ class ApplicationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentRight)}>
+ {displaySettingsStatus(settings.animations)}
<Toggle
icons={false}
- defaultChecked={this.state.settings.animations}
+ defaultChecked={settings.animations}
onChange={() => this.handleToggle('animations')}
ariaLabel={intl.formatMessage(intlMessages.animationsLabel)}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -293,11 +300,13 @@ class ApplicationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentRight)}>
+ {displaySettingsStatus(ApplicationMenu.isAudioFilterEnabled(settings.microphoneConstraints))}
<Toggle
icons={false}
defaultChecked={this.state.audioFilterEnabled}
onChange={() => this.handleAudioFilterChange()}
ariaLabel={intl.formatMessage(intlMessages.audioFilterLabel)}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -323,7 +332,7 @@ class ApplicationMenu extends BaseMenu {
<LocalesDropdown
allLocales={allLocales}
handleChange={e => this.handleSelectChange('locale', allLocales, e)}
- value={this.state.settings.locale}
+ value={settings.locale}
elementId="langSelector"
elementClass={styles.select}
selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)}
@@ -353,7 +362,7 @@ class ApplicationMenu extends BaseMenu {
<div className={styles.col}>
<div aria-hidden className={cx(styles.formElement, styles.pullContentCenter)}>
<label className={cx(styles.label, styles.bold)}>
- {`${pixelPercentage[this.state.settings.fontSize]}`}
+ {`${pixelPercentage[settings.fontSize]}`}
</label>
</div>
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
index 365011fedcdcc4a8aad784c64b1e4805d931a510..48662ff352f145a64ca0de24992fa93a60fce3bd 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
@@ -35,7 +35,7 @@ class DataSaving extends BaseMenu {
}
render() {
- const { intl } = this.props;
+ const { intl, showToggleLabel, displaySettingsStatus } = this.props;
const { viewParticipantsWebcams, viewScreenshare } = this.state.settings;
@@ -56,12 +56,14 @@ class DataSaving extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentRight)}>
+ {displaySettingsStatus(viewParticipantsWebcams)}
<Toggle
icons={false}
defaultChecked={viewParticipantsWebcams}
onChange={() => this.handleToggle('viewParticipantsWebcams')}
ariaLabelledBy="webcamToggle"
ariaLabel={intl.formatMessage(intlMessages.webcamLabel)}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -76,12 +78,14 @@ class DataSaving extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentRight)}>
+ {displaySettingsStatus(viewScreenshare)}
<Toggle
icons={false}
defaultChecked={viewScreenshare}
onChange={() => this.handleToggle('viewScreenshare')}
ariaLabelledBy="screenShare"
ariaLabel={intl.formatMessage(intlMessages.screenShareLabel)}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx
index 23cbf8a9dbd3302517f14d8691bd75d812d3db34..b058762443f9567ec0148fa021763ab0b7ae4e0a 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx
@@ -53,7 +53,9 @@ class NotificationMenu extends BaseMenu {
}
render() {
- const { intl, isModerator } = this.props;
+ const {
+ intl, isModerator, showToggleLabel, displaySettingsStatus,
+ } = this.props;
const { settings } = this.state;
return (
@@ -85,21 +87,25 @@ class NotificationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.chatAudioAlerts)}
<Toggle
icons={false}
defaultChecked={settings.chatAudioAlerts}
onChange={() => this.handleToggle('chatAudioAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.messagesLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.chatPushAlerts)}
<Toggle
icons={false}
defaultChecked={settings.chatPushAlerts}
onChange={() => this.handleToggle('chatPushAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.messagesLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -114,21 +120,25 @@ class NotificationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.userJoinAudioAlerts)}
<Toggle
icons={false}
defaultChecked={settings.userJoinAudioAlerts}
onChange={() => this.handleToggle('userJoinAudioAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.userJoinLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.userJoinPushAlerts)}
<Toggle
icons={false}
defaultChecked={settings.userJoinPushAlerts}
onChange={() => this.handleToggle('userJoinPushAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.userJoinLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -143,21 +153,25 @@ class NotificationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.guestWaitingAudioAlerts)}
<Toggle
icons={false}
defaultChecked={settings.guestWaitingAudioAlerts}
onChange={() => this.handleToggle('guestWaitingAudioAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.guestWaitingLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.guestWaitingPushAlerts)}
<Toggle
icons={false}
defaultChecked={settings.guestWaitingPushAlerts}
onChange={() => this.handleToggle('guestWaitingPushAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.guestWaitingLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
@@ -173,21 +187,25 @@ class NotificationMenu extends BaseMenu {
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.raiseHandAudioAlerts)}
<Toggle
icons={false}
defaultChecked={settings.raiseHandAudioAlerts}
onChange={() => this.handleToggle('raiseHandAudioAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.raiseHandLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
+ {displaySettingsStatus(settings.raiseHandPushAlerts)}
<Toggle
icons={false}
defaultChecked={settings.raiseHandPushAlerts}
onChange={() => this.handleToggle('raiseHandPushAlerts')}
ariaLabel={`${intl.formatMessage(intlMessages.raiseHandLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
+ showToggleLabel={showToggleLabel}
/>
</div>
</div>