diff --git a/package.json b/package.json index e5ba601e75..e0883f5556 100644 --- a/package.json +++ b/package.json @@ -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": "/__mocks__/empty.js", "decoderWorker\\.min\\.wasm": "/__mocks__/empty.js", "waveWorker\\.min\\.js": "/__mocks__/empty.js", - "context-filter-polyfill": "/__mocks__/empty.js", "workers/(.+)\\.worker\\.ts": "/__mocks__/workerMock.js", "RecorderWorklet": "/__mocks__/empty.js" }, diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss index 0dbab0a415..7580b33610 100644 --- a/res/css/structures/_BackdropPanel.scss +++ b/res/css/structures/_BackdropPanel.scss @@ -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; - } } diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index 11afe855b8..2961eebda2 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -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; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index a172b6c26b..22cc4f33e9 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -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; diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index e271d6bb00..7356ef31f8 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -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; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 360c6ef85d..bdf66e28bc 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -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); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ab04111d62..e1a64d6d3e 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -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); diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx index ca138eac0e..08f6c33738 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -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 = ({ backgroundImage, blurMultiplier }) => { + if (!backgroundImage) return null; -export default class BackdropPanel extends React.PureComponent { - 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
- { this.state?.lpImage !== 'data:,' && } -
; - } -} + return
+ +
; +}; +export default BackdropPanel; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index de35a36dc2..0656e1d195 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -133,7 +133,7 @@ interface IState { usageLimitEventTs?: number; useCompactLayout: boolean; activeCalls: Array; - backgroundImage?: CanvasImageSource; + backgroundImage?: string; } /** @@ -219,7 +219,7 @@ class LoggedInView extends React.Component { private refreshBackgroundImage = async (): Promise => { this.setState({ - backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(), + backgroundImage: OwnProfileStore.instance.getHttpAvatarUrl(), }); }; @@ -648,20 +648,30 @@ class LoggedInView extends React.Component {
- { SettingsStore.getValue('TagPanel.enableTagPanel') && (
+ { SettingsStore.getValue("feature_custom_tags") ? : null }
) } - { SpaceStore.spacesEnabled ? : null } + { SpaceStore.spacesEnabled ? <> + + + : null } +
-
+ className="mx_LeftPanel_wrapper--user" + > { await this.updateState({ displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url }); }; - public async getAvatarBitmap(avatarSize = 32): Promise { - 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) { diff --git a/yarn.lock b/yarn.lock index 03e0ba49bd..256fee5277 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"