convert settings application component
This commit is contained in:
Ramón Souza
parent
aef73a1da5
commit
2608c81fcd
@ -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 = (
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col} aria-hidden="true">
|
||||
<div className={styles.formElement}>
|
||||
<span className={styles.label}>
|
||||
<Styled.Row>
|
||||
<Styled.Col aria-hidden="true">
|
||||
<Styled.FormElement>
|
||||
<Styled.Label>
|
||||
{intl.formatMessage(intlMessages.audioFilterLabel)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
{displaySettingsStatus(audioFilterStatus)}
|
||||
<Toggle
|
||||
icons={false}
|
||||
@ -277,9 +278,9 @@ class ApplicationMenu extends BaseMenu {
|
||||
ariaLabel={intl.formatMessage(intlMessages.audioFilterLabel)}
|
||||
showToggleLabel={showToggleLabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
);
|
||||
}
|
||||
|
||||
@ -294,17 +295,17 @@ class ApplicationMenu extends BaseMenu {
|
||||
const { settings } = this.state;
|
||||
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col} aria-hidden="true">
|
||||
<div className={styles.formElement}>
|
||||
<Styled.Row>
|
||||
<Styled.Col aria-hidden="true">
|
||||
<Styled.FormElement>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label className={styles.label}>
|
||||
<Styled.Label>
|
||||
{intl.formatMessage(intlMessages.paginationEnabledLabel)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
{displaySettingsStatus(settings.paginationEnabled)}
|
||||
<Toggle
|
||||
icons={false}
|
||||
@ -313,9 +314,9 @@ class ApplicationMenu extends BaseMenu {
|
||||
ariaLabel={intl.formatMessage(intlMessages.paginationEnabledLabel)}
|
||||
showToggleLabel={showToggleLabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
);
|
||||
}
|
||||
|
||||
@ -335,18 +336,17 @@ class ApplicationMenu extends BaseMenu {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label htmlFor="layoutList" className={styles.label}>
|
||||
<Styled.Row>
|
||||
<Styled.Col>
|
||||
<Styled.FormElement>
|
||||
<Styled.Label htmlFor="layoutList">
|
||||
{intl.formatMessage(intlMessages.layoutOptionLabel)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
<select
|
||||
className={styles.select}
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
<Styled.Select
|
||||
onChange={(e) => this.handleSelectChange('selectedLayout', e)}
|
||||
id="layoutList"
|
||||
value={settings.selectedLayout}
|
||||
@ -355,10 +355,10 @@ class ApplicationMenu extends BaseMenu {
|
||||
Object.values(LAYOUT_TYPE)
|
||||
.map((layout) => <option key={layout} value={layout}>{intl.formatMessage(intlMessages[`${layout}Layout`])}</option>)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.Select>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -389,23 +389,22 @@ class ApplicationMenu extends BaseMenu {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h3 className={styles.title}>
|
||||
<Styled.Title>
|
||||
{intl.formatMessage(intlMessages.applicationSectionTitle)}
|
||||
</h3>
|
||||
</Styled.Title>
|
||||
</div>
|
||||
<div className={styles.form}>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col} aria-hidden="true">
|
||||
<div className={styles.formElement}>
|
||||
<Styled.Form>
|
||||
<Styled.Row>
|
||||
<Styled.Col aria-hidden="true">
|
||||
<Styled.FormElement>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label className={styles.label}>
|
||||
<Styled.Label>
|
||||
{intl.formatMessage(intlMessages.animationsLabel)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
{displaySettingsStatus(settings.animations)}
|
||||
<Toggle
|
||||
icons={false}
|
||||
@ -414,69 +413,69 @@ class ApplicationMenu extends BaseMenu {
|
||||
ariaLabel={intl.formatMessage(intlMessages.animationsLabel)}
|
||||
showToggleLabel={showToggleLabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
|
||||
{this.renderAudioFilters()}
|
||||
{this.renderPaginationToggle()}
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label
|
||||
className={styles.label}
|
||||
<Styled.Row>
|
||||
<Styled.Col>
|
||||
<Styled.FormElement>
|
||||
<Styled.Label
|
||||
htmlFor="langSelector"
|
||||
aria-label={intl.formatMessage(intlMessages.languageLabel)}
|
||||
>
|
||||
{intl.formatMessage(intlMessages.languageLabel)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<span className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
{showSelect ? (
|
||||
<LocalesDropdown
|
||||
allLocales={allLocales}
|
||||
handleChange={(e) => this.handleSelectChange('locale', e)}
|
||||
value={settings.locale}
|
||||
elementId="langSelector"
|
||||
elementClass={styles.select}
|
||||
selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)}
|
||||
/>
|
||||
<Styled.LocalesDropdownSelect>
|
||||
<LocalesDropdown
|
||||
allLocales={allLocales}
|
||||
handleChange={(e) => this.handleSelectChange('locale', e)}
|
||||
value={settings.locale}
|
||||
elementId="langSelector"
|
||||
selectMessage={intl.formatMessage(intlMessages.languageOptionLabel)}
|
||||
/>
|
||||
</Styled.LocalesDropdownSelect>
|
||||
) : (
|
||||
<div className={styles.spinnerOverlay}>
|
||||
<div className={styles.bounce1} />
|
||||
<div className={styles.bounce2} />
|
||||
<Styled.SpinnerOverlay animations={animations}>
|
||||
<Styled.Bounce1 animations={animations} />
|
||||
<Styled.Bounce2 animations={animations} />
|
||||
<div />
|
||||
</div>
|
||||
</Styled.SpinnerOverlay>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
|
||||
<hr className={styles.separator} />
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<Styled.Separator />
|
||||
<Styled.Row>
|
||||
<Styled.Col>
|
||||
<Styled.FormElement>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label className={styles.label}>
|
||||
<Styled.Label>
|
||||
{intl.formatMessage(intlMessages.fontSizeControlLabel)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div aria-hidden className={cx(styles.formElement, styles.pullContentCenter)}>
|
||||
</Styled.Label>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementCenter aria-hidden>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label className={cx(styles.label, styles.bold)}>
|
||||
<Styled.BoldLabel>
|
||||
{`${pixelPercentage[settings.fontSize]}`}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={cx(styles.formElement, styles.pullContentRight)}>
|
||||
<div className={styles.pullContentRight}>
|
||||
<div className={styles.col}>
|
||||
</Styled.BoldLabel>
|
||||
</Styled.FormElementCenter>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElementRight>
|
||||
<Styled.PullContentRight>
|
||||
<Styled.Col>
|
||||
<Button
|
||||
onClick={() => this.handleDecreaseFontSize()}
|
||||
color="primary"
|
||||
@ -487,8 +486,8 @@ class ApplicationMenu extends BaseMenu {
|
||||
aria-label={`${intl.formatMessage(intlMessages.decreaseFontBtnLabel)}, ${ariaValueLabel}`}
|
||||
disabled={isSmallestFontSize}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Button
|
||||
onClick={() => this.handleIncreaseFontSize()}
|
||||
color="primary"
|
||||
@ -499,13 +498,13 @@ class ApplicationMenu extends BaseMenu {
|
||||
aria-label={`${intl.formatMessage(intlMessages.increaseFontBtnLabel)}, ${ariaValueLabel}`}
|
||||
disabled={isLargestFontSize}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.Col>
|
||||
</Styled.PullContentRight>
|
||||
</Styled.FormElementRight>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
{this.renderChangeLayout()}
|
||||
</div>
|
||||
</Styled.Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user