From 7031bde4b83036fea7ceb8892efe48097b6760ec Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 14:48:16 +0200 Subject: [PATCH 1/3] feat: simplify rendering of roomfacepile --- .../views/elements/RoomFacePile.tsx | 46 ++++++------------- src/i18n/strings/en_EN.json | 9 +--- 2 files changed, 16 insertions(+), 39 deletions(-) diff --git a/src/components/views/elements/RoomFacePile.tsx b/src/components/views/elements/RoomFacePile.tsx index 0b88403fffd..51caa88d85c 100644 --- a/src/components/views/elements/RoomFacePile.tsx +++ b/src/components/views/elements/RoomFacePile.tsx @@ -1,5 +1,5 @@ /* -Copyright 2021 The Matrix.org Foundation C.I.C. +Copyright 2021-2022 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. @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { FC, HTMLAttributes, ReactNode, useContext } from "react"; +import React, { FC, HTMLAttributes, useContext } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { sortBy } from "lodash"; @@ -60,36 +60,18 @@ const RoomFacePile: FC = ( // reverse members in tooltip order to make the order between the two match up. const commaSeparatedMembers = shownMembers.map(m => m.name).reverse().join(", "); - let tooltip: ReactNode; - if (props.onClick) { - let subText: string; - if (isJoined) { - subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers }); - } else { - subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }); - } - - tooltip =
-
- { _t("View all %(count)s members", { count }) } -
-
- { subText } -
-
; - } else { - if (isJoined) { - tooltip = _t("%(count)s members including you, %(commaSeparatedMembers)s", { - count: count - 1, - commaSeparatedMembers, - }); - } else { - tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", { - count, - commaSeparatedMembers, - }); - } - } + const tooltip =
+
+ { props.onClick + ? _t("View all %(count)s members", { count }) + : _t("%(count)s members", { count }) } +
+
+ { isJoined + ? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers }) + : _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) } +
+
; return your settings for more information": "Message search initialisation failed, check your settings for more information", From a203a63c42bd2497a0ba32bd10bad13d73588eab Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 14:49:30 +0200 Subject: [PATCH 2/3] feat: disable clicking on spaceroomfacepile if already showing member list this automatically changes the tooltip as well --- src/components/structures/SpaceRoomView.tsx | 91 +++++++++++++-------- 1 file changed, 55 insertions(+), 36 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 695fa7a749e..ec439816130 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -1,5 +1,5 @@ /* -Copyright 2021 The Matrix.org Foundation C.I.C. +Copyright 2021-2022 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. @@ -14,35 +14,31 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { RefObject, useContext, useRef, useState } from "react"; import { EventType, RoomType } from "matrix-js-sdk/src/@types/event"; import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials"; -import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; import { logger } from "matrix-js-sdk/src/logger"; +import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; +import React, { RefObject, useContext, useEffect, useRef, useState } from "react"; import MatrixClientContext from "../../contexts/MatrixClientContext"; -import RoomAvatar from "../views/avatars/RoomAvatar"; -import { _t } from "../../languageHandler"; -import AccessibleButton from "../views/elements/AccessibleButton"; -import RoomName from "../views/elements/RoomName"; -import RoomTopic from "../views/elements/RoomTopic"; -import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite"; -import { useFeatureEnabled } from "../../hooks/useSettings"; import createRoom, { IOpts } from "../../createRoom"; -import Field from "../views/elements/Field"; -import withValidation from "../views/elements/Validation"; -import * as Email from "../../email"; -import defaultDispatcher from "../../dispatcher/dispatcher"; +import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { Action } from "../../dispatcher/actions"; -import ResizeNotifier from "../../utils/ResizeNotifier"; -import MainSplit from './MainSplit'; -import ErrorBoundary from "../views/elements/ErrorBoundary"; +import defaultDispatcher from "../../dispatcher/dispatcher"; import { ActionPayload } from "../../dispatcher/payloads"; -import RightPanel from "./RightPanel"; +import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"; +import * as Email from "../../email"; +import { useMyRoomMembership } from "../../hooks/useRoomMembers"; +import { useFeatureEnabled } from "../../hooks/useSettings"; +import { useStateArray } from "../../hooks/useStateArray"; +import { _t } from "../../languageHandler"; +import PosthogTrackers from "../../PosthogTrackers"; +import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite"; +import { UIComponent } from "../../settings/UIFeature"; +import { UPDATE_EVENT } from "../../stores/AsyncStore"; import RightPanelStore from "../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases"; -import { useStateArray } from "../../hooks/useStateArray"; -import SpacePublicShare from "../views/spaces/SpacePublicShare"; +import ResizeNotifier from "../../utils/ResizeNotifier"; import { shouldShowSpaceInvite, shouldShowSpaceSettings, @@ -52,29 +48,33 @@ import { showSpaceInvite, showSpaceSettings, } from "../../utils/space"; -import SpaceHierarchy, { showRoom } from "./SpaceHierarchy"; -import RoomFacePile from "../views/elements/RoomFacePile"; +import RoomAvatar from "../views/avatars/RoomAvatar"; +import { BetaPill } from "../views/beta/BetaCard"; +import IconizedContextMenu, { + IconizedContextMenuOption, + IconizedContextMenuOptionList, +} from "../views/context_menus/IconizedContextMenu"; import { AddExistingToSpace, defaultDmsRenderer, defaultRoomsRenderer, } from "../views/dialogs/AddExistingToSpaceDialog"; -import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu"; -import IconizedContextMenu, { - IconizedContextMenuOption, - IconizedContextMenuOptionList, -} from "../views/context_menus/IconizedContextMenu"; +import AccessibleButton from "../views/elements/AccessibleButton"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; -import { BetaPill } from "../views/beta/BetaCard"; -import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu"; +import ErrorBoundary from "../views/elements/ErrorBoundary"; +import Field from "../views/elements/Field"; +import RoomFacePile from "../views/elements/RoomFacePile"; +import RoomName from "../views/elements/RoomName"; +import RoomTopic from "../views/elements/RoomTopic"; +import withValidation from "../views/elements/Validation"; import RoomInfoLine from "../views/rooms/RoomInfoLine"; import RoomPreviewCard from "../views/rooms/RoomPreviewCard"; -import { useMyRoomMembership } from "../../hooks/useRoomMembers"; -import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; -import { UIComponent } from "../../settings/UIFeature"; -import { UPDATE_EVENT } from "../../stores/AsyncStore"; -import PosthogTrackers from "../../PosthogTrackers"; -import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"; +import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu"; +import SpacePublicShare from "../views/spaces/SpacePublicShare"; +import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu"; +import MainSplit from './MainSplit'; +import RightPanel from "./RightPanel"; +import SpaceHierarchy, { showRoom } from "./SpaceHierarchy"; interface IProps { space: Room; @@ -190,11 +190,25 @@ const SpaceLandingAddButton = ({ space }) => { ; }; +function storeIsShowingSpaceMembers(space: Room): boolean { + return RightPanelStore.instance.isOpenForRoom(space.roomId) && + RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList; +} + const SpaceLanding = ({ space }: { space: Room }) => { const cli = useContext(MatrixClientContext); const myMembership = useMyRoomMembership(space); const userId = cli.getUserId(); + const [isShowingMembers, setIsShowingMembers] = useState(storeIsShowingSpaceMembers(space)); + useEffect(() => { + const listener = () => setIsShowingMembers(storeIsShowingSpaceMembers(space)); + RightPanelStore.instance.addListener(UPDATE_EVENT, listener); + return () => { + RightPanelStore.instance.removeListener(UPDATE_EVENT, listener); + }; + }, [space]); + let inviteButton; if (shouldShowSpaceInvite(space) && shouldShowComponent(UIComponent.InviteUsers)) { inviteButton = ( @@ -249,7 +263,12 @@ const SpaceLanding = ({ space }: { space: Room }) => {
- + { inviteButton } { settingsButton }
From c1fbaf0a74d53c1137ecbefdab0d1a075910dccf Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 15:28:02 +0200 Subject: [PATCH 3/3] fix: implement requested changes --- src/components/structures/SpaceRoomView.tsx | 22 ++++++++------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index ec439816130..379f15c38bb 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -18,7 +18,7 @@ import { EventType, RoomType } from "matrix-js-sdk/src/@types/event"; import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials"; import { logger } from "matrix-js-sdk/src/logger"; import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; -import React, { RefObject, useContext, useEffect, useRef, useState } from "react"; +import React, { RefObject, useCallback, useContext, useRef, useState } from "react"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import createRoom, { IOpts } from "../../createRoom"; @@ -28,6 +28,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher"; import { ActionPayload } from "../../dispatcher/payloads"; import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"; import * as Email from "../../email"; +import { useEventEmitterState } from "../../hooks/useEventEmitter"; import { useMyRoomMembership } from "../../hooks/useRoomMembers"; import { useFeatureEnabled } from "../../hooks/useSettings"; import { useStateArray } from "../../hooks/useStateArray"; @@ -190,24 +191,17 @@ const SpaceLandingAddButton = ({ space }) => { ; }; -function storeIsShowingSpaceMembers(space: Room): boolean { - return RightPanelStore.instance.isOpenForRoom(space.roomId) && - RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList; -} - const SpaceLanding = ({ space }: { space: Room }) => { const cli = useContext(MatrixClientContext); const myMembership = useMyRoomMembership(space); const userId = cli.getUserId(); - const [isShowingMembers, setIsShowingMembers] = useState(storeIsShowingSpaceMembers(space)); - useEffect(() => { - const listener = () => setIsShowingMembers(storeIsShowingSpaceMembers(space)); - RightPanelStore.instance.addListener(UPDATE_EVENT, listener); - return () => { - RightPanelStore.instance.removeListener(UPDATE_EVENT, listener); - }; - }, [space]); + const storeIsShowingSpaceMembers = useCallback( + () => RightPanelStore.instance.isOpenForRoom(space.roomId) + && RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList, + [space.roomId], + ); + const isShowingMembers = useEventEmitterState(RightPanelStore.instance, UPDATE_EVENT, storeIsShowingSpaceMembers); let inviteButton; if (shouldShowSpaceInvite(space) && shouldShowComponent(UIComponent.InviteUsers)) {