sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

refactor: rename RoomListHeader as LegacyRoomListHeader (#29308)

Browse Source
This commit is contained in:
Florian Duros
2025-02-19 14:06:01 +00:00
committed by GitHub
parent 76b3be6263
commit 28ed506fe1
6 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_components.pcss
+1 -1
View File
@@ -288,6 +288,7 @@
@import "./views/rooms/_IRCLayout.pcss"; @import "./views/rooms/_IRCLayout.pcss";
@import "./views/rooms/_InvitedIconView.pcss"; @import "./views/rooms/_InvitedIconView.pcss";
@import "./views/rooms/_JumpToBottomButton.pcss"; @import "./views/rooms/_JumpToBottomButton.pcss";
@import "./views/rooms/_LegacyRoomListHeader.pcss";
@import "./views/rooms/_LinkPreviewGroup.pcss"; @import "./views/rooms/_LinkPreviewGroup.pcss";
@import "./views/rooms/_LinkPreviewWidget.pcss"; @import "./views/rooms/_LinkPreviewWidget.pcss";
@import "./views/rooms/_LiveContentSummary.pcss"; @import "./views/rooms/_LiveContentSummary.pcss";
@@ -312,7 +313,6 @@
@import "./views/rooms/_RoomInfoLine.pcss"; @import "./views/rooms/_RoomInfoLine.pcss";
@import "./views/rooms/_RoomKnocksBar.pcss"; @import "./views/rooms/_RoomKnocksBar.pcss";
@import "./views/rooms/_RoomList.pcss"; @import "./views/rooms/_RoomList.pcss";
@import "./views/rooms/_RoomListHeader.pcss";
@import "./views/rooms/_RoomPreviewBar.pcss"; @import "./views/rooms/_RoomPreviewBar.pcss";
@import "./views/rooms/_RoomPreviewCard.pcss"; @import "./views/rooms/_RoomPreviewCard.pcss";
@import "./views/rooms/_RoomSearchAuxPanel.pcss"; @import "./views/rooms/_RoomSearchAuxPanel.pcss";
res/css/structures/_LeftPanel.pcss
+2 -2
View File
@@ -113,7 +113,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
align-items: center; align-items: center;
& + .mx_RoomListHeader { & + .mx_LegacyRoomListHeader {
margin-top: 12px; margin-top: 12px;
} }
@@ -180,7 +180,7 @@ Please see LICENSE files in the repository root for full details.
} }
} }
.mx_RoomListHeader:first-child { .mx_LegacyRoomListHeader:first-child {
margin-top: 12px; margin-top: 12px;
} }
res/css/views/rooms/_RoomListHeader.pcss → res/css/views/rooms/_LegacyRoomListHeader.pcss
+11 -11
View File
@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
.mx_RoomListHeader { .mx_LegacyRoomListHeader {
display: flex; display: flex;
align-items: center; align-items: center;
.mx_RoomListHeader_contextLessTitle, .mx_LegacyRoomListHeader_contextLessTitle,
.mx_RoomListHeader_contextMenuButton { .mx_LegacyRoomListHeader_contextMenuButton {
font: var(--cpd-font-heading-sm-semibold); font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
padding: 1px 24px 1px 4px; padding: 1px 24px 1px 4px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
user-select: none; user-select: none;
} }
.mx_RoomListHeader_contextMenuButton { .mx_LegacyRoomListHeader_contextMenuButton {
border-radius: 6px; border-radius: 6px;
&:hover { &:hover {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
} }
} }
.mx_RoomListHeader_plusButton { .mx_LegacyRoomListHeader_plusButton {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 8px; border-radius: 8px;
@@ -88,21 +88,21 @@ Please see LICENSE files in the repository root for full details.
} }
} }
.mx_RoomListHeader_iconInvite::before { .mx_LegacyRoomListHeader_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg"); mask-image: url("$(res)/img/element-icons/room/invite.svg");
} }
.mx_RoomListHeader_iconStartChat::before { .mx_LegacyRoomListHeader_iconStartChat::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
} }
.mx_RoomListHeader_iconNewRoom::before { .mx_LegacyRoomListHeader_iconNewRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg"); mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
} }
.mx_RoomListHeader_iconNewVideoRoom::before { .mx_LegacyRoomListHeader_iconNewVideoRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg"); mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
} }
.mx_RoomListHeader_iconExplore::before { .mx_LegacyRoomListHeader_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg"); mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
} }
.mx_RoomListHeader_iconPlus::before { .mx_LegacyRoomListHeader_iconPlus::before {
mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
} }
src/components/structures/LeftPanel.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import { MetaSpace, type SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/sp
import { getKeyBindingsManager } from "../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../KeyBindingsManager";
import UIStore from "../../stores/UIStore"; import UIStore from "../../stores/UIStore";
import { type IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex"; import { type IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
import RoomListHeader from "../views/rooms/RoomListHeader"; import LegacyRoomListHeader from "../views/rooms/LegacyRoomListHeader";
import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore"; import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
import { UPDATE_EVENT } from "../../stores/AsyncStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore";
@@ -415,7 +415,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
<div className="mx_LeftPanel_roomListContainer"> <div className="mx_LeftPanel_roomListContainer">
{shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()} {shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()}
{this.renderBreadcrumbs()} {this.renderBreadcrumbs()}
{!this.props.isMinimized && <RoomListHeader onVisibilityChange={this.refreshStickyHeaders} />} {!this.props.isMinimized && <LegacyRoomListHeader onVisibilityChange={this.refreshStickyHeaders} />}
<nav className="mx_LeftPanel_roomListWrapper" aria-label={_t("common|rooms")}> <nav className="mx_LeftPanel_roomListWrapper" aria-label={_t("common|rooms")}>
<div <div
className={roomListClasses} className={roomListClasses}
src/components/views/rooms/RoomListHeader.tsx → src/components/views/rooms/LegacyRoomListHeader.tsx
+16 -16
View File
@@ -108,7 +108,7 @@ interface IProps {
onVisibilityChange?(): void; onVisibilityChange?(): void;
} }
const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => { const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>(); const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>(); const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
@@ -178,7 +178,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
inviteOption = ( inviteOption = (
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|invite")} label={_t("action|invite")}
iconClassName="mx_RoomListHeader_iconInvite" iconClassName="mx_LegacyRoomListHeader_iconInvite"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -194,7 +194,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
newRoomOptions = ( newRoomOptions = (
<> <>
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewRoom" iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
label={_t("action|new_room")} label={_t("action|new_room")}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@@ -206,7 +206,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/> />
{videoRoomsEnabled && ( {videoRoomsEnabled && (
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewVideoRoom" iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
label={_t("action|new_video_room")} label={_t("action|new_video_room")}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@@ -236,7 +236,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{newRoomOptions} {newRoomOptions}
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|explore_rooms")} label={_t("action|explore_rooms")}
iconClassName="mx_RoomListHeader_iconExplore" iconClassName="mx_LegacyRoomListHeader_iconExplore"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -251,7 +251,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|add_existing_room")} label={_t("action|add_existing_room")}
iconClassName="mx_RoomListHeader_iconPlus" iconClassName="mx_LegacyRoomListHeader_iconPlus"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -264,7 +264,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{canCreateSpaces && ( {canCreateSpaces && (
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("room_list|add_space_label")} label={_t("room_list|add_space_label")}
iconClassName="mx_RoomListHeader_iconPlus" iconClassName="mx_LegacyRoomListHeader_iconPlus"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -289,7 +289,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
<> <>
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|start_new_chat")} label={_t("action|start_new_chat")}
iconClassName="mx_RoomListHeader_iconStartChat" iconClassName="mx_LegacyRoomListHeader_iconStartChat"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -300,7 +300,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|new_room")} label={_t("action|new_room")}
iconClassName="mx_RoomListHeader_iconNewRoom" iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -312,7 +312,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{videoRoomsEnabled && ( {videoRoomsEnabled && (
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("action|new_video_room")} label={_t("action|new_video_room")}
iconClassName="mx_RoomListHeader_iconNewVideoRoom" iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -333,7 +333,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
joinRoomOpt = ( joinRoomOpt = (
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("room_list|join_public_room_label")} label={_t("room_list|join_public_room_label")}
iconClassName="mx_RoomListHeader_iconExplore" iconClassName="mx_LegacyRoomListHeader_iconExplore"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -378,13 +378,13 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
}) })
.join("\n"); .join("\n");
let contextMenuButton: JSX.Element = <div className="mx_RoomListHeader_contextLessTitle">{title}</div>; let contextMenuButton: JSX.Element = <div className="mx_LegacyRoomListHeader_contextLessTitle">{title}</div>;
if (canShowMainMenu) { if (canShowMainMenu) {
const commonProps = { const commonProps = {
ref: mainMenuHandle, ref: mainMenuHandle,
onClick: openMainMenu, onClick: openMainMenu,
isExpanded: mainMenuDisplayed, isExpanded: mainMenuDisplayed,
className: "mx_RoomListHeader_contextMenuButton", className: "mx_LegacyRoomListHeader_contextMenuButton",
children: title, children: title,
}; };
@@ -401,7 +401,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
} }
return ( return (
<aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}> <aside className="mx_LegacyRoomListHeader" aria-label={_t("room|context_menu|title")}>
{contextMenuButton} {contextMenuButton}
{pendingActionSummary ? ( {pendingActionSummary ? (
<Tooltip label={pendingActionSummary} isTriggerInteractive={false}> <Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
@@ -413,7 +413,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
ref={plusMenuHandle} ref={plusMenuHandle}
onClick={openPlusMenu} onClick={openPlusMenu}
isExpanded={plusMenuDisplayed} isExpanded={plusMenuDisplayed}
className="mx_RoomListHeader_plusButton" className="mx_LegacyRoomListHeader_plusButton"
title={_t("action|add")} title={_t("action|add")}
/> />
)} )}
@@ -423,4 +423,4 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
); );
}; };
export default RoomListHeader; export default LegacyRoomListHeader;
test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ import { act, render, screen, fireEvent, type RenderResult } from "jest-matrix-r
import SpaceStore from "../../../../../src/stores/spaces/SpaceStore"; import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
import { MetaSpace } from "../../../../../src/stores/spaces"; import { MetaSpace } from "../../../../../src/stores/spaces";
import _RoomListHeader from "../../../../../src/components/views/rooms/RoomListHeader"; import _RoomListHeader from "../../../../../src/components/views/rooms/LegacyRoomListHeader";
import * as testUtils from "../../../../test-utils"; import * as testUtils from "../../../../test-utils";
import { stubClient, mkSpace } from "../../../../test-utils"; import { stubClient, mkSpace } from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../../src/utils/DMRoomMap";