ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2026-05-14 12:57:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Move ListItem to base/ui
This commit is contained in:
Robert Pintilii
2023-04-04 13:02:45 +03:00
committed by GitHub
parent 7457480f02
commit db5e63411f
15 changed files with 106 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
react/features/base/components/themes/participantsPaneTheme.json
View File

@@ -1,10 +1,5 @@
{
"colors": {
"moderationDisabled": "#E54B4B"
},
"headerSize": 60,
"ignoredChildClassName": "ignore-child",
"panePadding": 16,
"panePadding": 24,
"participantsPaneWidth": 315,
"MD_BREAKPOINT": "580px"
}

2
react/features/base/ui/components/web/Button.tsx
View File

@@ -154,7 +154,7 @@ const useStyles = makeStyles()(theme => {
...withPixelLineHeight(theme.typography.labelBold),
'&.iconButton': {
padding: '6px'
padding: theme.spacing(1)
}
},

5
react/features/base/ui/components/web/ContextMenu.tsx
View File

@@ -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
) }

40
react/features/base/components/participants-pane-list/ListItem.tsx → react/features/base/ui/components/web/ListItem.tsx
View File

@@ -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>

4
react/features/base/ui/constants.web.ts
View File

@@ -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)',