Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make the blur as-close to the css one as possible

Browse Source
This commit is contained in:
Dariusz Niemczyk 2021-08-17 17:47:40 +02:00
parent a999cad49d
commit 2ee26d0681
No known key found for this signature in database
GPG Key ID: 28DFE7164F497CB6
4 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/structures/_BackdropPanel.scss
View File

@ -29,7 +29,7 @@ limitations under the License.
top: 0;
height: 100vh;
width: 100%;
background-color: rgba(255, 255, 255, .02);
background-color: rgba(255, 255, 255, .055);
}
}
@ -42,10 +42,10 @@ limitations under the License.
pointer-events: none;
overflow: hidden;
&:first-of-type {
opacity: 0.19;
&:nth-of-type(2n-1) {
opacity: 0.2;
}
&:last-of-type {
opacity:0.12;
&:nth-of-type(2n) {
opacity:0.1;
}
}

4
res/themes/dark/css/_dark.scss
View File

@ -240,8 +240,8 @@ $appearance-tab-border-color: $room-highlight-color;
// blur amounts for left left panel (only for element theme, used in _mods.scss)
:root {
--roomlist-background-blur-amount: 60px;
--groupFilterPanel-background-blur-amount: 30px;
--llp-background-blur: 60px;
--lp-background-blur: 30px;
}
$composer-shadow-color: rgba(0, 0, 0, 0.28);

4
res/themes/light/css/_light.scss
View File

@ -363,8 +363,8 @@ $appearance-tab-border-color: $input-darker-bg-color;
// blur amounts for left left panel (only for element theme, used in _mods.scss)
:root {
--roomlist-background-blur-amount: 40px;
--groupFilterPanel-background-blur-amount: 20px;
--llp-background-blur: 40px;
--lp-background-blur: 20px;
}
$composer-shadow-color: rgba(0, 0, 0, 0.04);

31
src/components/structures/BackdropPanel.tsx
View File

@ -78,16 +78,14 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
};
private refreshBackdropImage = (): void => {
const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
const roomListCtx = this.leftPanelRef.current.getContext("2d");
const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d");
const leftPanelContext = this.leftPanelRef.current.getContext("2d");
const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
const width = leftLeftPanelWidth + leftPanelWidth;
const { backgroundImage } = this.props;
const imageWidth = (backgroundImage as ImageBitmap).width
|| (backgroundImage as HTMLImageElement).naturalWidth;
const imageHeight = (backgroundImage as ImageBitmap).height
|| (backgroundImage as HTMLImageElement).naturalHeight;
const imageWidth = (backgroundImage as ImageBitmap).width;
const imageHeight = (backgroundImage as ImageBitmap).height;
const contentRatio = imageWidth / imageHeight;
const containerRatio = width / height;
@ -101,7 +99,9 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
resultHeight = width / contentRatio;
}
const x = (width - resultWidth) / 2;
// This value has been chosen to be as close with rendering as the css-only
// backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
const x = width * 0.1;
const y = (height - resultHeight) / 2;
this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
@ -110,12 +110,12 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
this.leftPanelRef.current.height = height;
this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
spacesCtx.filter = `blur(${spacesBlur})`;
roomListCtx.filter = `blur(${roomListBlur})`;
spacesCtx.drawImage(
leftLeftPanelContext.filter = `blur(${spacesBlur})`;
leftPanelContext.filter = `blur(${roomListBlur})`;
leftLeftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
@ -124,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
resultWidth,
resultHeight,
);
roomListCtx.drawImage(
leftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
@ -146,13 +146,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
<img
className="mx_BackdropPanel--canvas"
style={{
opacity: .19,
}}
src={this.state.llpImage} />
<img
className="mx_BackdropPanel--canvas"
style={{
opacity: .12,
}}
src={this.state.lpImage} />
<canvas
@ -161,14 +159,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
className="mx_BackdropPanel--canvas"
style={{
display: this.state.lpImage ? 'none' : 'block',
opacity: .19,
}}
/>
<canvas
style={{
display: this.state.lpImage ? 'none' : 'block',
transform: `translateX(0)`,
opacity: .12,
}}
ref={this.leftPanelRef}
className="mx_BackdropPanel--canvas"