imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add face pile to rooms (#11356)

Browse source 
* Add face pile to rooms

* Migrate FacePile to use Compound

* Fix CI

* Use FacePile component in room header

* Add facepile tests

* Make dead code CI happy

* Lint

* Fix tests

* Fix CSS selectors

* Update room face pile snapshot

* Use useMemo instead of useState and useEffect

* Remove unused imports

* Update snapshot

* Update snapshot
This commit is contained in:
Germain 2023-08-30 18:55:02 +01:00 • committed by GitHub
parent af268b4a03
commit dc70ea5059
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 445 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/views/rooms/RoomHeader.tsx
View file

@ -21,14 +21,18 @@ import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/v
import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
import { CallType } from "matrix-js-sdk/src/webrtc/call";
import { EventType } from "matrix-js-sdk/src/matrix";
import type { Room } from "matrix-js-sdk/src/matrix";
import { _t } from "../../../languageHandler";
import { useRoomName } from "../../../hooks/useRoomName";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { useTopic } from "../../../hooks/room/useTopic";
import { useAccountData } from "../../../hooks/useAccountData";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
import { _t, getCurrentLanguage } from "../../../languageHandler";
import { Flex } from "../../utils/Flex";
import { Box } from "../../utils/Box";
import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
@ -41,6 +45,7 @@ import { NotificationColor } from "../../../stores/notifications/NotificationCol
import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
import SdkConfig from "../../../SdkConfig";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import FacePile from "../elements/FacePile";
/**
* A helper to transform a notification color to the what the Compound Icon Button
@ -67,9 +72,24 @@ function showOrHidePanel(phase: RightPanelPhases): void {
}
export default function RoomHeader({ room }: { room: Room }): JSX.Element {
const client = useMatrixClientContext();
const roomName = useRoomName(room);
const roomTopic = useTopic(room);
const members = useRoomMembers(room);
const memberCount = useRoomMemberCount(room);
const directRoomsList = useAccountData<Record<string, string[]>>(client, EventType.Direct);
const isDirectMessage = useMemo(() => {
for (const [, dmRoomList] of Object.entries(directRoomsList)) {
if (dmRoomList.includes(room?.roomId ?? "")) {
return true;
}
}
return false;
}, [directRoomsList, room?.roomId]);
const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
@ -119,10 +139,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
gap="var(--cpd-space-3x)"
className="mx_RoomHeader light-panel"
onClick={() => {
const rightPanel = RightPanelStore.instance;
rightPanel.isOpen
? rightPanel.togglePanel(null)
: rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
showOrHidePanel(RightPanelPhases.RoomSummary);
}}
>
<DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
@ -170,7 +187,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
onClick={() => {
showOrHidePanel(RightPanelPhases.ThreadPanel);
}}
title={_t("Threads")}
title={_t("common|threads")}
>
<ThreadsIcon />
</IconButton>
@ -184,6 +201,27 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
<NotificationsIcon />
</IconButton>
</Flex>
{!isDirectMessage && (
<BodyText
as="div"
size="sm"
weight="medium"
aria-label={_t("%(count)s members", { count: memberCount })}
onClick={(e: React.MouseEvent) => {
showOrHidePanel(RightPanelPhases.RoomMemberList);
e.stopPropagation();
}}
>
<FacePile
className="mx_RoomHeader_members"
members={members.slice(0, 3)}
size="20px"
overflow={false}
>
{memberCount.toLocaleString(getCurrentLanguage())}
</FacePile>
</BodyText>
)}
</Flex>
);
}