audio join - apply structure and style from designs

This commit is contained in:
Anton Georgiev 2017-03-22 16:10:49 -04:00
parent b54b4290a6
commit 18508b2632
6 changed files with 216 additions and 106 deletions

View File

@ -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}>&nbsp;</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>

View File

@ -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'}

View File

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

View File

@ -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 = {
};

View File

@ -56,3 +56,11 @@
padding-top: 0;
padding-right: 0;
}
.testAudioBtn {
border: none;
padding-left: 0;
i {
color: $color-primary;
}
}

View File

@ -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>