From 131f499c25828b0c52401ca7556c14b78f23bbbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 27 Feb 2021 08:04:20 +0100 Subject: [PATCH 001/272] Add Confirm Public Encrypted Room dialog MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../tabs/room/SecurityRoomSettingsTab.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js index f72e78fa3f..b1be77064a 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js @@ -147,7 +147,7 @@ export default class SecurityRoomSettingsTab extends React.Component { }); }; - _onRoomAccessRadioToggle = (roomAccess) => { + _setRoomAccess = (roomAccess) => { // join_rule // INVITE | PUBLIC // ----------------------+---------------- @@ -191,6 +191,29 @@ export default class SecurityRoomSettingsTab extends React.Component { console.error(e); this.setState({guestAccess: beforeGuestAccess}); }); + } + + _onRoomAccessRadioToggle = async (roomAccess) => { + if ( + this.state.encrypted && + this.state.joinRule != "public" && + roomAccess != "invite_only" + ) { + Modal.createTrackedDialog('Confirm Public Encrypted Room', '', QuestionDialog, { + title: _t('Confirm making this room public?'), + description: _t( + "Making end-to-end encrypted rooms public renders the " + + "encryption pointless, wastes processing power, and can cause " + + "performance problems. Please consider creating a separate " + + "unencrypted public room.", + ), + onFinished: (confirm) => { + if (confirm) this._setRoomAccess(roomAccess); + }, + }); + } else { + this._setRoomAccess(roomAccess); + } }; _onHistoryRadioToggle = (history) => { From 0d9bc009689ad2df73cc8a601ca70a4f7c3e2ddd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 27 Feb 2021 08:04:30 +0100 Subject: [PATCH 002/272] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5bbbdf60b5..10d0b56e7f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1337,6 +1337,8 @@ "Select the roles required to change various parts of the room": "Select the roles required to change various parts of the room", "Enable encryption?": "Enable encryption?", "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.", + "Confirm making this room public?": "Confirm making this room public?", + "Making end-to-end encrypted rooms public renders the encryption pointless, wastes processing power, and can cause performance problems. Please consider creating a separate unencrypted public room.": "Making end-to-end encrypted rooms public renders the encryption pointless, wastes processing power, and can cause performance problems. Please consider creating a separate unencrypted public room.", "Guests cannot join this room even if explicitly invited.": "Guests cannot join this room even if explicitly invited.", "Click here to fix": "Click here to fix", "To link to this room, please add an address.": "To link to this room, please add an address.", From 5d6bc9a88663463587768c49495e8c03e8f77a30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 28 Feb 2021 08:29:31 +0100 Subject: [PATCH 003/272] Add second Confirm Public Encrypted Room dialog MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../tabs/room/SecurityRoomSettingsTab.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js index b1be77064a..e3c23c890c 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js @@ -91,7 +91,24 @@ export default class SecurityRoomSettingsTab extends React.Component { if (refreshWhenTypes.includes(e.getType())) this.forceUpdate(); }; - _onEncryptionChange = (e) => { + _onEncryptionChange = async (e) => { + if (this.state.joinRule == "public") { + const {finished} = Modal.createTrackedDialog('Confirm Public Encrypted Room', '', QuestionDialog, { + title: _t('Enable encryption in a public room?'), + description: _t( + "Note that enabling encryption in public rooms renders the " + + "encryption pointless, wastes processing power, and can cause " + + "performance problems. Please consider creating a separate " + + "encrypted room.", + ), + }); + const [confirm] = await finished; + if (!confirm) { + this.setState({encrypted: false}); + return; + } + } + Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, { title: _t('Enable encryption?'), description: _t( From 5a55b0dcf03e1a86a1a5eb3a33a9664b186d75bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 28 Feb 2021 08:29:37 +0100 Subject: [PATCH 004/272] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 10d0b56e7f..42ad88c01e 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1335,6 +1335,8 @@ "Roles & Permissions": "Roles & Permissions", "Permissions": "Permissions", "Select the roles required to change various parts of the room": "Select the roles required to change various parts of the room", + "Enable encryption in a public room?": "Enable encryption in a public room?", + "Note that enabling encryption in public rooms renders the encryption pointless, wastes processing power, and can cause performance problems. Please consider creating a separate encrypted room.": "Note that enabling encryption in public rooms renders the encryption pointless, wastes processing power, and can cause performance problems. Please consider creating a separate encrypted room.", "Enable encryption?": "Enable encryption?", "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.", "Confirm making this room public?": "Confirm making this room public?", From 24428783f53dfe88b79477374cc8f34e88fc98c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 28 Feb 2021 09:54:05 +0100 Subject: [PATCH 005/272] Remove unnecessary async MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/settings/tabs/room/SecurityRoomSettingsTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js index e3c23c890c..ccc5470265 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js @@ -210,7 +210,7 @@ export default class SecurityRoomSettingsTab extends React.Component { }); } - _onRoomAccessRadioToggle = async (roomAccess) => { + _onRoomAccessRadioToggle = (roomAccess) => { if ( this.state.encrypted && this.state.joinRule != "public" && From 02c13788236b13dbcbcfe490e497a784c766996d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 22 May 2021 17:19:07 +0200 Subject: [PATCH 006/272] Fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/settings/tabs/room/SecurityRoomSettingsTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index b165cec8cd..73cf70b91a 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -121,7 +121,7 @@ export default class SecurityRoomSettingsTab extends React.Component { + private onEncryptionChange = async (e: React.ChangeEvent) => { if (this.state.joinRule == "public") { const {finished} = Modal.createTrackedDialog('Confirm Public Encrypted Room', '', QuestionDialog, { title: _t('Enable encryption in a public room?'), @@ -239,7 +239,7 @@ export default class SecurityRoomSettingsTab extends React.Component { + private onRoomAccessRadioToggle = (roomAccess) => { if ( this.state.encrypted && this.state.joinRule != "public" && From 27ee7c583656ec3e12cf4330d56647d86e6a3914 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 24 Jun 2021 17:51:11 +0100 Subject: [PATCH 007/272] Move backdrop filter to a canvas based solution --- res/css/structures/_LeftPanel.scss | 1 - res/css/structures/_MatrixChat.scss | 10 +++++ res/css/structures/_SpacePanel.scss | 1 + res/themes/light/css/_mods.scss | 21 --------- src/components/structures/BackdropPanel.tsx | 50 +++++++++++++++++++++ src/components/structures/LeftPanel.tsx | 34 +++++--------- src/components/structures/LoggedInView.tsx | 19 +++++++- src/components/views/spaces/SpacePanel.tsx | 25 ++++++++++- src/stores/OwnProfileStore.ts | 17 +++++++ 9 files changed, 129 insertions(+), 49 deletions(-) create mode 100644 src/components/structures/BackdropPanel.tsx diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index c7dd678c07..d9db8b4fed 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -43,7 +43,6 @@ $roomListCollapsedWidth: 68px; // 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 { - background-color: $roomlist-bg-color; flex: 1 0 0; min-width: 0; // Create another flexbox (this time a column) for the room list components diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index a220c5d505..2e5ffbcd82 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -35,6 +35,16 @@ limitations under the License. height: 100%; } +.mx_BackdropPanel { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-height: 100%; + z-index: 0; + opacity: .15; +} + .mx_MatrixToolbar { order: 1; diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index e64057d16c..21c1bed18f 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -27,6 +27,7 @@ $activeBorderColor: $secondary-fg-color; background-color: $groupFilterPanel-bg-color; padding: 0; margin: 0; + position: relative; // Create another flexbox so the Panel fills the container display: flex; diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss index fbca58dfb1..15f6d4b0fe 100644 --- a/res/themes/light/css/_mods.scss +++ b/res/themes/light/css/_mods.scss @@ -4,27 +4,6 @@ // set the user avatar (if any) as a background so // it can be blurred by the tag panel and room list -@supports (backdrop-filter: none) { - .mx_LeftPanel { - background-image: var(--avatar-url, unset); - background-repeat: no-repeat; - background-size: cover; - background-position: left top; - } - - .mx_GroupFilterPanel { - backdrop-filter: blur($groupFilterPanel-background-blur-amount); - } - - .mx_SpacePanel { - backdrop-filter: blur($groupFilterPanel-background-blur-amount); - } - - .mx_LeftPanel .mx_LeftPanel_roomListContainer { - backdrop-filter: blur($roomlist-background-blur-amount); - } -} - .mx_RoomSublist_showNButton { background-color: transparent !important; } diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx new file mode 100644 index 0000000000..daaae418c4 --- /dev/null +++ b/src/components/structures/BackdropPanel.tsx @@ -0,0 +1,50 @@ +import React, { createRef } from "react"; + +interface IProps { + width?: number; + height?: number; + backgroundImage?: ImageBitmap; + blur?: string; +} + + +export default class BackdropPanel extends React.PureComponent { + private canvasRef: React.RefObject = createRef(); + private ctx: CanvasRenderingContext2D; + + static defaultProps = { + blur: "60px", + } + + public componentDidMount() { + this.ctx = this.canvasRef.current.getContext("2d"); + } + + public componentDidUpdate() { + if (this.props.backgroundImage) { + requestAnimationFrame(this.refreshBackdropImage); + } + } + + private refreshBackdropImage = (): void => { + const { width, height, backgroundImage } = this.props; + this.canvasRef.current.width = width; + this.canvasRef.current.height = height; + + const destinationX = width - backgroundImage.width; + const destinationY = height - backgroundImage.height; + + this.ctx.filter = `blur(${this.props.blur})`; + this.ctx.drawImage( + backgroundImage, + Math.min(destinationX, 0), + Math.min(destinationY, 0), + Math.max(width, backgroundImage.width), + Math.max(height, backgroundImage.height), + ); + } + + public render() { + return ; + } +} diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index af22db1350..f71817480e 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -36,18 +36,18 @@ 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"; -import { OwnProfileStore } from "../../stores/OwnProfileStore"; import RoomListNumResults from "../views/rooms/RoomListNumResults"; import LeftPanelWidget from "./LeftPanelWidget"; import {replaceableComponent} from "../../utils/replaceableComponent"; -import {mediaFromMxc} from "../../customisations/Media"; import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore"; import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager"; import UIStore from "../../stores/UIStore"; +import BackdropPanel from "./BackdropPanel"; interface IProps { isMinimized: boolean; resizeNotifier: ResizeNotifier; + backgroundImage?: ImageBitmap; } interface IState { @@ -85,16 +85,14 @@ export default class LeftPanel extends React.Component { BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); - OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate); SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace); - this.bgImageWatcherRef = SettingsStore.watchSetting( - "RoomList.backgroundImage", null, this.onBackgroundImageUpdate); 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); UIStore.instance.on("ListContainer", this.refreshStickyHeaders); // Using the passive option to not block the main thread @@ -104,10 +102,8 @@ export default class LeftPanel extends React.Component { public componentWillUnmount() { SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef); - SettingsStore.unwatchSetting(this.bgImageWatcherRef); BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); - OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate); SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace); UIStore.instance.stopTrackingElementDimensions("ListContainer"); UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders); @@ -144,23 +140,6 @@ export default class LeftPanel extends React.Component { } }; - private onBackgroundImageUpdate = () => { - // Note: we do this in the LeftPanel as it uses this variable most prominently. - const avatarSize = 32; // arbitrary - let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); - const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage"); - if (settingBgMxc) { - avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize); - } - - const avatarUrlProp = `url(${avatarUrl})`; - if (!avatarUrl) { - document.body.style.removeProperty("--avatar-url"); - } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) { - document.body.style.setProperty("--avatar-url", avatarUrlProp); - } - }; - private handleStickyHeaders(list: HTMLDivElement) { if (this.isDoingStickyHeaders) return; this.isDoingStickyHeaders = true; @@ -453,8 +432,15 @@ export default class LeftPanel extends React.Component { "mx_AutoHideScrollbar", ); + const panelDimensions = UIStore.instance.getElementDimensions("LeftPanel"); + return (
+ {leftLeftPanel}