Skip to content

Commit 8aea476

Browse files
author
AndyLnd
committed
feat(call): Show moderation menu chevron
1 parent 97512e4 commit 8aea476

File tree

4 files changed

+84
-47
lines changed

4 files changed

+84
-47
lines changed

‎src/script/components/list/ConversationListCallingCell.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,14 @@ const ConversationListCallingCell: React.FC<CallingCellProps> = ({
9292
participating_user_ets: userEts,
9393
selfUser,
9494
display_name: conversationName,
95-
} = useKoSubscribableChildren(conversation, ['isGroup', 'participating_user_ets', 'selfUser', 'display_name']);
95+
roles,
96+
} = useKoSubscribableChildren(conversation, [
97+
'isGroup',
98+
'participating_user_ets',
99+
'selfUser',
100+
'display_name',
101+
'roles',
102+
]);
96103

97104
const {isMinimized} = useKoSubscribableChildren(multitasking, ['isMinimized']);
98105
const {isVideoCallingEnabled} = useKoSubscribableChildren(teamState, ['isVideoCallingEnabled']);
@@ -135,15 +142,11 @@ const ConversationListCallingCell: React.FC<CallingCellProps> = ({
135142

136143
const showJoinButton = conversation && isStillOngoing && temporaryUserStyle;
137144
const [showParticipants, setShowParticipants] = useState(false);
145+
const isModerator = roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
138146

139147
const getParticipantContext = (event: React.MouseEvent<HTMLDivElement>, participant: Participant) => {
140148
event.preventDefault();
141149

142-
const isNotModerator = conversation.roles()[selfUser.id] !== DefaultConversationRoleName.WIRE_ADMIN;
143-
if (isNotModerator) {
144-
return;
145-
}
146-
147150
const muteParticipant = {
148151
click: () =>
149152
callingRepository.sendModeratorMute(conversation.id, {[participant.user.id]: [participant.clientId]}),
@@ -387,7 +390,8 @@ const ConversationListCallingCell: React.FC<CallingCellProps> = ({
387390
selfInTeam={selfUser?.inTeam()}
388391
isSelfVerified={isSelfVerified}
389392
external={teamState.isExternal(participant.user.id)}
390-
onContextMenu={event => getParticipantContext(event, participant)}
393+
onContextMenu={isModerator ? event => getParticipantContext(event, participant) : undefined}
394+
showDropdown={isModerator}
391395
/>
392396
))}
393397
</div>

‎src/script/components/list/ParticipantItem.tsx‎

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export interface ParticipantItemProps extends React.HTMLProps<HTMLDivElement> {
5656
participant: User | ServiceEntity;
5757
selfInTeam?: boolean;
5858
showArrow?: boolean;
59+
showDropdown?: boolean;
5960
}
6061

6162
const ParticipantItem: React.FC<ParticipantItemProps> = ({
@@ -74,6 +75,7 @@ const ParticipantItem: React.FC<ParticipantItemProps> = ({
7475
participant,
7576
selfInTeam,
7677
showArrow = false,
78+
showDropdown = false,
7779
onContextMenu = noop,
7880
}) => {
7981
const [viewportElementRef, setViewportElementRef] = useEffectRef<HTMLDivElement>();
@@ -141,42 +143,49 @@ const ParticipantItem: React.FC<ParticipantItemProps> = ({
141143
</div>
142144

143145
<div className="participant-item__content">
144-
<div className="participant-item__content__name-wrapper">
145-
{isUser && selfInTeam && (
146-
<AvailabilityState
147-
availability={availability}
148-
className="participant-item__content__availability participant-item__content__name"
149-
dataUieName="status-name"
150-
label={participantName}
151-
/>
152-
)}
146+
<div className="participant-item__content__text">
147+
<div className="participant-item__content__name-wrapper">
148+
{isUser && selfInTeam && (
149+
<AvailabilityState
150+
availability={availability}
151+
className="participant-item__content__availability participant-item__content__name"
152+
dataUieName="status-name"
153+
label={participantName}
154+
/>
155+
)}
153156

154-
{(isService || !selfInTeam) && (
155-
<div className="participant-item__content__name" data-uie-name="status-name">
156-
{participantName}
157-
</div>
158-
)}
159-
{isSelf && <div className="participant-item__content__self-indicator">{selfString}</div>}
160-
</div>
161-
<div className="participant-item__content__info">
162-
{contentInfoText && (
163-
<Fragment>
164-
<span
165-
className={cx('participant-item__content__username label-username-notext', {
166-
'label-username': hasUsernameInfo,
167-
})}
168-
data-uie-name="status-username"
169-
>
170-
{contentInfoText}
171-
</span>
172-
{hasUsernameInfo && badge && (
173-
<span className="participant-item__content__badge" data-uie-name="status-partner">
174-
{badge}
157+
{(isService || !selfInTeam) && (
158+
<div className="participant-item__content__name" data-uie-name="status-name">
159+
{participantName}
160+
</div>
161+
)}
162+
{isSelf && <div className="participant-item__content__self-indicator">{selfString}</div>}
163+
</div>
164+
<div className="participant-item__content__info">
165+
{contentInfoText && (
166+
<Fragment>
167+
<span
168+
className={cx('participant-item__content__username label-username-notext', {
169+
'label-username': hasUsernameInfo,
170+
})}
171+
data-uie-name="status-username"
172+
>
173+
{contentInfoText}
175174
</span>
176-
)}
177-
</Fragment>
178-
)}
175+
{hasUsernameInfo && badge && (
176+
<span className="participant-item__content__badge" data-uie-name="status-partner">
177+
{badge}
178+
</span>
179+
)}
180+
</Fragment>
181+
)}
182+
</div>
179183
</div>
184+
{showDropdown && (
185+
<div className="participant-item__content__chevron" onClick={onContextMenu}>
186+
<Icon.Chevron />
187+
</div>
188+
)}
180189
</div>
181190

182191
{!isOthersMode && isGuest && (

‎src/style/components/list/conversation-list-calling-cell.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140
height: 40px !important;
141141
cursor: default !important;
142142
fill: var(--background-fade-48);
143-
pointer-events: none;
143+
//pointer-events: none;
144144

145145
&__image {
146146
width: 48px !important;

‎src/style/components/list/participant-item.less‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,40 @@
111111

112112
&__content {
113113
display: flex;
114-
min-width: 0; // this will ensure that ellipses is working
114+
min-width: 0;
115115
height: @avatar-diameter-m;
116116
flex: 1 1;
117-
flex-direction: column;
118-
align-items: flex-start;
119-
justify-content: center;
120-
font-size: 14px;
121-
font-weight: 400;
117+
align-items: center;
122118
line-height: 16px;
123119

120+
&__text {
121+
display: flex;
122+
min-width: 0; // this will ensure that ellipses is working
123+
height: @avatar-diameter-m;
124+
flex-direction: column;
125+
align-items: flex-start;
126+
justify-content: center;
127+
font-size: 14px;
128+
font-weight: 400;
129+
line-height: 16px;
130+
}
131+
132+
&__chevron {
133+
display: flex;
134+
opacity: 0;
135+
transition: opacity 0.25s ease-in-out;
136+
137+
:hover > & {
138+
opacity: 1;
139+
}
140+
141+
svg {
142+
width: 8px;
143+
path {
144+
fill: currentColor;
145+
}
146+
}
147+
}
124148
&__availability {
125149
.availability-state-label {
126150
.ellipsis;

0 commit comments

Comments
 (0)