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

convert settings data-saving component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-05 14:06:47 +00:00
parent 2608c81fcd
commit a218f370f8
5 changed files with 151 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,56 +4,20 @@ import {
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';
import SpinnerStyles from '/imports/ui/components/loading-screen/styles';
import Styled from '/imports/ui/components/settings/submenus/styles';
const Row = styled.div`
display: flex;
flex-flow: row;
flex-grow: 1;
justify-content: space-between;
margin-bottom: 0.7rem;
`;
const Row = styled(Styled.Row)``;
const Col = styled.div`
display: flex;
flex-grow: 1;
flex-basis: 0;
const Col = styled(Styled.Col)``;
&:last-child {
padding-right: 0;
padding-left: 1rem;
const FormElement = styled(Styled.FormElement)``;
[dir="rtl"] & {
padding-right: 0.1rem;
padding-left: 0;
}
}
`;
const Label = styled(Styled.Label)``;
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 FormElementRight = styled(Styled.FormElementRight)``;
const Select = styled.select`
&:focus {
@ -78,28 +42,19 @@ const Select = styled.select`
}
`;
const Title = styled.h3`
color: ${colorGrayDark};
font-weight: 400;
font-size: 1.3rem;
margin: 0;
margin-bottom: 1.5rem;
`;
const Title = styled(Styled.Title)``;
const Form = styled.div`
display: flex;
flex-flow: column;
`;
const Form = styled(Styled.Form)``;
const SpinnerOverlay = styled(Styled.Spinner)`
const SpinnerOverlay = styled(SpinnerStyles.Spinner)`
& > div {
background-color: black;
}
`;
const Bounce1 = styled(Styled.Bounce1)``;
const Bounce1 = styled(SpinnerStyles.Bounce1)``;
const Bounce2 = styled(Styled.Bounce2)``;
const Bounce2 = styled(SpinnerStyles.Bounce2)``;
const Separator = styled.hr`
margin: 2.5rem 0;

59
bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/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';
import Styled from './styles';
const intlMessages = defineMessages({
dataSavingLabel: {
@ -42,20 +41,20 @@ class DataSaving extends BaseMenu {
return (
<div>
<div>
<h3 className={styles.title}>{intl.formatMessage(intlMessages.dataSavingLabel)}</h3>
<h4 className={styles.subtitle}>{intl.formatMessage(intlMessages.dataSavingDesc)}</h4>
<Styled.Title>{intl.formatMessage(intlMessages.dataSavingLabel)}</Styled.Title>
<Styled.SubTitle>{intl.formatMessage(intlMessages.dataSavingDesc)}</Styled.SubTitle>
</div>
<div className={styles.form}>
<div className={styles.row}>
<div className={styles.col} aria-hidden="true">
<div className={styles.formElement}>
<label className={styles.label}>
<Styled.Form>
<Styled.Row>
<Styled.Col aria-hidden="true">
<Styled.FormElement>
<Styled.Label>
{intl.formatMessage(intlMessages.webcamLabel)}
</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(viewParticipantsWebcams)}
<Toggle
icons={false}
@ -65,19 +64,19 @@ class DataSaving extends BaseMenu {
ariaLabel={intl.formatMessage(intlMessages.webcamLabel)}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
<div className={styles.row}>
<div className={styles.col} aria-hidden="true">
<div className={styles.formElement}>
<label className={styles.label}>
</Styled.FormElementRight>
</Styled.Col>
</Styled.Row>
<Styled.Row>
<Styled.Col aria-hidden="true">
<Styled.FormElement>
<Styled.Label>
{intl.formatMessage(intlMessages.screenShareLabel)}
</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(viewScreenshare)}
<Toggle
icons={false}
@ -87,10 +86,10 @@ class DataSaving extends BaseMenu {
ariaLabel={intl.formatMessage(intlMessages.screenShareLabel)}
showToggleLabel={showToggleLabel}
/>
</div>
</div>
</div>
</div>
</Styled.FormElementRight>
</Styled.Col>
</Styled.Row>
</Styled.Form>
</div>
);
}

29
bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/styles.js Normal file
View File

@ -0,0 +1,29 @@
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 Label = styled(Styled.Label)``;
export default {
Title,
SubTitle,
Form,
Row,
Col,
FormElement,
FormElementRight,
Label,
};

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

@ -3,7 +3,7 @@ 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';
import { styles } from '../styles.scss';
const CHAT_ENABLED = Meteor.settings.public.chat.enabled;

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

@ -0,0 +1,80 @@
import styled from 'styled-components';
import {
colorGrayDark,
colorGrayLabel,
} from '/imports/ui/stylesheets/styled-components/palette';
const Title = styled.h3`
color: ${colorGrayDark};
font-weight: 400;
font-size: 1.3rem;
margin: 0;
margin-bottom: 1.5rem;
`;
const SubTitle = styled.h4`
font-size: 0.9rem;
margin-bottom: 1rem;
`;
const Form = styled.div`
display: flex;
flex-flow: column;
`;
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 FormElementRight = styled.div`
position: relative;
flex-grow: 1;
display: flex;
justify-content: flex-end;
flex-flow: row;
align-items: center;
`;
const Label = styled.span`
color: ${colorGrayLabel};
font-size: 0.9rem;
margin-bottom: 0.5rem;
`;
export default {
Title,
SubTitle,
Form,
Row,
Col,
FormElement,
FormElementRight,
Label,
};