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

convert settings application component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-05 13:46:14 +00:00
parent aef73a1da5
commit 2608c81fcd
2 changed files with 282 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
View File

@ -1,19 +1,20 @@
import React from 'react'; import React from 'react';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component'; import Button from '/imports/ui/components/button/component';
import Toggle from '/imports/ui/components/switch/component'; import Toggle from '/imports/ui/components/switch/component';
import LocalesDropdown from '/imports/ui/components/locales-dropdown/component'; import LocalesDropdown from '/imports/ui/components/locales-dropdown/component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import BaseMenu from '../base/component'; import BaseMenu from '../base/component';
import { styles } from '../styles'; import Styled from './styles';
import VideoService from '/imports/ui/components/video-provider/service'; import VideoService from '/imports/ui/components/video-provider/service';
import { ACTIONS, LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; import { ACTIONS, LAYOUT_TYPE } from '/imports/ui/components/layout/enums';
import Settings from '/imports/ui/services/settings';
const MIN_FONTSIZE = 0; const MIN_FONTSIZE = 0;
const SHOW_AUDIO_FILTERS = (Meteor.settings.public.app const SHOW_AUDIO_FILTERS = (Meteor.settings.public.app
.showAudioFilters === undefined) .showAudioFilters === undefined)
? true ? true
: Meteor.settings.public.app.showAudioFilters; : Meteor.settings.public.app.showAudioFilters;
const { animations } = Settings.application;
const intlMessages = defineMessages({ const intlMessages = defineMessages({
applicationSectionTitle: { applicationSectionTitle: {
@ -259,16 +260,16 @@ class ApplicationMenu extends BaseMenu {
.isAudioFilterEnabled(settings.microphoneConstraints); .isAudioFilterEnabled(settings.microphoneConstraints);
audioFilterOption = ( audioFilterOption = (
<div className={styles.row}> <Styled.Row>
<div className={styles.col} aria-hidden="true"> <Styled.Col aria-hidden="true">
<div className={styles.formElement}> <Styled.FormElement>
<span className={styles.label}> <Styled.Label>
{intl.formatMessage(intlMessages.audioFilterLabel)} {intl.formatMessage(intlMessages.audioFilterLabel)}
</span> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
{displaySettingsStatus(audioFilterStatus)} {displaySettingsStatus(audioFilterStatus)}
<Toggle <Toggle
icons={false} icons={false}
@ -277,9 +278,9 @@ class ApplicationMenu extends BaseMenu {
ariaLabel={intl.formatMessage(intlMessages.audioFilterLabel)} ariaLabel={intl.formatMessage(intlMessages.audioFilterLabel)}
showToggleLabel={showToggleLabel} showToggleLabel={showToggleLabel}
/> />
</div> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
); );
} }
@ -294,17 +295,17 @@ class ApplicationMenu extends BaseMenu {
const { settings } = this.state; const { settings } = this.state;
return ( return (
<div className={styles.row}> <Styled.Row>
<div className={styles.col} aria-hidden="true"> <Styled.Col aria-hidden="true">
<div className={styles.formElement}> <Styled.FormElement>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label className={styles.label}> <Styled.Label>
{intl.formatMessage(intlMessages.paginationEnabledLabel)} {intl.formatMessage(intlMessages.paginationEnabledLabel)}
</label> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
{displaySettingsStatus(settings.paginationEnabled)} {displaySettingsStatus(settings.paginationEnabled)}
<Toggle <Toggle
icons={false} icons={false}
@ -313,9 +314,9 @@ class ApplicationMenu extends BaseMenu {
ariaLabel={intl.formatMessage(intlMessages.paginationEnabledLabel)} ariaLabel={intl.formatMessage(intlMessages.paginationEnabledLabel)}
showToggleLabel={showToggleLabel} showToggleLabel={showToggleLabel}
/> />
</div> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
); );
} }
@ -335,18 +336,17 @@ class ApplicationMenu extends BaseMenu {
return ( return (
<> <>
<div className={styles.row}> <Styled.Row>
<div className={styles.col}> <Styled.Col>
<div className={styles.formElement}> <Styled.FormElement>
<label htmlFor="layoutList" className={styles.label}> <Styled.Label htmlFor="layoutList">
{intl.formatMessage(intlMessages.layoutOptionLabel)} {intl.formatMessage(intlMessages.layoutOptionLabel)}
</label> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
<select <Styled.Select
className={styles.select}
onChange={(e) => this.handleSelectChange('selectedLayout', e)} onChange={(e) => this.handleSelectChange('selectedLayout', e)}
id="layoutList" id="layoutList"
value={settings.selectedLayout} value={settings.selectedLayout}
@ -355,10 +355,10 @@ class ApplicationMenu extends BaseMenu {
Object.values(LAYOUT_TYPE) Object.values(LAYOUT_TYPE)
.map((layout) => <option key={layout} value={layout}>{intl.formatMessage(intlMessages[`${layout}Layout`])}</option>) .map((layout) => <option key={layout} value={layout}>{intl.formatMessage(intlMessages[`${layout}Layout`])}</option>)
} }
</select> </Styled.Select>
</div> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
</> </>
); );
} }
@ -389,23 +389,22 @@ class ApplicationMenu extends BaseMenu {
return ( return (
<div> <div>
<div> <div>
<h3 className={styles.title}> <Styled.Title>
{intl.formatMessage(intlMessages.applicationSectionTitle)} {intl.formatMessage(intlMessages.applicationSectionTitle)}
</h3> </Styled.Title>
</div> </div>
<div className={styles.form}> <Styled.Form>
<Styled.Row>
<div className={styles.row}> <Styled.Col aria-hidden="true">
<div className={styles.col} aria-hidden="true"> <Styled.FormElement>
<div className={styles.formElement}>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label className={styles.label}> <Styled.Label>
{intl.formatMessage(intlMessages.animationsLabel)} {intl.formatMessage(intlMessages.animationsLabel)}
</label> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
{displaySettingsStatus(settings.animations)} {displaySettingsStatus(settings.animations)}
<Toggle <Toggle
icons={false} icons={false}
@ -414,69 +413,69 @@ class ApplicationMenu extends BaseMenu {
ariaLabel={intl.formatMessage(intlMessages.animationsLabel)} ariaLabel={intl.formatMessage(intlMessages.animationsLabel)}
showToggleLabel={showToggleLabel} showToggleLabel={showToggleLabel}
/> />
</div> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
{this.renderAudioFilters()} {this.renderAudioFilters()}
{this.renderPaginationToggle()} {this.renderPaginationToggle()}
<div className={styles.row}> <Styled.Row>
<div className={styles.col}> <Styled.Col>
<div className={styles.formElement}> <Styled.FormElement>
<label <Styled.Label
className={styles.label}
htmlFor="langSelector" htmlFor="langSelector"
aria-label={intl.formatMessage(intlMessages.languageLabel)} aria-label={intl.formatMessage(intlMessages.languageLabel)}
> >
{intl.formatMessage(intlMessages.languageLabel)} {intl.formatMessage(intlMessages.languageLabel)}
</label> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<span className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
{showSelect ? ( {showSelect ? (
<LocalesDropdown <Styled.LocalesDropdownSelect>
allLocales={allLocales} <LocalesDropdown
handleChange={(e) => this.handleSelectChange('locale', e)} allLocales={allLocales}
value={settings.locale} handleChange={(e) => this.handleSelectChange('locale', e)}
elementId="langSelector" value={settings.locale}
elementClass={styles.select} elementId="langSelector"
selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)} selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)}
/> />
</Styled.LocalesDropdownSelect>
) : ( ) : (
<div className={styles.spinnerOverlay}> <Styled.SpinnerOverlay animations={animations}>
<div className={styles.bounce1} /> <Styled.Bounce1 animations={animations} />
<div className={styles.bounce2} /> <Styled.Bounce2 animations={animations} />
<div /> <div />
</div> </Styled.SpinnerOverlay>
)} )}
</span> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
<hr className={styles.separator} /> <Styled.Separator />
<div className={styles.row}> <Styled.Row>
<div className={styles.col}> <Styled.Col>
<div className={styles.formElement}> <Styled.FormElement>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label className={styles.label}> <Styled.Label>
{intl.formatMessage(intlMessages.fontSizeControlLabel)} {intl.formatMessage(intlMessages.fontSizeControlLabel)}
</label> </Styled.Label>
</div> </Styled.FormElement>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div aria-hidden className={cx(styles.formElement, styles.pullContentCenter)}> <Styled.FormElementCenter aria-hidden>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label className={cx(styles.label, styles.bold)}> <Styled.BoldLabel>
{`${pixelPercentage[settings.fontSize]}`} {`${pixelPercentage[settings.fontSize]}`}
</label> </Styled.BoldLabel>
</div> </Styled.FormElementCenter>
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<div className={cx(styles.formElement, styles.pullContentRight)}> <Styled.FormElementRight>
<div className={styles.pullContentRight}> <Styled.PullContentRight>
<div className={styles.col}> <Styled.Col>
<Button <Button
onClick={() => this.handleDecreaseFontSize()} onClick={() => this.handleDecreaseFontSize()}
color="primary" color="primary"
@ -487,8 +486,8 @@ class ApplicationMenu extends BaseMenu {
aria-label={`${intl.formatMessage(intlMessages.decreaseFontBtnLabel)}, ${ariaValueLabel}`} aria-label={`${intl.formatMessage(intlMessages.decreaseFontBtnLabel)}, ${ariaValueLabel}`}
disabled={isSmallestFontSize} disabled={isSmallestFontSize}
/> />
</div> </Styled.Col>
<div className={styles.col}> <Styled.Col>
<Button <Button
onClick={() => this.handleIncreaseFontSize()} onClick={() => this.handleIncreaseFontSize()}
color="primary" color="primary"
@ -499,13 +498,13 @@ class ApplicationMenu extends BaseMenu {
aria-label={`${intl.formatMessage(intlMessages.increaseFontBtnLabel)}, ${ariaValueLabel}`} aria-label={`${intl.formatMessage(intlMessages.increaseFontBtnLabel)}, ${ariaValueLabel}`}
disabled={isLargestFontSize} disabled={isLargestFontSize}
/> />
</div> </Styled.Col>
</div> </Styled.PullContentRight>
</div> </Styled.FormElementRight>
</div> </Styled.Col>
</div> </Styled.Row>
{this.renderChangeLayout()} {this.renderChangeLayout()}
</div> </Styled.Form>
</div> </div>
); );
} }

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

@ -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,
};