Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleanup of CSS.

master
Håvar Aambø Fosstveit 2019-06-25 14:38:48 +02:00
parent da3233faf3
commit bfe6d14b1a
9 changed files with 87 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/Containers/Me.js
View File

@ -67,7 +67,7 @@ const styles = (theme) =>
flexDirection : 'column',
justifyContent : 'center',
alignItems : 'flex-end',
padding : '0.4vmin',
padding : theme.spacing(1),
zIndex : 21,
opacity : 0,
transition : 'opacity 0.3s',
@ -83,7 +83,7 @@ const styles = (theme) =>
top : '50%',
left : '50%',
transform : 'translate(-50%, -50%)',
color : 'rgba(255, 255, 255, 1)',
color : 'rgba(255, 255, 255, 0.5)',
fontSize : '7em',
margin : 0
}

4
app/src/components/Containers/Peer.js
View File

@ -66,7 +66,7 @@ const styles = (theme) =>
flexDirection : 'column',
justifyContent : 'center',
alignItems : 'flex-end',
padding : '0.4vmin',
padding : theme.spacing(1),
zIndex : 21,
opacity : 0,
transition : 'opacity 0.3s',
@ -85,7 +85,7 @@ const styles = (theme) =>
display : 'flex',
justifyContent : 'center',
alignItems : 'center',
padding : '0.4vmin',
padding : theme.spacing(1),
zIndex : 20,
'& p' :
{

4
app/src/components/Containers/SpeakerPeer.js
View File

@ -8,7 +8,7 @@ import { withStyles } from '@material-ui/core/styles';
import VideoView from '../VideoContainers/VideoView';
import Volume from './Volume';
const styles = () =>
const styles = (theme) =>
({
root :
{
@ -51,7 +51,7 @@ const styles = () =>
display : 'flex',
justifyContent : 'center',
alignItems : 'center',
padding : '0.4vmin',
padding : theme.spacing(1),
zIndex : 21,
'& p' :
{

6
app/src/components/MeetingDrawer/ParticipantList/ListMe.js
View File

@ -7,11 +7,11 @@ import * as appPropTypes from '../../appPropTypes';
import EmptyAvatar from '../../../images/avatar-empty.jpeg';
import HandIcon from '../../../images/icon-hand-white.svg';
const styles = () =>
const styles = (theme) =>
({
root :
{
padding : '0.5rem',
padding : theme.spacing(1),
width : '100%',
overflow : 'hidden',
cursor : 'auto',
@ -31,7 +31,7 @@ const styles = () =>
fontSize : '1rem',
border : 'none',
display : 'flex',
paddingLeft : '0.5rem',
paddingLeft : theme.spacing(1),
flexGrow : 1,
alignItems : 'center'
},

6
app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
View File

@ -13,11 +13,11 @@ import ScreenOffIcon from '@material-ui/icons/StopScreenShare';
import EmptyAvatar from '../../../images/avatar-empty.jpeg';
import HandIcon from '../../../images/icon-hand-white.svg';
const styles = () =>
const styles = (theme) =>
({
root :
{
padding : '0.5rem',
padding : theme.spacing(1),
width : '100%',
overflow : 'hidden',
cursor : 'auto',
@ -37,7 +37,7 @@ const styles = () =>
fontSize : '1rem',
border : 'none',
display : 'flex',
paddingLeft : '0.5rem',
paddingLeft : theme.spacing(1),
flexGrow : 1,
alignItems : 'center'
},

6
app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
View File

@ -18,7 +18,7 @@ const styles = (theme) =>
{
width : '100%',
overflowY : 'auto',
padding : 6
padding : theme.spacing(1)
},
list :
{
@ -29,12 +29,12 @@ const styles = (theme) =>
},
listheader :
{
padding : '0.5rem',
padding : theme.spacing(1),
fontWeight : 'bolder'
},
listItem :
{
padding : '0.5rem',
padding : theme.spacing(1),
width : '100%',
overflow : 'hidden',
cursor : 'pointer',

4
app/src/components/VideoContainers/FullScreenView.js
View File

@ -8,7 +8,7 @@ import * as stateActions from '../../actions/stateActions';
import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
import VideoView from './VideoView';
const styles = () =>
const styles = (theme) =>
({
root :
{
@ -29,7 +29,7 @@ const styles = () =>
flexDirection : 'row',
justifyContent : 'flex-start',
alignItems : 'center',
padding : '0.4vmin'
padding : theme.spacing(1)
},
button :
{

58
app/src/components/VideoContainers/VideoView.js
View File

@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
import * as appPropTypes from '../appPropTypes';
import EditableInput from '../Controls/EditableInput';
const styles = () =>
const styles = (theme) =>
({
root :
{
@ -48,54 +48,42 @@ const styles = () =>
},
info :
{
width : '100%',
height : '100%',
padding : theme.spacing(1),
position : 'absolute',
zIndex : 10,
top : '0.6vmin',
left : '0.6vmin',
bottom : 0,
right : 0,
display : 'flex',
flexDirection : 'column',
justifyContent : 'space-between'
},
media :
{
flex : '0 0 auto',
display : 'flex',
flexDirection : 'row'
transitionProperty : 'opacity',
transitionDuration : '.15s',
'&.hidden' :
{
opacity : 0,
transitionDuration : '0s'
}
},
box :
{
padding : '0.4vmin',
padding : theme.spacing(0.5),
borderRadius : 2,
backgroundColor : 'rgba(0, 0, 0, 0.25)',
'& p' :
{
userSelect : 'none',
pointerEvents : 'none',
margin : 0,
color : 'rgba(255, 255, 255, 0.7)',
fontSize : 10,
'&:last-child' :
{
marginBottom : 0
}
fontSize : '0.8em'
}
},
peer :
{
flex : '0 0 auto',
display : 'flex',
flexDirection : 'column',
justifyContent : 'flex-end',
position : 'absolute',
bottom : '0.6vmin',
left : 0,
borderRadius : 2,
backgroundColor : 'rgba(0, 0, 0, 0.25)',
padding : '0.5vmin',
alignItems : 'flex-start'
display : 'flex'
},
displayNameEdit :
{
@ -120,11 +108,6 @@ const styles = () =>
},
deviceInfo :
{
marginTop : '0.4vmin',
display : 'flex',
flexDirection : 'row',
justifyContent : 'flex-start',
alignItems : 'flex-end',
'& span' :
{
userSelect : 'none',
@ -181,8 +164,11 @@ class VideoView extends React.PureComponent
return (
<div className={classes.root}>
<div className={classes.info}>
{ advancedMode ?
<div className={classes.media}>
<div className={classnames(classes.media,
{
hidden : !advancedMode
})}
>
<div className={classes.box}>
{ audioCodec ?
<p>{audioCodec}</p>
@ -200,16 +186,15 @@ class VideoView extends React.PureComponent
}
</div>
</div>
:null
}
{ showPeerInfo ?
<div className={classes.peer}>
<div className={classes.box}>
{ isMe ?
<EditableInput
value={displayName}
propName='newDisplayName'
className={classnames(classes.displayNameEdit, 'display-name')}
className={classes.displayNameEdit}
classLoading='loading'
classInvalid='invalid'
shouldBlockWhileLoading
@ -235,6 +220,7 @@ class VideoView extends React.PureComponent
:null
}
</div>
</div>
:null
}
</div>

4
app/src/components/VideoWindow/NewWindow.js
View File

@ -6,7 +6,7 @@ import FullScreen from '../FullScreen';
import FullScreenIcon from '@material-ui/icons/Fullscreen';
import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
const styles = () =>
const styles = (theme) =>
({
root :
{
@ -27,7 +27,7 @@ const styles = () =>
flexDirection : 'row',
justifyContent : 'flex-start',
alignItems : 'center',
padding : '0.4vmin'
padding : theme.spacing(1)
},
button :
{