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 c7ada2b0a5..6c41ed7a09 100644 --- a/res/css/structures/_BackdropPanel.scss +++ b/res/css/structures/_BackdropPanel.scss @@ -21,19 +21,10 @@ limitations under the License. height: 100vh; width: 100%; overflow: hidden; - - &::before { - content: " "; - position: absolute; - left: 0; - top: 0; - height: 100vh; - width: 100%; - background-color: var(--lp-background-overlay); - } + filter: blur(var(--lp-background-blur)); } -.mx_BackdropPanel--canvas { +.mx_BackdropPanel--image { position: absolute; top: 0; left: 0; @@ -41,11 +32,4 @@ limitations under the License. z-index: 0; 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 c62230edfc..2961eebda2 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -14,13 +14,23 @@ 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 { + flex-grow: 0; + flex-shrink: 0; + width: $groupFilterPanelWidth; + height: 100%; + + // Create another flexbox so the GroupFilterPanel fills the container + display: flex; + flex-direction: column; + + // GroupFilterPanel handles its own CSS } .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 29077811d6..22cc4f33e9 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations $roomListCollapsedWidth: 68px; .mx_MatrixChat--with-avatar { @@ -27,8 +26,17 @@ $roomListCollapsedWidth: 68px; .mx_LeftPanel_wrapper { display: flex; max-width: 50%; + + .mx_LeftPanel_wrapper--user { + background-color: $roomlist-bg-color; + display: flex; + overflow: hidden; + position: relative; + } } + + .mx_LeftPanel { background-color: $roomlist-bg-color; // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel @@ -39,19 +47,6 @@ $roomListCollapsedWidth: 68px; contain: content; position: relative; - .mx_LeftPanel_GroupFilterPanelContainer { - flex-grow: 0; - flex-shrink: 0; - flex-basis: $groupFilterPanelWidth; - height: 100%; - - // Create another flexbox so the GroupFilterPanel fills the container - display: flex; - flex-direction: column; - - // GroupFilterPanel handles its own CSS - } - // Note: The 'room list' in this context is actually everything that isn't the tag // panel, such as the menu options, breadcrumbs, filtering, etc .mx_LeftPanel_roomListContainer { 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 cce7d6ab67..bdf66e28bc 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -240,9 +240,7 @@ $appearance-tab-border-color: $room-highlight-color; // blur amounts for left left panel (only for element theme) :root { - --llp-background-blur: 160px; - --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 982ca7cf08..e1a64d6d3e 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -363,9 +363,7 @@ $appearance-tab-border-color: $input-darker-bg-color; // blur amounts for left left panel (only for element theme) :root { - --llp-background-blur: 120px; - --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 5f94692fc7..08f6c33738 100644 --- a/src/components/structures/BackdropPanel.tsx +++ b/src/components/structures/BackdropPanel.tsx @@ -14,153 +14,31 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from "react"; -import "context-filter-polyfill"; - -import UIStore from "../../stores/UIStore"; +import React, { CSSProperties } from "react"; interface IProps { - backgroundImage?: CanvasImageSource; + backgroundImage?: string; + blurMultiplier?: number; } -interface IState { - // Left Panel image - lpImage?: string; - // Left-left panel image - llpImage?: string; -} +export const BackdropPanel: React.FC = ({ backgroundImage, blurMultiplier }) => { + if (!backgroundImage) return null; -export default class BackdropPanel extends React.PureComponent { - private leftLeftPanelRef = createRef(); - private leftPanelRef = createRef(); - - private sizes = { - leftLeftPanelWidth: 0, - leftPanelWidth: 0, - height: 0, - }; - private style = getComputedStyle(document.documentElement); - - public state: IState = {}; - - public componentDidMount() { - UIStore.instance.on("SpacePanel", this.onResize); - UIStore.instance.on("GroupFilterPanelContainer", this.onResize); - this.onResize(); - } - - public componentWillUnmount() { - UIStore.instance.off("SpacePanel", this.onResize); - UIStore.instance.on("GroupFilterPanelContainer", this.onResize); - } - - public componentDidUpdate(prevProps: IProps) { - if (prevProps.backgroundImage !== this.props.backgroundImage) { - this.setState({}); - 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) { - const groupFilterPanelDimensions = UIStore.instance.getElementDimensions("GroupFilterPanelContainer"); - const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel"); - const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel"); - this.sizes = { - leftLeftPanelWidth: spacePanelDimensions?.width ?? groupFilterPanelDimensions?.width ?? 0, - leftPanelWidth: roomListDimensions?.width ?? 0, - height: UIStore.instance.windowHeight, - }; - this.refreshBackdropImage(); - } - }; - - private refreshBackdropImage = (): void => { - 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; - const imageHeight = (backgroundImage as ImageBitmap).height; - - const contentRatio = imageWidth / imageHeight; - const containerRatio = width / height; - let resultHeight; - let resultWidth; - if (contentRatio > containerRatio) { - resultHeight = height; - resultWidth = height * contentRatio; - } else { - resultWidth = width; - resultHeight = width / contentRatio; - } - - // 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; - this.leftLeftPanelRef.current.height = height; - this.leftPanelRef.current.width = (window.screen.width * 0.5); - this.leftPanelRef.current.height = height; - - const spacesBlur = this.style.getPropertyValue('--llp-background-blur'); - const roomListBlur = this.style.getPropertyValue('--lp-background-blur'); - - leftLeftPanelContext.filter = `blur(${spacesBlur})`; - leftPanelContext.filter = `blur(${roomListBlur})`; - leftLeftPanelContext.drawImage( - backgroundImage, - 0, 0, - imageWidth, imageHeight, - x, - y, - resultWidth, - resultHeight, - ); - leftPanelContext.drawImage( - backgroundImage, - 0, 0, - imageWidth, imageHeight, - x - leftLeftPanelWidth, - y, - resultWidth, - resultHeight, - ); - this.setState({ - lpImage: this.leftPanelRef.current.toDataURL('image/jpeg', 1), - llpImage: this.leftLeftPanelRef.current.toDataURL('image/jpeg', 1), - - }); - }; - - public render() { - if (!this.props.backgroundImage) return null; - return
- { this.state?.llpImage !== 'data:,' && } - - { this.state?.lpImage !== 'data:,' && } - - -
; - } -} + return
+ +
; +}; +export default BackdropPanel; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 6c418e9366..d955271249 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -19,8 +19,6 @@ import { createRef } from "react"; import classNames from "classnames"; import { Room } from "matrix-js-sdk/src/models/room"; -import GroupFilterPanel from "./GroupFilterPanel"; -import CustomRoomTagPanel from "./CustomRoomTagPanel"; import dis from "../../dispatcher/dispatcher"; import { _t } from "../../languageHandler"; import RoomList from "../views/rooms/RoomList"; @@ -33,7 +31,6 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import ResizeNotifier from "../../utils/ResizeNotifier"; -import SettingsStore from "../../settings/SettingsStore"; import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore"; import IndicatorScrollbar from "../structures/IndicatorScrollbar"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; @@ -51,7 +48,6 @@ interface IProps { interface IState { showBreadcrumbs: boolean; - showGroupFilterPanel: boolean; activeSpace?: Room; } @@ -68,9 +64,6 @@ const cssClasses = [ export default class LeftPanel extends React.Component { private ref: React.RefObject = createRef(); private listContainerRef: React.RefObject = createRef(); - private groupFilterPanelWatcherRef: string; - private groupFilterPanelContainer = createRef(); - private bgImageWatcherRef: string; private focusedElement = null; private isDoingStickyHeaders = false; @@ -79,25 +72,17 @@ export default class LeftPanel extends React.Component { this.state = { showBreadcrumbs: BreadcrumbsStore.instance.visible, - showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'), activeSpace: SpaceStore.instance.activeSpace, }; BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace); - this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => { - this.setState({ showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel") }); - }); } public componentDidMount() { UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current); UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current); - if (this.groupFilterPanelContainer.current) { - const componentName = "GroupFilterPanelContainer"; - UIStore.instance.trackElementDimensions(componentName, this.groupFilterPanelContainer.current); - } UIStore.instance.on("ListContainer", this.refreshStickyHeaders); // Using the passive option to not block the main thread // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners @@ -105,7 +90,6 @@ export default class LeftPanel extends React.Component { } public componentWillUnmount() { - SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef); BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace); @@ -422,16 +406,6 @@ export default class LeftPanel extends React.Component { } public render(): React.ReactNode { - let leftLeftPanel; - if (this.state.showGroupFilterPanel) { - leftLeftPanel = ( -
- - { SettingsStore.getValue("feature_custom_tags") ? : null } -
- ); - } - const roomList = { return (
- { leftLeftPanel }