convert audio settings component
This commit is contained in:
Ramón Souza
parent
0994f6dea3
commit
af8959fe95
@ -0,0 +1,193 @@
|
||||
@import "/imports/ui/stylesheets/variables/breakpoints";
|
||||
@import "/imports/ui/components/modal/simple/styles";
|
||||
|
||||
:root {
|
||||
--audioDial-margin-left: 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.audioBtn:first-child {
|
||||
margin: 0 3rem 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 3rem;
|
||||
}
|
||||
|
||||
@include mq($small-only) {
|
||||
margin: 0 1rem 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audioBtn:only-child {
|
||||
margin: inherit 0 inherit inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: inherit!important inherit!important inherit!important 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audioOptions {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.browserWarning {
|
||||
padding: 0.5rem;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@extend .overlay;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@extend .modal;
|
||||
padding: 1.5rem;
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
position: relative;
|
||||
background-color: var(--color-white);
|
||||
|
||||
i {
|
||||
color: var(--color-gray-light);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-gray-lighter);
|
||||
i {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning {
|
||||
text-align: center;
|
||||
font-weight: var(--headings-font-weight);
|
||||
font-size: 5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
.text {
|
||||
margin: var(--line-height-computed);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: var(--line-height-computed);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.audioBtn {
|
||||
i {
|
||||
color: #3c5764;
|
||||
}
|
||||
}
|
||||
|
||||
.audioDial {
|
||||
margin: 0 auto;
|
||||
margin-top: var(--md-padding-y);
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Modifies the audio button icon colour
|
||||
.audioBtn span:first-child {
|
||||
color: #1b3c4b;
|
||||
background-color: #f1f8ff;
|
||||
box-shadow: none;
|
||||
border: 5px solid #f1f8ff;
|
||||
font-size: 3.5rem;
|
||||
|
||||
@include mq($small-only) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// When hovering over a button of class audioBtn, change the border colour of first span-child
|
||||
.audioBtn:hover span:first-child,
|
||||
.audioBtn:focus span:first-child {
|
||||
border: 5px solid var(--color-primary);
|
||||
background-color: #f1f8ff;
|
||||
}
|
||||
|
||||
// Modifies the button label text
|
||||
.audioBtn span:last-child {
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
color: var(--color-background);
|
||||
white-space: normal;
|
||||
|
||||
@include mq($small-only) {
|
||||
font-size: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.connecting {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.connectingAnimation {
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
|
||||
&:after {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
content: "\2026"; /* ascii code for the ellipsis character */
|
||||
width: 0;
|
||||
margin-left: 0.25em;
|
||||
|
||||
:global(.animationsEnabled) & {
|
||||
animation: ellipsis steps(4, end) 900ms infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.audioNote {
|
||||
color: var(--color-text);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import { withModalMounter } from '/imports/ui/components/modal/service';
|
||||
import DeviceSelector from '/imports/ui/components/audio/device-selector/component';
|
||||
import AudioTestContainer from '/imports/ui/components/audio/audio-test/container';
|
||||
import cx from 'classnames';
|
||||
import { styles } from './styles';
|
||||
import Styled from './styles';
|
||||
|
||||
const propTypes = {
|
||||
intl: PropTypes.shape({
|
||||
@ -99,68 +97,56 @@ class AudioSettings extends React.Component {
|
||||
const { inputDeviceId, outputDeviceId } = this.state;
|
||||
|
||||
return (
|
||||
<div className={styles.formWrapper}>
|
||||
<div className={styles.form}>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.audioNote}>
|
||||
<Styled.FormWrapper>
|
||||
<Styled.Form>
|
||||
<Styled.Row>
|
||||
<Styled.AudioNote>
|
||||
{intl.formatMessage(intlMessages.descriptionLabel)}
|
||||
</div>
|
||||
</div>
|
||||
</Styled.AudioNote>
|
||||
</Styled.Row>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label
|
||||
htmlFor="inputDeviceSelector"
|
||||
className={cx(styles.label, styles.labelSmall)}
|
||||
>
|
||||
<Styled.Row>
|
||||
<Styled.Col>
|
||||
<Styled.FormElement>
|
||||
<Styled.LabelSmall htmlFor="inputDeviceSelector">
|
||||
{intl.formatMessage(intlMessages.micSourceLabel)}
|
||||
<DeviceSelector
|
||||
<Styled.DeviceSelectorSelect
|
||||
id="inputDeviceSelector"
|
||||
value={inputDeviceId}
|
||||
className={styles.select}
|
||||
kind="audioinput"
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label
|
||||
htmlFor="outputDeviceSelector"
|
||||
className={cx(styles.label, styles.labelSmall)}
|
||||
>
|
||||
</Styled.LabelSmall>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
<Styled.FormElement>
|
||||
<Styled.LabelSmall htmlFor="outputDeviceSelector">
|
||||
{intl.formatMessage(intlMessages.speakerSourceLabel)}
|
||||
<DeviceSelector
|
||||
<Styled.DeviceSelectorSelect
|
||||
id="outputDeviceSelector"
|
||||
value={outputDeviceId}
|
||||
className={styles.select}
|
||||
kind="audiooutput"
|
||||
onChange={this.handleOutputChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.LabelSmall>
|
||||
</Styled.FormElement>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={cx(styles.col, styles.spacedLeft)}>
|
||||
<Styled.Row>
|
||||
<Styled.SpacedLeftCol>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label
|
||||
htmlFor="audioTest"
|
||||
className={styles.labelSmall}
|
||||
>
|
||||
<Styled.LabelSmall htmlFor="audioTest">
|
||||
Test your speaker volume
|
||||
<AudioTestContainer id="audioTest" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.LabelSmall>
|
||||
</Styled.SpacedLeftCol>
|
||||
</Styled.Row>
|
||||
</Styled.Form>
|
||||
|
||||
<div className={styles.enterAudio}>
|
||||
<Button
|
||||
className={styles.backBtn}
|
||||
<Styled.EnterAudio>
|
||||
<Styled.BackButton
|
||||
label={intl.formatMessage(intlMessages.backLabel)}
|
||||
size="md"
|
||||
color="primary"
|
||||
@ -174,8 +160,8 @@ class AudioSettings extends React.Component {
|
||||
label={intl.formatMessage(intlMessages.retryLabel)}
|
||||
onClick={handleRetry}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.EnterAudio>
|
||||
</Styled.FormWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,205 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import DeviceSelector from '/imports/ui/components/audio/device-selector/component';
|
||||
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
||||
import {
|
||||
colorWhite,
|
||||
colorGrayLight,
|
||||
colorText,
|
||||
} from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import { borderSize } from '/imports/ui/stylesheets/styled-components/general';
|
||||
|
||||
const FormWrapper = styled.div`
|
||||
min-width: 0;
|
||||
`;
|
||||
|
||||
const Form = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-top: 1.5rem;
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.7rem;
|
||||
`;
|
||||
|
||||
const EnterAudio = styled.div`
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const AudioNote = styled.div`
|
||||
@media ${smallOnly} {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Col = styled.div`
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
margin: 0 1rem 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding: 0 0.1rem 0 4rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: 0;
|
||||
padding: 0 4rem 0 0.1rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FormElement = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const LabelSmall = styled.label`
|
||||
color: black;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const SpacedLeftCol = styled.div`
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
margin: 0 1rem 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding: 0 0.1rem 0 4rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: 0;
|
||||
padding: 0 4rem 0 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& label {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding: 0 0.1rem 0 4rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: 0;
|
||||
padding: 0 4rem 0 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
margin-right: 1rem;
|
||||
margin-left: inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const BackButton = styled(Button)`
|
||||
margin: 0 0.5rem 0 0;
|
||||
border: none;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
@media ${smallOnly} {
|
||||
margin:0 auto 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin:0 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin: 0 0.5rem 0 0 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const DeviceSelectorSelect = styled(DeviceSelector)`
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0px;
|
||||
background: ${colorWhite} url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#667189' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right .35rem center/.4rem .5rem;
|
||||
background-repeat: no-repeat;
|
||||
border: 0.07rem solid ${colorGrayLight};
|
||||
border-radius: .125rem;
|
||||
color: ${colorText};
|
||||
width: 100%;
|
||||
padding: .4rem;
|
||||
|
||||
&:hover {
|
||||
outline: transparent;
|
||||
outline-style: dotted;
|
||||
outline-width: ${borderSize};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: transparent;
|
||||
outline-width: ${borderSize};
|
||||
outline-style: solid;
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
FormWrapper,
|
||||
Form,
|
||||
Row,
|
||||
EnterAudio,
|
||||
AudioNote,
|
||||
Col,
|
||||
FormElement,
|
||||
LabelSmall,
|
||||
SpacedLeftCol,
|
||||
BackButton,
|
||||
DeviceSelectorSelect,
|
||||
};
|
||||
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
|
||||
import cx from 'classnames';
|
||||
import logger from '/imports/startup/client/logger';
|
||||
import browserInfo from '/imports/utils/browserInfo';
|
||||
import { styles } from '../audio-modal/styles';
|
||||
import { styles } from '../audio-modal/styles.scss';
|
||||
|
||||
const propTypes = {
|
||||
kind: PropTypes.oneOf(['audioinput', 'audiooutput', 'videoinput']),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user