From 56456b84e890e19d9a883e007a94d2f36fd0654f Mon Sep 17 00:00:00 2001 From: menturion Date: Wed, 16 Dec 2020 18:16:15 +0100 Subject: [PATCH 01/45] Call "MatrixClientPeg.get()" only once in method "findOverrideMuteRule" --- src/RoomNotifs.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/RoomNotifs.js b/src/RoomNotifs.js index a86c521ac4..600655f635 100644 --- a/src/RoomNotifs.js +++ b/src/RoomNotifs.js @@ -202,12 +202,13 @@ function setRoomNotifsStateUnmuted(roomId, newState) { } function findOverrideMuteRule(roomId) { - if (!MatrixClientPeg.get().pushRules || - !MatrixClientPeg.get().pushRules['global'] || - !MatrixClientPeg.get().pushRules['global'].override) { + const cli = MatrixClientPeg.get(); + if (!cli.pushRules || + !cli.pushRules['global'] || + !cli.pushRules['global'].override) { return null; } - for (const rule of MatrixClientPeg.get().pushRules['global'].override) { + for (const rule of cli.pushRules['global'].override) { if (isRuleForRoom(roomId, rule)) { if (isMuteRule(rule) && rule.enabled) { return rule; From eae3c1c49660ea75c19157109e6e3e61722cebe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 08:32:51 +0100 Subject: [PATCH 02/45] Get screen-sharing working, somehow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../_DesktopCapturerSourcePicker.scss | 73 ++++++++++++ src/CallHandler.tsx | 25 +++- .../elements/DesktopCapturerSourcePicker.tsx | 109 ++++++++++++++++++ 3 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_DesktopCapturerSourcePicker.scss create mode 100644 src/components/views/elements/DesktopCapturerSourcePicker.tsx diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss new file mode 100644 index 0000000000..c23fbdf6ac --- /dev/null +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -0,0 +1,73 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_streamSelectorDialog { + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin: 0 auto; + padding-right: 80px; +} +.desktop-capturer-selection-scroller { + width: 100%; + max-height: 100vh; + overflow-y: auto; +} +.desktop-capturer-selection-list { + max-width: calc(100% - 100px); + margin: 0 50px 0 50px; + padding: 0; + display: flex; + flex-wrap: wrap; + list-style: none; + overflow: hidden; + justify-content: center; +} +.desktop-capturer-selection-item { + display: flex; + margin: 4px; +} +.desktop-capturer-selection-button { + display: flex; + flex-direction: column; + align-items: stretch; + width: 145px; + margin: 0; + border: 0; + border-radius: 4px; + padding: 4px; + background: #20262b; + color: #ffffff; + text-align: left; + transition: background-color .15s, box-shadow .15s; +} +.desktop-capturer-selection-button:hover, +.desktop-capturer-selection-button:focus { + background: #363c43; +} +.desktop-capturer-selection-thumbnail { + width: 100%; + height: 81px; + object-fit: cover; +} +.desktop-capturer-selection-name { + margin: 6px 0 6px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 504dae5c84..83af34c165 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -82,6 +82,13 @@ import CountlyAnalytics from "./CountlyAnalytics"; import {UIFeature} from "./settings/UIFeature"; import { CallError } from "matrix-js-sdk/src/webrtc/call"; import { logger } from 'matrix-js-sdk/src/logger'; +import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker" + +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; +} enum AudioID { Ring = 'ringAudio', @@ -474,7 +481,23 @@ export default class CallHandler { }); return; } - call.placeScreenSharingCall(remoteElement, localElement); + + const selectDesktopCapturerSource = async ( + sources: Array, + ): Promise => { + console.log(DesktopCapturerSourcePicker); + const params = { + sources: sources, + }; + + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, params); + + const [source] = await finished; + console.log("Dialog closed with", source); + return source; + }; + + call.placeScreenSharingCall(remoteElement, localElement, selectDesktopCapturerSource); } else { console.error("Unknown conf call type: %s", type); } diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx new file mode 100644 index 0000000000..a1d57884e1 --- /dev/null +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -0,0 +1,109 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import { _td } from '../../../languageHandler'; +import BaseDialog from "..//dialogs/BaseDialog" + +export interface DesktopCapturerSourceIProps { + source: ElectronDesktopCapturerSource, + onSelect(source: ElectronDesktopCapturerSource): void, +} + +export class DesktopCapturerSource extends React.Component { + constructor(props) { + super(props); + } + + onClick = (ev) => { + //ev.stopPropagation(); + this.props.onSelect(this.props.source); + } + + render() { + return ( + + ); + } +} + +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; + thumbnail, + appIcon, +} + + +export interface DesktopCapturerSourcePickerIProps { + sources: Array; + onFinished(source: ElectronDesktopCapturerSource): void, +} + +// TODO: Figure out a way to update sources for live preview + +export default class DesktopCapturerSourcePicker extends React.Component { + constructor(props) { + super(props); + } + + onSelect = (source) => { + this.props.onFinished(source); + } + + render() { + const screens = this.props.sources + .filter((source) => { + return source.id.startsWith("screen"); + }) + .map((source) => { + return ; + }); + + const windows = this.props.sources + .filter((source) => { + return source.id.startsWith("window"); + }) + .map((source) => { + return ; + }); + + return ( + +

{_td("Screens")}

+
+ { screens } +
+

{_td("Windows")}

+
+ { windows } +
+ + ); + } +} From 1dc1bc68dbab8e0cd193167a99ee9de7b149fdcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 08:40:58 +0100 Subject: [PATCH 03/45] Clean up MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 83af34c165..3958420329 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -482,22 +482,14 @@ export default class CallHandler { return; } - const selectDesktopCapturerSource = async ( - sources: Array, - ): Promise => { - console.log(DesktopCapturerSourcePicker); - const params = { - sources: sources, - }; - - const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, params); - - const [source] = await finished; - console.log("Dialog closed with", source); - return source; - }; - - call.placeScreenSharingCall(remoteElement, localElement, selectDesktopCapturerSource); + call.placeScreenSharingCall( + remoteElement, + localElement, + async (sources: Array) : Promise => { + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); + const [source] = await finished; + return source; + }); } else { console.error("Unknown conf call type: %s", type); } From 675ca58eef8e2032bf0937655de1cd760f9f7fed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 16:56:25 +0100 Subject: [PATCH 04/45] Improve UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + .../_DesktopCapturerSourcePicker.scss | 73 ++++++----- .../elements/DesktopCapturerSourcePicker.tsx | 118 ++++++++++++------ 3 files changed, 123 insertions(+), 69 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index d8bc238db5..d2000b0e23 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -106,6 +106,7 @@ @import "./views/elements/_AddressTile.scss"; @import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DirectorySearchBox.scss"; +@import "./views/elements/_DesktopCapturerSourcePicker.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_ErrorBoundary.scss"; diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index c23fbdf6ac..9f2c23eb48 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -21,53 +21,60 @@ limitations under the License. white-space: nowrap; overflow: hidden; margin: 0 auto; - padding-right: 80px; } -.desktop-capturer-selection-scroller { + +.mx_streamSelectorDialog_tabLabels { + display: flex; + padding: 0 0 8px 0; +} + +.mx_streamSelectorDialog_tabLabel, +.mx_streamSelectorDialog_tabLabel_selected +{ width: 100%; - max-height: 100vh; - overflow-y: auto; + text-align: center; + border-radius: 8px; + padding: 8px 0; + border-radius: 8px; + font-size: $font-13px; + position: relative; } -.desktop-capturer-selection-list { - max-width: calc(100% - 100px); - margin: 0 50px 0 50px; - padding: 0; + +.mx_streamSelectorDialog_tabLabel_selected { + background-color: $tab-label-active-bg-color; + color: $tab-label-active-fg-color; +} + +.mx_streamSelectorDialog_panel { display: flex; flex-wrap: wrap; - list-style: none; - overflow: hidden; justify-content: center; + align-items: flex-start; + height: 500px; + overflow: overlay; } -.desktop-capturer-selection-item { - display: flex; - margin: 4px; -} -.desktop-capturer-selection-button { + +.mx_streamSelectorDialog_stream_button { display: flex; flex-direction: column; - align-items: stretch; - width: 145px; - margin: 0; - border: 0; + margin: 8px; border-radius: 4px; - padding: 4px; - background: #20262b; - color: #ffffff; - text-align: left; - transition: background-color .15s, box-shadow .15s; } -.desktop-capturer-selection-button:hover, -.desktop-capturer-selection-button:focus { - background: #363c43; + +.mx_streamSelectorDialog_stream_button:hover, +.mx_streamSelectorDialog_stream_button:focus { + background: $roomtile-selected-bg-color; } -.desktop-capturer-selection-thumbnail { - width: 100%; - height: 81px; - object-fit: cover; + +.mx_streamSelectorDialog_stream_thumbnail { + margin: 4px; + width: 312px; } -.desktop-capturer-selection-name { - margin: 6px 0 6px; + +.mx_streamSelectorDialog_stream_name { + margin: 0 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + width: 312px; } diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index a1d57884e1..399aec1e2c 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -18,7 +18,19 @@ limitations under the License. import React from 'react'; import { _td } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" +import AccessibleButton from './AccessibleButton'; +export enum Tabs { + Screens = "screens", + Windows = "windows", +} +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; + thumbnail, + appIcon, +} export interface DesktopCapturerSourceIProps { source: ElectronDesktopCapturerSource, onSelect(source: ElectronDesktopCapturerSource): void, @@ -36,30 +48,25 @@ export class DesktopCapturerSource extends React.Component - {this.props.source.name} - + {this.props.source.name} + ); } } -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; - thumbnail, - appIcon, + +export interface DesktopCapturerSourcePickerIState { + selectedTab: Tabs; } - - export interface DesktopCapturerSourcePickerIProps { sources: Array; onFinished(source: ElectronDesktopCapturerSource): void, @@ -67,41 +74,80 @@ export interface DesktopCapturerSourcePickerIProps { // TODO: Figure out a way to update sources for live preview -export default class DesktopCapturerSourcePicker extends React.Component { +export default class DesktopCapturerSourcePicker extends React.Component< + DesktopCapturerSourcePickerIProps, + DesktopCapturerSourcePickerIState + > { constructor(props) { super(props); + + this.state = { + selectedTab: Tabs.Screens, + } } onSelect = (source) => { this.props.onFinished(source); } - render() { - const screens = this.props.sources - .filter((source) => { - return source.id.startsWith("screen"); - }) - .map((source) => { - return ; - }); + onScreensClick = (ev) => { + this.setState({selectedTab: Tabs.Screens}); + } - const windows = this.props.sources - .filter((source) => { - return source.id.startsWith("window"); - }) - .map((source) => { - return ; - }); + onWindowsClick = (ev) => { + this.setState({selectedTab: Tabs.Windows}); + } + + onCloseClick = (ev) => { + this.props.onFinished(null); + } + + render() { + let sources; + if (this.state.selectedTab === Tabs.Screens) { + sources = this.props.sources + .filter((source) => { + return source.id.startsWith("screen"); + }) + .map((source) => { + return ; + }); + } else { + sources = this.props.sources + .filter((source) => { + return source.id.startsWith("window"); + }) + .map((source) => { + return ; + }); + } + const buttonStyle = "mx_streamSelectorDialog_tabLabel"; + const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); + const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); + console.log(screensButtonStyle, windowsButtonStyle); return ( - -

{_td("Screens")}

-
- { screens } + +
+ + {_td("Screens")} + + + {_td("Windows")} +
-

{_td("Windows")}

-
- { windows } +
+ { sources }
); From 322afe6450b136dfc6a77d55e9f6c077ae4db499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:00:08 +0100 Subject: [PATCH 05/45] Remove log MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 399aec1e2c..b9e5037dee 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -124,7 +124,6 @@ export default class DesktopCapturerSourcePicker extends React.Component< const buttonStyle = "mx_streamSelectorDialog_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); - console.log(screensButtonStyle, windowsButtonStyle); return ( Date: Sat, 26 Dec 2020 18:10:50 +0100 Subject: [PATCH 06/45] Type cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/@types/global.d.ts | 9 ++++++++ src/CallHandler.tsx | 8 +------ .../elements/DesktopCapturerSourcePicker.tsx | 23 +++++++------------ 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 741798761f..72b9ee56fb 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -66,6 +66,15 @@ declare global { mxModalWidgetStore: ModalWidgetStore; } + export interface DesktopCapturerSource { + id: string; + name: string; + thumbnail; + // This property is not camelcase and isn't used, therefore it is commented + //display_id: string; + appIcon; + } + interface Document { // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess hasStorageAccess?: () => Promise; diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 3958420329..a8f121dfb9 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -84,12 +84,6 @@ import { CallError } from "matrix-js-sdk/src/webrtc/call"; import { logger } from 'matrix-js-sdk/src/logger'; import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker" -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; -} - enum AudioID { Ring = 'ringAudio', Ringback = 'ringbackAudio', @@ -485,7 +479,7 @@ export default class CallHandler { call.placeScreenSharingCall( remoteElement, localElement, - async (sources: Array) : Promise => { + async (sources: Array) : Promise => { const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); const [source] = await finished; return source; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b9e5037dee..a134df6d68 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -24,19 +24,13 @@ export enum Tabs { Screens = "screens", Windows = "windows", } -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; - thumbnail, - appIcon, -} + export interface DesktopCapturerSourceIProps { - source: ElectronDesktopCapturerSource, - onSelect(source: ElectronDesktopCapturerSource): void, + source: DesktopCapturerSource, + onSelect(source: DesktopCapturerSource): void, } -export class DesktopCapturerSource extends React.Component { +export class ExistingSource extends React.Component { constructor(props) { super(props); } @@ -63,13 +57,12 @@ export class DesktopCapturerSource extends React.Component; - onFinished(source: ElectronDesktopCapturerSource): void, + sources: Array; + onFinished(source: DesktopCapturerSource): void, } // TODO: Figure out a way to update sources for live preview @@ -110,7 +103,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return source.id.startsWith("screen"); }) .map((source) => { - return ; + return ; }); } else { sources = this.props.sources @@ -118,7 +111,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return source.id.startsWith("window"); }) .map((source) => { - return ; + return ; }); } const buttonStyle = "mx_streamSelectorDialog_tabLabel"; From b24464269f4e054258bdbbe96dcd335bcb24caff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:28:53 +0100 Subject: [PATCH 07/45] 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 | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 507f3e071f..51757a89c1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1831,6 +1831,9 @@ "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages", "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files", "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages", + "Share your screen": "Share your screen", + "Screens": "Screens", + "Windows": "Windows", "Join": "Join", "No results": "No results", "Please create a new issue on GitHub so that we can investigate this bug.": "Please create a new issue on GitHub so that we can investigate this bug.", From eff26600e8e3bbe68f2f738fcb09b99f6d0c7805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:33:23 +0100 Subject: [PATCH 08/45] Linting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 9f2c23eb48..8a257b697c 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -29,13 +29,11 @@ limitations under the License. } .mx_streamSelectorDialog_tabLabel, -.mx_streamSelectorDialog_tabLabel_selected -{ +.mx_streamSelectorDialog_tabLabel_selected { width: 100%; text-align: center; border-radius: 8px; padding: 8px 0; - border-radius: 8px; font-size: $font-13px; position: relative; } From 14a3b884972768da3280fc2e7a4b7a64bf295f92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 28 Dec 2020 08:15:54 +0100 Subject: [PATCH 09/45] Consistent formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/elements/DesktopCapturerSourcePicker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index a134df6d68..3d9068727e 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -26,8 +26,8 @@ export enum Tabs { } export interface DesktopCapturerSourceIProps { - source: DesktopCapturerSource, - onSelect(source: DesktopCapturerSource): void, + source: DesktopCapturerSource; + onSelect(source: DesktopCapturerSource): void; } export class ExistingSource extends React.Component { @@ -62,7 +62,7 @@ export interface DesktopCapturerSourcePickerIState { } export interface DesktopCapturerSourcePickerIProps { sources: Array; - onFinished(source: DesktopCapturerSource): void, + onFinished(source: DesktopCapturerSource): void; } // TODO: Figure out a way to update sources for live preview From 95d93d143ed27e58a3af28bdab650bf8f3df5b6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 28 Dec 2020 08:38:29 +0100 Subject: [PATCH 10/45] Clean up the SCSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 8a257b697c..4cb984e83c 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -16,11 +16,7 @@ limitations under the License. */ .mx_streamSelectorDialog { - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; overflow: hidden; - margin: 0 auto; } .mx_streamSelectorDialog_tabLabels { @@ -35,7 +31,6 @@ limitations under the License. border-radius: 8px; padding: 8px 0; font-size: $font-13px; - position: relative; } .mx_streamSelectorDialog_tabLabel_selected { From b8334bfd4a45543c051a749aedbfca5ea18ceae9 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Sat, 2 Jan 2021 15:31:49 -0600 Subject: [PATCH 11/45] Add option to hide the stickers button in the composer Signed-off-by: Aaron Raimist --- src/components/views/rooms/MessageComposer.js | 3 ++- .../views/settings/tabs/user/PreferencesUserSettingsTab.js | 1 + src/i18n/strings/en_EN.json | 1 + src/settings/Settings.ts | 5 +++++ 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 4ddff8f4b0..2d22b591b4 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -423,7 +423,8 @@ export default class MessageComposer extends React.Component { , ); - if (SettingsStore.getValue(UIFeature.Widgets)) { + if (SettingsStore.getValue(UIFeature.Widgets) && + SettingsStore.getValue("MessageComposerInput.showStickersButton")) { controls.push(); } diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js index 4d8493401e..b03ea8763c 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js @@ -34,6 +34,7 @@ export default class PreferencesUserSettingsTab extends React.Component { 'MessageComposerInput.suggestEmoji', 'sendTypingNotifications', 'MessageComposerInput.ctrlEnterToSend', + 'MessageComposerInput.showStickersButton', ]; static TIMELINE_SETTINGS = [ diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c0939871e2..14906df935 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -783,6 +783,7 @@ "Font size": "Font size", "Use custom size": "Use custom size", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", + "Show stickers button": "Show stickers button", "Use a more compact ‘Modern’ layout": "Use a more compact ‘Modern’ layout", "Show a placeholder for removed messages": "Show a placeholder for removed messages", "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)", diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts index b239b809fe..3a187d45d8 100644 --- a/src/settings/Settings.ts +++ b/src/settings/Settings.ts @@ -240,6 +240,11 @@ export const SETTINGS: {[setting: string]: ISetting} = { default: true, invertedSettingName: 'MessageComposerInput.dontSuggestEmoji', }, + "MessageComposerInput.showStickersButton": { + supportedLevels: LEVELS_ACCOUNT_SETTINGS, + displayName: _td('Show stickers button'), + default: true, + }, // TODO: Wire up appropriately to UI (FTUE notifications) "Notifications.alwaysShowBadgeCounts": { supportedLevels: LEVELS_ROOM_OR_ACCOUNT, From efd889c09abf125dd83aadfe3597b6fc348d33cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:32:59 +0100 Subject: [PATCH 12/45] Remove commented line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 3d9068727e..46155f1cbc 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -36,7 +36,6 @@ export class ExistingSource extends React.Component } onClick = (ev) => { - //ev.stopPropagation(); this.props.onSelect(this.props.source); } From 8652c2e65366b9ffbdb6da0f9111e6bcc47b4874 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:49:09 +0100 Subject: [PATCH 13/45] Fixed class names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../_DesktopCapturerSourcePicker.scss | 22 +++++++++---------- .../elements/DesktopCapturerSourcePicker.tsx | 14 ++++++------ 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 4cb984e83c..f4ceedbd11 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -15,17 +15,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_streamSelectorDialog { +.mx_desktopCapturerSourcePicker { overflow: hidden; } -.mx_streamSelectorDialog_tabLabels { +.mx_desktopCapturerSourcePicker_tabLabels { display: flex; padding: 0 0 8px 0; } -.mx_streamSelectorDialog_tabLabel, -.mx_streamSelectorDialog_tabLabel_selected { +.mx_desktopCapturerSourcePicker_tabLabel, +.mx_desktopCapturerSourcePicker_tabLabel_selected { width: 100%; text-align: center; border-radius: 8px; @@ -33,12 +33,12 @@ limitations under the License. font-size: $font-13px; } -.mx_streamSelectorDialog_tabLabel_selected { +.mx_desktopCapturerSourcePicker_tabLabel_selected { background-color: $tab-label-active-bg-color; color: $tab-label-active-fg-color; } -.mx_streamSelectorDialog_panel { +.mx_desktopCapturerSourcePicker_panel { display: flex; flex-wrap: wrap; justify-content: center; @@ -47,24 +47,24 @@ limitations under the License. overflow: overlay; } -.mx_streamSelectorDialog_stream_button { +.mx_desktopCapturerSourcePicker_stream_button { display: flex; flex-direction: column; margin: 8px; border-radius: 4px; } -.mx_streamSelectorDialog_stream_button:hover, -.mx_streamSelectorDialog_stream_button:focus { +.mx_desktopCapturerSourcePicker_stream_button:hover, +.mx_desktopCapturerSourcePicker_stream_button:focus { background: $roomtile-selected-bg-color; } -.mx_streamSelectorDialog_stream_thumbnail { +.mx_desktopCapturerSourcePicker_stream_thumbnail { margin: 4px; width: 312px; } -.mx_streamSelectorDialog_stream_name { +.mx_desktopCapturerSourcePicker_stream_name { margin: 0 4px; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 46155f1cbc..e1586c881f 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -42,15 +42,15 @@ export class ExistingSource extends React.Component render() { return ( - {this.props.source.name} + {this.props.source.name} ); } @@ -113,17 +113,17 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } - const buttonStyle = "mx_streamSelectorDialog_tabLabel"; + const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); return ( -
+
-
+
{ sources }
From d497594a6f1981272836924e2f10301e07cf9123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:55:08 +0100 Subject: [PATCH 14/45] Remove unnecessary line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index e1586c881f..d398b8ba0d 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -43,7 +43,6 @@ export class ExistingSource extends React.Component return ( Date: Tue, 5 Jan 2021 20:27:11 +0100 Subject: [PATCH 15/45] Fixed translation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/elements/DesktopCapturerSourcePicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index d398b8ba0d..ea0573eb4a 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -16,7 +16,7 @@ limitations under the License. */ import React from 'react'; -import { _td } from '../../../languageHandler'; +import { _t } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; @@ -120,20 +120,20 @@ export default class DesktopCapturerSourcePicker extends React.Component<
- {_td("Screens")} + {_t("Screens")} - {_td("Windows")} + {_t("Windows")}
From bb7e76f69e9cf901acf041b00e12b0c2542278d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 20:36:54 +0100 Subject: [PATCH 16/45] Hopefully fixed copyrights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 5 ++--- .../views/elements/DesktopCapturerSourcePicker.tsx | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index f4ceedbd11..b5e148ee47 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -1,12 +1,11 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index ea0573eb4a..4ed27cad8c 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -1,12 +1,11 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, From b1010189be9a0e47a8d04735be3f32f0c52e32b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 20:41:33 +0100 Subject: [PATCH 17/45] Tabbed copyright link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 2 +- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index b5e148ee47..69dde5925e 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at -http://www.apache.org/licenses/LICENSE-2.0 + http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 4ed27cad8c..acb6376887 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at -http://www.apache.org/licenses/LICENSE-2.0 + http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, From 20b17202584f384d0397759481bf813dabd08457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 21:08:25 +0100 Subject: [PATCH 18/45] Added a line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index acb6376887..b6fbad62f1 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -111,6 +111,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } + const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); From 8f91b04eb34992d47ce01329acc56b16c8b09568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 14 Jan 2021 08:35:04 +0100 Subject: [PATCH 19/45] Use contextBridge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b6fbad62f1..b04b50ca99 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -46,7 +46,7 @@ export class ExistingSource extends React.Component onClick={this.onClick} > {this.props.source.name} From eca8ef3b3505f52aadb356ff5718054c725a207c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 14 Jan 2021 12:44:48 +0100 Subject: [PATCH 20/45] Update thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 4 +-- .../elements/DesktopCapturerSourcePicker.tsx | 26 ++++++++++++++----- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index e9ccd6ef20..804c6a6699 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -513,8 +513,8 @@ export default class CallHandler { call.placeScreenSharingCall( remoteElement, localElement, - async (sources: Array) : Promise => { - const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); + async () : Promise => { + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker); const [source] = await finished; return source; }); diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b04b50ca99..70c5fbaa8d 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -18,6 +18,7 @@ import React from 'react'; import { _t } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; +import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call"; export enum Tabs { Screens = "screens", @@ -56,24 +57,37 @@ export class ExistingSource extends React.Component export interface DesktopCapturerSourcePickerIState { selectedTab: Tabs; + sources: Array; } export interface DesktopCapturerSourcePickerIProps { - sources: Array; onFinished(source: DesktopCapturerSource): void; } -// TODO: Figure out a way to update sources for live preview - export default class DesktopCapturerSourcePicker extends React.Component< DesktopCapturerSourcePickerIProps, DesktopCapturerSourcePickerIState > { + interval; + constructor(props) { super(props); this.state = { selectedTab: Tabs.Screens, - } + sources: [], + }; + } + + componentDidMount() { + this.interval = setInterval(async () => { + this.setState({ + sources: await getDesktopCapturerSources(), + }); + }, 500); + } + + componentWillUnmount() { + clearInterval(this.interval); } onSelect = (source) => { @@ -95,7 +109,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< render() { let sources; if (this.state.selectedTab === Tabs.Screens) { - sources = this.props.sources + sources = this.state.sources .filter((source) => { return source.id.startsWith("screen"); }) @@ -103,7 +117,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } else { - sources = this.props.sources + sources = this.state.sources .filter((source) => { return source.id.startsWith("window"); }) From eee6a509c7dbf62929780df6c69af4ff787fe630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 30 Jan 2021 08:04:25 +0100 Subject: [PATCH 21/45] Close button should always close the panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RightPanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 41f4d83743..7927e9d0e5 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -260,7 +260,7 @@ export default class RightPanel extends React.Component { user={this.state.member} room={this.props.room} key={roomId || this.state.member.userId} - onClose={this.onCloseUserInfo} + onClose={this.onClose} phase={this.state.phase} verificationRequest={this.state.verificationRequest} verificationRequestPromise={this.state.verificationRequestPromise} @@ -276,7 +276,7 @@ export default class RightPanel extends React.Component { user={this.state.member} groupId={this.props.groupId} key={this.state.member.userId} - onClose={this.onCloseUserInfo} />; + onClose={this.onClose} />; break; case RightPanelPhases.GroupRoomInfo: From 4cf03e4c104ef6aa9d748ab3ca70dcbd455ef96e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 30 Jan 2021 08:51:26 +0100 Subject: [PATCH 22/45] Added optional refireParams MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/BaseCard.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 5927c7c3cc..09973809de 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -33,6 +33,7 @@ interface IProps { previousPhase?: RightPanelPhases; closeLabel?: string; onClose?(): void; + refireParams?; } interface IGroupProps { @@ -56,6 +57,7 @@ const BaseCard: React.FC = ({ withoutScrollContainer, previousPhase, children, + refireParams, }) => { let backButton; if (previousPhase) { @@ -63,6 +65,7 @@ const BaseCard: React.FC = ({ defaultDispatcher.dispatch({ action: Action.SetRightPanelPhase, phase: previousPhase, + refireParams: refireParams, }); }; backButton = ; From 1360f551ceff501adff9c8aebcea560b107d8548 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 30 Jan 2021 08:54:08 +0100 Subject: [PATCH 23/45] Back button should send you to member info MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/UserInfo.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index cdb4c43b09..70c22859e2 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1560,9 +1560,13 @@ const UserInfo: React.FC = ({ break; } + let refireParams; let previousPhase: RightPanelPhases; // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time - if (room) { + if (room && phase === RightPanelPhases.EncryptionPanel) { + previousPhase = RightPanelPhases.RoomMemberInfo; + refireParams = {member: member}; + } else if (room) { previousPhase = RightPanelPhases.RoomMemberList; } @@ -1581,6 +1585,7 @@ const UserInfo: React.FC = ({ onClose={onClose} closeLabel={closeLabel} previousPhase={previousPhase} + refireParams={refireParams} > { content } ; From 73ab07421909da2f88eb9d9c68fdd13326909d42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 30 Jan 2021 09:38:10 +0100 Subject: [PATCH 24/45] Properly handle closing the panel while verifying MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RightPanel.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 7927e9d0e5..4ebd16e1c1 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -186,7 +186,7 @@ export default class RightPanel extends React.Component { } } - onCloseUserInfo = () => { + onClose = () => { // XXX: There are three different ways of 'closing' this panel depending on what state // things are in... this knows far more than it should do about the state of the rest // of the app and is generally a bit silly. @@ -198,31 +198,21 @@ export default class RightPanel extends React.Component { dis.dispatch({ action: "view_home_page", }); - } else if (this.state.phase === RightPanelPhases.EncryptionPanel && + } else if ( + this.state.phase === RightPanelPhases.EncryptionPanel && this.state.verificationRequest && this.state.verificationRequest.pending ) { // When the user clicks close on the encryption panel cancel the pending request first if any this.state.verificationRequest.cancel(); } else { - // Otherwise we have got our user from RoomViewStore which means we're being shown - // within a room/group, so go back to the member panel if we were in the encryption panel, - // or the member list if we were in the member panel... phew. - const isEncryptionPhase = this.state.phase === RightPanelPhases.EncryptionPanel; - dis.dispatch({ - action: Action.ViewUser, - member: isEncryptionPhase ? this.state.member : null, + // the RightPanelStore has no way of knowing which mode room/group it is in, so we handle closing here + defaultDispatcher.dispatch({ + action: Action.ToggleRightPanel, + type: this.props.groupId ? "group" : "room", }); } }; - onClose = () => { - // the RightPanelStore has no way of knowing which mode room/group it is in, so we handle closing here - defaultDispatcher.dispatch({ - action: Action.ToggleRightPanel, - type: this.props.groupId ? "group" : "room", - }); - }; - render() { const MemberList = sdk.getComponent('rooms.MemberList'); const UserInfo = sdk.getComponent('right_panel.UserInfo'); From 8a50b7bcbb2954e2ca7da63cbdace0fcdd87e36b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 30 Jan 2021 10:08:38 +0100 Subject: [PATCH 25/45] Properly handle closing encryption panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/UserInfo.tsx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 70c22859e2..a4b5cd0fbb 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -60,6 +60,7 @@ import QuestionDialog from "../dialogs/QuestionDialog"; import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog"; import InfoDialog from "../dialogs/InfoDialog"; import { EventType } from "matrix-js-sdk/src/@types/event"; +import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; interface IDevice { deviceId: string; @@ -1534,6 +1535,24 @@ const UserInfo: React.FC = ({ const classes = ["mx_UserInfo"]; + let refireParams; + let previousPhase: RightPanelPhases; + // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time + if (room && phase === RightPanelPhases.EncryptionPanel) { + previousPhase = RightPanelPhases.RoomMemberInfo; + refireParams = {member: member}; + } else if (room) { + previousPhase = RightPanelPhases.RoomMemberList; + } + + const onEncryptionPanelClose = () => { + dis.dispatch({ + action: Action.SetRightPanelPhase, + phase: previousPhase, + refireParams: refireParams, + }); + } + let content; switch (phase) { case RightPanelPhases.RoomMemberInfo: @@ -1553,23 +1572,13 @@ const UserInfo: React.FC = ({ } member={member} - onClose={onClose} + onClose={onEncryptionPanelClose} isRoomEncrypted={isRoomEncrypted} /> ); break; } - let refireParams; - let previousPhase: RightPanelPhases; - // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time - if (room && phase === RightPanelPhases.EncryptionPanel) { - previousPhase = RightPanelPhases.RoomMemberInfo; - refireParams = {member: member}; - } else if (room) { - previousPhase = RightPanelPhases.RoomMemberList; - } - let closeLabel = undefined; if (phase === RightPanelPhases.EncryptionPanel) { const verificationRequest = (props as React.ComponentProps).verificationRequest; From 9b54aba4c06eab89b494a777c8a77e3f14edd948 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sun, 31 Jan 2021 11:11:34 +0100 Subject: [PATCH 26/45] fix timestamp width if there is a 2e2 indicator bar Signed-off-by: Michael Weimann --- res/css/_common.scss | 5 +++++ res/css/views/rooms/_EventTile.scss | 9 ++++----- res/css/views/rooms/_GroupLayout.scss | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 87336a1c03..6e9d252659 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -21,6 +21,11 @@ limitations under the License. $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic +$EventTile_e2e_state_indicator_width: 4px; + +$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ +$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); + :root { font-size: 10px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 429ac7ed4b..92b218e937 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -421,15 +421,15 @@ $left-gutter: 64px; } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 4px solid; + border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 4px solid; + border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; } .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color 4px solid; + border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; } .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, @@ -447,8 +447,7 @@ $left-gutter: 64px; .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { - left: 3px; - width: auto; + width: $MessageTimestamp_width_hover; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 50ef50110f..543e6ed685 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -34,7 +34,7 @@ $left-gutter: 64px; .mx_MessageTimestamp { position: absolute; - width: 46px; /* 8 + 30 (avatar) + 8 */ + width: $MessageTimestamp_width; } .mx_EventTile_line, .mx_EventTile_reply { From 28ff4e6955dba3eea69ef14a03a4d7647150161c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 1 Feb 2021 15:53:53 +0100 Subject: [PATCH 27/45] Move DesktopCapturerSource MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/@types/global.d.ts | 9 --------- .../views/elements/DesktopCapturerSourcePicker.tsx | 6 ++++++ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 72b9ee56fb..741798761f 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -66,15 +66,6 @@ declare global { mxModalWidgetStore: ModalWidgetStore; } - export interface DesktopCapturerSource { - id: string; - name: string; - thumbnail; - // This property is not camelcase and isn't used, therefore it is commented - //display_id: string; - appIcon; - } - interface Document { // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess hasStorageAccess?: () => Promise; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 70c5fbaa8d..384befbb01 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -20,6 +20,12 @@ import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call"; +export interface DesktopCapturerSource { + id: string; + name: string; + thumbnailURL; +} + export enum Tabs { Screens = "screens", Windows = "windows", From 022781e9bcaef4a35d1b4d242b2e57f0f71ef57a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 1 Feb 2021 16:03:20 +0100 Subject: [PATCH 28/45] Added a comment about updating thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 384befbb01..e53683b0ef 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -85,6 +85,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< } componentDidMount() { + // We update the sources every 500ms to get newer thumbnails this.interval = setInterval(async () => { this.setState({ sources: await getDesktopCapturerSources(), From eee9cf153ba4b8627538175331a7a019cdeec029 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 3 Feb 2021 08:15:59 +0100 Subject: [PATCH 29/45] Fix trash alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_RedactedBody.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss index e4ab0c0835..600ac0c6b7 100644 --- a/res/css/views/messages/_RedactedBody.scss +++ b/res/css/views/messages/_RedactedBody.scss @@ -30,7 +30,7 @@ limitations under the License. mask-size: contain; content: ''; position: absolute; - top: 2px; + top: 1px; left: 0; } } From 9a131efc1a83d90eb0c16b8e99d8dec727ffd713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 3 Feb 2021 08:16:07 +0100 Subject: [PATCH 30/45] Fix avatar alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index acf3049804..12cba5b89d 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -37,7 +37,7 @@ $left-gutter: 64px; } .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { - top: $font-8px; + top: $font-5px; left: $left-gutter; } From b8ee23cdf4797008f9f9c6fab14f40be6c7e08e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 3 Feb 2021 18:41:09 +0100 Subject: [PATCH 31/45] Make consistent for all events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 12cba5b89d..2b3ddf9361 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -26,7 +26,7 @@ $left-gutter: 64px; } .mx_EventTile.mx_EventTile_info { - padding-top: 0px; + padding-top: 1px; } .mx_EventTile_avatar { @@ -37,7 +37,7 @@ $left-gutter: 64px; } .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { - top: $font-5px; + top: $font-6px; left: $left-gutter; } From c1823e2e5ae46996b169842cbe7876e10254cc9d Mon Sep 17 00:00:00 2001 From: dangwynne <31453528+dangwynne@users.noreply.github.com> Date: Wed, 3 Feb 2021 22:31:28 +0000 Subject: [PATCH 32/45] Close current modal when session is logged out --- src/components/structures/MatrixChat.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 8ed4b6cd11..ce5467ec89 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1378,11 +1378,14 @@ export default class MatrixChat extends React.PureComponent { Lifecycle.softLogout(); return; } + + Modal.closeCurrentModal("User has been logged out."); Modal.createTrackedDialog('Signed out', '', ErrorDialog, { title: _t('Signed Out'), description: _t('For security, this session has been signed out. Please sign in again.'), }); + dis.dispatch({ action: 'logout', }); From 88aa2a6f70e87fb1e218fd24b3c5e7530e421ceb Mon Sep 17 00:00:00 2001 From: dangwynne Date: Thu, 4 Feb 2021 09:33:21 +0000 Subject: [PATCH 33/45] fix whitespace change. Signed-off-by: Dan Gwynne dangwynne1@gmail.com --- src/components/structures/MatrixChat.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index ce5467ec89..5d938317cb 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1378,14 +1378,14 @@ export default class MatrixChat extends React.PureComponent { Lifecycle.softLogout(); return; } - + Modal.closeCurrentModal("User has been logged out."); Modal.createTrackedDialog('Signed out', '', ErrorDialog, { title: _t('Signed Out'), description: _t('For security, this session has been signed out. Please sign in again.'), }); - + dis.dispatch({ action: 'logout', }); From 97584af9478d469096ba3d4afb30f8768b4b2624 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 4 Feb 2021 02:50:54 -0700 Subject: [PATCH 34/45] Fix z-index of stickerpicker --- src/components/views/elements/PersistedElement.js | 6 +++++- src/components/views/rooms/Stickerpicker.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 07b01cb03f..3732f644b8 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -23,6 +23,7 @@ import ResizeObserver from 'resize-observer-polyfill'; import dis from '../../../dispatcher/dispatcher'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; +import {isNullOrUndefined} from "matrix-js-sdk/src/utils"; // Shamelessly ripped off Modal.js. There's probably a better way // of doing reusable widgets like dialog boxes & menus where we go and @@ -61,6 +62,9 @@ export default class PersistedElement extends React.Component { // Any PersistedElements with the same persistKey will use // the same DOM container. persistKey: PropTypes.string.isRequired, + + // z-index for the element. Defaults to 9. + zIndex: PropTypes.number, }; constructor() { @@ -165,7 +169,7 @@ export default class PersistedElement extends React.Component { const parentRect = parent.getBoundingClientRect(); Object.assign(child.style, { - zIndex: 9, + zIndex: isNullOrUndefined(this.props.zIndex) ? 9 : this.props.zIndex, position: 'absolute', top: parentRect.top + 'px', left: parentRect.left + 'px', diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 0b81f82721..5446d15671 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -264,7 +264,7 @@ export default class Stickerpicker extends React.Component { width: this.popoverWidth, }} > - + Date: Thu, 4 Feb 2021 02:50:54 -0700 Subject: [PATCH 35/45] Fix z-index of stickerpicker --- src/components/views/elements/PersistedElement.js | 6 +++++- src/components/views/rooms/Stickerpicker.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 07b01cb03f..3732f644b8 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -23,6 +23,7 @@ import ResizeObserver from 'resize-observer-polyfill'; import dis from '../../../dispatcher/dispatcher'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; +import {isNullOrUndefined} from "matrix-js-sdk/src/utils"; // Shamelessly ripped off Modal.js. There's probably a better way // of doing reusable widgets like dialog boxes & menus where we go and @@ -61,6 +62,9 @@ export default class PersistedElement extends React.Component { // Any PersistedElements with the same persistKey will use // the same DOM container. persistKey: PropTypes.string.isRequired, + + // z-index for the element. Defaults to 9. + zIndex: PropTypes.number, }; constructor() { @@ -165,7 +169,7 @@ export default class PersistedElement extends React.Component { const parentRect = parent.getBoundingClientRect(); Object.assign(child.style, { - zIndex: 9, + zIndex: isNullOrUndefined(this.props.zIndex) ? 9 : this.props.zIndex, position: 'absolute', top: parentRect.top + 'px', left: parentRect.left + 'px', diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 0b81f82721..5446d15671 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -264,7 +264,7 @@ export default class Stickerpicker extends React.Component { width: this.popoverWidth, }} > - + Date: Thu, 4 Feb 2021 12:04:27 +0000 Subject: [PATCH 36/45] Prepare changelog for v3.13.1 --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d1595396b..43a1494497 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +Changes in [3.13.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.1) (2021-02-04) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0...v3.13.1) + + * [Release] Fix z-index of stickerpicker + [\#5618](https://github.com/matrix-org/matrix-react-sdk/pull/5618) + Changes in [3.13.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.13.0) (2021-02-03) ===================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.13.0-rc.1...v3.13.0) From 0fe54deab15e87df2163192a3c436ca058fd70fa Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Thu, 4 Feb 2021 12:04:27 +0000 Subject: [PATCH 37/45] v3.13.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e32409fb7..65646ab711 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.13.0", + "version": "3.13.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { From fdc78396fa4044627ac19a3f31cd45212c88ce57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 4 Feb 2021 16:53:25 +0100 Subject: [PATCH 38/45] Replaced defaultDis and removed duplicate import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RightPanel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 4ebd16e1c1..d66049d3a5 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -30,7 +30,6 @@ import MatrixClientContext from "../../contexts/MatrixClientContext"; import {Action} from "../../dispatcher/actions"; import RoomSummaryCard from "../views/right_panel/RoomSummaryCard"; import WidgetCard from "../views/right_panel/WidgetCard"; -import defaultDispatcher from "../../dispatcher/dispatcher"; export default class RightPanel extends React.Component { static get propTypes() { @@ -206,7 +205,7 @@ export default class RightPanel extends React.Component { this.state.verificationRequest.cancel(); } else { // the RightPanelStore has no way of knowing which mode room/group it is in, so we handle closing here - defaultDispatcher.dispatch({ + dis.dispatch({ action: Action.ToggleRightPanel, type: this.props.groupId ? "group" : "room", }); From 12f6272ab47887f187f810378c06b51b35956abe Mon Sep 17 00:00:00 2001 From: dangwynne Date: Fri, 5 Feb 2021 09:24:12 +0000 Subject: [PATCH 39/45] implement qa feedback for closing modals when logging out --- src/components/structures/MatrixChat.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 5d938317cb..2f5500e054 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1373,14 +1373,15 @@ export default class MatrixChat extends React.PureComponent { cli.on('Session.logged_out', function(errObj) { if (Lifecycle.isLoggingOut()) return; + // A modal might have been open when we were logged out by the server + Modal.closeCurrentModal('Session.logged_out'); + if (errObj.httpStatus === 401 && errObj.data && errObj.data['soft_logout']) { console.warn("Soft logout issued by server - avoiding data deletion"); Lifecycle.softLogout(); return; } - Modal.closeCurrentModal("User has been logged out."); - Modal.createTrackedDialog('Signed out', '', ErrorDialog, { title: _t('Signed Out'), description: _t('For security, this session has been signed out. Please sign in again.'), From bffce8689a435eb876fe0f7accfa97a6a664ea81 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 5 Feb 2021 13:34:06 +0000 Subject: [PATCH 40/45] Allow saving room topic or name only This changes the room profile settings to support saving _only_ the room topic or name in case you have limited access to set one but not the other. Fixes https://github.com/vector-im/element-web/issues/16375 --- src/components/views/room_settings/RoomProfileSettings.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js index c76c0823e4..e90dab3b97 100644 --- a/src/components/views/room_settings/RoomProfileSettings.js +++ b/src/components/views/room_settings/RoomProfileSettings.js @@ -81,7 +81,11 @@ export default class RoomProfileSettings extends React.Component { if (!this.state.enableProfileSave) return; this._removeAvatar(); - this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName}); + this.setState({ + enableProfileSave: false, + displayName: this.state.originalDisplayName, + topic: this.state.originalTopic, + }); }; _saveProfile = async (e) => { @@ -164,7 +168,7 @@ export default class RoomProfileSettings extends React.Component { const AvatarSetting = sdk.getComponent('settings.AvatarSetting'); let profileSettingsButtons; - if (this.state.canSetTopic && this.state.canSetName) { + if (this.state.canSetTopic || this.state.canSetName) { profileSettingsButtons = (
Date: Fri, 5 Feb 2021 13:47:20 +0000 Subject: [PATCH 41/45] Normalise cancel behaviour for room avatar This normalises the behaviour of the "Cancel" button for the room profile so that it _always_ restores the existing value for all of room name, topic, and avatar, instead of performing a mix of restore and remove. Fixes https://github.com/vector-im/element-web/issues/16375 --- .../room_settings/RoomProfileSettings.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js index e90dab3b97..c651216e8c 100644 --- a/src/components/views/room_settings/RoomProfileSettings.js +++ b/src/components/views/room_settings/RoomProfileSettings.js @@ -69,22 +69,23 @@ export default class RoomProfileSettings extends React.Component { // clear file upload field so same file can be selected this._avatarUpload.current.value = ""; this.setState({ - avatarUrl: undefined, - avatarFile: undefined, + avatarUrl: null, + avatarFile: null, enableProfileSave: true, }); }; - _clearProfile = async (e) => { + _cancelProfileChanges = async (e) => { e.stopPropagation(); e.preventDefault(); if (!this.state.enableProfileSave) return; - this._removeAvatar(); this.setState({ enableProfileSave: false, displayName: this.state.originalDisplayName, topic: this.state.originalTopic, + avatarUrl: this.state.originalAvatarUrl, + avatarFile: null, }); }; @@ -112,7 +113,7 @@ export default class RoomProfileSettings extends React.Component { newState.originalAvatarUrl = newState.avatarUrl; newState.avatarFile = null; } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) { - await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {url: undefined}, ''); + await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {}, ''); } if (this.state.originalTopic !== this.state.topic) { @@ -168,11 +169,15 @@ export default class RoomProfileSettings extends React.Component { const AvatarSetting = sdk.getComponent('settings.AvatarSetting'); let profileSettingsButtons; - if (this.state.canSetTopic || this.state.canSetName) { + if ( + this.state.canSetName || + this.state.canSetTopic || + this.state.canSetAvatar + ) { profileSettingsButtons = (
From 81bd919a185e0c1ec7cb4e7845a405b349b81abd Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 5 Feb 2021 14:11:57 +0000 Subject: [PATCH 42/45] Port avatar restore to user profile settings --- src/components/views/settings/ProfileSettings.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js index c11a2e3a5e..4dc69884c3 100644 --- a/src/components/views/settings/ProfileSettings.js +++ b/src/components/views/settings/ProfileSettings.js @@ -52,19 +52,23 @@ export default class ProfileSettings extends React.Component { // clear file upload field so same file can be selected this._avatarUpload.current.value = ""; this.setState({ - avatarUrl: undefined, - avatarFile: undefined, + avatarUrl: null, + avatarFile: null, enableProfileSave: true, }); }; - _clearProfile = async (e) => { + _cancelProfileChanges = async (e) => { e.stopPropagation(); e.preventDefault(); if (!this.state.enableProfileSave) return; - this._removeAvatar(); - this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName}); + this.setState({ + enableProfileSave: false, + displayName: this.state.originalDisplayName, + avatarUrl: this.state.originalAvatarUrl, + avatarFile: null, + }); }; _saveProfile = async (e) => { @@ -186,7 +190,7 @@ export default class ProfileSettings extends React.Component {
From 69e81119e957a78caac2ec03d06eb5838b959158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 5 Feb 2021 15:15:20 +0100 Subject: [PATCH 43/45] Don't jump to bottom on reaction MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/MessagePanel.js | 2 +- src/components/views/rooms/SendMessageComposer.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index b8dae41ef8..371623642b 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -229,7 +229,7 @@ export default class MessagePanel extends React.Component { onAction = (payload) => { switch (payload.action) { - case "message_sent": + case "scroll_to_bottom": this.scrollToBottom(); break; } diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 7b516e1f52..62c474e417 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -403,6 +403,7 @@ export default class SendMessageComposer extends React.Component { this._editorRef.clearUndoHistory(); this._editorRef.focus(); this._clearStoredEditorState(); + dis.dispatch({action: "scroll_to_bottom"}); } componentWillUnmount() { From 1d1a3e72ca945e0de9555de6c983568afbd2d7e5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 5 Feb 2021 17:18:13 +0000 Subject: [PATCH 44/45] Improve SSO login start screen and 3pid invite handling somewhat --- src/components/structures/MatrixChat.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 8ed4b6cd11..accdd16b4e 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -755,6 +755,8 @@ export default class MatrixChat extends React.PureComponent { break; case 'on_logged_in': if ( + // Skip this handling for token login as that always calls onLoggedIn itself + !this.tokenLogin && !Lifecycle.isSoftLogout() && this.state.view !== Views.LOGIN && this.state.view !== Views.REGISTER && @@ -1652,10 +1654,16 @@ export default class MatrixChat extends React.PureComponent { // TODO: Handle encoded room/event IDs: https://github.com/vector-im/element-web/issues/9149 let threepidInvite: IThreepidInvite; + // if we landed here from a 3PID invite, persist it if (params.signurl && params.email) { threepidInvite = ThreepidInviteStore.instance .storeInvite(roomString, params as IThreepidInviteWireFormat); } + // otherwise check that this room doesn't already have a known invite + if (!threepidInvite) { + const invites = ThreepidInviteStore.instance.getInvites(); + threepidInvite = invites.find(invite => invite.roomId === roomString); + } // on our URLs there might be a ?via=matrix.org or similar to help // joins to the room succeed. We'll pass these through as an array From f0f6e4678e5a9d1d2d4a75c5545357c21d1938a6 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sun, 17 Jan 2021 17:49:00 +0100 Subject: [PATCH 45/45] switch room explorer list to css grid Signed-off-by: Michael Weimann --- res/css/structures/_RoomDirectory.scss | 24 +++---- src/components/structures/RoomDirectory.js | 82 ++++++++++++++-------- 2 files changed, 62 insertions(+), 44 deletions(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 29e6fecd34..89cb21b7a6 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -64,28 +64,23 @@ limitations under the License. } .mx_RoomDirectory_table { - font-size: $font-12px; color: $primary-fg-color; - width: 100%; + display: grid; + font-size: $font-12px; + grid-template-columns: max-content auto max-content max-content max-content; + row-gap: 24px; text-align: left; - table-layout: fixed; + width: 100%; } .mx_RoomDirectory_roomAvatar { - width: 32px; - padding-right: 14px; - vertical-align: top; -} - -.mx_RoomDirectory_roomDescription { - padding-bottom: 16px; + padding: 2px 14px 0 0; } .mx_RoomDirectory_roomMemberCount { + align-self: center; color: $light-fg-color; - width: 60px; - padding: 0 10px; - text-align: center; + padding: 3px 10px 0; &::before { background-color: $light-fg-color; @@ -105,8 +100,7 @@ limitations under the License. } .mx_RoomDirectory_join, .mx_RoomDirectory_preview { - width: 80px; - text-align: center; + align-self: center; white-space: nowrap; } diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 9ddacaf829..7387e1aac0 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -477,7 +477,7 @@ export default class RoomDirectory extends React.Component { dis.dispatch(payload); } - getRow(room) { + createRoomCells(room) { const client = MatrixClientPeg.get(); const clientRoom = client.getRoom(room.room_id); const hasJoinedRoom = clientRoom && clientRoom.getMyMembership() === "join"; @@ -523,31 +523,56 @@ export default class RoomDirectory extends React.Component { MatrixClientPeg.get().getHomeserverUrl(), room.avatar_url, 32, 32, "crop", ); - return ( - this.onRoomClicked(room, ev)} // cancel onMouseDown otherwise shift-clicking highlights text onMouseDown={(ev) => {ev.preventDefault();}} + className="mx_RoomDirectory_roomAvatar" > - - - - -
{ name }
  -
{ ev.stopPropagation(); } } - dangerouslySetInnerHTML={{ __html: topic }} /> -
{ get_display_alias_for_room(room) }
- - - { room.num_joined_members } - - {previewButton} - {joinOrViewButton} - - ); + +
, +
this.onRoomClicked(room, ev)} + // cancel onMouseDown otherwise shift-clicking highlights text + onMouseDown={(ev) => {ev.preventDefault();}} + className="mx_RoomDirectory_roomDescription" + > +
{ name }
  +
{ ev.stopPropagation(); } } + dangerouslySetInnerHTML={{ __html: topic }} + /> +
{ get_display_alias_for_room(room) }
+
, +
this.onRoomClicked(room, ev)} + // cancel onMouseDown otherwise shift-clicking highlights text + onMouseDown={(ev) => {ev.preventDefault();}} + className="mx_RoomDirectory_roomMemberCount" + > + { room.num_joined_members } +
, +
this.onRoomClicked(room, ev)} + // cancel onMouseDown otherwise shift-clicking highlights text + onMouseDown={(ev) => {ev.preventDefault();}} + className="mx_RoomDirectory_preview" + > + {previewButton} +
, +
this.onRoomClicked(room, ev)} + // cancel onMouseDown otherwise shift-clicking highlights text + onMouseDown={(ev) => {ev.preventDefault();}} + className="mx_RoomDirectory_join" + > + {joinOrViewButton} +
, + ]; } collectScrollPanel = (element) => { @@ -606,7 +631,8 @@ export default class RoomDirectory extends React.Component { } else if (this.state.protocolsLoading) { content = ; } else { - const rows = (this.state.publicRooms || []).map(room => this.getRow(room)); + const cells = (this.state.publicRooms || []) + .reduce((cells, room) => cells.concat(this.createRoomCells(room)), [],); // we still show the scrollpanel, at least for now, because // otherwise we don't fetch more because we don't get a fill // request from the scrollpanel because there isn't one @@ -617,14 +643,12 @@ export default class RoomDirectory extends React.Component { } let scrollpanel_content; - if (rows.length === 0 && !this.state.loading) { + if (cells.length === 0 && !this.state.loading) { scrollpanel_content = { _t('No rooms to show') }; } else { - scrollpanel_content = - - { rows } - -
; + scrollpanel_content =
+ { cells } +
; } const ScrollPanel = sdk.getComponent("structures.ScrollPanel"); content =