From 1b5abdab23ab00c95ebff6ab3944a90e2e42e768 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 21 Aug 2020 15:56:54 -0600 Subject: [PATCH 1/4] Override the room directory with the selected group's rooms --- src/components/structures/RoomDirectory.js | 117 ++++++++++++++++----- 1 file changed, 88 insertions(+), 29 deletions(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 5b12dae7df..11d3508ee5 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -30,6 +30,10 @@ import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/Di import Analytics from '../../Analytics'; import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo"; import {ALL_ROOMS} from "../views/directory/NetworkDropdown"; +import SettingsStore from "../../settings/SettingsStore"; +import TagOrderStore from "../../stores/TagOrderStore"; +import GroupStore from "../../stores/GroupStore"; +import FlairStore from "../../stores/FlairStore"; const MAX_NAME_LENGTH = 80; const MAX_TOPIC_LENGTH = 160; @@ -46,6 +50,7 @@ export default createReactClass({ }, getInitialState: function() { + const selectedCommunityId = TagOrderStore.getSelectedTags()[0]; return { publicRooms: [], loading: true, @@ -54,6 +59,10 @@ export default createReactClass({ instanceId: undefined, roomServer: MatrixClientPeg.getHomeserverName(), filterString: null, + selectedCommunityId: SettingsStore.getValue("feature_communities_v2_prototypes") + ? selectedCommunityId + : null, + communityName: null, }; }, @@ -71,28 +80,39 @@ export default createReactClass({ this.setState({protocolsLoading: false}); return; } - MatrixClientPeg.get().getThirdpartyProtocols().then((response) => { - this.protocols = response; - this.setState({protocolsLoading: false}); - }, (err) => { - console.warn(`error loading third party protocols: ${err}`); - this.setState({protocolsLoading: false}); - if (MatrixClientPeg.get().isGuest()) { - // Guests currently aren't allowed to use this API, so - // ignore this as otherwise this error is literally the - // thing you see when loading the client! - return; - } - track('Failed to get protocol list from homeserver'); - const brand = SdkConfig.get().brand; - this.setState({ - error: _t( - '%(brand)s failed to get the protocol list from the homeserver. ' + - 'The homeserver may be too old to support third party networks.', - { brand }, - ), + + if (!this.state.selectedCommunityId) { + MatrixClientPeg.get().getThirdpartyProtocols().then((response) => { + this.protocols = response; + this.setState({protocolsLoading: false}); + }, (err) => { + console.warn(`error loading third party protocols: ${err}`); + this.setState({protocolsLoading: false}); + if (MatrixClientPeg.get().isGuest()) { + // Guests currently aren't allowed to use this API, so + // ignore this as otherwise this error is literally the + // thing you see when loading the client! + return; + } + track('Failed to get protocol list from homeserver'); + const brand = SdkConfig.get().brand; + this.setState({ + error: _t( + '%(brand)s failed to get the protocol list from the homeserver. ' + + 'The homeserver may be too old to support third party networks.', + {brand}, + ), + }); }); - }); + } else { + // We don't use the protocols in the communities v2 prototype experience + this.setState({protocolsLoading: false}); + + // Grab the profile info async + FlairStore.getGroupProfileCached(MatrixClientPeg.get(), this.state.selectedCommunityId).then(profile => { + this.setState({communityName: profile.name}); + }); + } this.refreshRoomList(); }, @@ -105,6 +125,33 @@ export default createReactClass({ }, refreshRoomList: function() { + if (this.state.selectedCommunityId) { + this.setState({ + publicRooms: GroupStore.getGroupRooms(this.state.selectedCommunityId).map(r => { + return { + // Translate all the group properties to the directory format + room_id: r.roomId, + name: r.name, + topic: r.topic, + canonical_alias: r.canonicalAlias, + num_joined_members: r.numJoinedMembers, + avatarUrl: r.avatarUrl, + world_readable: r.worldReadable, + guest_can_join: r.guestsCanJoin, + }; + }).filter(r => { + const filterString = this.state.filterString; + if (filterString) { + const containedIn = (s: string) => (s || "").toLowerCase().includes(filterString.toLowerCase()); + return containedIn(r.name) || containedIn(r.topic) || containedIn(r.canonical_alias); + } + return true; + }), + loading: false, + }); + return; + } + this.nextBatch = null; this.setState({ publicRooms: [], @@ -114,6 +161,7 @@ export default createReactClass({ }, getMoreRooms: function() { + if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms if (!MatrixClientPeg.get()) return Promise.resolve(); this.setState({ @@ -239,7 +287,7 @@ export default createReactClass({ }, onRoomClicked: function(room, ev) { - if (ev.shiftKey) { + if (ev.shiftKey && !this.state.selectedCommunityId) { ev.preventDefault(); this.removeFromDirectory(room); } else { @@ -610,6 +658,18 @@ export default createReactClass({ } } + let dropdown = ( + + ); + if (this.state.selectedCommunityId) { + dropdown = null; + } + listHeader =
- + {dropdown}
; } const explanation = @@ -637,12 +692,16 @@ export default createReactClass({ }}, ); + const title = this.state.selectedCommunityId + ? _t("Explore rooms in %(communityName)s", { + communityName: this.state.communityName || this.state.selectedCommunityId, + }) : _t("Explore rooms"); return (
{explanation} From 276ed90884d03be7a0ff745f24213a869d3c4191 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 21 Aug 2020 18:10:05 -0600 Subject: [PATCH 2/4] Add a personal group for an all-communities state Design is approximate and needs review, though being completed out of band. --- res/css/structures/_TagPanel.scss | 10 +- res/themes/dark/css/_dark.scss | 2 + res/themes/legacy-dark/css/_legacy-dark.scss | 2 + .../legacy-light/css/_legacy-light.scss | 2 + res/themes/light/css/_light.scss | 2 + src/components/structures/TagPanel.js | 15 ++- src/components/views/elements/TagTile.js | 1 + src/components/views/elements/UserTagTile.tsx | 99 +++++++++++++++++++ 8 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 src/components/views/elements/UserTagTile.tsx diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index b2d05ad7e6..6c85341aaf 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -51,9 +51,9 @@ limitations under the License. .mx_TagPanel .mx_TagPanel_divider { height: 0px; - width: 34px; - border-bottom: 1px solid $panel-divider-color; - display: none; + width: 90%; + border: none; + border-bottom: 1px solid $tagpanel-divider-color; } .mx_TagPanel .mx_TagPanel_scroller { @@ -116,6 +116,10 @@ limitations under the License. border-radius: 0 3px 3px 0; } +.mx_TagPanel .mx_TagTile.mx_TagTile_large.mx_TagTile_selected::before { + left: -10px; +} + .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { filter: none; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index d48abf6a4c..a3b03c777e 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -119,6 +119,8 @@ $roomlist-bg-color: rgba(33, 38, 44, 0.90); $roomlist-header-color: $tertiary-fg-color; $roomsublist-divider-color: $primary-fg-color; +$tagpanel-divider-color: $roomlist-header-color; + $roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 4ab5f99942..2741dcebf8 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -116,6 +116,8 @@ $roomlist-bg-color: $header-panel-bg-color; $roomsublist-divider-color: $primary-fg-color; +$tagpanel-divider-color: $roomlist-header-color; + $roomtile-preview-color: #9e9e9e; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: #1A1D23; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 6e66964fdf..4fd2a3615b 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -183,6 +183,8 @@ $roomlist-bg-color: $header-panel-bg-color; $roomlist-header-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color; +$tagpanel-divider-color: $roomlist-header-color; + $roomtile-preview-color: #9e9e9e; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: #fff; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ceb8d5677c..05302a2a80 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -177,6 +177,8 @@ $roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-header-color: $tertiary-fg-color; $roomsublist-divider-color: $primary-fg-color; +$tagpanel-divider-color: $roomlist-header-color; + $roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: #FFF; diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js index 4f8a051e62..3acec417f2 100644 --- a/src/components/structures/TagPanel.js +++ b/src/components/structures/TagPanel.js @@ -29,6 +29,8 @@ import { Droppable } from 'react-beautiful-dnd'; import classNames from 'classnames'; import MatrixClientContext from "../../contexts/MatrixClientContext"; import AutoHideScrollbar from "./AutoHideScrollbar"; +import SettingsStore from "../../settings/SettingsStore"; +import UserTagTile from "../views/elements/UserTagTile"; const TagPanel = createReactClass({ displayName: 'TagPanel', @@ -102,6 +104,17 @@ const TagPanel = createReactClass({ dis.dispatch({action: 'deselect_tags'}); }, + renderGlobalIcon() { + if (!SettingsStore.getValue("feature_communities_v2_prototypes")) return null; + + return ( +
+ +
+
+ ); + }, + render() { const DNDTagTile = sdk.getComponent('elements.DNDTagTile'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); @@ -137,7 +150,6 @@ const TagPanel = createReactClass({
{ clearButton }
-
+ { this.renderGlobalIcon() } { tags }
{ + private tagStoreRef: fbEmitter.EventSubscription; + + constructor(props: IProps) { + super(props); + + this.state = { + selected: TagOrderStore.getSelectedTags().length === 0, + }; + } + + public componentDidMount() { + OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate); + this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate); + } + + public componentWillUnmount() { + OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); + } + + private onProfileUpdate = () => { + this.forceUpdate(); + }; + + private onTagStoreUpdate = () => { + const selected = TagOrderStore.getSelectedTags().length === 0; + this.setState({selected}); + }; + + private onTileClick = (ev) => { + ev.preventDefault(); + ev.stopPropagation(); + + // Deselect all tags + defaultDispatcher.dispatch({action: "deselect_tags"}); + }; + + public render() { + // XXX: We reuse TagTile classes for ease of demonstration - we should probably generify + // TagTile instead if we continue to use this component. + const avatarHeight = 36; + const name = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId(); + const className = classNames({ + mx_TagTile: true, + mx_TagTile_selected: this.state.selected, + mx_TagTile_large: true, + }); + return ( + +
+ +
+ + ); + } +} From f0bd4d3625e3f38c6b4f8935fed1f3bd808b644a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 21 Aug 2020 18:17:57 -0600 Subject: [PATCH 3/4] Show the group's room if one is returned --- .../views/dialogs/CreateGroupDialog.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js index 10285ccee0..d8a8b96961 100644 --- a/src/components/views/dialogs/CreateGroupDialog.js +++ b/src/components/views/dialogs/CreateGroupDialog.js @@ -83,11 +83,18 @@ export default createReactClass({ localpart: this.state.groupId, profile: profile, }).then((result) => { - dis.dispatch({ - action: 'view_group', - group_id: result.group_id, - group_is_new: true, - }); + if (result.room_id) { + dis.dispatch({ + action: 'view_room', + room_id: result.room_id, + }); + } else { + dis.dispatch({ + action: 'view_group', + group_id: result.group_id, + group_is_new: true, + }); + } this.props.onFinished(true); }).catch((e) => { this.setState({createError: e}); From 8e23b1072fdd6d4147ac4c30a5e62ae747db4e92 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 21 Aug 2020 18:27:49 -0600 Subject: [PATCH 4/4] Add i18n it's probably important --- src/i18n/strings/en_EN.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3ffc11b5b8..c66211ff41 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2072,6 +2072,7 @@ "Find a room…": "Find a room…", "Find a room… (e.g. %(exampleRoom)s)": "Find a room… (e.g. %(exampleRoom)s)", "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.", + "Explore rooms in %(communityName)s": "Explore rooms in %(communityName)s", "Clear filter": "Clear filter", "Search rooms": "Search rooms", "You can't send any messages until you review and agree to our terms and conditions.": "You can't send any messages until you review and agree to our terms and conditions.",