From bfe6d14b1a5761b5838ddc34f475020f28992eca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 25 Jun 2019 14:38:48 +0200 Subject: [PATCH] Cleanup of CSS. --- app/src/components/Containers/Me.js | 4 +- app/src/components/Containers/Peer.js | 4 +- app/src/components/Containers/SpeakerPeer.js | 4 +- .../MeetingDrawer/ParticipantList/ListMe.js | 6 +- .../MeetingDrawer/ParticipantList/ListPeer.js | 6 +- .../ParticipantList/ParticipantList.js | 6 +- .../VideoContainers/FullScreenView.js | 4 +- .../components/VideoContainers/VideoView.js | 150 ++++++++---------- app/src/components/VideoWindow/NewWindow.js | 4 +- 9 files changed, 87 insertions(+), 101 deletions(-) diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 947a98e..8800b05 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -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 } diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 14ff783..edba53d 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -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' : { diff --git a/app/src/components/Containers/SpeakerPeer.js b/app/src/components/Containers/SpeakerPeer.js index efa576f..85aeb0b 100644 --- a/app/src/components/Containers/SpeakerPeer.js +++ b/app/src/components/Containers/SpeakerPeer.js @@ -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' : { diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js index b33ffc3..f506f9c 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js @@ -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' }, diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js index 8715b9d..82f6840 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js @@ -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' }, diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js index ffa6d8b..a4f66ed 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js @@ -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', diff --git a/app/src/components/VideoContainers/FullScreenView.js b/app/src/components/VideoContainers/FullScreenView.js index cbf2b73..6f99122 100644 --- a/app/src/components/VideoContainers/FullScreenView.js +++ b/app/src/components/VideoContainers/FullScreenView.js @@ -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 : { diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 9e1381d..6fa1994 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -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' + display : 'flex', + 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 - } + userSelect : 'none', + margin : 0, + color : 'rgba(255, 255, 255, 0.7)', + 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,12 +108,7 @@ const styles = () => }, deviceInfo : { - marginTop : '0.4vmin', - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - alignItems : 'flex-end', - '& span' : + '& span' : { userSelect : 'none', pointerEvents : 'none', @@ -181,59 +164,62 @@ class VideoView extends React.PureComponent return (
- { advancedMode ? -
-
- { audioCodec ? -

{audioCodec}

- :null - } + - :null - } +
{ showPeerInfo ?
- { isMe ? - onChangeDisplayName(newDisplayName)} - /> - : - - {displayName} - - } - - { advancedMode ? -
- - {peer.device.name} {Math.floor(peer.device.version) || null} +
+ { isMe ? + onChangeDisplayName(newDisplayName)} + /> + : + + {displayName} -
- :null - } + } + + { advancedMode ? +
+ + {peer.device.name} {Math.floor(peer.device.version) || null} + +
+ :null + } +
:null } diff --git a/app/src/components/VideoWindow/NewWindow.js b/app/src/components/VideoWindow/NewWindow.js index 2ae370b..b2255f4 100644 --- a/app/src/components/VideoWindow/NewWindow.js +++ b/app/src/components/VideoWindow/NewWindow.js @@ -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 : {