From 6fc4be386a03b4afecfe24a16dd3cf165946c6d2 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 30 Jun 2020 13:02:52 +0200
Subject: [PATCH] add blurred, blended avatar background to left panel

---
 res/css/structures/_LeftPanel2.scss    |  1 +
 res/css/views/rooms/_RoomSublist2.scss |  3 ++-
 res/themes/element/css/_blur.scss      | 21 +++++++++++++++++++++
 res/themes/element/css/_element.scss   |  4 ++--
 res/themes/element/css/element.scss    |  1 +
 src/components/structures/UserMenu.tsx |  3 +++
 6 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 res/themes/element/css/_blur.scss

diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss
index 40babaa9ca..ef71718142 100644
--- a/res/css/structures/_LeftPanel2.scss
+++ b/res/css/structures/_LeftPanel2.scss
@@ -48,6 +48,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel2_roomListContainer {
         width: calc(100% - $tagPanelWidth);
+        background-color: $roomlist2-bg-color;
 
         // Create another flexbox (this time a column) for the room list components
         display: flex;
diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index ffb96cf600..ef5305aba5 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -55,7 +55,8 @@ limitations under the License.
             z-index: 2; // Prioritize headers in the visible list over sticky ones
 
             // Set the same background color as the room list for sticky headers
-            background-color: $roomlist2-bg-color;
+            // TODO: ask why we need this
+            // background-color: $roomlist2-bg-color;
 
             // Create a flexbox to make ordering easy
             display: flex;
diff --git a/res/themes/element/css/_blur.scss b/res/themes/element/css/_blur.scss
new file mode 100644
index 0000000000..4f8b361674
--- /dev/null
+++ b/res/themes/element/css/_blur.scss
@@ -0,0 +1,21 @@
+// if backdrop-filter is supported,
+// set the user avatar (if any) as a background so
+// it can be blurred by the tag panel and room list
+
+@supports (backdrop-filter: blur(100px)) {
+    .mx_LeftPanel2 {
+        background-image: var(--avatar-url);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .mx_TagPanel
+    {
+        backdrop-filter: blur(100px);
+    }
+
+    .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
+        backdrop-filter: blur(175px);
+    }
+}
diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss
index 5c81eeb75f..d5f8693cba 100644
--- a/res/themes/element/css/_element.scss
+++ b/res/themes/element/css/_element.scss
@@ -65,7 +65,7 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$tagpanel-bg-color: #27303a;
+$tagpanel-bg-color: #dee3ead1;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -178,7 +178,7 @@ $header-divider-color: #91A1C0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
-$roomlist2-bg-color: $header-panel-bg-color;
+$roomlist2-bg-color: #f3f8fde8;
 
 $roomsublist2-divider-color: $primary-fg-color;
 
diff --git a/res/themes/element/css/element.scss b/res/themes/element/css/element.scss
index 894e552b99..a4540ea863 100644
--- a/res/themes/element/css/element.scss
+++ b/res/themes/element/css/element.scss
@@ -2,4 +2,5 @@
 @import "_paths.scss";
 @import "_fonts.scss";
 @import "_element.scss";
+@import "_blur.scss";
 @import "../../../../res/css/_components.scss";
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 8c06a06852..2f48c3b93b 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -283,6 +283,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
+        const {body} = document;
+        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+        body.style.setProperty("--avatar-url", `url('${avatarUrl}')`);
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (