nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: rename RoomListHeader as LegacyRoomListHeader (#29308)

Browse Source
This commit is contained in:
Florian Duros
2025-02-19 15:06:01 +01: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

2
res/css/_components.pcss
View File

@@ -288,6 +288,7 @@
@import "./views/rooms/_IRCLayout.pcss";
@import "./views/rooms/_InvitedIconView.pcss";
@import "./views/rooms/_JumpToBottomButton.pcss";
@import "./views/rooms/_LegacyRoomListHeader.pcss";
@import "./views/rooms/_LinkPreviewGroup.pcss";
@import "./views/rooms/_LinkPreviewWidget.pcss";
@import "./views/rooms/_LiveContentSummary.pcss";
@@ -312,7 +313,6 @@
@import "./views/rooms/_RoomInfoLine.pcss";
@import "./views/rooms/_RoomKnocksBar.pcss";
@import "./views/rooms/_RoomList.pcss";
@import "./views/rooms/_RoomListHeader.pcss";
@import "./views/rooms/_RoomPreviewBar.pcss";
@import "./views/rooms/_RoomPreviewCard.pcss";
@import "./views/rooms/_RoomSearchAuxPanel.pcss";

4
res/css/structures/_LeftPanel.pcss
View File

@@ -113,7 +113,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
& + .mx_RoomListHeader {
& + .mx_LegacyRoomListHeader {
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;
}

22
res/css/views/rooms/_RoomListHeader.pcss → res/css/views/rooms/_LegacyRoomListHeader.pcss
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.
*/
.mx_RoomListHeader {
.mx_LegacyRoomListHeader {
display: flex;
align-items: center;
.mx_RoomListHeader_contextLessTitle,
.mx_RoomListHeader_contextMenuButton {
.mx_LegacyRoomListHeader_contextLessTitle,
.mx_LegacyRoomListHeader_contextMenuButton {
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
padding: 1px 24px 1px 4px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
user-select: none;
}
.mx_RoomListHeader_contextMenuButton {
.mx_LegacyRoomListHeader_contextMenuButton {
border-radius: 6px;
&:hover {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_RoomListHeader_plusButton {
.mx_LegacyRoomListHeader_plusButton {
width: 32px;
height: 32px;
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");
}
.mx_RoomListHeader_iconStartChat::before {
.mx_LegacyRoomListHeader_iconStartChat::before {
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");
}
.mx_RoomListHeader_iconNewVideoRoom::before {
.mx_LegacyRoomListHeader_iconNewVideoRoom::before {
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");
}
.mx_RoomListHeader_iconPlus::before {
.mx_LegacyRoomListHeader_iconPlus::before {
mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
}

4
src/components/structures/LeftPanel.tsx
View File

@@ -23,7 +23,7 @@ import { MetaSpace, type SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/sp
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import UIStore from "../../stores/UIStore";
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 RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
@@ -415,7 +415,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
<div className="mx_LeftPanel_roomListContainer">
{shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()}
{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")}>
<div
className={roomListClasses}

32
src/components/views/rooms/RoomListHeader.tsx → src/components/views/rooms/LegacyRoomListHeader.tsx
View File

@@ -108,7 +108,7 @@ interface IProps {
onVisibilityChange?(): void;
}
const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
const cli = useContext(MatrixClientContext);
const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
@@ -178,7 +178,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
inviteOption = (
<IconizedContextMenuOption
label={_t("action|invite")}
iconClassName="mx_RoomListHeader_iconInvite"
iconClassName="mx_LegacyRoomListHeader_iconInvite"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -194,7 +194,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
newRoomOptions = (
<>
<IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewRoom"
iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
label={_t("action|new_room")}
onClick={(e) => {
e.preventDefault();
@@ -206,7 +206,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/>
{videoRoomsEnabled && (
<IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
label={_t("action|new_video_room")}
onClick={(e) => {
e.preventDefault();
@@ -236,7 +236,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{newRoomOptions}
<IconizedContextMenuOption
label={_t("action|explore_rooms")}
iconClassName="mx_RoomListHeader_iconExplore"
iconClassName="mx_LegacyRoomListHeader_iconExplore"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -251,7 +251,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/>
<IconizedContextMenuOption
label={_t("action|add_existing_room")}
iconClassName="mx_RoomListHeader_iconPlus"
iconClassName="mx_LegacyRoomListHeader_iconPlus"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -264,7 +264,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{canCreateSpaces && (
<IconizedContextMenuOption
label={_t("room_list|add_space_label")}
iconClassName="mx_RoomListHeader_iconPlus"
iconClassName="mx_LegacyRoomListHeader_iconPlus"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -289,7 +289,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
<>
<IconizedContextMenuOption
label={_t("action|start_new_chat")}
iconClassName="mx_RoomListHeader_iconStartChat"
iconClassName="mx_LegacyRoomListHeader_iconStartChat"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -300,7 +300,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
/>
<IconizedContextMenuOption
label={_t("action|new_room")}
iconClassName="mx_RoomListHeader_iconNewRoom"
iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -312,7 +312,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
{videoRoomsEnabled && (
<IconizedContextMenuOption
label={_t("action|new_video_room")}
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -333,7 +333,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
joinRoomOpt = (
<IconizedContextMenuOption
label={_t("room_list|join_public_room_label")}
iconClassName="mx_RoomListHeader_iconExplore"
iconClassName="mx_LegacyRoomListHeader_iconExplore"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -378,13 +378,13 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
})
.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) {
const commonProps = {
ref: mainMenuHandle,
onClick: openMainMenu,
isExpanded: mainMenuDisplayed,
className: "mx_RoomListHeader_contextMenuButton",
className: "mx_LegacyRoomListHeader_contextMenuButton",
children: title,
};
@@ -401,7 +401,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
}
return (
<aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
<aside className="mx_LegacyRoomListHeader" aria-label={_t("room|context_menu|title")}>
{contextMenuButton}
{pendingActionSummary ? (
<Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
@@ -413,7 +413,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
ref={plusMenuHandle}
onClick={openPlusMenu}
isExpanded={plusMenuDisplayed}
className="mx_RoomListHeader_plusButton"
className="mx_LegacyRoomListHeader_plusButton"
title={_t("action|add")}
/>
)}
@@ -423,4 +423,4 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
);
};
export default RoomListHeader;
export default LegacyRoomListHeader;

2
test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
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 { 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 { stubClient, mkSpace } from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap";