Revert "fix(speaker-stats): layouts"

This reverts commit 92e6b9f211.
This commit is contained in:
Calinteodor 2022-02-01 16:52:42 +02:00 committed by GitHub
parent bae25f554c
commit 6e6cf6fb3b
6 changed files with 42 additions and 70 deletions

View File

@ -1,8 +1,8 @@
.speaker-stats {
list-style: none;
width: calc(100% + 16px);
padding: 30px 0 0 0;
width: 100%;
font-weight: 600;
margin: 0 -8px;
.row{
display: flex;
@ -13,17 +13,17 @@
}
.name-time {
width: calc(100% - 48px);
width: 304px;
display: flex;
justify-content: space-between;
align-items: center;
}
.name-time_expressions-on {
width: calc(49% - 48px);
width: 240px;
}
.expressions {
width: 51%;
width: 300px;
display: flex;
justify-content: space-between;
@ -35,9 +35,9 @@
}
.text-large{
font-size: 14px;
font-weight: 400;
}
}
.text-large{
font-size: 14px;
font-weight: 400;
}

View File

@ -10,6 +10,9 @@ import { Switch } from '../../../base/react';
const useStyles = makeStyles(theme => {
return {
switchContainer: {
position: 'absolute',
top: 90,
left: 226,
display: 'flex',
alignItems: 'center',
@ -17,39 +20,33 @@ const useStyles = makeStyles(theme => {
display: 'none'
},
'& div': {
width: 38,
'& > label': {
width: 32,
height: 20,
backgroundColor: '#484A4F',
'&:not([data-checked]):hover': {
backgroundColor: '#484A4F'
},
'&[data-checked]': {
backgroundColor: theme.palette.action01,
'&:hover': {
backgroundColor: theme.palette.action01
},
'&::before': {
margin: '0 0 1.5px -3px',
backgroundColor: theme.palette.text01
}
},
'&:focus-within': {
borderColor: 'transparent'
'& div > label': {
width: 32,
height: 20,
backgroundColor: '#484A4F',
'&:not([data-checked]):hover': {
backgroundColor: '#484A4F'
},
'&[data-checked]': {
backgroundColor: theme.palette.action01,
'&:hover': {
backgroundColor: theme.palette.action01
},
'&::before': {
width: 14,
height: 14,
margin: '0 0 1.5px 1.5px',
margin: '0 0 1.5px -3px',
backgroundColor: theme.palette.text01
}
},
'&:focus-within': {
border: 'none'
},
'&::before': {
width: 14,
height: 14,
margin: '0 0 1.5px 1.5px',
backgroundColor: theme.palette.text01
}
}
},
switchLabel: {
marginRight: 10

View File

@ -22,20 +22,6 @@ const useStyles = makeStyles(theme => {
height: 1,
left: 0,
backgroundColor: theme.palette.border02
},
speakerStatsDialog: {
'& > div': {
}
},
searchSwitchContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%'
},
searchSwitchContainerExpressionsOn: {
width: '58.5%'
}
};
});
@ -62,25 +48,16 @@ const SpeakerStats = () => {
return (
<Dialog
cancelKey = 'dialog.close'
hideCancelButton = { true }
id = 'speaker-stats-dialog'
submitDisabled = { true }
titleKey = 'speakerStats.speakerStats'
width = { showFacialExpressions ? '664px' : 'small' }>
<div className = 'speaker-stats'>
<div
className = {
`${classes.searchSwitchContainer}
${showFacialExpressions ? classes.searchSwitchContainerExpressionsOn : ''}`
}>
<SpeakerStatsSearch onSearch = { onSearch } />
{ enableFacialRecognition
<SpeakerStatsSearch onSearch = { onSearch } />
{ enableFacialRecognition
&& <FacialExpressionsSwitch
onChange = { onToggleFacialExpressions }
showFacialExpressions = { showFacialExpressions } />
}
</div>
}
<SpeakerStatsLabels
reduceExpressions = { reduceExpressions }
showFacialExpressions = { showFacialExpressions ?? false } />

View File

@ -9,7 +9,7 @@ import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.
const useStyles = makeStyles(() => {
return {
labels: {
padding: '22px 0 7px 0',
padding: '7px 0px',
height: 20
},
emojis: {

View File

@ -11,6 +11,9 @@ import { isSpeakerStatsSearchDisabled } from '../../functions';
const useStyles = makeStyles(theme => {
return {
speakerStatsSearch: {
position: 'absolute',
left: 20,
top: 85,
backgroundColor: theme.palette.field01,
border: '1px solid',
borderRadius: 6,
@ -18,12 +21,7 @@ const useStyles = makeStyles(theme => {
color: theme.palette.text01,
padding: '10px 16px',
width: 183,
height: 40,
'&::placeholder': {
color: theme.palette.text03,
fontSize: 14,
fontWeight: 400
}
height: 40
}
};
});

View File

@ -3,4 +3,4 @@
*/
export const REDUCE_EXPRESSIONS_THRESHOLD = 750;
export const SPEAKER_STATS_RELOAD_INTERVAL = 100000000000;
export const SPEAKER_STATS_RELOAD_INTERVAL = 1000;