From efad42439e5576185dd6e38cf05da4b3aa2723d5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 14 Oct 2020 11:41:24 +0100 Subject: [PATCH 1/3] Fix background-image: url(null) for backdrop filter Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/themes/light/css/_mods.scss | 2 +- src/components/structures/LeftPanel.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss index 9a59acba8e..bc3db9b9d1 100644 --- a/res/themes/light/css/_mods.scss +++ b/res/themes/light/css/_mods.scss @@ -6,7 +6,7 @@ @supports (backdrop-filter: none) { .mx_LeftPanel { - background-image: var(--avatar-url); + background-image: var(--avatar-url, unset); background-repeat: no-repeat; background-size: cover; background-position: left top; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 090a64904c..b978b7c93d 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -119,8 +119,12 @@ export default class LeftPanel extends React.Component { if (settingBgMxc) { avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize); } + const avatarUrlProp = `url(${avatarUrl})`; - if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) { + const existingValue = document.body.style.getPropertyValue("--avatar-url"); + if (!avatarUrl && existingValue) { + document.body.style.removeProperty("--avatar-url"); + } else if (avatarUrl && existingValue !== avatarUrlProp) { document.body.style.setProperty("--avatar-url", avatarUrlProp); } }; From 3e548bbc9483596c38c6f62dff952dcb190c59c6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Oct 2020 16:57:07 +0100 Subject: [PATCH 2/3] tidy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LeftPanel.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index b978b7c93d..1d8a3e9912 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -121,10 +121,9 @@ export default class LeftPanel extends React.Component { } const avatarUrlProp = `url(${avatarUrl})`; - const existingValue = document.body.style.getPropertyValue("--avatar-url"); - if (!avatarUrl && existingValue) { + if (!avatarUrl) { document.body.style.removeProperty("--avatar-url"); - } else if (avatarUrl && existingValue !== avatarUrlProp) { + } else if (avatarUrl && document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) { document.body.style.setProperty("--avatar-url", avatarUrlProp); } }; From 6a82a1f3c7b3aca5ab831ad361d10c8e213c1b12 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Oct 2020 17:15:01 +0100 Subject: [PATCH 3/3] Update src/components/structures/LeftPanel.tsx Co-authored-by: Travis Ralston --- src/components/structures/LeftPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 1d8a3e9912..f185bb8602 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -123,7 +123,7 @@ export default class LeftPanel extends React.Component { const avatarUrlProp = `url(${avatarUrl})`; if (!avatarUrl) { document.body.style.removeProperty("--avatar-url"); - } else if (avatarUrl && document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) { + } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) { document.body.style.setProperty("--avatar-url", avatarUrlProp); } };