From 82e0816d8689b9588d22312260e4de3c25b9e81b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 3 Jul 2020 16:50:01 +0200
Subject: [PATCH] also blur the sticky headers

added a DOM element so we can set the background on the parent and
the blur on the new element
---
 res/css/views/rooms/_RoomSublist2.scss      |  8 ++++++
 res/themes/element/css/_mods.scss           | 14 ++++++++++
 src/components/views/rooms/RoomSublist2.tsx | 30 +++++++++++----------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index ef5305aba5..16ae88768b 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -80,6 +80,14 @@ limitations under the License.
             // We don't have a top style because the top is dependent on the room list header's
             // height, and is therefore calculated in JS.
             // The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
+
+            // blur for element theme, background image is on parent
+            .mx_RoomSublist2_stickyHeaderBlur {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
         }
 
         // Sticky Headers End
diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss
index 12388200b4..52c9dd4232 100644
--- a/res/themes/element/css/_mods.scss
+++ b/res/themes/element/css/_mods.scss
@@ -19,4 +19,18 @@
     .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
         backdrop-filter: blur(175px);
     }
+
+    // sticky headers need their own blur
+
+    .mx_RoomSublist2_headerContainer_sticky {
+        background-size: cover;
+        background-image: var(--avatar-url);
+        background-position: center;
+    }
+
+    .mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
+        backdrop-filter: blur(100px);
+        background-color: $roomlist2-bg-color;
+    }
+}
 }
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 58ebf54bf7..51507f0f64 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -311,20 +311,22 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
-                                <AccessibleButton
-                                    inputRef={ref}
-                                    tabIndex={tabIndex}
-                                    className={"mx_RoomSublist2_headerText"}
-                                    role="treeitem"
-                                    aria-level={1}
-                                    onClick={this.onHeaderClick}
-                                >
-                                    <span className={collapseClasses} />
-                                    <span>{this.props.label}</span>
-                                </AccessibleButton>
-                                {this.renderMenu()}
-                                {this.props.isMinimized ? null : badgeContainer}
-                                {this.props.isMinimized ? null : addRoomButton}
+                                <div className="mx_RoomSublist2_stickyHeaderBlur">
+                                    <AccessibleButton
+                                        inputRef={ref}
+                                        tabIndex={tabIndex}
+                                        className={"mx_RoomSublist2_headerText"}
+                                        role="treeitem"
+                                        aria-level={1}
+                                        onClick={this.onHeaderClick}
+                                    >
+                                        <span className={collapseClasses} />
+                                        <span>{this.props.label}</span>
+                                    </AccessibleButton>
+                                    {this.renderMenu()}
+                                    {this.props.isMinimized ? null : badgeContainer}
+                                    {this.props.isMinimized ? null : addRoomButton}
+                                </div>
                             </div>
                             {this.props.isMinimized ? badgeContainer : null}
                             {this.props.isMinimized ? addRoomButton : null}