Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit e54191f

Browse files
author
Dariusz Niemczyk
committed
Move background-blur to fully css version
1 parent 01eda51 commit e54191f

File tree

11 files changed

+49
-143
lines changed

11 files changed

+49
-143
lines changed

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@
6464
"cheerio": "^1.0.0-rc.9",
6565
"classnames": "^2.2.6",
6666
"commonmark": "^0.29.3",
67-
"context-filter-polyfill": "^0.2.4",
6867
"counterpart": "^0.18.6",
6968
"diff-dom": "^4.2.2",
7069
"diff-match-patch": "^1.0.5",
@@ -196,7 +195,6 @@
196195
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
197196
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
198197
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
199-
"context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
200198
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
201199
"RecorderWorklet": "<rootDir>/__mocks__/empty.js"
202200
},

‎res/css/structures/_BackdropPanel.scss‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ limitations under the License.
2121
height: 100vh;
2222
width: 100%;
2323
overflow: hidden;
24+
filter: blur(var(--lp-background-blur));
2425
}
2526

26-
.mx_BackdropPanel--canvas {
27+
.mx_BackdropPanel--image {
2728
position: absolute;
2829
top: 0;
2930
left: 0;
@@ -32,10 +33,4 @@ limitations under the License.
3233
pointer-events: none;
3334
overflow: hidden;
3435

35-
&:nth-of-type(2n-1) {
36-
opacity: 0.2;
37-
}
38-
&:nth-of-type(2n) {
39-
opacity: 0.1;
40-
}
4136
}

‎res/css/structures/_GroupFilterPanel.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_MatrixChat--with-avatar {
18-
.mx_GroupFilterPanel {
19-
background-color: transparent;
20-
}
21-
}
22-
2317
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
2418

2519
.mx_GroupFilterPanelContainer {
@@ -36,6 +30,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
3630
}
3731

3832
.mx_GroupFilterPanel {
33+
z-index: 1;
3934
background-color: $groupFilterPanel-bg-color;
4035
flex: 1;
4136
cursor: pointer;

‎res/css/structures/_LeftPanel.scss‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,8 @@ $roomListCollapsedWidth: 68px;
2727
display: flex;
2828
max-width: 50%;
2929

30-
.mx_LeftPanel_background {
31-
32-
&::before {
33-
content: " ";
34-
position: absolute;
35-
left: 0;
36-
top: 0;
37-
height: 100vh;
38-
width: 100%;
39-
background-color: var(--lp-background-overlay);
40-
}
41-
42-
position: absolute;
43-
left: 0;
44-
top: 0;
45-
width: 100%;
46-
height: 100%;
47-
background-color: $roomlist-bg-color;
48-
opacity: 0.5;
49-
}
50-
5130
.mx_LeftPanel_wrapper--user {
31+
background-color: $roomlist-bg-color;
5232
display: flex;
5333
overflow: hidden;
5434
position: relative;

‎res/css/structures/_SpacePanel.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,14 @@ $activeBorderTransparentGap: 1px;
2222
$activeBackgroundColor: $roomtile-selected-bg-color;
2323
$activeBorderColor: $secondary-fg-color;
2424

25-
.mx_MatrixChat--with-avatar {
26-
.mx_SpacePanel {
27-
background-color: transparent;
28-
}
29-
}
30-
3125
.mx_SpacePanel {
3226
background-color: $groupFilterPanel-bg-color;
3327
flex: 0 0 auto;
3428
padding: 0;
3529
margin: 0;
3630
position: relative;
31+
// Fix for the blurred avatar-background
32+
z-index: 1;
3733

3834
// Create another flexbox so the Panel fills the container
3935
display: flex;

‎res/themes/dark/css/_dark.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,7 @@ $appearance-tab-border-color: $room-highlight-color;
240240

241241
// blur amounts for left left panel (only for element theme)
242242
:root {
243-
--lp-background-blur: 90px;
244-
--lp-background-overlay: rgba(255, 255, 255, 0.055);
243+
--lp-background-blur: 45px;
245244
}
246245

247246
$composer-shadow-color: rgba(0, 0, 0, 0.28);

‎res/themes/light/css/_light.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -363,8 +363,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
363363

364364
// blur amounts for left left panel (only for element theme)
365365
:root {
366-
--lp-background-blur: 60px;
367-
--lp-background-overlay: rgba(0, 0, 0, 0.055);
366+
--lp-background-blur: 30px;
368367
}
369368
$composer-shadow-color: rgba(0, 0, 0, 0.04);
370369

‎src/components/structures/BackdropPanel.tsx‎

Lines changed: 22 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,74 +14,31 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import React from "react";
18-
import "context-filter-polyfill";
17+
import React, { CSSProperties } from "react";
1918

2019
interface IProps {
21-
backgroundImage?: CanvasImageSource;
20+
backgroundImage?: string;
21+
blurMultiplier?: number;
2222
}
2323

24-
interface IState {
25-
// Left Panel image
26-
lpImage?: string;
27-
}
28-
29-
export default class BackdropPanel extends React.PureComponent<IProps, IState> {
30-
private style = getComputedStyle(document.documentElement);
31-
32-
public state: IState = {};
33-
34-
public componentDidMount() {
35-
this.onResize();
36-
}
37-
38-
public componentDidUpdate(prevProps: IProps) {
39-
if (prevProps.backgroundImage !== this.props.backgroundImage) {
40-
this.onResize();
24+
export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplier }) => {
25+
if (!backgroundImage) return null;
26+
27+
const styles: CSSProperties = {};
28+
if (blurMultiplier) {
29+
const rootStyle = getComputedStyle(document.documentElement);
30+
const blurValue = rootStyle.getPropertyValue('--lp-background-blur');
31+
const pixelsValue = blurValue.replace('px', '');
32+
const parsed = parseInt(pixelsValue, 10);
33+
if (!isNaN(parsed)) {
34+
styles.filter = `blur(${parsed * blurMultiplier}px)`;
4135
}
4236
}
43-
44-
private onResize = () => {
45-
if (this.props.backgroundImage) {
46-
this.refreshBackdropImage();
47-
}
48-
};
49-
50-
private refreshBackdropImage = (): void => {
51-
const leftPanelCanvas = document.createElement('canvas');
52-
const leftPanelContext = leftPanelCanvas.getContext("2d");
53-
const { backgroundImage } = this.props;
54-
55-
const imageWidth = (backgroundImage as ImageBitmap).width;
56-
const imageHeight = (backgroundImage as ImageBitmap).height;
57-
58-
leftPanelCanvas.width = window.screen.width * 0.5;
59-
leftPanelCanvas.height = window.screen.height;
60-
61-
const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
62-
63-
leftPanelContext.filter = `blur(${roomListBlur})`;
64-
leftPanelContext.drawImage(
65-
backgroundImage,
66-
0, 0,
67-
imageWidth, imageHeight,
68-
0,
69-
0,
70-
window.screen.width * 0.5,
71-
window.screen.height,
72-
);
73-
this.setState({
74-
lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),
75-
76-
});
77-
};
78-
79-
public render() {
80-
if (!this.props.backgroundImage) return null;
81-
return <div className="mx_BackdropPanel">
82-
{ this.state?.lpImage !== 'data:,' && <img
83-
className="mx_BackdropPanel--canvas"
84-
src={this.state.lpImage} /> }
85-
</div>;
86-
}
87-
}
37+
return <div className="mx_BackdropPanel">
38+
<img
39+
style={styles}
40+
className="mx_BackdropPanel--image"
41+
src={backgroundImage} />
42+
</div>;
43+
};
44+
export default BackdropPanel;

‎src/components/structures/LoggedInView.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ interface IState {
133133
usageLimitEventTs?: number;
134134
useCompactLayout: boolean;
135135
activeCalls: Array<MatrixCall>;
136-
backgroundImage?: CanvasImageSource;
136+
backgroundImage?: string;
137137
}
138138

139139
/**
@@ -219,7 +219,7 @@ class LoggedInView extends React.Component<IProps, IState> {
219219

220220
private refreshBackgroundImage = async (): Promise<void> => {
221221
this.setState({
222-
backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(),
222+
backgroundImage: OwnProfileStore.instance.getHttpAvatarUrl(),
223223
});
224224
};
225225

@@ -648,20 +648,30 @@ class LoggedInView extends React.Component<IProps, IState> {
648648
<ToastContainer />
649649
<div className={bodyClasses}>
650650
<div className='mx_LeftPanel_wrapper'>
651-
<BackdropPanel
652-
backgroundImage={this.state.backgroundImage}
653-
/>
654651
{ SettingsStore.getValue('TagPanel.enableTagPanel') &&
655652
(<div className="mx_GroupFilterPanelContainer">
653+
<BackdropPanel
654+
blurMultiplier={0.5}
655+
backgroundImage={this.state.backgroundImage}
656+
/>
656657
<GroupFilterPanel />
657658
{ SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
658659
</div>)
659660
}
660-
{ SpaceStore.spacesEnabled ? <SpacePanel /> : null }
661+
{ SpaceStore.spacesEnabled ? <>
662+
<BackdropPanel
663+
blurMultiplier={0.5}
664+
backgroundImage={this.state.backgroundImage}
665+
/>
666+
<SpacePanel />
667+
</> : null }
668+
<BackdropPanel
669+
backgroundImage={this.state.backgroundImage}
670+
/>
661671
<div
662672
ref={this._resizeContainer}
663-
className="mx_LeftPanel_wrapper--user">
664-
<div className="mx_LeftPanel_background" />
673+
className="mx_LeftPanel_wrapper--user"
674+
>
665675
<LeftPanel
666676
isMinimized={this.props.collapseLhs || false}
667677
resizeNotifier={this.props.resizeNotifier}

‎src/stores/OwnProfileStore.ts‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,10 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
1919
import defaultDispatcher from "../dispatcher/dispatcher";
2020
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
2121
import { User } from "matrix-js-sdk/src/models/user";
22-
import { memoize, throttle } from "lodash";
22+
import { throttle } from "lodash";
2323
import { MatrixClientPeg } from "../MatrixClientPeg";
2424
import { _t } from "../languageHandler";
2525
import { mediaFromMxc } from "../customisations/Media";
26-
import SettingsStore from "../settings/SettingsStore";
27-
import { getDrawable } from "../utils/drawable";
2826

2927
interface IState {
3028
displayName?: string;
@@ -139,22 +137,6 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
139137
await this.updateState({ displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url });
140138
};
141139

142-
public async getAvatarBitmap(avatarSize = 32): Promise<CanvasImageSource> {
143-
let avatarUrl = this.getHttpAvatarUrl(avatarSize);
144-
const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
145-
if (settingBgMxc) {
146-
avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
147-
}
148-
149-
if (avatarUrl) {
150-
return await this.buildBitmap(avatarUrl);
151-
} else {
152-
return null;
153-
}
154-
}
155-
156-
private buildBitmap = memoize(getDrawable);
157-
158140
private onStateEvents = throttle(async (ev: MatrixEvent) => {
159141
const myUserId = MatrixClientPeg.get().getUserId();
160142
if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {

0 commit comments

Comments
 (0)