From 0ddb71a4fec426ca44431170c1db68dedce9edb7 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Sun, 22 Aug 2021 13:05:23 +0200 Subject: [PATCH 01/12] Optimize backdrop blur --- src/components/structures/BackdropPanel.tsx | 69 ++++++--------------- 1 file changed, 19 insertions(+), 50 deletions(-) diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index 5f94692fc7..de20705436 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -31,9 +31,6 @@ interface IState { } export default class BackdropPanel extends React.PureComponent { - private leftLeftPanelRef = createRef(); - private leftPanelRef = createRef(); - private sizes = { leftLeftPanelWidth: 0, leftPanelWidth: 0, @@ -76,36 +73,22 @@ export default class BackdropPanel extends React.PureComponent { }; private refreshBackdropImage = (): void => { - const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d"); - const leftPanelContext = this.leftPanelRef.current.getContext("2d"); - const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes; - const width = leftLeftPanelWidth + leftPanelWidth; + const leftLeftPanelCanvas = document.createElement('canvas'); + const leftPanelCanvas = document.createElement('canvas'); + const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d"); + const leftPanelContext = leftPanelCanvas.getContext("2d"); + const { leftLeftPanelWidth, height } = this.sizes; const { backgroundImage } = this.props; const imageWidth = (backgroundImage as ImageBitmap).width; const imageHeight = (backgroundImage as ImageBitmap).height; - - const contentRatio = imageWidth / imageHeight; - const containerRatio = width / height; - let resultHeight; - let resultWidth; - if (contentRatio > containerRatio) { - resultHeight = height; - resultWidth = height * contentRatio; - } else { - resultWidth = width; - resultHeight = width / contentRatio; - } - // This value has been chosen to be as close with rendering as the css-only // backdrop-filter: blur effect was, mostly takes effect for vertical pictures. - const x = width * 0.1; - const y = (height - resultHeight) / 2; - this.leftLeftPanelRef.current.width = leftLeftPanelWidth; - this.leftLeftPanelRef.current.height = height; - this.leftPanelRef.current.width = (window.screen.width * 0.5); - this.leftPanelRef.current.height = height; + leftLeftPanelCanvas.width = leftLeftPanelWidth; + leftLeftPanelCanvas.height = height; + leftPanelCanvas.width = window.screen.width * 0.5; + leftPanelCanvas.height = height; const spacesBlur = this.style.getPropertyValue('--llp-background-blur'); const roomListBlur = this.style.getPropertyValue('--lp-background-blur'); @@ -116,23 +99,23 @@ export default class BackdropPanel extends React.PureComponent { backgroundImage, 0, 0, imageWidth, imageHeight, - x, - y, - resultWidth, - resultHeight, + 0, + 0, + leftLeftPanelWidth, + window.screen.height, ); leftPanelContext.drawImage( backgroundImage, 0, 0, imageWidth, imageHeight, - x - leftLeftPanelWidth, - y, - resultWidth, - resultHeight, + 0, + 0, + window.screen.width * 0.5, + window.screen.height, ); this.setState({ - lpImage: this.leftPanelRef.current.toDataURL('image/jpeg', 1), - llpImage: this.leftLeftPanelRef.current.toDataURL('image/jpeg', 1), + lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1), + llpImage: leftLeftPanelCanvas.toDataURL('image/jpeg', 1), }); }; @@ -147,20 +130,6 @@ export default class BackdropPanel extends React.PureComponent { { this.state?.lpImage !== 'data:,' && } - - ; } } From 99a935534c14e73d09c9ec33e92764ce11ad7f4e Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Sun, 22 Aug 2021 13:08:33 +0200 Subject: [PATCH 02/12] test --- src/components/structures/BackdropPanel.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index de20705436..d816109e0b 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -98,11 +98,6 @@ export default class BackdropPanel extends React.PureComponent { leftLeftPanelContext.drawImage( backgroundImage, 0, 0, - imageWidth, imageHeight, - 0, - 0, - leftLeftPanelWidth, - window.screen.height, ); leftPanelContext.drawImage( backgroundImage, From b1a2f16e439bc8726ddb4fec67af21a38f195f4c Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 13:03:09 +0200 Subject: [PATCH 03/12] optimize --- src/components/structures/BackdropPanel.tsx | 31 +++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index d816109e0b..58d458aae8 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -77,13 +77,29 @@ export default class BackdropPanel extends React.PureComponent { const leftPanelCanvas = document.createElement('canvas'); const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d"); const leftPanelContext = leftPanelCanvas.getContext("2d"); - const { leftLeftPanelWidth, height } = this.sizes; const { backgroundImage } = this.props; + const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes; + const width = leftLeftPanelWidth + leftPanelWidth; const imageWidth = (backgroundImage as ImageBitmap).width; const imageHeight = (backgroundImage as ImageBitmap).height; + + const contentRatio = imageWidth / imageHeight; + const containerRatio = width / height; + let resultHeight; + let resultWidth; + if (contentRatio > containerRatio) { + resultHeight = height; + resultWidth = height * contentRatio; + } else { + resultWidth = width; + resultHeight = width / contentRatio; + } + // This value has been chosen to be as close with rendering as the css-only // backdrop-filter: blur effect was, mostly takes effect for vertical pictures. + const x = width * 0.1; + const y = (height - resultHeight) / 2; leftLeftPanelCanvas.width = leftLeftPanelWidth; leftLeftPanelCanvas.height = height; @@ -98,15 +114,20 @@ export default class BackdropPanel extends React.PureComponent { leftLeftPanelContext.drawImage( backgroundImage, 0, 0, + imageWidth, imageHeight, + x, + y, + resultWidth, + resultHeight, ); leftPanelContext.drawImage( backgroundImage, 0, 0, imageWidth, imageHeight, - 0, - 0, - window.screen.width * 0.5, - window.screen.height, + x - leftLeftPanelWidth, + y, + resultWidth, + resultHeight, ); this.setState({ lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1), From 27dbd172b04a88460dc0d9e4cd6010fd68dacbf1 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 16:18:14 +0200 Subject: [PATCH 04/12] Fix resizer to properly find children --- src/resizer/resizer.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts index e430c68e17..0496615188 100644 --- a/src/resizer/resizer.ts +++ b/src/resizer/resizer.ts @@ -182,8 +182,6 @@ export default class Resizer { private getResizeHandles() { if (!this.container.children) return []; - return Array.from(this.container.children).filter(el => { - return this.isResizeHandle(el); - }) as HTMLElement[]; + return Array.from(this.container.querySelectorAll(`.${this.classNames.handle}`)) as HTMLElement[]; } } From 51b5b0145bc6c07e7ade5696a44416d6409dd8ab Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 16:18:40 +0200 Subject: [PATCH 05/12] Fix resizer on LoggedInView --- src/components/structures/LoggedInView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 6008268877..55731eb2ca 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -284,7 +284,7 @@ class LoggedInView extends React.Component { if (isNaN(lhsSize)) { lhsSize = 350; } - this.resizer.forHandleAt(0).resize(lhsSize); + this.resizer.forHandleWithId('lp-resizer').resize(lhsSize); } private onAccountData = (event: MatrixEvent) => { @@ -654,7 +654,7 @@ class LoggedInView extends React.Component { isMinimized={this.props.collapseLhs || false} resizeNotifier={this.props.resizeNotifier} /> - +
{ pageElement } From ca92101c7293fcf35424ba262c8ba513dc0e33b5 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 16:20:21 +0200 Subject: [PATCH 06/12] Optimize and rewrite backdrop rendering --- res/css/structures/_BackdropPanel.scss | 10 ---- res/css/structures/_LeftPanel.scss | 29 ++++++++++ res/themes/dark/css/_dark.scss | 1 - res/themes/light/css/_light.scss | 1 - src/components/structures/BackdropPanel.tsx | 60 +++------------------ src/components/structures/LoggedInView.tsx | 15 ++++-- 6 files changed, 45 insertions(+), 71 deletions(-) diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss index c7ada2b0a5..0dbab0a415 100644 --- a/res/css/structures/_BackdropPanel.scss +++ b/res/css/structures/_BackdropPanel.scss @@ -21,16 +21,6 @@ limitations under the License. height: 100vh; width: 100%; overflow: hidden; - - &::before { - content: " "; - position: absolute; - left: 0; - top: 0; - height: 100vh; - width: 100%; - background-color: var(--lp-background-overlay); - } } .mx_BackdropPanel--canvas { diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 29077811d6..ba7d9c4523 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -27,8 +27,37 @@ $roomListCollapsedWidth: 68px; .mx_LeftPanel_wrapper { display: flex; max-width: 50%; + + .mx_LeftPanel_background { + + &::before { + content: " "; + position: absolute; + left: 0; + top: 0; + height: 100vh; + width: 100%; + background-color: var(--lp-background-overlay); + } + + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: $roomlist-bg-color; + opacity: 0.5; + } + + .mx_LeftPanel_wrapper--user { + display: flex; + overflow: hidden; + position: relative; + } } + + .mx_LeftPanel { background-color: $roomlist-bg-color; // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index cce7d6ab67..360c6ef85d 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -240,7 +240,6 @@ $appearance-tab-border-color: $room-highlight-color; // blur amounts for left left panel (only for element theme) :root { - --llp-background-blur: 160px; --lp-background-blur: 90px; --lp-background-overlay: rgba(255, 255, 255, 0.055); } diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 982ca7cf08..ab04111d62 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -363,7 +363,6 @@ $appearance-tab-border-color: $input-darker-bg-color; // blur amounts for left left panel (only for element theme) :root { - --llp-background-blur: 120px; --lp-background-blur: 60px; --lp-background-overlay: rgba(0, 0, 0, 0.055); } diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index 58d458aae8..c9531c6490 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from "react"; +import React from "react"; import "context-filter-polyfill"; import UIStore from "../../stores/UIStore"; @@ -31,24 +31,15 @@ interface IState { } export default class BackdropPanel extends React.PureComponent { - private sizes = { - leftLeftPanelWidth: 0, - leftPanelWidth: 0, - height: 0, - }; private style = getComputedStyle(document.documentElement); public state: IState = {}; public componentDidMount() { - UIStore.instance.on("SpacePanel", this.onResize); - UIStore.instance.on("GroupFilterPanelContainer", this.onResize); this.onResize(); } public componentWillUnmount() { - UIStore.instance.off("SpacePanel", this.onResize); - UIStore.instance.on("GroupFilterPanelContainer", this.onResize); } public componentDidUpdate(prevProps: IProps) { @@ -73,65 +64,30 @@ export default class BackdropPanel extends React.PureComponent { }; private refreshBackdropImage = (): void => { - const leftLeftPanelCanvas = document.createElement('canvas'); const leftPanelCanvas = document.createElement('canvas'); - const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d"); const leftPanelContext = leftPanelCanvas.getContext("2d"); const { backgroundImage } = this.props; - const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes; - const width = leftLeftPanelWidth + leftPanelWidth; const imageWidth = (backgroundImage as ImageBitmap).width; const imageHeight = (backgroundImage as ImageBitmap).height; - const contentRatio = imageWidth / imageHeight; - const containerRatio = width / height; - let resultHeight; - let resultWidth; - if (contentRatio > containerRatio) { - resultHeight = height; - resultWidth = height * contentRatio; - } else { - resultWidth = width; - resultHeight = width / contentRatio; - } - - // This value has been chosen to be as close with rendering as the css-only - // backdrop-filter: blur effect was, mostly takes effect for vertical pictures. - const x = width * 0.1; - const y = (height - resultHeight) / 2; - - leftLeftPanelCanvas.width = leftLeftPanelWidth; - leftLeftPanelCanvas.height = height; leftPanelCanvas.width = window.screen.width * 0.5; - leftPanelCanvas.height = height; + leftPanelCanvas.height = window.screen.height; - const spacesBlur = this.style.getPropertyValue('--llp-background-blur'); const roomListBlur = this.style.getPropertyValue('--lp-background-blur'); - leftLeftPanelContext.filter = `blur(${spacesBlur})`; leftPanelContext.filter = `blur(${roomListBlur})`; - leftLeftPanelContext.drawImage( - backgroundImage, - 0, 0, - imageWidth, imageHeight, - x, - y, - resultWidth, - resultHeight, - ); leftPanelContext.drawImage( backgroundImage, 0, 0, imageWidth, imageHeight, - x - leftLeftPanelWidth, - y, - resultWidth, - resultHeight, + 0, + 0, + window.screen.width * 0.5, + window.screen.height, ); this.setState({ lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1), - llpImage: leftLeftPanelCanvas.toDataURL('image/jpeg', 1), }); }; @@ -139,10 +95,6 @@ export default class BackdropPanel extends React.PureComponent { public render() { if (!this.props.backgroundImage) return null; return
- { this.state?.llpImage !== 'data:,' && } - { this.state?.lpImage !== 'data:,' && } diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 55731eb2ca..4d0c82e0b8 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -645,16 +645,21 @@ class LoggedInView extends React.Component { >
-
+
{ SpaceStore.spacesEnabled ? : null } - +
+
+ +
{ pageElement } From 92aa953934fe567f4310b3e3eab87e825992d5a3 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 16:28:24 +0200 Subject: [PATCH 07/12] Make eslint happy --- src/components/structures/BackdropPanel.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index c9531c6490..ca138eac0e 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -17,8 +17,6 @@ limitations under the License. import React from "react"; import "context-filter-polyfill"; -import UIStore from "../../stores/UIStore"; - interface IProps { backgroundImage?: CanvasImageSource; } @@ -26,8 +24,6 @@ interface IProps { interface IState { // Left Panel image lpImage?: string; - // Left-left panel image - llpImage?: string; } export default class BackdropPanel extends React.PureComponent { @@ -39,26 +35,14 @@ export default class BackdropPanel extends React.PureComponent { this.onResize(); } - public componentWillUnmount() { - } - public componentDidUpdate(prevProps: IProps) { if (prevProps.backgroundImage !== this.props.backgroundImage) { - this.setState({}); this.onResize(); } } private onResize = () => { if (this.props.backgroundImage) { - const groupFilterPanelDimensions = UIStore.instance.getElementDimensions("GroupFilterPanelContainer"); - const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel"); - const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel"); - this.sizes = { - leftLeftPanelWidth: spacePanelDimensions?.width ?? groupFilterPanelDimensions?.width ?? 0, - leftPanelWidth: roomListDimensions?.width ?? 0, - height: UIStore.instance.windowHeight, - }; this.refreshBackdropImage(); } }; From 7dfe57833afc073138b165acaa5892df7e43238e Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Mon, 23 Aug 2021 16:57:24 +0200 Subject: [PATCH 08/12] Fix GroupFilterPanel not having proper backdrop --- res/css/structures/_GroupFilterPanel.scss | 15 ++++++++++++ res/css/structures/_LeftPanel.scss | 14 ----------- src/components/structures/LeftPanel.tsx | 27 ---------------------- src/components/structures/LoggedInView.tsx | 8 +++++++ 4 files changed, 23 insertions(+), 41 deletions(-) diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index c62230edfc..11afe855b8 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -20,6 +20,21 @@ limitations under the License. } } +$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations + +.mx_GroupFilterPanelContainer { + flex-grow: 0; + flex-shrink: 0; + width: $groupFilterPanelWidth; + height: 100%; + + // Create another flexbox so the GroupFilterPanel fills the container + display: flex; + flex-direction: column; + + // GroupFilterPanel handles its own CSS +} + .mx_GroupFilterPanel { background-color: $groupFilterPanel-bg-color; flex: 1; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index ba7d9c4523..a172b6c26b 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations $roomListCollapsedWidth: 68px; .mx_MatrixChat--with-avatar { @@ -68,19 +67,6 @@ $roomListCollapsedWidth: 68px; contain: content; position: relative; - .mx_LeftPanel_GroupFilterPanelContainer { - flex-grow: 0; - flex-shrink: 0; - flex-basis: $groupFilterPanelWidth; - height: 100%; - - // Create another flexbox so the GroupFilterPanel fills the container - display: flex; - flex-direction: column; - - // GroupFilterPanel handles its own CSS - } - // Note: The 'room list' in this context is actually everything that isn't the tag // panel, such as the menu options, breadcrumbs, filtering, etc .mx_LeftPanel_roomListContainer { diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 6c418e9366..d955271249 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -19,8 +19,6 @@ import { createRef } from "react"; import classNames from "classnames"; import { Room } from "matrix-js-sdk/src/models/room"; -import GroupFilterPanel from "./GroupFilterPanel"; -import CustomRoomTagPanel from "./CustomRoomTagPanel"; import dis from "../../dispatcher/dispatcher"; import { _t } from "../../languageHandler"; import RoomList from "../views/rooms/RoomList"; @@ -33,7 +31,6 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import ResizeNotifier from "../../utils/ResizeNotifier"; -import SettingsStore from "../../settings/SettingsStore"; import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore"; import IndicatorScrollbar from "../structures/IndicatorScrollbar"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; @@ -51,7 +48,6 @@ interface IProps { interface IState { showBreadcrumbs: boolean; - showGroupFilterPanel: boolean; activeSpace?: Room; } @@ -68,9 +64,6 @@ const cssClasses = [ export default class LeftPanel extends React.Component { private ref: React.RefObject = createRef(); private listContainerRef: React.RefObject = createRef(); - private groupFilterPanelWatcherRef: string; - private groupFilterPanelContainer = createRef(); - private bgImageWatcherRef: string; private focusedElement = null; private isDoingStickyHeaders = false; @@ -79,25 +72,17 @@ export default class LeftPanel extends React.Component { this.state = { showBreadcrumbs: BreadcrumbsStore.instance.visible, - showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'), activeSpace: SpaceStore.instance.activeSpace, }; BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace); - this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => { - this.setState({ showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel") }); - }); } public componentDidMount() { UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current); UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current); - if (this.groupFilterPanelContainer.current) { - const componentName = "GroupFilterPanelContainer"; - UIStore.instance.trackElementDimensions(componentName, this.groupFilterPanelContainer.current); - } UIStore.instance.on("ListContainer", this.refreshStickyHeaders); // Using the passive option to not block the main thread // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners @@ -105,7 +90,6 @@ export default class LeftPanel extends React.Component { } public componentWillUnmount() { - SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef); BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace); @@ -422,16 +406,6 @@ export default class LeftPanel extends React.Component { } public render(): React.ReactNode { - let leftLeftPanel; - if (this.state.showGroupFilterPanel) { - leftLeftPanel = ( -
- - { SettingsStore.getValue("feature_custom_tags") ? : null } -
- ); - } - const roomList = { return (
- { leftLeftPanel }