From 3b47c68b30f7890cba7ad5fa12fdd595e9e1de28 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 31 Jul 2023 18:11:16 +0100 Subject: [PATCH] Create new RoomHeader component --- res/css/_components.pcss | 1 + res/css/views/rooms/_RoomHeader.pcss | 53 ++++++++++++++++++ src/components/structures/RoomView.tsx | 12 +++++ .../WaitingForThirdPartyRoomView.tsx | 4 ++ .../views/rooms/LegacyRoomHeader.tsx | 2 +- src/components/views/rooms/RoomHeader.tsx | 54 +++++++++++++++++++ src/settings/Settings.tsx | 8 +++ .../views/rooms/RoomHeader-test.tsx | 46 ++++++++++++++++ .../__snapshots__/RoomHeader-test.tsx.snap | 13 +++++ 9 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 res/css/views/rooms/_RoomHeader.pcss create mode 100644 src/components/views/rooms/RoomHeader.tsx create mode 100644 test/components/views/rooms/RoomHeader-test.tsx create mode 100644 test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap diff --git a/res/css/_components.pcss b/res/css/_components.pcss index e77249e8dbc..7b3e833014e 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -292,6 +292,7 @@ @import "./views/rooms/_ReplyTile.pcss"; @import "./views/rooms/_RoomBreadcrumbs.pcss"; @import "./views/rooms/_RoomCallBanner.pcss"; +@import "./views/rooms/_RoomHeader.pcss"; @import "./views/rooms/_RoomInfoLine.pcss"; @import "./views/rooms/_RoomList.pcss"; @import "./views/rooms/_RoomListHeader.pcss"; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss new file mode 100644 index 00000000000..80f43c0b317 --- /dev/null +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -0,0 +1,53 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +:root { + --RoomHeader-indicator-dot-size: 8px; + --RoomHeader-indicator-dot-offset: -3px; + --RoomHeader-indicator-pulseColor: $alert; +} + +.mx_LegacyRoomHeader { + flex: 0 0 50px; + border-bottom: 1px solid $primary-hairline-color; + background-color: $background; +} + +.mx_LegacyRoomHeader_wrapper { + height: 44px; + display: flex; + align-items: center; + min-width: 0; + margin: 0 20px 0 16px; + padding-top: 6px; + border-bottom: 1px solid $separator; +} + +.mx_LegacyRoomHeader_name { + flex: 0 1 auto; + overflow: hidden; + color: $primary-content; + font: var(--cpd-font-heading-sm-semibold); + font-weight: var(--cpd-font-weight-semibold); + min-height: 24px; + align-items: center; + border-radius: 6px; + margin: 0 3px; + padding: 1px 4px; + display: flex; + user-select: none; + cursor: pointer; +} diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 6c82b5fc055..ecdfdf2d327 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -296,6 +296,9 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement { return (
+ {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( + + ) : ( + )}
@@ -346,6 +350,9 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement return (
+ {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( + + ) : ( + )}
@@ -2461,6 +2469,9 @@ export class RoomView extends React.Component { )} + {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( + + ) : ( { viewingCall={viewingCall} activeCall={this.state.activeCall} /> + )} = ({ roomView, resize return (
+ {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( + + ) : ( = ({ roomView, resize viewingCall={false} activeCall={null} /> + )}
diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 7178cf5cc6f..e3be6cca88a 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -29,7 +29,7 @@ import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserTab"; import SettingsStore from "../../../settings/SettingsStore"; -import RoomHeaderButtons from "../right_panel/RoomHeaderButtons"; +import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx new file mode 100644 index 00000000000..8cf09e0d019 --- /dev/null +++ b/src/components/views/rooms/RoomHeader.tsx @@ -0,0 +1,54 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import type { Room } from "matrix-js-sdk/src/models/room"; +import { _t } from "../../../languageHandler"; +import RoomName from "../elements/RoomName"; +import { IOOBData } from "../../../stores/ThreepidInviteStore"; + +export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { + let oobName = _t("Join Room"); + if (oobData && oobData.name) { + oobName = oobData.name; + } + + return ( +
+
+ {room && ( + + {(name) => { + const roomName = name || oobName; + return ( +
+ {roomName} +
+ ); + }} + + )} +
+
+ ); +} diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 3f32d27d777..bab6c1d3025 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -566,6 +566,14 @@ export const SETTINGS: { [setting: string]: ISetting } = { labsGroup: LabGroup.Rooms, supportedLevels: LEVELS_FEATURE, }, + "feature_new_room_decoration_ui": { + isFeature: true, + labsGroup: LabGroup.Rooms, + displayName: _td("Under active development, new room header & details interface"), + supportedLevels: LEVELS_FEATURE, + default: false, + controller: new ReloadOnChangeController(), + }, "useCompactLayout": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, displayName: _td("Use a more compact 'Modern' layout"), diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx new file mode 100644 index 00000000000..819d98a2f69 --- /dev/null +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -0,0 +1,46 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { Mocked } from "jest-mock"; +import { render } from "@testing-library/react"; +import { Room } from "matrix-js-sdk/src/models/room"; + +import { stubClient } from "../../../test-utils"; +import RoomHeader from "../../../../src/components/views/rooms/RoomHeader"; +import type { MatrixClient } from "matrix-js-sdk/src/client"; + +describe("Roomeader", () => { + let client: Mocked; + let room: Room; + + const ROOM_ID = "!1:example.org"; + + beforeEach(async () => { + stubClient(); + room = new Room(ROOM_ID, client, "@alice:example.org"); + }); + + it("renders with no props", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + it("renders the room header", () => { + const { container } = render(); + expect(container).toHaveTextContent(ROOM_ID); + }); +}); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap new file mode 100644 index 00000000000..01105de9cb0 --- /dev/null +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Roomeader renders with no props 1`] = ` + +
+
+
+ +`;