Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit d551469

Browse files
author
Germain
authored
Room header UI updates (#11507)
* Fix performance issues with useRoomMembers With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless * Add public room indicator * Format room members count better * Add public room test * Add search to room summary card * Update settings UI * Update snapshot * Remove default title attribute
1 parent 30d997e commit d551469

32 files changed

+176
-112
lines changed

‎res/css/_common.pcss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,14 @@ code {
134134
color: $muted-fg-color;
135135
}
136136

137+
.text-primary {
138+
color: $primary-content;
139+
}
140+
141+
.text-secondary {
142+
color: $secondary-content;
143+
}
144+
137145
.mx_Verified {
138146
color: $e2e-verified-color;
139147
}

‎res/css/views/right_panel/_RoomSummaryCard.pcss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,3 +268,7 @@ limitations under the License.
268268
.mx_RoomSummaryCard_icon_poll::before {
269269
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
270270
}
271+
272+
.mx_RoomSummaryCard_icon_search::before {
273+
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
274+
}

‎res/css/views/rooms/_RoomHeader.pcss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ limitations under the License.
2626
flex: 1;
2727
}
2828

29+
.mx_RoomHeader_heading {
30+
display: flex;
31+
gap: var(--cpd-space-1x);
32+
align-items: center;
33+
}
34+
2935
.mx_RoomHeader_topic {
3036
height: 0;
3137
opacity: 0;

‎src/components/structures/RightPanel.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ interface RoomlessProps extends BaseProps {
5757
interface RoomProps extends BaseProps {
5858
room: Room;
5959
permalinkCreator: RoomPermalinkCreator;
60+
onSearchClick?: () => void;
6061
}
6162

6263
type Props = XOR<RoomlessProps, RoomProps>;
@@ -293,6 +294,7 @@ export default class RightPanel extends React.Component<Props, IState> {
293294
onClose={this.onClose}
294295
// whenever RightPanel is passed a room it is passed a permalinkcreator
295296
permalinkCreator={this.props.permalinkCreator!}
297+
onSearchClick={this.props.onSearchClick}
296298
/>
297299
);
298300
}

‎src/components/structures/RoomView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2443,6 +2443,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
24432443
resizeNotifier={this.props.resizeNotifier}
24442444
permalinkCreator={this.permalinkCreator}
24452445
e2eStatus={this.state.e2eStatus}
2446+
onSearchClick={this.onSearchClick}
24462447
/>
24472448
) : undefined;
24482449

‎src/components/views/avatars/BaseAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
9999
const {
100100
name,
101101
idName,
102-
title = "",
102+
title,
103103
url,
104104
urls,
105105
size = "40px",

‎src/components/views/right_panel/RoomSummaryCard.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ interface IProps {
5858
room: Room;
5959
permalinkCreator: RoomPermalinkCreator;
6060
onClose(): void;
61+
onSearchClick?: () => void;
6162
}
6263

6364
interface IAppsSectionProps {
@@ -272,7 +273,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
272273
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
273274
};
274275

275-
const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => {
276+
const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, onSearchClick }) => {
276277
const cli = useContext(MatrixClientContext);
277278

278279
const onShareRoomClick = (): void => {
@@ -342,6 +343,14 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
342343
{_t("common|people")}
343344
<span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
344345
</Button>
346+
<Button
347+
className="mx_RoomSummaryCard_icon_search"
348+
onClick={() => {
349+
onSearchClick?.();
350+
}}
351+
>
352+
{_t("Search")}
353+
</Button>
345354
{!isVideoRoom && (
346355
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
347356
{_t("Files")}

‎src/components/views/rooms/RoomHeader.tsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@ import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/thr
2222
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
2323
import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
2424
import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
25+
import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
2526
import { CallType } from "matrix-js-sdk/src/webrtc/call";
26-
import { EventType, type Room } from "matrix-js-sdk/src/matrix";
27+
import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
2728

2829
import { useRoomName } from "../../../hooks/useRoomName";
29-
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
3030
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
3131
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
3232
import { useTopic } from "../../../hooks/room/useTopic";
3333
import { useAccountData } from "../../../hooks/useAccountData";
3434
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
3535
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
36-
import { _t, getCurrentLanguage } from "../../../languageHandler";
36+
import { _t } from "../../../languageHandler";
3737
import { Flex } from "../../utils/Flex";
3838
import { Box } from "../../utils/Box";
3939
import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
@@ -46,6 +46,9 @@ import { placeCall } from "../../../utils/room/placeCall";
4646
import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
4747
import { E2EStatus } from "../../../utils/ShieldUtils";
4848
import FacePile from "../elements/FacePile";
49+
import { useRoomState } from "../../../hooks/useRoomState";
50+
import RoomAvatar from "../avatars/RoomAvatar";
51+
import { formatCount } from "../../../utils/FormattingUtils";
4952

5053
/**
5154
* A helper to transform a notification color to the what the Compound Icon Button
@@ -76,9 +79,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
7679

7780
const roomName = useRoomName(room);
7881
const roomTopic = useTopic(room);
82+
const roomState = useRoomState(room);
7983

80-
const members = useRoomMembers(room);
81-
const memberCount = useRoomMemberCount(room);
84+
const members = useRoomMembers(room, 2500);
85+
const memberCount = useRoomMemberCount(room, { throttleWait: 2500 });
8286

8387
const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
8488

@@ -116,7 +120,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
116120
showOrHidePanel(RightPanelPhases.RoomSummary);
117121
}}
118122
>
119-
<DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
123+
<RoomAvatar room={room} size="40px" />
120124
<Box flex="1" className="mx_RoomHeader_info">
121125
<BodyText
122126
as="div"
@@ -126,9 +130,21 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
126130
title={roomName}
127131
role="heading"
128132
aria-level={1}
133+
className="mx_RoomHeader_heading"
129134
>
130135
{roomName}
131136

137+
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
138+
<Tooltip label={_t("Public room")}>
139+
<PublicIcon
140+
width="16px"
141+
height="16px"
142+
className="text-secondary"
143+
aria-label={_t("Public room")}
144+
/>
145+
</Tooltip>
146+
)}
147+
132148
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
133149
<Tooltip label={_t("common|verified")}>
134150
<VerifiedIcon
@@ -214,7 +230,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
214230
size="20px"
215231
overflow={false}
216232
>
217-
{memberCount.toLocaleString(getCurrentLanguage())}
233+
{formatCount(memberCount)}
218234
</FacePile>
219235
</BodyText>
220236
)}

‎src/hooks/useRoomMembers.ts

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,20 @@ import { useTypedEventEmitter } from "./useEventEmitter";
2323
// Hook to simplify watching Matrix Room joined members
2424
export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => {
2525
const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
26-
useTypedEventEmitter(
27-
room.currentState,
28-
RoomStateEvent.Members,
29-
throttle(
30-
() => {
31-
setMembers(room.getJoinedMembers());
32-
},
33-
throttleWait,
34-
{ leading: true, trailing: true },
35-
),
26+
27+
const throttledUpdate = useMemo(
28+
() =>
29+
throttle(
30+
() => {
31+
setMembers(room.getJoinedMembers());
32+
},
33+
throttleWait,
34+
{ leading: true, trailing: true },
35+
),
36+
[room, throttleWait],
3637
);
38+
39+
useTypedEventEmitter(room.currentState, RoomStateEvent.Members, throttledUpdate);
3740
return members;
3841
};
3942

@@ -50,11 +53,11 @@ type RoomMemberCountOpts = {
5053
* @param opts The options.
5154
* @returns the room member count.
5255
*/
53-
export const useRoomMemberCount = (room: Room, opts: RoomMemberCountOpts = { throttleWait: 250 }): number => {
56+
export const useRoomMemberCount = (
57+
room: Room,
58+
{ throttleWait }: RoomMemberCountOpts = { throttleWait: 250 },
59+
): number => {
5460
const [count, setCount] = useState<number>(room.getJoinedMemberCount());
55-
56-
const { throttleWait } = opts;
57-
5861
const throttledUpdate = useMemo(
5962
() =>
6063
throttle(

‎src/i18n/strings/en_EN.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -897,7 +897,7 @@
897897
"hidebold": "Hide notification dot (only display counters badges)",
898898
"intentional_mentions": "Enable intentional mentions",
899899
"ask_to_join": "Enable ask to join",
900-
"new_room_decoration_ui": "Under active development, new room header & details interface"
900+
"new_room_decoration_ui": "New room header & details interface"
901901
},
902902
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
903903
"Notification Settings": "Notification Settings",
@@ -1876,14 +1876,14 @@
18761876
"Room %(name)s": "Room %(name)s",
18771877
"Recently visited rooms": "Recently visited rooms",
18781878
"No recently visited rooms": "No recently visited rooms",
1879+
"Public room": "Public room",
18791880
"Untrusted": "Untrusted",
18801881
"%(count)s members": {
18811882
"other": "%(count)s members",
18821883
"one": "%(count)s member"
18831884
},
18841885
"Video room": "Video room",
18851886
"Public space": "Public space",
1886-
"Public room": "Public room",
18871887
"Private space": "Private space",
18881888
"Private room": "Private room",
18891889
"%(names)s and %(name)s": "%(names)s and %(name)s",
@@ -2112,6 +2112,7 @@
21122112
"Edit widgets, bridges & bots": "Edit widgets, bridges & bots",
21132113
"Add widgets, bridges & bots": "Add widgets, bridges & bots",
21142114
"Not encrypted": "Not encrypted",
2115+
"Search": "Search",
21152116
"Files": "Files",
21162117
"Poll history": "Poll history",
21172118
"Pinned": "Pinned",

‎src/settings/Settings.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
548548
isFeature: true,
549549
labsGroup: LabGroup.Rooms,
550550
displayName: _td("labs|new_room_decoration_ui"),
551+
description: _td("labs|under_active_development"),
551552
supportedLevels: LEVELS_FEATURE,
552553
default: false,
553554
controller: new ReloadOnChangeController(),

‎test/components/structures/__snapshots__/RoomView-test.tsx.snap

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
2424
data-type="round"
2525
role="presentation"
2626
style="--cpd-avatar-size: 24px;"
27-
title=""
27+
title="@user:example.com"
2828
>
2929
u
3030
</span>
@@ -107,7 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
107107
data-type="round"
108108
role="presentation"
109109
style="--cpd-avatar-size: 24px;"
110-
title=""
110+
title="@user:example.com"
111111
>
112112
u
113113
</span>
@@ -187,7 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
187187
data-type="round"
188188
role="button"
189189
style="--cpd-avatar-size: 52px;"
190-
title=""
190+
title="@user:example.com"
191191
>
192192
u
193193
</button>
@@ -276,7 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
276276
data-type="round"
277277
role="presentation"
278278
style="--cpd-avatar-size: 24px;"
279-
title=""
279+
title="@user:example.com"
280280
>
281281
u
282282
</span>
@@ -356,7 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
356356
data-type="round"
357357
role="button"
358358
style="--cpd-avatar-size: 52px;"
359-
title=""
359+
title="@user:example.com"
360360
>
361361
u
362362
</button>
@@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
520520
data-type="round"
521521
role="presentation"
522522
style="--cpd-avatar-size: 24px;"
523-
title=""
523+
title="@user:example.com"
524524
>
525525
u
526526
</span>
@@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
599599
data-type="round"
600600
role="button"
601601
style="--cpd-avatar-size: 52px;"
602-
title=""
602+
title="@user:example.com"
603603
>
604604
u
605605
</button>

‎test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
7777
data-type="round"
7878
role="presentation"
7979
style="--cpd-avatar-size: 20px;"
80-
title=""
80+
title="room-id-2"
8181
>
8282
U
8383
</span>
@@ -148,7 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
148148
data-type="round"
149149
role="presentation"
150150
style="--cpd-avatar-size: 20px;"
151-
title=""
151+
title="room-id-3"
152152
>
153153
U
154154
</span>
@@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
220220
data-type="round"
221221
role="presentation"
222222
style="--cpd-avatar-size: 20px;"
223-
title=""
223+
title="space-id-4"
224224
>
225225
N
226226
</span>
@@ -298,7 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
298298
data-type="round"
299299
role="presentation"
300300
style="--cpd-avatar-size: 20px;"
301-
title=""
301+
title="room-id-5"
302302
>
303303
N
304304
</span>

‎test/components/structures/__snapshots__/UserMenu-test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
2424
data-type="round"
2525
role="presentation"
2626
style="--cpd-avatar-size: 32px;"
27-
title=""
27+
title="@userId:matrix.org"
2828
>
2929
u
3030
</span>

0 commit comments

Comments
 (0)