PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move background-blur to fully css version

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-23 19:26:57 +02:00
parent 01eda5158b
commit e54191f6b0
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
11 changed files with 48 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -64,7 +64,6 @@
"cheerio": "^1.0.0-rc.9",
"classnames": "^2.2.6",
"commonmark": "^0.29.3",
"context-filter-polyfill": "^0.2.4",
"counterpart": "^0.18.6",
"diff-dom": "^4.2.2",
"diff-match-patch": "^1.0.5",
@ -196,7 +195,6 @@
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
"RecorderWorklet": "<rootDir>/__mocks__/empty.js"
},

9
res/css/structures/_BackdropPanel.scss
View file

@ -21,9 +21,10 @@ limitations under the License.
height: 100vh;
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
}
.mx_BackdropPanel--canvas {
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
@ -32,10 +33,4 @@ limitations under the License.
pointer-events: none;
overflow: hidden;
&:nth-of-type(2n-1) {
opacity: 0.2;
}
&:nth-of-type(2n) {
opacity: 0.1;
}
}

7
res/css/structures/_GroupFilterPanel.scss
View file

@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MatrixChat--with-avatar {
.mx_GroupFilterPanel {
background-color: transparent;
}
}
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_GroupFilterPanelContainer {
@ -36,6 +30,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
}
.mx_GroupFilterPanel {
z-index: 1;
background-color: $groupFilterPanel-bg-color;
flex: 1;
cursor: pointer;

22
res/css/structures/_LeftPanel.scss
View file

@ -27,28 +27,8 @@ $roomListCollapsedWidth: 68px;
display: flex;
max-width: 50%;
.mx_LeftPanel_background {
&::before {
content: " ";
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background-color: var(--lp-background-overlay);
}
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: $roomlist-bg-color;
opacity: 0.5;
}
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;

8
res/css/structures/_SpacePanel.scss
View file

@ -22,18 +22,14 @@ $activeBorderTransparentGap: 1px;
$activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color;
.mx_MatrixChat--with-avatar {
.mx_SpacePanel {
background-color: transparent;
}
}
.mx_SpacePanel {
background-color: $groupFilterPanel-bg-color;
flex: 0 0 auto;
padding: 0;
margin: 0;
position: relative;
// Fix for the blurred avatar-background
z-index: 1;
// Create another flexbox so the Panel fills the container
display: flex;

3
res/themes/dark/css/_dark.scss
View file

@ -240,8 +240,7 @@ $appearance-tab-border-color: $room-highlight-color;
// blur amounts for left left panel (only for element theme)
:root {
--lp-background-blur: 90px;
--lp-background-overlay: rgba(255, 255, 255, 0.055);
--lp-background-blur: 45px;
}
$composer-shadow-color: rgba(0, 0, 0, 0.28);

3
res/themes/light/css/_light.scss
View file

@ -363,8 +363,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
// blur amounts for left left panel (only for element theme)
:root {
--lp-background-blur: 60px;
--lp-background-overlay: rgba(0, 0, 0, 0.055);
--lp-background-blur: 30px;
}
$composer-shadow-color: rgba(0, 0, 0, 0.04);

85
src/components/structures/BackdropPanel.tsx
View file

@ -14,74 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import "context-filter-polyfill";
import React, { CSSProperties } from "react";
interface IProps {
backgroundImage?: CanvasImageSource;
backgroundImage?: string;
blurMultiplier?: number;
}
interface IState {
// Left Panel image
lpImage?: string;
}
export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplier }) => {
if (!backgroundImage) return null;
export default class BackdropPanel extends React.PureComponent<IProps, IState> {
private style = getComputedStyle(document.documentElement);
public state: IState = {};
public componentDidMount() {
this.onResize();
}
public componentDidUpdate(prevProps: IProps) {
if (prevProps.backgroundImage !== this.props.backgroundImage) {
this.onResize();
const styles: CSSProperties = {};
if (blurMultiplier) {
const rootStyle = getComputedStyle(document.documentElement);
const blurValue = rootStyle.getPropertyValue('--lp-background-blur');
const pixelsValue = blurValue.replace('px', '');
const parsed = parseInt(pixelsValue, 10);
if (!isNaN(parsed)) {
styles.filter = `blur(${parsed * blurMultiplier}px)`;
}
}
private onResize = () => {
if (this.props.backgroundImage) {
this.refreshBackdropImage();
}
};
private refreshBackdropImage = (): void => {
const leftPanelCanvas = document.createElement('canvas');
const leftPanelContext = leftPanelCanvas.getContext("2d");
const { backgroundImage } = this.props;
const imageWidth = (backgroundImage as ImageBitmap).width;
const imageHeight = (backgroundImage as ImageBitmap).height;
leftPanelCanvas.width = window.screen.width * 0.5;
leftPanelCanvas.height = window.screen.height;
const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
leftPanelContext.filter = `blur(${roomListBlur})`;
leftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
0,
0,
window.screen.width * 0.5,
window.screen.height,
);
this.setState({
lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),
});
};
public render() {
if (!this.props.backgroundImage) return null;
return <div className="mx_BackdropPanel">
{ this.state?.lpImage !== 'data:,' && <img
className="mx_BackdropPanel--canvas"
src={this.state.lpImage} /> }
</div>;
}
}
return <div className="mx_BackdropPanel">
<img
style={styles}
className="mx_BackdropPanel--image"
src={backgroundImage} />
</div>;
};
export default BackdropPanel;

26
src/components/structures/LoggedInView.tsx
View file

@ -133,7 +133,7 @@ interface IState {
usageLimitEventTs?: number;
useCompactLayout: boolean;
activeCalls: Array<MatrixCall>;
backgroundImage?: CanvasImageSource;
backgroundImage?: string;
}
/**
@ -219,7 +219,7 @@ class LoggedInView extends React.Component<IProps, IState> {
private refreshBackgroundImage = async (): Promise<void> => {
this.setState({
backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(),
backgroundImage: OwnProfileStore.instance.getHttpAvatarUrl(),
});
};
@ -648,20 +648,30 @@ class LoggedInView extends React.Component<IProps, IState> {
<ToastContainer />
<div className={bodyClasses}>
<div className='mx_LeftPanel_wrapper'>
<BackdropPanel
backgroundImage={this.state.backgroundImage}
/>
{ SettingsStore.getValue('TagPanel.enableTagPanel') &&
(<div className="mx_GroupFilterPanelContainer">
<BackdropPanel
blurMultiplier={0.5}
backgroundImage={this.state.backgroundImage}
/>
<GroupFilterPanel />
{ SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
</div>)
}
{ SpaceStore.spacesEnabled ? <SpacePanel /> : null }
{ SpaceStore.spacesEnabled ? <>
<BackdropPanel
blurMultiplier={0.5}
backgroundImage={this.state.backgroundImage}
/>
<SpacePanel />
</> : null }
<BackdropPanel
backgroundImage={this.state.backgroundImage}
/>
<div
ref={this._resizeContainer}
className="mx_LeftPanel_wrapper--user">
<div className="mx_LeftPanel_background" />
className="mx_LeftPanel_wrapper--user"
>
<LeftPanel
isMinimized={this.props.collapseLhs || false}
resizeNotifier={this.props.resizeNotifier}

20
src/stores/OwnProfileStore.ts
View file

@ -19,12 +19,10 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
import defaultDispatcher from "../dispatcher/dispatcher";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { User } from "matrix-js-sdk/src/models/user";
import { memoize, throttle } from "lodash";
import { throttle } from "lodash";
import { MatrixClientPeg } from "../MatrixClientPeg";
import { _t } from "../languageHandler";
import { mediaFromMxc } from "../customisations/Media";
import SettingsStore from "../settings/SettingsStore";
import { getDrawable } from "../utils/drawable";
interface IState {
displayName?: string;
@ -139,22 +137,6 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
await this.updateState({ displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url });
};
public async getAvatarBitmap(avatarSize = 32): Promise<CanvasImageSource> {
let avatarUrl = this.getHttpAvatarUrl(avatarSize);
const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
if (settingBgMxc) {
avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
}
if (avatarUrl) {
return await this.buildBitmap(avatarUrl);
} else {
return null;
}
}
private buildBitmap = memoize(getDrawable);
private onStateEvents = throttle(async (ev: MatrixEvent) => {
const myUserId = MatrixClientPeg.get().getUserId();
if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {

5
yarn.lock
View file

@ -2917,11 +2917,6 @@ content-type@^1.0.4:
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
context-filter-polyfill@^0.2.4:
version "0.2.4"
resolved "https://registry.yarnpkg.com/context-filter-polyfill/-/context-filter-polyfill-0.2.4.tgz#ecf88d3197e7c3a47e9a7ae2d5167b703945a5d4"
integrity sha512-LDZ3WiTzo6kIeJM7j8kPSgZf+gbD1cV1GaLyYO8RWvAg25cO3zUo3d2KizO0w9hAezNwz7tTbuWKpPdvLWzKqQ==
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"