fix(speaker-stats): layouts
This commit is contained in:
Gabriel Borlea
Calinteodor
parent
ea9d1d2689
commit
92e6b9f211
|
|
@ -1,8 +1,8 @@
|
|||
.speaker-stats {
|
||||
list-style: none;
|
||||
padding: 30px 0 0 0;
|
||||
width: 100%;
|
||||
width: calc(100% + 16px);
|
||||
font-weight: 600;
|
||||
margin: 0 -8px;
|
||||
|
||||
.row{
|
||||
display: flex;
|
||||
|
|
@ -13,17 +13,17 @@
|
|||
}
|
||||
|
||||
.name-time {
|
||||
width: 304px;
|
||||
width: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.name-time_expressions-on {
|
||||
width: 240px;
|
||||
width: calc(49% - 48px);
|
||||
}
|
||||
.expressions {
|
||||
width: 300px;
|
||||
width: 51%;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@ import { Switch } from '../../../base/react';
|
|||
const useStyles = makeStyles(theme => {
|
||||
return {
|
||||
switchContainer: {
|
||||
position: 'absolute',
|
||||
top: 90,
|
||||
left: 226,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
|
|
@ -20,33 +17,39 @@ const useStyles = makeStyles(theme => {
|
|||
display: 'none'
|
||||
|
||||
},
|
||||
'& 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
|
||||
|
||||
'& 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'
|
||||
},
|
||||
'&::before': {
|
||||
margin: '0 0 1.5px -3px',
|
||||
width: 14,
|
||||
height: 14,
|
||||
margin: '0 0 1.5px 1.5px',
|
||||
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
|
||||
|
|
|
|||
|
|
@ -22,6 +22,20 @@ 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%'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -48,16 +62,25 @@ 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'>
|
||||
<SpeakerStatsSearch onSearch = { onSearch } />
|
||||
{ enableFacialRecognition
|
||||
<div
|
||||
className = {
|
||||
`${classes.searchSwitchContainer}
|
||||
${showFacialExpressions ? classes.searchSwitchContainerExpressionsOn : ''}`
|
||||
}>
|
||||
<SpeakerStatsSearch onSearch = { onSearch } />
|
||||
{ enableFacialRecognition
|
||||
&& <FacialExpressionsSwitch
|
||||
onChange = { onToggleFacialExpressions }
|
||||
showFacialExpressions = { showFacialExpressions } />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<SpeakerStatsLabels
|
||||
reduceExpressions = { reduceExpressions }
|
||||
showFacialExpressions = { showFacialExpressions ?? false } />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.
|
|||
const useStyles = makeStyles(() => {
|
||||
return {
|
||||
labels: {
|
||||
padding: '7px 0px',
|
||||
padding: '22px 0 7px 0',
|
||||
height: 20
|
||||
},
|
||||
emojis: {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ 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,
|
||||
|
|
@ -21,7 +18,12 @@ const useStyles = makeStyles(theme => {
|
|||
color: theme.palette.text01,
|
||||
padding: '10px 16px',
|
||||
width: 183,
|
||||
height: 40
|
||||
height: 40,
|
||||
'&::placeholder': {
|
||||
color: theme.palette.text03,
|
||||
fontSize: 14,
|
||||
fontWeight: 400
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
*/
|
||||
export const REDUCE_EXPRESSIONS_THRESHOLD = 750;
|
||||
|
||||
export const SPEAKER_STATS_RELOAD_INTERVAL = 1000;
|
||||
export const SPEAKER_STATS_RELOAD_INTERVAL = 100000000000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue