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

Add room topic and animation (#11352)

Browse source 
* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Mark room as optional in room topic hook

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints

* Add room topic to room header

* lintfix

* lintfix & clamp to one line

* Revert optimisations to DecoratedRoomAvatar

* Add test for opening the room summary

* Make transition honour prefer-reduced-motion

* Fallback when room is undefined

* fix snapshot
This commit is contained in:
Germain 2023-08-02 11:54:06 +01:00 • committed by GitHub
parent 8166306e0f
commit 33299af5c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,16 +19,36 @@ import React from "react";
import type { Room } from "matrix-js-sdk/src/models/room";
import { IOOBData } from "../../../stores/ThreepidInviteStore";
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 RoomAvatar from "../avatars/RoomAvatar";
export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element {
const roomName = useRoomName(room, oobData);
const roomTopic = useTopic(room);
return (
<header className="mx_RoomHeader light-panel">
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_name" dir="auto" title={roomName} role="heading" aria-level={1}>
<header
className="mx_RoomHeader light-panel"
onClick={() => {
const rightPanel = RightPanelStore.instance;
rightPanel.isOpen
? rightPanel.togglePanel(null)
: rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
}}
>
{room ? (
<DecoratedRoomAvatar room={room} oobData={oobData} avatarSize={40} displayBadge={false} />
) : (
<RoomAvatar oobData={oobData} width={40} height={40} />
)}
<div className="mx_RoomHeader_info">
<div dir="auto" title={roomName} role="heading" aria-level={1} className="mx_RoomHeader_name">
{roomName}
</div>
{roomTopic && <div className="mx_RoomHeader_topic">{roomTopic.text}</div>}
</div>
</header>
);