BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert settings notification component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-05 14:18:04 +00:00
parent a218f370f8
commit 0272974f0f
4 changed files with 138 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js
View File

@ -62,14 +62,7 @@ const Separator = styled.hr`
opacity: 0.25;
`;
const FormElementCenter = styled.div`
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
flex-flow: row;
align-items: center;
`;
const FormElementCenter = styled(Styled.FormElementCenter)``;
const BoldLabel = styled.label`
color: ${colorGrayLabel};

171
bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import cx from 'classnames';
import Toggle from '/imports/ui/components/switch/component';
import { defineMessages, injectIntl } from 'react-intl';
import BaseMenu from '../base/component';
import { styles } from '../styles.scss';
import Styled from './styles';
const CHAT_ENABLED = Meteor.settings.public.chat.enabled;
@ -70,32 +69,34 @@ class NotificationMenu extends BaseMenu {
return (
<div>
<div>
<h3 className={styles.title}>
<Styled.Title>
{intl.formatMessage(intlMessages.notificationSectionTitle)}
</h3>
<h4 className={styles.subtitle}>{intl.formatMessage(intlMessages.notificationSectionDesc)}</h4>
</Styled.Title>
<Styled.SubTitle>
{intl.formatMessage(intlMessages.notificationSectionDesc)}
</Styled.SubTitle>
</div>
<div className={styles.form}>
<div className={styles.row}>
<div className={styles.col} />
<div className={cx(styles.col, styles.colHeading)}>
<Styled.Form>
<Styled.Row>
<Styled.Col />
<Styled.ColHeading>
{intl.formatMessage(intlMessages.audioAlertLabel)}
</div>
<div className={cx(styles.col, styles.colHeading)}>
</Styled.ColHeading>
<Styled.ColHeading>
{intl.formatMessage(intlMessages.pushAlertLabel)}
</div>
</div>
</Styled.ColHeading>
</Styled.Row>
{CHAT_ENABLED ? (
<div className={styles.row}>
<div className={styles.col}>
<label className={styles.label}>
<Styled.Row>
<Styled.Col>
<Styled.Label>
{intl.formatMessage(intlMessages.messagesLabel)}
</label>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.Label>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.chatAudioAlerts)}
<Toggle
icons={false}
@ -104,10 +105,10 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.messagesLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.FormElementCenter>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.chatPushAlerts)}
<Toggle
icons={false}
@ -116,19 +117,19 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.messagesLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>) : null
}
</Styled.FormElementCenter>
</Styled.Col>
</Styled.Row>
) : null}
<div className={styles.row}>
<div className={styles.col}>
<label className={styles.label}>
<Styled.Row>
<Styled.Col>
<Styled.Label>
{intl.formatMessage(intlMessages.userJoinLabel)}
</label>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.Label>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.userJoinAudioAlerts)}
<Toggle
icons={false}
@ -137,10 +138,10 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.userJoinLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.FormElementCenter>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.userJoinPushAlerts)}
<Toggle
icons={false}
@ -149,18 +150,18 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.userJoinLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
</Styled.FormElementCenter>
</Styled.Col>
</Styled.Row>
<div className={styles.row}>
<div className={styles.col}>
<label className={styles.label}>
<Styled.Row>
<Styled.Col>
<Styled.Label>
{intl.formatMessage(intlMessages.userLeaveLabel)}
</label>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.Label>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.userLeaveAudioAlerts)}
<Toggle
icons={false}
@ -169,10 +170,10 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.userLeaveLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.FormElementCenter>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.userLeavePushAlerts)}
<Toggle
icons={false}
@ -181,19 +182,19 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.userLeaveLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
</Styled.FormElementCenter>
</Styled.Col>
</Styled.Row>
{isModerator && showGuestNotification ? (
<div className={styles.row}>
<div className={styles.col}>
<label className={styles.label}>
<Styled.Row>
<Styled.Col>
<Styled.Label>
{intl.formatMessage(intlMessages.guestWaitingLabel)}
</label>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.Label>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.guestWaitingAudioAlerts)}
<Toggle
icons={false}
@ -202,10 +203,10 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.guestWaitingLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.FormElementCenter>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.guestWaitingPushAlerts)}
<Toggle
icons={false}
@ -214,20 +215,20 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.guestWaitingLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
</Styled.FormElementCenter>
</Styled.Col>
</Styled.Row>
) : null}
{isModerator ? (
<div className={styles.row}>
<div className={styles.col}>
<label className={styles.label}>
<Styled.Row>
<Styled.Col>
<Styled.Label>
{intl.formatMessage(intlMessages.raiseHandLabel)}
</label>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.Label>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.raiseHandAudioAlerts)}
<Toggle
icons={false}
@ -236,10 +237,10 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.raiseHandLabel)} ${intl.formatMessage(intlMessages.audioAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
<div className={styles.col}>
<div className={cx(styles.formElement, styles.pullContentCenter)}>
</Styled.FormElementCenter>
</Styled.Col>
<Styled.Col>
<Styled.FormElementCenter>
{displaySettingsStatus(settings.raiseHandPushAlerts)}
<Toggle
icons={false}
@ -248,12 +249,12 @@ class NotificationMenu extends BaseMenu {
ariaLabel={`${intl.formatMessage(intlMessages.raiseHandLabel)} ${intl.formatMessage(intlMessages.pushAlertLabel)}`}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
</Styled.FormElementCenter>
</Styled.Col>
</Styled.Row>
) : null}
</div>
</Styled.Form>
</div>
);
}

41
bigbluebutton-html5/imports/ui/components/settings/submenus/notification/styles.js Normal file
View File

@ -0,0 +1,41 @@
import styled from 'styled-components';
import Styled from '/imports/ui/components/settings/submenus/styles';
const Title = styled(Styled.Title)``;
const SubTitle = styled(Styled.SubTitle)``;
const Form = styled(Styled.Form)``;
const Row = styled(Styled.Row)``;
const Col = styled(Styled.Col)``;
const FormElement = styled(Styled.FormElement)``;
const FormElementRight = styled(Styled.FormElementRight)``;
const FormElementCenter = styled(Styled.FormElementCenter)``;
const Label = styled(Styled.Label)``;
const ColHeading = styled(Styled.Col)`
display: block;
text-align: center;
font-size: 0.9rem;
margin-bottom: 0.5rem;
font-weight: bold;
`;
export default {
Title,
SubTitle,
Form,
Row,
Col,
FormElement,
FormElementRight,
FormElementCenter,
Label,
ColHeading,
};

10
bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js
View File

@ -62,6 +62,15 @@ const FormElementRight = styled.div`
align-items: center;
`;
const FormElementCenter = styled.div`
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
flex-flow: row;
align-items: center;
`;
const Label = styled.span`
color: ${colorGrayLabel};
font-size: 0.9rem;
@ -76,5 +85,6 @@ export default {
Col,
FormElement,
FormElementRight,
FormElementCenter,
Label,
};