From 0272974f0f6e8f7403e9347b9590d75ddf334597 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Fri, 5 Nov 2021 14:18:04 +0000 Subject: [PATCH] convert settings notification component --- .../settings/submenus/application/styles.js | 9 +- .../submenus/notification/component.jsx | 171 +++++++++--------- .../settings/submenus/notification/styles.js | 41 +++++ .../ui/components/settings/submenus/styles.js | 10 + 4 files changed, 138 insertions(+), 93 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/settings/submenus/notification/styles.js diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js index 710e1c4a30..0e90bd107d 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js @@ -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}; 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 ce94e76bb1..53141d6f71 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/component.jsx @@ -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 (
-

+ {intl.formatMessage(intlMessages.notificationSectionTitle)} -

-

{intl.formatMessage(intlMessages.notificationSectionDesc)}

+ + + {intl.formatMessage(intlMessages.notificationSectionDesc)} +
-
-
-
-
+ + + + {intl.formatMessage(intlMessages.audioAlertLabel)} -
-
+ + {intl.formatMessage(intlMessages.pushAlertLabel)} -
-
+ + {CHAT_ENABLED ? ( -
-
- -
-
-
+ + + + {displaySettingsStatus(settings.chatAudioAlerts)} -
-
-
-
+ + + + {displaySettingsStatus(settings.chatPushAlerts)} -
-
-
) : null - } + + + + ) : null} -
-
- -
-
-
+ + + + {displaySettingsStatus(settings.userJoinAudioAlerts)} -
-
-
-
+ + + + {displaySettingsStatus(settings.userJoinPushAlerts)} -
-
-
+ + + -
-
- -
-
-
+ + + + {displaySettingsStatus(settings.userLeaveAudioAlerts)} -
-
-
-
+ + + + {displaySettingsStatus(settings.userLeavePushAlerts)} -
-
-
+ + + {isModerator && showGuestNotification ? ( -
-
- -
-
-
+ + + + {displaySettingsStatus(settings.guestWaitingAudioAlerts)} -
-
-
-
+ + + + {displaySettingsStatus(settings.guestWaitingPushAlerts)} -
-
-
+ + + ) : null} {isModerator ? ( -
-
- -
-
-
+ + + + {displaySettingsStatus(settings.raiseHandAudioAlerts)} -
-
-
-
+ + + + {displaySettingsStatus(settings.raiseHandPushAlerts)} -
-
-
+ + + ) : null} -
+
); } diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/styles.js b/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/styles.js new file mode 100644 index 0000000000..369780693d --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/notification/styles.js @@ -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, +}; diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js index 41b8b30ef6..bfb9f7ba3b 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js @@ -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, };