From 5932b93325dca5e82557a2ba6014bf5c0077a01e Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 14:09:49 +0100
Subject: [PATCH] make backdrop closer to what is happening in production

---
 res/css/structures/_GroupFilterPanel.scss     |  2 +-
 res/css/structures/_MatrixChat.scss           |  2 +-
 src/components/structures/BackdropPanel.tsx   |  5 +++++
 src/components/structures/GroupFilterPanel.js | 17 +++++++++++++++--
 src/components/structures/LeftPanel.tsx       |  2 +-
 src/components/views/spaces/SpacePanel.tsx    |  1 +
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index 444435dd57..f7c70ec769 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_GroupFilterPanel {
     flex: 1;
-    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
+    position: relative;
 
     display: flex;
     flex-direction: column;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 2e5ffbcd82..ca470e6cb4 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -42,7 +42,7 @@ limitations under the License.
     width: 100%;
     min-height: 100%;
     z-index: 0;
-    opacity: .15;
+    pointer-events: none;
 }
 
 .mx_MatrixToolbar {
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 940f0dae9b..741f8109bf 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -22,6 +22,7 @@ interface IProps {
     height?: number;
     backgroundImage?: CanvasImageSource;
     blur?: string;
+    opacity?: number;
 }
 
 
@@ -31,6 +32,7 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
 
     static defaultProps = {
         blur: "60px",
+        opacity: .15,
     }
 
     public componentDidMount() {
@@ -82,6 +84,9 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         return <canvas
             ref={this.canvasRef}
             className="mx_BackdropPanel"
+            style={{
+                opacity: this.props.opacity,
+            }}
         />;
     }
 }
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index f1c28d588a..eee09a2cf8 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -29,7 +29,9 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import BackdropPanel from "./BackdropPanel";
+import UIStore from "../../stores/UIStore";
 
 @replaceableComponent("structures.GroupFilterPanel")
 class GroupFilterPanel extends React.Component {
@@ -40,6 +42,8 @@ class GroupFilterPanel extends React.Component {
         selectedTags: [],
     };
 
+    ref = React.createRef()
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
@@ -56,6 +60,7 @@ class GroupFilterPanel extends React.Component {
         });
         // This could be done by anything with a matrix client
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
+        UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
     componentWillUnmount() {
@@ -65,6 +70,7 @@ class GroupFilterPanel extends React.Component {
         if (this._groupFilterOrderStoreToken) {
             this._groupFilterOrderStoreToken.remove();
         }
+        UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
     _onGroupMyMembership = () => {
@@ -147,7 +153,14 @@ class GroupFilterPanel extends React.Component {
             );
         }
 
-        return <div className={classes} onClick={this.onClearFilterClick}>
+        const panelDimensions = UIStore.instance.getElementDimensions("GroupPanel");
+
+        return <div className={classes} onClick={this.onClearFilterClick} ref={this.ref}>
+            <BackdropPanel
+                backgroundImage={this.props.backgroundImage}
+                width={panelDimensions?.width}
+                height={panelDimensions?.height}
+            />
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
                 onClick={this.onClick}
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 4b4d593fce..f382ebbdf2 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -405,7 +405,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
-                    <GroupFilterPanel />
+                    <GroupFilterPanel backgroundImage={this.props.backgroundImage} />
                     {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
                 </div>
             );
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index eeddc23588..f0c3d9ead3 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -292,6 +292,7 @@ const SpacePanel = (props: IProps) => {
                             backgroundImage={props.backgroundImage}
                             width={panelDimensions?.width}
                             height={panelDimensions?.height}
+                            opacity={.3}
                         />
                         <Droppable droppableId="top-level-spaces">
                             {(provided, snapshot) => (