haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(speaker-stats): changed styles

This commit is contained in:
Gabriel Borlea 2022-01-13 13:57:31 +02:00 committed by Calinteodor
parent aa5506e7a6
commit 3745a0b392
4 changed files with 110 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
css/modals/speaker_stats/_speaker_stats.scss
View File

@ -4,90 +4,24 @@
width: 100%;
font-weight: 500;
.speaker-stats-item__status-dot {
position: relative;
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
margin: 0 auto;
.speaker-stats-row{
display: flex;
align-items: center;
&.status-active {
background: green;
.status-user-left {
color: $placeHolderColor;
}
&.status-inactive {
background: gray;
.speaker-stats-item__avatar {
width: 32px;
margin-right: 16px;
}
.speaker-stats-item__name-time{
width: 352px;
display: flex;
justify-content: space-between;
}
}
.status-user-left {
color: $placeHolderColor;
}
.speaker-stats-item__status,
.speaker-stats-item__name,
.speaker-stats-item__time,
.speaker-stats-item__name_expressions_on,
.speaker-stats-item__time_expressions_on,
.speaker-stats-item__expression {
display: inline-block;
margin: 5px 0;
vertical-align: middle;
}
.speaker-stats-item__status {
width: 5%;
}
.speaker-stats-item__name {
width: 40%;
}
.speaker-stats-item__time {
width: 55%;
}
.speaker-stats-item__name_expressions_on {
width: 20%;
}
.speaker-stats-item__time_expressions_on {
width: 18%;
}
.speaker-stats-item__expression {
width: 7%;
text-align: center;
}
@media (max-width: 750px) {
.speaker-stats-item__name_expressions_on {
width: 25%;
}
.speaker-stats-item__expression {
width: 8%;
}
}
@media (max-width: 750px) and (min-width: 400px) {
.speaker-stats-item__time_expressions_on {
width: 25%;
}
}
@media (max-width: 400px) {
.speaker-stats-item__time_expressions_on {
width: 30%;
}
.speaker-stats-item__expression {
width: 10%;
}
}
.speaker-stats-item__name,
.speaker-stats-item__time,
.speaker-stats-item__name_expressions_on,
.speaker-stats-item__time_expressions_on,
.speaker-stats-item__expression {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

16
react/features/speaker-stats/components/web/SpeakerStats.js
View File

@ -1,5 +1,6 @@
// @flow
import { makeStyles } from '@material-ui/core/styles';
import React, { useCallback, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
@ -12,12 +13,25 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
import SpeakerStatsList from './SpeakerStatsList';
import SpeakerStatsSearch from './SpeakerStatsSearch';
const useStyles = makeStyles(() => {
return {
separator: {
position: 'absolute',
width: '100%',
height: 1,
left: 0,
backgroundColor: '#666666'
}
};
});
const SpeakerStats = () => {
const { enableFacialRecognition } = useSelector(state => state['features/base/config']);
const { showFacialExpressions } = useSelector(state => state['features/speaker-stats']);
const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
const reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
const dispatch = useDispatch();
const classes = useStyles();
const onToggleFacialExpressions = useCallback(() =>
dispatch(toggleFacialExpressions())
@ -41,7 +55,7 @@ const SpeakerStats = () => {
<SpeakerStatsLabels
reduceExpressions = { reduceExpressions }
showFacialExpressions = { showFacialExpressions ?? false } />
<div className = 'separator-line' />
<div className = { classes.separator } />
<SpeakerStatsList />
</div>
</Dialog>

47
react/features/speaker-stats/components/web/SpeakerStatsItem.js
View File

@ -1,9 +1,20 @@
/* @flow */
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import TimeElapsed from './TimeElapsed';
const useStyles = makeStyles(() => {
return {
speakerStatsItem: {
height: 48,
padding: '8px 0px'
}
};
});
/**
* The type of the React {@code Component} props of {@link SpeakerStatsItem}.
*/
@ -63,34 +74,26 @@ const SpeakerStatsItem = (props: Props) => {
* @inheritdoc
* @returns {ReactElement}
*/
const hasLeftClass = props.hasLeft ? 'status-user-left' : '';
const rowDisplayClass = `speaker-stats-item ${hasLeftClass}`;
const dotClass = props.isDominantSpeaker
? 'status-active' : 'status-inactive';
const speakerStatusClass = `speaker-stats-item__status-dot ${dotClass}`;
const classes = useStyles();
const hasLeftClass = props.hasLeft ? 'status-user-left' : '';
const rowDisplayClass = `speaker-stats-row ${hasLeftClass} ${classes.speakerStatsItem}`;
return (
<div
className = { rowDisplayClass }
key = { props.participantId } >
<div className = 'speaker-stats-item__status'>
<span className = { speakerStatusClass } />
</div>
<div
aria-label = { props.t('speakerStats.speakerStats') }
className = { `speaker-stats-item__name${
props.showFacialExpressions ? '_expressions_on' : ''
}` }>
{ props.displayName }
</div>
<div
aria-label = { props.t('speakerStats.speakerTime') }
className = { `speaker-stats-item__time${
props.showFacialExpressions ? '_expressions_on' : ''
}` }>
<TimeElapsed
time = { props.dominantSpeakerTime } />
<div className = 'speaker-stats-item__avatar' />
<div className = 'speaker-stats-item__name-time'>
<div
aria-label = { props.t('speakerStats.speakerStats') }>
{ props.displayName }
</div>
<div
aria-label = { props.t('speakerStats.speakerTime') }>
<TimeElapsed
time = { props.dominantSpeakerTime } />
</div>
</div>
{ props.showFacialExpressions
&& (

117
react/features/speaker-stats/components/web/SpeakerStatsLabels.js
View File

@ -1,11 +1,20 @@
/* @flow */
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import { useTranslation } from 'react-i18next';
import React, { Component } from 'react';
import { translate } from '../../../base/i18n';
import { Tooltip } from '../../../base/tooltip';
import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.js';
const useStyles = makeStyles(() => {
return {
speakerStatsLabels: {
padding: '7px 0px'
}
};
});
/**
* The type of the React {@code Component} props of {@link SpeakerStatsLabels}.
*/
@ -20,71 +29,55 @@ type Props = {
* True if the facial recognition is not disabled.
*/
showFacialExpressions: boolean,
/**
* The function to translate human-readable text.
*/
t: Function
};
/**
* React component for labeling speaker stats column items.
*
* @augments Component
*/
class SpeakerStatsLabels extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
const SpeakerStatsLabels = (props: Props) => {
const { t } = useTranslation();
const classes = useStyles();
return (
<div className = 'speaker-stats-item__labels'>
<div className = 'speaker-stats-item__status' />
const FacialExpressionsLabels = () => (
props.reduceExpressions
? Object.keys(FACIAL_EXPRESSION_EMOJIS)
.filter(expression => ![ 'angry', 'fearful', 'disgusted' ].includes(expression))
: Object.keys(FACIAL_EXPRESSION_EMOJIS)).map(
expression => (
<div
className = { `speaker-stats-item__name${
this.props.showFacialExpressions ? '_expressions_on' : ''
}` }>
{ t('speakerStats.name') }
</div>
<div
className = { `speaker-stats-item__time${
this.props.showFacialExpressions ? '_expressions_on' : ''
}` }>
{ t('speakerStats.speakerTime') }
</div>
{ this.props.showFacialExpressions
&& (this.props.reduceExpressions
? Object.keys(FACIAL_EXPRESSION_EMOJIS)
.filter(expression => ![ 'angry', 'fearful', 'disgusted' ].includes(expression))
: Object.keys(FACIAL_EXPRESSION_EMOJIS)
).map(
expression => (
className = 'speaker-stats-item__expression'
key = { expression }>
<Tooltip
content = { t(`speakerStats.${expression}`) }
position = { 'top' } >
<div
className = 'speaker-stats-item__expression'
key = { expression }>
<Tooltip
content = { t(`speakerStats.${expression}`) }
position = { 'top' } >
<div
// eslint-disable-next-line react-native/no-inline-styles
style = {{ fontSize: 17 }}>
// eslint-disable-next-line react-native/no-inline-styles
style = {{ fontSize: 17 }}>
{ FACIAL_EXPRESSION_EMOJIS[expression] }
</div>
</Tooltip>
{ FACIAL_EXPRESSION_EMOJIS[expression] }
</div>
))
}
</div>
);
}
}
</Tooltip>
</div>
)
);
export default translate(SpeakerStatsLabels);
return (
<div className = { `speaker-stats-row ${classes.speakerStatsLabels}` }>
<div className = 'speaker-stats-item__avatar' />
<div className = 'speaker-stats-item__name-time'>
<div>
{ t('speakerStats.name') }
</div>
<div>
{ t('speakerStats.speakerTime') }
</div>
</div>
{
props.showFacialExpressions
&& <FacialExpressionsLabels />
}
</div>
);
};
export default SpeakerStatsLabels;