audio join - apply structure and style from designs
This commit is contained in:
Anton Georgiev
parent
b54b4290a6
commit
18508b2632
@ -8,6 +8,7 @@ import DeviceSelector from '/imports/ui/components/audio/device-selector/compone
|
||||
import AudioStreamVolume from '/imports/ui/components/audio/audio-stream-volume/component';
|
||||
import EnterAudioContainer from '/imports/ui/components/enter-audio/container';
|
||||
import AudioTestContainer from '/imports/ui/components/audio-test/container';
|
||||
import cx from 'classnames';
|
||||
|
||||
class AudioSettings extends React.Component {
|
||||
constructor(props) {
|
||||
@ -20,7 +21,7 @@ class AudioSettings extends React.Component {
|
||||
|
||||
this.state = {
|
||||
inputDeviceId: undefined,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
chooseAudio() {
|
||||
@ -30,7 +31,7 @@ class AudioSettings extends React.Component {
|
||||
handleInputChange(deviceId) {
|
||||
console.log(`INPUT DEVICE CHANGED: ${deviceId}`);
|
||||
this.setState({
|
||||
inputDeviceId: deviceId
|
||||
inputDeviceId: deviceId,
|
||||
});
|
||||
}
|
||||
|
||||
@ -50,7 +51,7 @@ class AudioSettings extends React.Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.center}>
|
||||
<div className={styles.topRow}>
|
||||
<Button className={styles.backBtn}
|
||||
label={intl.formatMessage(intlMessages.backLabel)}
|
||||
icon={'left_arrow'}
|
||||
@ -65,41 +66,63 @@ class AudioSettings extends React.Component {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.audioNote}>
|
||||
<FormattedMessage
|
||||
id="app.audio.audioSettings.descriptionLabel"
|
||||
/>
|
||||
|
||||
<div className={styles.form}>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.audioNote}>
|
||||
<FormattedMessage
|
||||
id="app.audio.audioSettings.descriptionLabel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label className={cx(styles.label, styles.labelSmall)}>
|
||||
Microphone source
|
||||
</label>
|
||||
<DeviceSelector
|
||||
value={this.state.inputDeviceId}
|
||||
className={styles.select}
|
||||
kind="audioinput"
|
||||
onChange={this.handleInputChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label className={cx(styles.label, styles.labelSmall)}>
|
||||
Speaker source
|
||||
</label>
|
||||
<DeviceSelector
|
||||
value={this.state.outputDeviceId}
|
||||
className={styles.select}
|
||||
kind="audiooutput"
|
||||
onChange={this.handleOutputChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col}>
|
||||
<div className={styles.formElement}>
|
||||
<label className={cx(styles.label, styles.labelSmall)}>
|
||||
Your audio stream volume
|
||||
</label>
|
||||
<AudioStreamVolume
|
||||
deviceId={this.state.inputDeviceId}
|
||||
className={styles.audioMeter} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
<label className={styles.label}> </label>
|
||||
<AudioTestContainer/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.containerLeftHalfContent}>
|
||||
<span className={styles.heading}>
|
||||
<FormattedMessage
|
||||
id="app.audio.audioSettings.microphoneSourceLabel"
|
||||
/>
|
||||
</span>
|
||||
<DeviceSelector
|
||||
className={styles.item}
|
||||
kind="audioinput"
|
||||
onChange={this.handleInputChange} />
|
||||
<span className={styles.heading}>
|
||||
<FormattedMessage
|
||||
id="app.audio.audioSettings.microphoneStreamLabel"
|
||||
/>
|
||||
</span>
|
||||
<AudioStreamVolume
|
||||
className={styles.item}
|
||||
deviceId={this.state.inputDeviceId} />
|
||||
</div>
|
||||
<div className={styles.containerRightHalfContent}>
|
||||
<span className={styles.heading}>
|
||||
<FormattedMessage
|
||||
id="app.audio.audioSettings.speakerSourceLabel"
|
||||
/>
|
||||
</span>
|
||||
<DeviceSelector
|
||||
className={styles.item}
|
||||
kind="audiooutput"
|
||||
onChange={this.handleOutputChange} />
|
||||
<AudioTestContainer />
|
||||
|
||||
<div className={styles.enterAudio}>
|
||||
<EnterAudioContainer isFullAudio={true}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,22 +43,22 @@ class JoinAudio extends React.Component {
|
||||
const { intl } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.center}>
|
||||
<div className={styles.closeBtn}>
|
||||
<Button className={styles.closeBtn}
|
||||
label={intl.formatMessage(intlMessages.closeLabel)}
|
||||
icon={'close'}
|
||||
size={'lg'}
|
||||
circle={true}
|
||||
hideLabel={true}
|
||||
onClick={this.handleClose}
|
||||
/>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
</div>
|
||||
|
||||
<div className={styles.title}>
|
||||
<FormattedMessage
|
||||
id="app.audioModal.audioChoiceLabel"
|
||||
description="app.audioModal.audioChoiceDescription"
|
||||
defaultMessage="How would you like to join the audio?"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.center}>
|
||||
<Button className={styles.audioBtn}
|
||||
@ -68,6 +68,9 @@ class JoinAudio extends React.Component {
|
||||
size={'jumbo'}
|
||||
onClick={this.openAudio}
|
||||
/>
|
||||
|
||||
<span className={styles.verticalLine}>
|
||||
</span>
|
||||
<Button className={styles.audioBtn}
|
||||
label={intl.formatMessage(intlMessages.listenOnlyLabel)}
|
||||
icon={'listen'}
|
||||
|
||||
@ -1,53 +1,60 @@
|
||||
@import "../../stylesheets/variables/_all";
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
font-size: $font-size-large;
|
||||
padding-top: 40px;
|
||||
.center { //OK
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
// Modifies the close button style
|
||||
Button.closeBtn span:first-child {
|
||||
color: $color-gray-light;
|
||||
background: none;
|
||||
background-color: $color-primary;
|
||||
.closeBtn { //OK
|
||||
background-color: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
i {
|
||||
color: $color-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
Button.audioBtn {
|
||||
i{
|
||||
color: #3c5764;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifies the audio button icon colour
|
||||
Button.audioBtn span:first-child {
|
||||
color: #25385D;
|
||||
border: 5px solid $color-white;
|
||||
background-color: $color-primary;
|
||||
Button.audioBtn span:first-child { //OK
|
||||
color: #1b3c4b;
|
||||
background-color: #f1f8ff;
|
||||
box-shadow: none;
|
||||
border: 5px solid #f1f8ff;
|
||||
}
|
||||
|
||||
// When hovering over a button of class audioBtn, change the border colour of first span-child
|
||||
Button.audioBtn:hover span:first-child {
|
||||
Button.audioBtn:hover span:first-child { //OK
|
||||
border: 5px solid $color-primary;
|
||||
background-color: #f1f8ff;
|
||||
}
|
||||
|
||||
// Modifies the button label text
|
||||
Button.audioBtn span:last-child {
|
||||
color: $color-gray-dark;
|
||||
font-size: 30%;
|
||||
Button.audioBtn span:last-child { //OK
|
||||
color: black;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
Button.audioBtn:first-of-type {
|
||||
margin-right: 70px;
|
||||
Button.audioBtn:first-of-type { //OK
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
Button.audioBtn:last-of-type { //OK
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 10px;
|
||||
min-height: 350px;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
// Audio settings menu
|
||||
@ -64,29 +71,19 @@ div.half label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.backBtn {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
|
||||
.backBtn { //OK
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
i {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.playSound {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
.topRow { //OK
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.enterBtn {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.containerLeftHalf {
|
||||
width: 50%;
|
||||
float: left;
|
||||
@ -130,19 +127,10 @@ div.half label {
|
||||
text-decoration-color: $color-gray-dark;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
color: $color-gray-dark;
|
||||
font-weight: 700;
|
||||
font-size: $font-size-large;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
.audioNote {
|
||||
.audioNote { //OK
|
||||
color: $color-text;
|
||||
display: inline-block;
|
||||
margin-top: 1.75em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -157,3 +145,94 @@ div.half label {
|
||||
left: 11em;
|
||||
top: 3em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
////-----------------
|
||||
|
||||
.title { //OK
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
color: black;
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 2em;
|
||||
//background-color: pink;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0.1rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.labelSmall {
|
||||
color: black;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.formElement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-bottom: 0.1rem solid $color-gray-lighter;
|
||||
color: $color-gray-light;
|
||||
width: 100%;
|
||||
// appearance: none;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.audioMeter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pullContentRight {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.verticalLine {
|
||||
color: #f3f6f9;
|
||||
border-left: 1px solid;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.enterAudio {
|
||||
//background-color: red;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import React, { Component } from 'react';
|
||||
import Modal from '/imports/ui/components/modal/component';
|
||||
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
|
||||
|
||||
@ -9,10 +8,8 @@ import Application from '/imports/ui/components/settings/submenus/application/co
|
||||
import Participants from '/imports/ui/components/settings/submenus/participants/component';
|
||||
import Video from '/imports/ui/components/settings/submenus/video/component';
|
||||
|
||||
import Button from '../button/component';
|
||||
import Icon from '../icon/component';
|
||||
import styles from './styles';
|
||||
import cx from 'classnames';
|
||||
|
||||
const propTypes = {
|
||||
};
|
||||
|
||||
@ -56,3 +56,11 @@
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.testAudioBtn {
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
i {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import BaseMenu from '../base/component';
|
||||
import styles from '../styles.scss';
|
||||
|
||||
@ -46,7 +46,7 @@ export default class AudioMenu extends BaseMenu {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.tabContent}>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h3 className={styles.title}>Audio</h3>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user