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 d9cb650793..9257d09e70 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx @@ -1,19 +1,20 @@ import React from 'react'; -import cx from 'classnames'; import Button from '/imports/ui/components/button/component'; import Toggle from '/imports/ui/components/switch/component'; import LocalesDropdown from '/imports/ui/components/locales-dropdown/component'; import { defineMessages, injectIntl } from 'react-intl'; import BaseMenu from '../base/component'; -import { styles } from '../styles'; +import Styled from './styles'; import VideoService from '/imports/ui/components/video-provider/service'; import { ACTIONS, LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; +import Settings from '/imports/ui/services/settings'; const MIN_FONTSIZE = 0; const SHOW_AUDIO_FILTERS = (Meteor.settings.public.app .showAudioFilters === undefined) ? true : Meteor.settings.public.app.showAudioFilters; +const { animations } = Settings.application; const intlMessages = defineMessages({ applicationSectionTitle: { @@ -259,16 +260,16 @@ class ApplicationMenu extends BaseMenu { .isAudioFilterEnabled(settings.microphoneConstraints); audioFilterOption = ( -
- -
-
+ + + + + {displaySettingsStatus(audioFilterStatus)} -
-
-
+ + + ); } @@ -294,17 +295,17 @@ class ApplicationMenu extends BaseMenu { const { settings } = this.state; return ( -
- -
-
+ + + + + {displaySettingsStatus(settings.paginationEnabled)} -
-
-
+ + + ); } @@ -335,18 +336,17 @@ class ApplicationMenu extends BaseMenu { return ( <> -
-
-
- -
-
-
-
- -
-
-
+ + + + ); } @@ -389,23 +389,22 @@ class ApplicationMenu extends BaseMenu { return (
-

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

+
-
- -
- -
-
+ + + + + {displaySettingsStatus(settings.animations)} -
-
-
+ + + {this.renderAudioFilters()} {this.renderPaginationToggle()} -
-
-
- -
-
-
- + + + + + {showSelect ? ( - this.handleSelectChange('locale', e)} - value={settings.locale} - elementId="langSelector" - elementClass={styles.select} - selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)} - /> + + this.handleSelectChange('locale', e)} + value={settings.locale} + elementId="langSelector" + selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)} + /> + ) : ( -
-
-
+ + +
-
+ )} - -
-
+ + + -
-
-
-
+ + + + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - -
-
-
-
+ + + + + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - -
-
-
-
-
-
+ + + + + + +
-
+ +
-
-
-
-
+ + + + + {this.renderChangeLayout()} -
+
); } diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js new file mode 100644 index 0000000000..2d3268a0a1 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js @@ -0,0 +1,175 @@ +import styled from 'styled-components'; +import { + colorGrayLabel, + colorPrimary, + colorWhite, + colorGrayLighter, + colorGrayDark, +} from '/imports/ui/stylesheets/styled-components/palette'; +import { borderSize, borderSizeLarge } from '/imports/ui/stylesheets/styled-components/general'; +import Styled from '/imports/ui/components/loading-screen/styles'; + +const Row = styled.div` + display: flex; + flex-flow: row; + flex-grow: 1; + justify-content: space-between; + margin-bottom: 0.7rem; +`; + +const Col = styled.div` + display: flex; + flex-grow: 1; + flex-basis: 0; + + &:last-child { + padding-right: 0; + padding-left: 1rem; + + [dir="rtl"] & { + padding-right: 0.1rem; + padding-left: 0; + } + } +`; + +const FormElement = styled.div` + position: relative; + display: flex; + flex-flow: column; + flex-grow: 1; +`; + +const Label = styled.span` + color: ${colorGrayLabel}; + font-size: 0.9rem; + margin-bottom: 0.5rem; +`; + +const FormElementRight = styled.div` + position: relative; + flex-grow: 1; + display: flex; + justify-content: flex-end; + flex-flow: row; + align-items: center; +`; + +const Select = styled.select` + &:focus { + box-shadow: inset 0 0 0 ${borderSizeLarge} ${colorPrimary}; + border-radius: ${borderSize}; + } + + background-color: ${colorWhite}; + border: ${borderSize} solid ${colorWhite}; + border-radius: ${borderSize}; + border-bottom: 0.1rem solid ${colorGrayLighter}; + color: ${colorGrayLabel}; + width: 100%; + height: 1.75rem; + padding: 1px; + + &:hover, + &:focus { + outline: transparent; + outline-style: dotted; + outline-width: ${borderSize}; + } +`; + +const Title = styled.h3` + color: ${colorGrayDark}; + font-weight: 400; + font-size: 1.3rem; + margin: 0; + margin-bottom: 1.5rem; +`; + +const Form = styled.div` + display: flex; + flex-flow: column; +`; + +const SpinnerOverlay = styled(Styled.Spinner)` + & > div { + background-color: black; + } +`; + +const Bounce1 = styled(Styled.Bounce1)``; + +const Bounce2 = styled(Styled.Bounce2)``; + +const Separator = styled.hr` + margin: 2.5rem 0; + border: 1px solid ${colorGrayLighter}; + opacity: 0.25; +`; + +const FormElementCenter = styled.div` + position: relative; + display: flex; + flex-grow: 1; + justify-content: center; + flex-flow: row; + align-items: center; +`; + +const BoldLabel = styled.label` + color: ${colorGrayLabel}; + font-size: 0.9rem; + margin-bottom: 0.5rem; + font-weight: bold; +`; + +const PullContentRight = styled.div` + display: flex; + justify-content: flex-end; + flex-flow: row; + align-items: center; +`; + +const LocalesDropdownSelect = styled.div` + & > select { + &:focus { + box-shadow: inset 0 0 0 ${borderSizeLarge} ${colorPrimary}; + border-radius: ${borderSize}; + } + + background-color: ${colorWhite}; + border: ${borderSize} solid ${colorWhite}; + border-radius: ${borderSize}; + border-bottom: 0.1rem solid ${colorGrayLighter}; + color: ${colorGrayLabel}; + width: 100%; + height: 1.75rem; + padding: 1px; + + &:hover, + &:focus { + outline: transparent; + outline-style: dotted; + outline-width: ${borderSize}; + } + } +`; + +export default { + Row, + Col, + FormElement, + Label, + FormElementRight, + Select, + Title, + Form, + SpinnerOverlay, + Bounce1, + Bounce2, + Separator, + FormElementCenter, + BoldLabel, + PullContentRight, + LocalesDropdownSelect, +};