refactor(premeeting): use jss instead of sass in ConnectionStatus (#11115)
This commit is contained in:
Shahab
GitHub
parent
985b37195c
commit
2dad8163bb
|
|
@ -1,71 +0,0 @@
|
|||
.con-status {
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16px;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&-header {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
&-circle {
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&--good {
|
||||
background: #31B76A;
|
||||
}
|
||||
|
||||
&--poor {
|
||||
background: #E12D2D;
|
||||
}
|
||||
|
||||
&--non-optimal {
|
||||
background: #E39623;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
margin-left: auto;
|
||||
transition: background-color 0.16s ease-out;
|
||||
|
||||
&--up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&>svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(1,1,1, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-details {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-top: 1px solid #5E6D7A;
|
||||
padding: 16px;
|
||||
transition: opacity 0.16s ease-out;
|
||||
|
||||
&-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@import 'connection-status';
|
||||
@import 'lobby';
|
||||
@import 'premeeting-screens';
|
||||
@import 'prejoin';
|
||||
|
|
|
|||
|
|
@ -161,13 +161,6 @@
|
|||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.con-status {
|
||||
margin: 24px auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $prejoinDefaultContentWidth;
|
||||
}
|
||||
}
|
||||
|
||||
// mobile phone landscape
|
||||
|
|
@ -175,10 +168,6 @@
|
|||
div.content {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.con-status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
|
|
@ -198,11 +187,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.con-status {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.device-status-error {
|
||||
border-radius: 0;
|
||||
margin: 0 -16px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
|
||||
import { translate } from '../../../i18n';
|
||||
import { Icon, IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons';
|
||||
import { connect } from '../../../redux';
|
||||
import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
|
||||
import { CONNECTION_TYPE } from '../../constants';
|
||||
import { getConnectionData } from '../../functions';
|
||||
|
||||
|
|
@ -26,6 +28,99 @@ type Props = {
|
|||
t: Function
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
return {
|
||||
connectionStatus: {
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
fontSize: '12px',
|
||||
letterSpacing: '0.16px',
|
||||
lineHeight: '16px',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
|
||||
[theme.breakpoints.down('400')]: {
|
||||
margin: 0,
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
[theme.breakpoints.down('720')]: {
|
||||
margin: `${theme.spacing(4)} auto`,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
width: PREJOIN_DEFAULT_CONTENT_WIDTH
|
||||
},
|
||||
|
||||
// mobile phone landscape
|
||||
'@media (max-height: 420px)': {
|
||||
display: 'none'
|
||||
},
|
||||
|
||||
'& .con-status-header': {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '14px 16px'
|
||||
},
|
||||
|
||||
'& .con-status-circle': {
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
padding: theme.spacing(1),
|
||||
marginRight: theme.spacing(3)
|
||||
},
|
||||
|
||||
'& .con-status--good': {
|
||||
background: '#31B76A'
|
||||
},
|
||||
|
||||
'& .con-status--poor': {
|
||||
background: '#E12D2D'
|
||||
},
|
||||
|
||||
'& .con-status--non-optimal': {
|
||||
background: '#E39623'
|
||||
},
|
||||
|
||||
'& .con-status-arrow': {
|
||||
marginLeft: 'auto',
|
||||
transition: 'background-color 0.16s ease-out'
|
||||
},
|
||||
|
||||
'& .con-status-arrow--up': {
|
||||
transform: 'rotate(180deg)'
|
||||
},
|
||||
|
||||
'& .con-status-arrow > svg': {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
|
||||
'& .con-status-arrow:hover': {
|
||||
backgroundColor: 'rgba(1, 1, 1, 0.1)'
|
||||
},
|
||||
|
||||
'& .con-status-text': {
|
||||
textAlign: 'center'
|
||||
},
|
||||
|
||||
'& .con-status-details': {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderTop: '1px solid #5E6D7A',
|
||||
padding: theme.spacing(3),
|
||||
transition: 'opacity 0.16s ease-out'
|
||||
},
|
||||
|
||||
'& .con-status-details-visible': {
|
||||
opacity: 1
|
||||
},
|
||||
|
||||
'& .con-status-details-hidden': {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const CONNECTION_TYPE_MAP = {
|
||||
[CONNECTION_TYPE.POOR]: {
|
||||
connectionClass: 'con-status--poor',
|
||||
|
|
@ -51,6 +146,8 @@ const CONNECTION_TYPE_MAP = {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
|
||||
const classes = useStyles();
|
||||
|
||||
if (connectionType === CONNECTION_TYPE.NONE) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -78,7 +175,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
|
|||
}, [ showDetails, toggleDetails ]);
|
||||
|
||||
return (
|
||||
<div className = 'con-status'>
|
||||
<div className = { classes.connectionStatus }>
|
||||
<div
|
||||
aria-level = { 1 }
|
||||
className = 'con-status-header'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Prejoin / premeeting screen.
|
||||
*/
|
||||
|
||||
// Maps SCSS variable $prejoinDefaultContentWidth
|
||||
export const PREJOIN_DEFAULT_CONTENT_WIDTH = '336px';
|
||||
Loading…
Reference in New Issue