From 8c6d92cc9995cdfa414df10504d28f859a37a61c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 26 Mar 2021 09:44:52 +0000 Subject: [PATCH] Move space room discovery & management into the space room view --- res/css/structures/_SpacePanel.scss | 4 - res/css/structures/_SpaceRoomView.scss | 11 +- src/components/structures/MatrixChat.tsx | 10 +- .../structures/SpaceRoomDirectory.tsx | 121 +++++++++++------- src/components/structures/SpaceRoomView.tsx | 40 +----- .../views/spaces/SpaceTreeLevel.tsx | 28 +--- src/i18n/strings/en_EN.json | 9 +- 7 files changed, 100 insertions(+), 123 deletions(-) diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 5cca4aca11..873fa967ab 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -330,10 +330,6 @@ $activeBorderColor: $secondary-fg-color; mask-image: url('$(res)/img/element-icons/leave.svg'); } - .mx_SpacePanel_iconHome::before { - mask-image: url('$(res)/img/element-icons/roomlist/home.svg'); - } - .mx_SpacePanel_iconMembers::before { mask-image: url('$(res)/img/element-icons/room/members.svg'); } diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 24c115c864..c4ffc5d84c 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -365,12 +365,13 @@ $SpaceRoomViewInnerWidth: 428px; } } - .mx_SpaceRoomDirectory_list { - max-width: 600px; + .mx_SearchBox { + margin-left: 4px; + max-width: 670px; + } - .mx_SpaceRoomDirectory_roomTile_actions { - display: none; - } + .mx_SpaceRoomDirectory_list { + max-width: 700px; } } diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 689561fd60..86e689f0b8 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -80,10 +80,10 @@ import DialPadModal from "../views/voip/DialPadModal"; import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast'; import { shouldUseLoginForWelcome } from "../../utils/pages"; import SpaceStore from "../../stores/SpaceStore"; -import SpaceRoomDirectory from "./SpaceRoomDirectory"; import {replaceableComponent} from "../../utils/replaceableComponent"; import RoomListStore from "../../stores/room-list/RoomListStore"; import {RoomUpdateCause} from "../../stores/room-list/models"; +import defaultDispatcher from "../../dispatcher/dispatcher"; /** constants for MatrixChat.state.view */ export enum Views { @@ -690,10 +690,10 @@ export default class MatrixChat extends React.PureComponent { } case Action.ViewRoomDirectory: { if (SpaceStore.instance.activeSpace) { - Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, { - space: SpaceStore.instance.activeSpace, - initialText: payload.initialText, - }, "mx_SpaceRoomDirectory_dialogWrapper", false, true); + defaultDispatcher.dispatch({ + action: "view_room", + room_id: SpaceStore.instance.activeSpace.roomId, + }); } else { const RoomDirectory = sdk.getComponent("structures.RoomDirectory"); Modal.createTrackedDialog('Room directory', '', RoomDirectory, { diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx index 1ec9f5c298..66ef1f052b 100644 --- a/src/components/structures/SpaceRoomDirectory.tsx +++ b/src/components/structures/SpaceRoomDirectory.tsx @@ -40,10 +40,11 @@ import InfoTooltip from "../views/elements/InfoTooltip"; import TextWithTooltip from "../views/elements/TextWithTooltip"; import {useStateToggle} from "../../hooks/useStateToggle"; -interface IProps { +interface IHierarchyProps { space: Room; initialText?: string; - onFinished(): void; + refreshToken?: any; + showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void; } /* eslint-disable camelcase */ @@ -344,22 +345,20 @@ export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: a }, [space, refreshToken], []); }; -const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinished }) => { +export const SpaceHierarchy: React.FC = ({ + space, + initialText = "", + showRoom, + refreshToken, + children, +}) => { const cli = MatrixClientPeg.get(); const userId = cli.getUserId(); const [query, setQuery] = useState(initialText); - const onCreateRoomClick = () => { - dis.dispatch({ - action: 'view_create_room', - public: true, - }); - onFinished(); - }; - const [selected, setSelected] = useState(new Map>()); // Map> - const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space); + const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken); const roomsMap = useMemo(() => { if (!rooms) return null; @@ -394,21 +393,6 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis return roomsMap; }, [rooms, childParentMap, query]); - const title = - -
-

{ _t("Explore rooms") }

-
-
- ; - - const explanation = - _t("If you can't find the room you're looking for, ask for an invite or create a new room.", null, - {a: sub => { - return {sub}; - }}, - ); - const [error, setError] = useState(""); const [removing, setRemoving] = useState(false); const [saving, setSaving] = useState(false); @@ -528,10 +512,9 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis }} onViewRoomClick={(roomId, autoJoin) => { showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin); - onFinished(); }} /> -
+ { children &&
} ; } else { results =
@@ -550,34 +533,78 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis
} { results } - - { _t("Create room") } - + { children } ; - } else { + } else if (!rooms) { content = ; + } else { + content =

{_t("Your server does not support showing space hierarchies.")}

; } // TODO loading state/error state + return <> + + + { content } + ; +}; + +interface IProps { + space: Room; + initialText?: string; + onFinished(): void; +} + +const SpaceRoomDirectory: React.FC = ({ space, onFinished, initialText }) => { + const onCreateRoomClick = () => { + dis.dispatch({ + action: 'view_create_room', + public: true, + }); + onFinished(); + }; + + const title = + +
+

{ _t("Explore rooms") }

+
+
+ ; + return (
- { explanation } + { _t("If you can't find the room you're looking for, ask for an invite or create a new room.", + null, + {a: sub => { + return {sub}; + }}, + ) } - - - { content } + { + showRoom(room, viaServers, autoJoin); + onFinished(); + }} + initialText={initialText} + > + + { _t("Create room") } + +
); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 1ad591d4e6..8d8986320d 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {RefObject, useContext, useMemo, useRef, useState} from "react"; -import {EventType, RoomType} from "matrix-js-sdk/src/@types/event"; +import React, {RefObject, useContext, useRef, useState} from "react"; +import {EventType} from "matrix-js-sdk/src/@types/event"; import {Room} from "matrix-js-sdk/src/models/room"; import {EventSubscription} from "fbemitter"; @@ -46,8 +46,7 @@ import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanel import {useStateArray} from "../../hooks/useStateArray"; import SpacePublicShare from "../views/spaces/SpacePublicShare"; import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space"; -import {HierarchyLevel, ISpaceSummaryRoom, showRoom, useSpaceSummary} from "./SpaceRoomDirectory"; -import AutoHideScrollbar from "./AutoHideScrollbar"; +import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory"; import MemberAvatar from "../views/avatars/MemberAvatar"; import {useStateToggle} from "../../hooks/useStateToggle"; import SpaceStore from "../../stores/SpaceStore"; @@ -260,37 +259,6 @@ const SpaceLanding = ({ space }) => { ; } - const [rooms, relations, viaMap] = useSpaceSummary(cli, space, refreshToken); - const [roomsMap, numRooms] = useMemo(() => { - if (!rooms) return []; - const roomsMap = new Map(rooms.map(r => [r.room_id, r])); - const numRooms = rooms.filter(r => r.room_type !== RoomType.Space).length; - return [roomsMap, numRooms]; - }, [rooms]); - - let previewRooms; - if (roomsMap) { - previewRooms = -
-

{ myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}

- { numRooms } -
- { - showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin); - }} - /> - ; - } else if (!rooms) { - previewRooms = ; - } else { - previewRooms =

{_t("Your server does not support showing space hierarchies.")}

; - } - return
@@ -336,7 +304,7 @@ const SpaceLanding = ({ space }) => { { settingsButton }
- { previewRooms } +
; }; diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index ca6f90fa91..fd4a881941 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -48,7 +48,6 @@ import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import {showRoomInviteDialog} from "../../../RoomInvite"; import InfoDialog from "../dialogs/InfoDialog"; import {EventType} from "matrix-js-sdk/src/@types/event"; -import SpaceRoomDirectory from "../../structures/SpaceRoomDirectory"; interface IItemProps { space?: Room; @@ -115,17 +114,6 @@ export class SpaceItem extends React.PureComponent { this.setState({contextMenuPosition: null}); }; - private onHomeClick = (ev: ButtonEvent) => { - ev.preventDefault(); - ev.stopPropagation(); - - defaultDispatcher.dispatch({ - action: "view_room", - room_id: this.props.space.roomId, - }); - this.setState({contextMenuPosition: null}); // also close the menu - }; - private onInviteClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -206,9 +194,10 @@ export class SpaceItem extends React.PureComponent { ev.preventDefault(); ev.stopPropagation(); - Modal.createTrackedDialog("Space room directory", "Space panel", SpaceRoomDirectory, { - space: this.props.space, - }, "mx_SpaceRoomDirectory_dialogWrapper", false, true); + defaultDispatcher.dispatch({ + action: "view_room", + room_id: this.props.space.roomId, + }); this.setState({contextMenuPosition: null}); // also close the menu }; @@ -249,6 +238,8 @@ export class SpaceItem extends React.PureComponent { ; } + const canAddRooms = this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId); + let newRoomSection; if (this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) { newRoomSection = @@ -276,11 +267,6 @@ export class SpaceItem extends React.PureComponent { { inviteOption } - { { settingsOption } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d87afc812c..e7da333797 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1018,8 +1018,8 @@ "Leave space": "Leave space", "Create new room": "Create new room", "Add existing room": "Add existing room", - "Space Home": "Space Home", "Members": "Members", + "Manage & explore rooms": "Manage & explore rooms", "Explore rooms": "Explore rooms", "Space options": "Space options", "Remove": "Remove", @@ -2618,7 +2618,6 @@ "%(count)s rooms|one": "%(count)s room", "This room is suggested as a good one to join": "This room is suggested as a good one to join", "Suggested": "Suggested", - "If you can't find the room you're looking for, ask for an invite or create a new room.": "If you can't find the room you're looking for, ask for an invite or create a new room.", "%(count)s rooms and %(numSpaces)s spaces|other": "%(count)s rooms and %(numSpaces)s spaces", "%(count)s rooms and %(numSpaces)s spaces|one": "%(count)s room and %(numSpaces)s spaces", "%(count)s rooms and 1 space|other": "%(count)s rooms and 1 space", @@ -2629,14 +2628,14 @@ "Mark as suggested": "Mark as suggested", "No results found": "No results found", "You may want to try a different search or check for typos.": "You may want to try a different search or check for typos.", - "Create room": "Create room", + "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.", "Search names and description": "Search names and description", + "If you can't find the room you're looking for, ask for an invite or create a new room.": "If you can't find the room you're looking for, ask for an invite or create a new room.", + "Create room": "Create room", " invites you": " invites you", "Public space": "Public space", "Private space": "Private space", "Add existing rooms & spaces": "Add existing rooms & spaces", - "Default Rooms": "Default Rooms", - "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.", "Your public space ": "Your public space ", "Your private space ": "Your private space ", "Welcome to ": "Welcome to ",