diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index ab48cb3e471..4f59e6650d7 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -48,6 +48,7 @@ import UserMenu from "./UserMenu"; interface IProps { isMinimized: boolean; resizeNotifier: ResizeNotifier; + spacePanelDisabled: boolean; } enum BreadcrumbsMode { @@ -381,7 +382,8 @@ export default class LeftPanel extends React.Component { onBlur={this.onBlur} onKeyDown={this.onKeyDown} > - { !SpaceStore.spacesEnabled && } + { this.props.spacePanelDisabled && } + { { !this.props.isMinimized && ( ) }
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 427e5f84674..32a5524561c 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -132,6 +132,7 @@ interface IState { useCompactLayout: boolean; activeCalls: Array; backgroundImage?: string; + spacePanelEnabled: boolean; } /** @@ -153,6 +154,7 @@ class LoggedInView extends React.Component { protected readonly resizeHandler: React.RefObject; protected compactLayoutWatcherRef: string; protected backgroundImageWatcherRef: string; + protected sidebarEnabledWatcherRef: string; protected resizer: Resizer; constructor(props, context) { @@ -164,6 +166,7 @@ class LoggedInView extends React.Component { useCompactLayout: SettingsStore.getValue('useCompactLayout'), usageLimitDismissed: false, activeCalls: CallHandler.instance.getAllActiveCalls(), + spacePanelEnabled: SettingsStore.getValue("Spaces.sidebarEnabled"), }; // stash the MatrixClient in case we log out before we are unmounted @@ -200,6 +203,9 @@ class LoggedInView extends React.Component { this.backgroundImageWatcherRef = SettingsStore.watchSetting( "RoomList.backgroundImage", null, this.refreshBackgroundImage, ); + this.sidebarEnabledWatcherRef = SettingsStore.watchSetting( + "Spaces.sidebarEnabled", null, this.onSidebarEnabledToggle, + ); this.resizer = this.createResizer(); this.resizer.attach(); @@ -218,6 +224,7 @@ class LoggedInView extends React.Component { OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage); SettingsStore.unwatchSetting(this.compactLayoutWatcherRef); SettingsStore.unwatchSetting(this.backgroundImageWatcherRef); + SettingsStore.unwatchSetting(this.sidebarEnabledWatcherRef); this.resizer.detach(); } @@ -238,6 +245,13 @@ class LoggedInView extends React.Component { this.setState({ backgroundImage }); }; + private onSidebarEnabledToggle = (): void => { + const spacePanelEnabled = SettingsStore.getValue("Spaces.sidebarEnabled"); + if (spacePanelEnabled !== this.state.spacePanelEnabled) { + this.setState({ spacePanelEnabled }); + } + }; + public canResetTimelineInRoom = (roomId: string) => { if (!this._roomView.current) { return true; @@ -668,7 +682,7 @@ class LoggedInView extends React.Component { { SettingsStore.getValue("feature_custom_tags") ? : null }
) } - { SpaceStore.spacesEnabled ? <> + { this.state.spacePanelEnabled ? <> { diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index 92a5bacb64f..222ff291ede 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx @@ -22,6 +22,7 @@ import { SettingLevel } from "../../../../../settings/SettingLevel"; import StyledCheckbox from "../../../elements/StyledCheckbox"; import { useSettingValue } from "../../../../../hooks/useSettings"; import { MetaSpace } from "../../../../../stores/spaces"; +import SettingsFlag from "../../../elements/SettingsFlag"; export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent) => { const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces"); @@ -48,6 +49,8 @@ const SidebarUserSettingsTab = () => { { _t("Spaces") }
{ _t("Spaces are ways to group rooms and people.") }
+ +
{ _t("Spaces to show") }
{ _t("Along with the spaces you're in, you can use some pre-built ones too.") } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0ffb92f549a..c8382f3b136 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -907,6 +907,8 @@ "Manually verify all remote sessions": "Manually verify all remote sessions", "IRC display name width": "IRC display name width", "Show chat effects (animations when receiving e.g. confetti)": "Show chat effects (animations when receiving e.g. confetti)", + "Show spaces": "Show spaces", + "Display spaces on the left side of the sidebar": "Display spaces on the left side of the sidebar", "Show all rooms in Home": "Show all rooms in Home", "All rooms you're in will appear in Home.": "All rooms you're in will appear in Home.", "Display Communities instead of Spaces": "Display Communities instead of Spaces", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 346af1c766b..e143182d59f 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -831,12 +831,19 @@ export const SETTINGS: {[setting: string]: ISetting} = { supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: null, }, + "Spaces.sidebarEnabled": { + displayName: _td("Show spaces"), + description: _td("Display spaces on the left side of the sidebar"), + supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, + default: true, + controller: new IncompatibleController("showCommunitiesInsteadOfSpaces"), + }, "Spaces.allRoomsInHome": { displayName: _td("Show all rooms in Home"), description: _td("All rooms you're in will appear in Home."), supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: false, - controller: new IncompatibleController("showCommunitiesInsteadOfSpaces", null), + controller: new IncompatibleController("showCommunitiesInsteadOfSpaces", true), }, "Spaces.enabledMetaSpaces": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, diff --git a/src/stores/room-list/SpaceWatcher.ts b/src/stores/room-list/SpaceWatcher.ts index e7d6e78206a..766a0718913 100644 --- a/src/stores/room-list/SpaceWatcher.ts +++ b/src/stores/room-list/SpaceWatcher.ts @@ -18,6 +18,7 @@ import { RoomListStoreClass } from "./RoomListStore"; import { SpaceFilterCondition } from "./filters/SpaceFilterCondition"; import SpaceStore from "../spaces/SpaceStore"; import { MetaSpace, SpaceKey, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces"; +import SettingsStore from "../../settings/SettingsStore"; /** * Watches for changes in spaces to manage the filter on the provided RoomListStore @@ -27,28 +28,40 @@ export class SpaceWatcher { // we track these separately to the SpaceStore as we need to observe transitions private activeSpace: SpaceKey = SpaceStore.instance.activeSpace; private allRoomsInHome: boolean = SpaceStore.instance.allRoomsInHome; + private sidebarEnabled: boolean = SettingsStore.getValue("Spaces.sidebarEnabled"); constructor(private store: RoomListStoreClass) { - if (SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome)) { + if (SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome, this.sidebarEnabled)) { this.updateFilter(); store.addFilter(this.filter); } SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated); SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, this.onHomeBehaviourUpdated); + SettingsStore.watchSetting("Spaces.sidebarEnabled", null, this.onSidebarSettingChanged); } - private static needsFilter(spaceKey: SpaceKey, allRoomsInHome: boolean): boolean { - return !(spaceKey === MetaSpace.Home && allRoomsInHome); + private static needsFilter(spaceKey: SpaceKey, allRoomsInHome: boolean, sidebarEnabled: boolean): boolean { + return !(spaceKey === MetaSpace.Home && allRoomsInHome) && sidebarEnabled; } - private onSelectedSpaceUpdated = (activeSpace: SpaceKey, allRoomsInHome = this.allRoomsInHome) => { - if (activeSpace === this.activeSpace && allRoomsInHome === this.allRoomsInHome) return; // nop + private onSelectedSpaceUpdated = ( + activeSpace = this.activeSpace, + allRoomsInHome = this.allRoomsInHome, + sidebarEnabled = this.sidebarEnabled, + ) => { + if (activeSpace === this.activeSpace && + allRoomsInHome === this.allRoomsInHome && + sidebarEnabled === this.sidebarEnabled + ) { + return; // nop + } - const neededFilter = SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome); - const needsFilter = SpaceWatcher.needsFilter(activeSpace, allRoomsInHome); + const neededFilter = SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome, this.sidebarEnabled); + const needsFilter = SpaceWatcher.needsFilter(activeSpace, allRoomsInHome, sidebarEnabled); this.activeSpace = activeSpace; this.allRoomsInHome = allRoomsInHome; + this.sidebarEnabled = sidebarEnabled; if (needsFilter) { this.updateFilter(); @@ -61,6 +74,11 @@ export class SpaceWatcher { } }; + private onSidebarSettingChanged = () => { + const sidebarEnabled = SettingsStore.getValue("Spaces.sidebarEnabled"); + this.onSelectedSpaceUpdated(this.activeSpace, this.allRoomsInHome, sidebarEnabled); + }; + private onHomeBehaviourUpdated = (allRoomsInHome: boolean) => { this.onSelectedSpaceUpdated(this.activeSpace, allRoomsInHome); };