feat(participants-pane) Design update (#13162)

Move ListItem to base/ui
2025-12-30 03:12:29 +00:00 · 2023-04-04 13:02:45 +03:00
parent 7457480f02
commit db5e63411f
15 changed files with 106 additions and 69 deletions
--- a/css/_popover.scss
+++ b/css/_popover.scss
@@ -11,15 +11,15 @@
        }

        &.bottom {
-            top: 8px;
+            top: 4px;
        }

        &.left {
-            right: 8px;
+            right: 4px;
        }

        &.right {
-            left: 8px;
+            left: 4px;
        }
    }
 }
--- a/react/features/base/components/themes/participantsPaneTheme.json
+++ b/react/features/base/components/themes/participantsPaneTheme.json
@@ -1,10 +1,5 @@
 {
-    "colors": {
-        "moderationDisabled": "#E54B4B"
-    },
-    "headerSize": 60,
-    "ignoredChildClassName": "ignore-child",
-    "panePadding": 16,
+    "panePadding": 24,
    "participantsPaneWidth": 315,
    "MD_BREAKPOINT": "580px"
 }
--- a/react/features/base/ui/components/web/Button.tsx
+++ b/react/features/base/ui/components/web/Button.tsx
@@ -154,7 +154,7 @@ const useStyles = makeStyles()(theme => {
            ...withPixelLineHeight(theme.typography.labelBold),

            '&.iconButton': {
-                padding: '6px'
+                padding: theme.spacing(1)
            }
        },

--- a/react/features/base/ui/components/web/ContextMenu.tsx
+++ b/react/features/base/ui/components/web/ContextMenu.tsx
@@ -132,7 +132,7 @@ const useStyles = makeStyles()(theme => {
            boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)',
            color: theme.palette.text01,
            ...withPixelLineHeight(theme.typography.bodyShortRegular),
-            marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`,
+            marginTop: '48px',
            position: 'absolute',
            right: `${participantsPaneTheme.panePadding}px`,
            top: 0,
@@ -250,8 +250,7 @@ const ContextMenu = ({
        : <div
            { ...aria }
            aria-label = { accessibilityLabel }
-            className = { cx(participantsPaneTheme.ignoredChildClassName,
-                styles.contextMenu,
+            className = { cx(styles.contextMenu,
                isHidden && styles.contextMenuHidden,
                className
            ) }
--- a/react/features/base/components/participants-pane-list/ListItem.tsx
+++ b/react/features/base/components/participants-pane-list/ListItem.tsx
@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';

-import { ACTION_TRIGGER } from '../../../participants-pane/constants';
-import { isMobileBrowser } from '../../environment/utils';
-import { withPixelLineHeight } from '../../styles/functions.web';
-import participantsPaneTheme from '../themes/participantsPaneTheme.json';
+import { ACTION_TRIGGER } from '../../../../participants-pane/constants';
+import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
+import { isMobileBrowser } from '../../../environment/utils';
+import { withPixelLineHeight } from '../../../styles/functions.web';

 interface IProps {

@@ -81,9 +81,9 @@ const useStyles = makeStyles()(theme => {
            alignItems: 'center',
            color: theme.palette.text01,
            display: 'flex',
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
            margin: `0 -${participantsPaneTheme.panePadding}px`,
-            padding: `0 ${participantsPaneTheme.panePadding}px`,
+            padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`,
            position: 'relative',
            boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)',
            minHeight: '40px',
@@ -105,8 +105,8 @@ const useStyles = makeStyles()(theme => {
            },

            [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
-                padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`
+                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
+                padding: `${theme.spacing(3)} ${participantsPaneTheme.panePadding}px`
            }
        },

@@ -191,8 +191,8 @@ const ListItem = ({
    textChildren,
    trigger
 }: IProps) => {
-    const { classes: styles, cx } = useStyles();
-    const _isMobile = isMobileBrowser();
+    const { classes, cx } = useStyles();
+    const isMobile = isMobileBrowser();
    let timeoutHandler: number;

    /**
@@ -230,14 +230,14 @@ const ListItem = ({
    return (
        <div
            className = { cx('list-item-container',
-                styles.container,
-                isHighlighted && styles.highlighted,
+                classes.container,
+                isHighlighted && classes.highlighted,
                className
            ) }
            data-testid = { testId }
            id = { id }
            onClick = { onClick }
-            { ...(_isMobile
+            { ...(isMobile
                ? {
                    onTouchEnd: _onTouchEnd,
                    onTouchMove: _onTouchMove,
@@ -248,15 +248,15 @@ const ListItem = ({
                }
            ) }>
            <div> {icon} </div>
-            <div className = { styles.detailsContainer }>
-                <div className = { styles.name }>
+            <div className = { classes.detailsContainer }>
+                <div className = { classes.name }>
                    {textChildren}
                </div>
                {indicators && (
                    <div
                        className = { cx('indicators',
-                            styles.indicators,
-                            (isHighlighted || trigger === ACTION_TRIGGER.PERMANENT) && styles.indicatorsHidden
+                            classes.indicators,
+                            (isHighlighted || trigger === ACTION_TRIGGER.PERMANENT) && classes.indicatorsHidden
                        ) }>
                        {indicators}
                    </div>
@@ -264,9 +264,9 @@ const ListItem = ({
                {!hideActions && (
                    <div
                        className = { cx('actions',
-                            styles.actionsContainer,
-                            trigger === ACTION_TRIGGER.PERMANENT && styles.actionsPermanent,
-                            isHighlighted && styles.actionsVisible
+                            classes.actionsContainer,
+                            trigger === ACTION_TRIGGER.PERMANENT && classes.actionsPermanent,
+                            isHighlighted && classes.actionsVisible
                        ) }>
                        {actions}
                    </div>
--- a/react/features/base/ui/constants.web.ts
+++ b/react/features/base/ui/constants.web.ts
@@ -106,10 +106,6 @@ export const commonStyles = (theme: Theme) => {
            }
        },

-        '.participant-avatar': {
-            margin: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} 0`
-        },
-
        '.prejoin-dialog': {
            backgroundColor: theme.palette.uiBackground,
            boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.5)',
--- a/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx
@@ -1,12 +1,22 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';

 import Button from '../../../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants.web';
 import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';

+const useStyles = makeStyles()(theme => {
+    return {
+        button: {
+            marginTop: theme.spacing(3)
+        }
+    };
+});
+
 export const AddBreakoutRoomButton = () => {
+    const { classes } = useStyles();
    const { t } = useTranslation();
    const dispatch = useDispatch();

@@ -17,6 +27,7 @@ export const AddBreakoutRoomButton = () => {
    return (
        <Button
            accessibilityLabel = { t('breakoutRooms.actions.add') }
+            className = { classes.button }
            fullWidth = { true }
            labelKey = { 'breakoutRooms.actions.add' }
            onClick = { onAdd }
--- a/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx
@@ -6,7 +6,11 @@ import Button from '../../../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants.web';
 import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';

-export const AutoAssignButton = () => {
+interface IProps {
+    className?: string;
+}
+
+export const AutoAssignButton = ({ className }: IProps) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();

@@ -17,6 +21,7 @@ export const AutoAssignButton = () => {
    return (
        <Button
            accessibilityLabel = { t('breakoutRooms.actions.autoAssign') }
+            className = { className }
            fullWidth = { true }
            labelKey = { 'breakoutRooms.actions.autoAssign' }
            onClick = { onAutoAssign }
--- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
@@ -4,11 +4,11 @@ import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';

 import { IReduxState } from '../../../../../app/types';
-import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
 import Icon from '../../../../../base/icons/components/Icon';
 import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
 import { withPixelLineHeight } from '../../../../../base/styles/functions.web';
+import ListItem from '../../../../../base/ui/components/web/ListItem';
 import { IRoom } from '../../../../../breakout-rooms/types';
 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
 import { ACTION_TRIGGER } from '../../../../constants';
@@ -92,8 +92,7 @@ const useStyles = makeStyles()(theme => {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
-            ...withPixelLineHeight(theme.typography.bodyLongBold),
-            padding: '12px 0'
+            ...withPixelLineHeight(theme.typography.bodyLongBold)
        },

        arrowContainer: {
--- a/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx
@@ -8,7 +8,11 @@ import Button from '../../../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants.web';
 import { moveToRoom } from '../../../../../breakout-rooms/actions';

-export const LeaveButton = () => {
+interface IProps {
+    className?: string;
+}
+
+export const LeaveButton = ({ className }: IProps) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();

@@ -20,6 +24,7 @@ export const LeaveButton = () => {
    return (
        <Button
            accessibilityLabel = { t('breakoutRooms.actions.leaveBreakoutRoom') }
+            className = { className }
            fullWidth = { true }
            labelKey = { 'breakoutRooms.actions.leaveBreakoutRoom' }
            onClick = { onLeave }
--- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';

 import { isMobileBrowser } from '../../../../../base/environment/utils';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
@@ -31,7 +32,16 @@ interface IProps {
    searchString: string;
 }

+const useStyles = makeStyles()(theme => {
+    return {
+        topMargin: {
+            marginTop: theme.spacing(3)
+        }
+    };
+});
+
 export const RoomList = ({ searchString }: IProps) => {
+    const { classes } = useStyles();
    const currentRoomId = useSelector(getCurrentRoomId);
    const rooms = Object.values(useSelector(getBreakoutRooms, equals))
                    .filter((room: IRoom) => room.id !== currentRoomId)
@@ -53,9 +63,11 @@ export const RoomList = ({ searchString }: IProps) => {

    return (
        <>
-            {inBreakoutRoom && <LeaveButton />}
-            {showAutoAssign && <AutoAssignButton />}
-            <div id = 'breakout-rooms-list'>
+            {inBreakoutRoom && <LeaveButton className = { classes.topMargin } />}
+            {showAutoAssign && <AutoAssignButton className = { classes.topMargin } />}
+            <div
+                className = { classes.topMargin }
+                id = 'breakout-rooms-list'>
                {rooms.map(room => (
                    <React.Fragment key = { room.id }>
                        <CollapsibleRoom
--- a/react/features/participants-pane/components/web/LobbyParticipantItems.tsx
+++ b/react/features/participants-pane/components/web/LobbyParticipantItems.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';

 import { IParticipant } from '../../../base/participants/types';

@@ -22,6 +23,14 @@ interface IProps {
    participants: IParticipant[];
 }

+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            margin: `${theme.spacing(3)} 0`
+        }
+    };
+});
+
 /**
 * Component used to display a list of knocking participants.
 *
@@ -29,9 +38,12 @@ interface IProps {
 * @returns {ReactNode}
 */
 function LobbyParticipantItems({ openDrawerForParticipant, overflowDrawer, participants }: IProps) {
+    const { classes } = useStyles();

    return (
-        <div id = 'lobby-list'>
+        <div
+            className = { classes.container }
+            id = 'lobby-list'>
            {participants.map(p => (
                <LobbyParticipantItem
                    key = { p.id }
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()(theme => {
        heading: {
            color: theme.palette.text02,
            ...withPixelLineHeight(theme.typography.bodyShortBold),
-            margin: `8px 0 ${participantsPaneTheme.panePadding}px`,
+            marginBottom: theme.spacing(3),

            [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
@@ -39,6 +39,8 @@ const useStyles = makeStyles()(theme => {
        },

        search: {
+            margin: `${theme.spacing(3)} 0`,
+
            '& input': {
                textAlign: 'center',
                paddingRight: '16px'
@@ -111,10 +113,11 @@ function MeetingParticipants({
                role = 'heading'>
                { t('participantsPane.title') }
            </span>
-            <div className = { cx(styles.heading, styles.headingW) }>
-                {visitorsCount > 0
-                    ? t('participantsPane.headings.visitors', { count: visitorsCount }) : undefined}
-            </div>
+            {visitorsCount > 0 && (
+                <div className = { cx(styles.heading, styles.headingW) }>
+                    {t('participantsPane.headings.visitors', { count: visitorsCount })}
+                </div>
+            )}
            <div className = { styles.heading }>
                {currentRoom?.name
                    ? `${currentRoom.name} (${participantsCount})`
--- a/react/features/participants-pane/components/web/ParticipantItem.tsx
+++ b/react/features/participants-pane/components/web/ParticipantItem.tsx
@@ -3,9 +3,9 @@ import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';

 import Avatar from '../../../base/avatar/components/Avatar';
-import ListItem from '../../../base/components/participants-pane-list/ListItem';
 import { translate } from '../../../base/i18n/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import ListItem from '../../../base/ui/components/web/ListItem';
 import {
    ACTION_TRIGGER,
    type ActionTrigger,
@@ -110,8 +110,12 @@ const useStyles = makeStyles()(theme => {
        },

        moderatorLabel: {
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...withPixelLineHeight(theme.typography.labelBold),
            color: theme.palette.text03
+        },
+
+        avatar: {
+            marginRight: theme.spacing(3)
        }
    };
 });
@@ -146,11 +150,11 @@ function ParticipantItem({
            displayName
        }), []);

-    const { classes: styles } = useStyles();
+    const { classes } = useStyles();

    const icon = (
        <Avatar
-            className = 'participant-avatar'
+            className = { classes.avatar }
            displayName = { displayName }
            participantId = { participantID }
            size = { 32 } />
@@ -158,13 +162,13 @@ function ParticipantItem({

    const text = (
        <>
-            <div className = { styles.nameContainer }>
-                <div className = { styles.name }>
+            <div className = { classes.nameContainer }>
+                <div className = { classes.name }>
                    {displayName}
                </div>
                {local ? <span>&nbsp;({youText})</span> : null}
            </div>
-            {isModerator && !disableModeratorIndicator && <div className = { styles.moderatorLabel }>
+            {isModerator && !disableModeratorIndicator && <div className = { classes.moderatorLabel }>
                {t('videothumbnail.moderator')}
            </div>}
        </>
--- a/react/features/participants-pane/components/web/ParticipantsPane.tsx
+++ b/react/features/participants-pane/components/web/ParticipantsPane.tsx
@@ -31,16 +31,12 @@ import MeetingParticipants from './MeetingParticipants';
 const useStyles = makeStyles()(theme => {
    return {
        container: {
-            boxSizing: 'border-box' as const,
+            boxSizing: 'border-box',
            flex: 1,
-            overflowY: 'auto' as const,
-            position: 'relative' as const,
+            overflowY: 'auto',
+            position: 'relative',
            padding: `0 ${participantsPaneTheme.panePadding}px`,

-            [`& > * + *:not(.${participantsPaneTheme.ignoredChildClassName})`]: {
-                marginTop: theme.spacing(3)
-            },
-
            '&::-webkit-scrollbar': {
                display: 'none'
            }
@@ -55,10 +51,10 @@ const useStyles = makeStyles()(theme => {

        header: {
            alignItems: 'center',
-            boxSizing: 'border-box' as const,
+            boxSizing: 'border-box',
            display: 'flex',
-            height: `${participantsPaneTheme.headerSize}px`,
-            padding: '0 20px',
+            height: '60px',
+            padding: `0 ${participantsPaneTheme.panePadding}px`,
            justifyContent: 'flex-end'
        },

@@ -85,7 +81,7 @@ const useStyles = makeStyles()(theme => {
        },

        footerMoreContainer: {
-            position: 'relative' as const
+            position: 'relative'
        }
    };
 });