From 1ffa1c9c181371180a6b3ad4d4d3539362ec6793 Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 29 Nov 2023 21:25:34 +1300 Subject: [PATCH] Fix: Space scope header overflow (#11933) * fix spacing for scope header * extract scope header into component, apply line clamp * update ThirdPartyMemberInfo styles * pass onClose to ThirdPartyRoomMemberInfo * rethemendex * add View3pidInvite to actions enum, replace uses * extract out action handler * push card instead, test * comment * reinstate data-testid * fix typo in styles --- cypress/e2e/right-panel/right-panel.spec.ts | 4 +- res/css/_components.pcss | 3 +- res/css/structures/_RightPanel.pcss | 13 -- res/css/views/rooms/_MemberInfo.pcss | 111 ------------------ res/css/views/rooms/_MemberList.pcss | 6 - res/css/views/rooms/_SpaceScopeHeader.pcss | 29 +++++ .../views/rooms/_ThirdPartyMemberInfo.pcss | 19 +++ src/components/structures/RightPanel.tsx | 4 +- src/components/views/right_panel/UserInfo.tsx | 16 +-- src/components/views/rooms/MemberList.tsx | 13 +- .../views/rooms/SpaceScopeHeader.tsx | 49 ++++++++ .../views/rooms/ThirdPartyMemberInfo.tsx | 62 +++++----- .../__snapshots__/UserInfo-test.tsx.snap | 4 +- .../ThirdPartyMemberInfo-test.tsx.snap | 76 ++++++++---- 14 files changed, 188 insertions(+), 221 deletions(-) delete mode 100644 res/css/views/rooms/_MemberInfo.pcss create mode 100644 res/css/views/rooms/_SpaceScopeHeader.pcss create mode 100644 res/css/views/rooms/_ThirdPartyMemberInfo.pcss create mode 100644 src/components/views/rooms/SpaceScopeHeader.tsx diff --git a/cypress/e2e/right-panel/right-panel.spec.ts b/cypress/e2e/right-panel/right-panel.spec.ts index b68093b0f5..4784e7f838 100644 --- a/cypress/e2e/right-panel/right-panel.spec.ts +++ b/cypress/e2e/right-panel/right-panel.spec.ts @@ -164,7 +164,7 @@ describe("RightPanel", () => { cy.findByRole("button", { name: /\d member/ }).click(); }); cy.get(".mx_MemberList").should("have.length", 1); - cy.get(".mx_RightPanel_scopeHeader").within(() => { + cy.get(".mx_SpaceScopeHeader").within(() => { cy.findByText(SPACE_NAME); }); @@ -173,7 +173,7 @@ describe("RightPanel", () => { cy.get(".mx_UserInfo_profile").within(() => { cy.findByText(NAME); }); - cy.get(".mx_RightPanel_scopeHeader").within(() => { + cy.get(".mx_SpaceScopeHeader").within(() => { cy.findByText(SPACE_NAME); }); diff --git a/res/css/_components.pcss b/res/css/_components.pcss index ff4c10c260..b7bfde21d8 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -285,7 +285,6 @@ @import "./views/rooms/_LinkPreviewGroup.pcss"; @import "./views/rooms/_LinkPreviewWidget.pcss"; @import "./views/rooms/_LiveContentSummary.pcss"; -@import "./views/rooms/_MemberInfo.pcss"; @import "./views/rooms/_MemberList.pcss"; @import "./views/rooms/_MessageComposer.pcss"; @import "./views/rooms/_MessageComposerFormatBar.pcss"; @@ -310,7 +309,9 @@ @import "./views/rooms/_RoomUpgradeWarningBar.pcss"; @import "./views/rooms/_SearchBar.pcss"; @import "./views/rooms/_SendMessageComposer.pcss"; +@import "./views/rooms/_SpaceScopeHeader.pcss"; @import "./views/rooms/_Stickers.pcss"; +@import "./views/rooms/_ThirdPartyMemberInfo.pcss"; @import "./views/rooms/_ThreadSummary.pcss"; @import "./views/rooms/_TopUnreadMessagesBar.pcss"; @import "./views/rooms/_VoiceRecordComposerTile.pcss"; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 19d512fb65..f8b5cb4408 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -99,16 +99,3 @@ limitations under the License. mask-position: center; } } - -.mx_RightPanel_scopeHeader { - margin: 24px; - text-align: center; - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-18px; - line-height: $font-22px; - - .mx_BaseAvatar { - margin-right: 8px; - vertical-align: middle; - } -} diff --git a/res/css/views/rooms/_MemberInfo.pcss b/res/css/views/rooms/_MemberInfo.pcss deleted file mode 100644 index f309d37e6d..0000000000 --- a/res/css/views/rooms/_MemberInfo.pcss +++ /dev/null @@ -1,111 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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. -*/ - -.mx_MemberInfo { - display: flex; - flex-direction: column; - flex: 1; - overflow-y: auto; - margin-top: 8px; - - h2 { - font-size: $font-18px; - font-weight: var(--cpd-font-weight-semibold); - margin: 16px 0 16px 15px; - } - - .mx_RoomTile_titleContainer { - width: 154px; - } - - .mx_RoomTile_badge { - display: none; - } - - .mx_RoomTile_title { - width: 160px; - } - - h3 { - text-transform: uppercase; - color: $input-darker-fg-color; - font-weight: bold; - font-size: $font-12px; - margin: 4px 0; - } -} - -.mx_MemberInfo_name { - align-items: center; - display: flex; - - > .mx_E2EIcon { - margin-right: 0; - } - - h2 { - flex: 1; - overflow-x: auto; - max-height: 50px; - } -} - -.mx_MemberInfo_cancel { - height: 16px; - width: 16px; - padding: 10px 0 10px 10px; - cursor: pointer; - mask-image: url("$(res)/img/minimise.svg"); - mask-repeat: no-repeat; - mask-position: 16px center; - background-color: $header-panel-text-primary-color; -} - -.mx_MemberInfo_container { - margin: 0 16px 16px 16px; - - &.mx_MemberInfo_container--profile { - margin-bottom: 16px; - font-size: $font-15px; - position: relative; - } -} - -.mx_MemberInfo_avatar { - background: $spacePanel-bg-color; - margin-bottom: 16px; - - > img { - height: auto; - width: 100%; - max-height: 30vh; - object-fit: contain; - display: block; - } - - .mx_BaseAvatar img { - cursor: zoom-in; - } -} - -.mx_MemberInfo_field { - cursor: pointer; - font-size: $font-15px; - color: $primary-content; - margin-left: 8px; - margin-bottom: 16px; - line-height: $font-23px; -} diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss index 716d8f2b26..086a60810f 100644 --- a/res/css/views/rooms/_MemberList.pcss +++ b/res/css/views/rooms/_MemberList.pcss @@ -42,12 +42,6 @@ limitations under the License. .mx_AutoHideScrollbar { flex: 1 1 0; } - - .mx_RightPanel_scopeHeader { - /* vertically align with position on other right panel cards */ - /* to prevent it bouncing as user navigates right panel */ - margin-top: -8px; - } } .mx_MemberList_chevron { diff --git a/res/css/views/rooms/_SpaceScopeHeader.pcss b/res/css/views/rooms/_SpaceScopeHeader.pcss new file mode 100644 index 0000000000..4a94793ba7 --- /dev/null +++ b/res/css/views/rooms/_SpaceScopeHeader.pcss @@ -0,0 +1,29 @@ +/* +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. +*/ + +.mx_SpaceScopeHeader { + text-align: center; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + + .mx_BaseAvatar { + margin-right: var(--cpd-space-2x); + vertical-align: middle; + } +} diff --git a/res/css/views/rooms/_ThirdPartyMemberInfo.pcss b/res/css/views/rooms/_ThirdPartyMemberInfo.pcss new file mode 100644 index 0000000000..cd680eea64 --- /dev/null +++ b/res/css/views/rooms/_ThirdPartyMemberInfo.pcss @@ -0,0 +1,19 @@ +/* +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. +*/ + +.mx_ThirdPartyMemberInfo { + padding: var(--cpd-space-4x); +} diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 33ef0989bf..68d600ec1d 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -213,7 +213,9 @@ export default class RightPanel extends React.Component { case RightPanelPhases.Room3pidMemberInfo: case RightPanelPhases.Space3pidMemberInfo: if (!!cardState?.memberInfoEvent) { - card = ; + card = ( + + ); } break; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index dffb4081a3..66f1bf4375 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -65,8 +65,6 @@ import ShareDialog from "../dialogs/ShareDialog"; import ErrorDialog from "../dialogs/ErrorDialog"; import QuestionDialog from "../dialogs/QuestionDialog"; import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog"; -import RoomAvatar from "../avatars/RoomAvatar"; -import RoomName from "../elements/RoomName"; import { mediaFromMxc } from "../../../customisations/Media"; import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload"; import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog"; @@ -83,6 +81,7 @@ import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-me import { SdkContextClass } from "../../../contexts/SDKContext"; import { asyncSome } from "../../../utils/arrays"; import UIStore from "../../../stores/UIStore"; +import { SpaceScopeHeader } from "../rooms/SpaceScopeHeader"; export interface IDevice extends Device { ambiguous?: boolean; @@ -1744,26 +1743,15 @@ const UserInfo: React.FC = ({ user, room, onClose, phase = RightPanelPha } } - let scopeHeader; - if (room?.isSpaceRoom()) { - scopeHeader = ( -
- - -
- ); - } - const header = ( <> - {scopeHeader} ); return ( } + header={room ? : undefined} onClose={onClose} closeLabel={closeLabel} cardState={cardState} diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 64c3400bb9..639e1493b2 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -40,8 +40,6 @@ import dis from "../../../dispatcher/dispatcher"; import { isValid3pidInvite } from "../../../RoomInvite"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import BaseCard from "../right_panel/BaseCard"; -import RoomAvatar from "../avatars/RoomAvatar"; -import RoomName from "../elements/RoomName"; import TruncatedList from "../elements/TruncatedList"; import Spinner from "../elements/Spinner"; import SearchBox from "../../structures/SearchBox"; @@ -56,6 +54,7 @@ import { SDKContext } from "../../../contexts/SDKContext"; import { canInviteTo } from "../../../utils/room/canInviteTo"; import { inviteToRoom } from "../../../utils/room/inviteToRoom"; import { Action } from "../../../dispatcher/actions"; +import { SpaceScopeHeader } from "./SpaceScopeHeader"; const INITIAL_LOAD_NUM_MEMBERS = 30; const INITIAL_LOAD_NUM_INVITED = 5; @@ -411,15 +410,7 @@ export default class MemberList extends React.Component { /> ); - let scopeHeader; - if (room?.isSpaceRoom()) { - scopeHeader = ( -
- - -
- ); - } + const scopeHeader = room ? : undefined; return ( = ({ room }) => { + const roomName = useRoomName(room); + + if (!room.isSpaceRoom()) { + return null; + } + + return ( + + + {roomName} + + ); +}; diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx index c7ccf48e85..dcfc8f567a 100644 --- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx +++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Matrix.org Foundation C.I.C. +Copyright 2019-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. @@ -17,20 +17,22 @@ limitations under the License. import React from "react"; import { MatrixEvent, Room, RoomStateEvent, EventType } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { Button, Text } from "@vector-im/compound-web"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; import Modal from "../../../Modal"; import { isValid3pidInvite } from "../../../RoomInvite"; -import RoomAvatar from "../avatars/RoomAvatar"; -import RoomName from "../elements/RoomName"; -import ErrorDialog from "../dialogs/ErrorDialog"; -import AccessibleButton from "../elements/AccessibleButton"; import { Action } from "../../../dispatcher/actions"; +import ErrorDialog from "../dialogs/ErrorDialog"; +import BaseCard from "../right_panel/BaseCard"; +import { Flex } from "../../utils/Flex"; +import { SpaceScopeHeader } from "./SpaceScopeHeader"; interface IProps { event: MatrixEvent; + onClose?: () => void; } interface IState { @@ -120,42 +122,32 @@ export default class ThirdPartyMemberInfo extends React.Component -

{_t("user_info|admin_tools_section")}

- + + + {_t("user_info|admin_tools_section")} + + + ); } - let scopeHeader: JSX.Element | undefined; - if (this.room?.isSpaceRoom()) { - scopeHeader = ( -
- - -
- ); - } + const scopeHeader: JSX.Element | undefined = this.room ? : undefined; - // We shamelessly rip off the MemberInfo styles here. return ( -
- {scopeHeader} -
- -

{this.state.displayName}

-
-
- {_t("user_info|invited_by", { sender: this.state.senderName })} -
- {adminTools} -
+ + + + {/* same as userinfo name style */} + + {this.state.displayName} + + {_t("user_info|invited_by", { sender: this.state.senderName })} + + {adminTools} + + ); } } diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index 45d97a74ce..da9346dbd4 100644 --- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -86,9 +86,7 @@ exports[` with crypto enabled renders 1`] = ` />
- -
+ />
should render invite 1`] = `
-

- bob@bob.com -

- Invited by Alice DisplayName +
+
+ + bob@bob.com + + + Invited by Alice DisplayName + +
+
@@ -31,26 +45,40 @@ exports[` should render invite 1`] = ` exports[` should render invite when room in not available 1`] = `
-

- bob@bob.com -

- Invited by Alice DisplayName +
+
+ + bob@bob.com + + + Invited by Alice DisplayName + +
+