diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c449ea2caf..b5660a83f9 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -4335,10 +4335,10 @@ button.module-image__border-overlay:focus { @include font-body-1; display: flex; align-items: center; - justify-content: space-between; margin-block: 2px; - padding-block: 5px; - padding-inline: 10px; + padding-block: 8px; + padding-inline-start: 10px; + padding-inline-end: 2px; list-style-type: none; border-radius: 6px; &:hover { @@ -4348,8 +4348,9 @@ button.module-image__border-overlay:focus { &__avatar-and-name { display: flex; + flex-grow: 1; + min-width: 0; align-items: center; - max-width: 172px; } &__name { @@ -4387,12 +4388,19 @@ button.module-image__border-overlay:focus { } } - &__status { + &__status-icon { display: flex; - flex-basis: 64px; - flex-shrink: 0; - align-items: center; - justify-content: end; + flex: none; + margin-inline: 8px; + height: 16px; + width: 16px; + } + + &__hand-raised { + @include color-svg( + '../images/icons/v3/raise_hand/raise_hand-light.svg', + $color-white + ); } &__muted { @@ -4401,10 +4409,6 @@ button.module-image__border-overlay:focus { '../images/icons/v3/video/video-slash-compact-light.svg', $color-white ); - display: inline-block; - margin-inline-start: 16px; - height: 16px; - width: 16px; } &--audio { @@ -4412,10 +4416,6 @@ button.module-image__border-overlay:focus { '../images/icons/v3/mic/mic-slash-compact-light.svg', $color-white ); - display: inline-block; - margin-inline-start: 16px; - height: 16px; - width: 16px; } } @@ -4424,10 +4424,6 @@ button.module-image__border-overlay:focus { '../images/icons/v3/share_screen/share_screen-fill-light.svg', $color-white ); - display: inline-block; - margin-inline-start: 16px; - height: 16px; - width: 16px; } } diff --git a/stylesheets/components/CallingRaisedHandsList.scss b/stylesheets/components/CallingRaisedHandsList.scss index f37380e0b6..4bdb6c1c71 100644 --- a/stylesheets/components/CallingRaisedHandsList.scss +++ b/stylesheets/components/CallingRaisedHandsList.scss @@ -71,10 +71,6 @@ ); } -.CallingRaisedHandsList__AvatarAndName { - max-width: 205px; -} - .CallingRaisedHandsList__NameHandIcon { display: inline-block; $icon-size: 16px; @@ -90,7 +86,8 @@ .CallingRaisedHandsList__LowerMyHandLink { @include button-reset; - margin-inline-end: 24px; + display: flex; + margin-inline-end: 16px; font-size: 13px; font-weight: 500; color: $color-ultramarine-pastel; diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx index b2e455a40d..3c3674dede 100644 --- a/ts/components/CallManager.tsx +++ b/ts/components/CallManager.tsx @@ -324,6 +324,14 @@ function ActiveCallManager({ ); } + let isHandRaised = false; + if (activeCall.callMode === CallMode.Group) { + const { raisedHands, localDemuxId } = activeCall; + if (localDemuxId) { + isHandRaised = raisedHands.has(localDemuxId); + } + } + const groupCallParticipantsForParticipantsList = activeCall.callMode === CallMode.Group ? [ @@ -337,6 +345,7 @@ function ActiveCallManager({ ...me, hasRemoteAudio: hasLocalAudio, hasRemoteVideo: hasLocalVideo, + isHandRaised, presenting: Boolean(activeCall.presentingSource), }, ] diff --git a/ts/components/CallingParticipantsList.stories.tsx b/ts/components/CallingParticipantsList.stories.tsx index a6893937a9..c127d591b0 100644 --- a/ts/components/CallingParticipantsList.stories.tsx +++ b/ts/components/CallingParticipantsList.stories.tsx @@ -75,6 +75,7 @@ export function ManyParticipants(): JSX.Element { }), createParticipant({ hasRemoteAudio: true, + hasRemoteVideo: true, presenting: true, name: 'Rage Trunks', title: 'Rage Trunks', @@ -90,8 +91,18 @@ export function ManyParticipants(): JSX.Element { title: 'Goku Black', }), createParticipant({ + isHandRaised: true, title: 'Supreme Kai Zamasu', }), + createParticipant({ + hasRemoteAudio: false, + hasRemoteVideo: true, + isHandRaised: true, + title: 'Chi Chi', + }), + createParticipant({ + title: 'Someone With A Really Long Name', + }), ], }); return ; diff --git a/ts/components/CallingParticipantsList.tsx b/ts/components/CallingParticipantsList.tsx index 82de0dd4b8..551df60e8a 100644 --- a/ts/components/CallingParticipantsList.tsx +++ b/ts/components/CallingParticipantsList.tsx @@ -6,6 +6,7 @@ import React, { useContext } from 'react'; import { createPortal } from 'react-dom'; import FocusTrap from 'focus-trap-react'; +import classNames from 'classnames'; import { Avatar, AvatarSize } from './Avatar'; import { ContactName } from './conversation/ContactName'; @@ -20,6 +21,7 @@ import { ModalContainerContext } from './ModalHost'; type ParticipantType = ConversationType & { hasRemoteAudio?: boolean; hasRemoteVideo?: boolean; + isHandRaised?: boolean; presenting?: boolean; }; @@ -146,17 +148,29 @@ export const CallingParticipantsList = React.memo( )} -
- {participant.hasRemoteVideo === false ? ( - - ) : null} - {participant.presenting ? ( - - ) : null} - {participant.hasRemoteAudio === false ? ( - - ) : null} -
+ + + ) )} diff --git a/ts/components/CallingRaisedHandsList.tsx b/ts/components/CallingRaisedHandsList.tsx index d5eb7b0ed5..11a0157ab8 100644 --- a/ts/components/CallingRaisedHandsList.tsx +++ b/ts/components/CallingRaisedHandsList.tsx @@ -114,20 +114,18 @@ export function CallingRaisedHandsList({ /> )} -
- {localHandRaised && - ourServiceId && - participant.serviceId === ourServiceId && ( - - )} -
-
+ {localHandRaised && + ourServiceId && + participant.serviceId === ourServiceId && ( + + )} +
))}