From 512ec17509211865c0f73b617e13e7f01c4ae433 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 7 Apr 2021 13:04:42 +0100 Subject: [PATCH 01/10] Prepare changelog for v3.18.0-rc.1 --- CHANGELOG.md | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c839fc2b73..03ade48ff2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,87 @@ +Changes in [3.18.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0-rc.1) (2021-04-07) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0...v3.18.0-rc.1) + + * Upgrade to JS SDK 9.11.0-rc.1 + * Translations update from Weblate + [\#5832](https://github.com/matrix-org/matrix-react-sdk/pull/5832) + * Add fake fallback thumbnail URL for encrypted videos + [\#5826](https://github.com/matrix-org/matrix-react-sdk/pull/5826) + * Fix broken "Go to Home View" shortcut on macOS + [\#5818](https://github.com/matrix-org/matrix-react-sdk/pull/5818) + * Remove status area UI defects when in-call + [\#5828](https://github.com/matrix-org/matrix-react-sdk/pull/5828) + * Fix viewing invitations when the inviter has no avatar set + [\#5829](https://github.com/matrix-org/matrix-react-sdk/pull/5829) + * Restabilize room list ordering with prefiltering on spaces/communities + [\#5825](https://github.com/matrix-org/matrix-react-sdk/pull/5825) + * Show invite reasons + [\#5694](https://github.com/matrix-org/matrix-react-sdk/pull/5694) + * Require strong password in forgot password form + [\#5744](https://github.com/matrix-org/matrix-react-sdk/pull/5744) + * Attended transfer + [\#5798](https://github.com/matrix-org/matrix-react-sdk/pull/5798) + * Make user autocomplete query search beyond prefix + [\#5822](https://github.com/matrix-org/matrix-react-sdk/pull/5822) + * Add reset option for corrupted event index store + [\#5806](https://github.com/matrix-org/matrix-react-sdk/pull/5806) + * Prevent Re-request encryption keys from appearing under redacted messages + [\#5816](https://github.com/matrix-org/matrix-react-sdk/pull/5816) + * Keybindings follow up + [\#5815](https://github.com/matrix-org/matrix-react-sdk/pull/5815) + * Increase default visible tiles for room sublists + [\#5821](https://github.com/matrix-org/matrix-react-sdk/pull/5821) + * Change copy to point to native node modules docs in element desktop + [\#5817](https://github.com/matrix-org/matrix-react-sdk/pull/5817) + * Show waveform and timer in voice messages + [\#5801](https://github.com/matrix-org/matrix-react-sdk/pull/5801) + * Label unlabeled avatar button in event panel + [\#5585](https://github.com/matrix-org/matrix-react-sdk/pull/5585) + * Fix the theme engine breaking with some web theming extensions + [\#5810](https://github.com/matrix-org/matrix-react-sdk/pull/5810) + * Add /spoiler command + [\#5696](https://github.com/matrix-org/matrix-react-sdk/pull/5696) + * Don't specify sample rates for voice messages + [\#5802](https://github.com/matrix-org/matrix-react-sdk/pull/5802) + * Tweak security key error handling + [\#5812](https://github.com/matrix-org/matrix-react-sdk/pull/5812) + * Add user settings for warn before exit + [\#5793](https://github.com/matrix-org/matrix-react-sdk/pull/5793) + * Decouple key bindings from event handling + [\#5720](https://github.com/matrix-org/matrix-react-sdk/pull/5720) + * Fixing spaces papercuts + [\#5792](https://github.com/matrix-org/matrix-react-sdk/pull/5792) + * Share keys for historical messages when inviting users to encrypted rooms + [\#5763](https://github.com/matrix-org/matrix-react-sdk/pull/5763) + * Fix upload bar not populating when starting uploads + [\#5804](https://github.com/matrix-org/matrix-react-sdk/pull/5804) + * Fix crash on login when using social login + [\#5803](https://github.com/matrix-org/matrix-react-sdk/pull/5803) + * Convert AccessSecretStorageDialog to TypeScript + [\#5805](https://github.com/matrix-org/matrix-react-sdk/pull/5805) + * Tweak cross-signing copy + [\#5807](https://github.com/matrix-org/matrix-react-sdk/pull/5807) + * Fix password change popup message + [\#5791](https://github.com/matrix-org/matrix-react-sdk/pull/5791) + * View Source: make Event ID go below Event ID + [\#5790](https://github.com/matrix-org/matrix-react-sdk/pull/5790) + * Fix line numbers when missing trailing newline + [\#5800](https://github.com/matrix-org/matrix-react-sdk/pull/5800) + * Remember reply when switching rooms + [\#5796](https://github.com/matrix-org/matrix-react-sdk/pull/5796) + * Fix edge case with redaction grouper messing up continuations + [\#5797](https://github.com/matrix-org/matrix-react-sdk/pull/5797) + * Only show the ask anyway modal for explicit user lookup failures + [\#5785](https://github.com/matrix-org/matrix-react-sdk/pull/5785) + * Improve error reporting when EventIndex fails on a supported environment + [\#5787](https://github.com/matrix-org/matrix-react-sdk/pull/5787) + * Tweak and fix some space features + [\#5789](https://github.com/matrix-org/matrix-react-sdk/pull/5789) + * Support replying with a message command + [\#5686](https://github.com/matrix-org/matrix-react-sdk/pull/5686) + * Labs feature: Early implementation of voice messages + [\#5769](https://github.com/matrix-org/matrix-react-sdk/pull/5769) + Changes in [3.17.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0) (2021-03-29) ===================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0-rc.1...v3.17.0) From f83aacbe9bd0a198e5d2fefcdeac03b1e5e57b13 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 7 Apr 2021 13:04:43 +0100 Subject: [PATCH 02/10] v3.18.0-rc.1 --- package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e3af934ce3..833dd1a3e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.17.0", + "version": "3.18.0-rc.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -27,7 +27,7 @@ "matrix-gen-i18n": "scripts/gen-i18n.js", "matrix-prune-i18n": "scripts/prune-i18n.js" }, - "main": "./src/index.js", + "main": "./lib/index.js", "matrix_src_main": "./src/index.js", "matrix_lib_main": "./lib/index.js", "matrix_lib_typings": "./lib/index.d.ts", @@ -191,5 +191,6 @@ "transformIgnorePatterns": [ "/node_modules/(?!matrix-js-sdk).+$" ] - } + }, + "typings": "./lib/index.d.ts" } From 650421eefb20c7046d35eca065b734a33cceaa9b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 12 Apr 2021 12:28:42 +0100 Subject: [PATCH 03/10] Tweak appearance of invite reason This adjusts the display of invite reasons to match design feedback. Fixes https://github.com/vector-im/element-web/issues/16869 --- res/css/_components.scss | 1 + res/css/views/elements/_InviteReason.scss | 58 +++++++++++++++++ res/css/views/rooms/_RoomPreviewBar.scss | 29 --------- res/themes/dark/css/_dark.scss | 2 - res/themes/legacy-dark/css/_legacy-dark.scss | 2 - .../legacy-light/css/_legacy-light.scss | 2 - res/themes/light/css/_light.scss | 2 - .../views/elements/EventTilePreview.tsx | 30 +-------- .../views/elements/InviteReason.tsx | 62 +++++++++++++++++++ src/components/views/rooms/RoomPreviewBar.js | 28 ++------- src/i18n/strings/en_EN.json | 2 +- 11 files changed, 127 insertions(+), 91 deletions(-) create mode 100644 res/css/views/elements/_InviteReason.scss create mode 100644 src/components/views/elements/InviteReason.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 215b6605a5..883b70ae80 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -123,6 +123,7 @@ @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InlineSpinner.scss"; +@import "./views/elements/_InviteReason.scss"; @import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_MiniAvatarUploader.scss"; @import "./views/elements/_PowerSelector.scss"; diff --git a/res/css/views/elements/_InviteReason.scss b/res/css/views/elements/_InviteReason.scss new file mode 100644 index 0000000000..544a8767e0 --- /dev/null +++ b/res/css/views/elements/_InviteReason.scss @@ -0,0 +1,58 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +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_InviteReason { + position: relative; + margin-bottom: 1em; + + .mx_InviteReason_reason { + filter: none; + transition-duration: 0.5s; + } + + .mx_InviteReason_toggle { + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + justify-content: center; + align-items: center; + cursor: pointer; + color: $secondary-fg-color; + + &::before { + content: ""; + margin-right: 8px; + background-color: $secondary-fg-color; + mask-image: url('$(res)/img/feather-customised/eye.svg'); + display: inline-block; + width: 18px; + height: 14px; + } + } +} + +.mx_InviteReason_hidden { + .mx_InviteReason_reason { + filter: blur(5px) saturate(0.1) sepia(1); + } + + .mx_InviteReason_toggle { + display: flex; + } +} diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index b340080837..0b1da7a41c 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -40,35 +40,6 @@ limitations under the License. word-break: break-word; } - .mx_RoomPreviewBar_reason { - text-align: left; - background-color: $primary-bg-color; - border: 1px solid $invite-reason-border-color; - border-radius: 10px; - padding: 0 16px 12px 16px; - margin: 5px 0 20px 0; - - div { - pointer-events: none; - } - - .mx_EventTile_msgOption { - display: none; - } - - .mx_MatrixChat_useCompactLayout & { - padding-top: 9px; - } - - &.mx_EventTilePreview_faded { - cursor: pointer; - - .mx_SenderProfile, .mx_EventTile_avatar { - opacity: 0.3; - } - } - } - .mx_Spinner { width: auto; height: auto; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index f7fda92346..cf1fd17e58 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -209,8 +209,6 @@ $message-body-panel-fg-color: $primary-fg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; -$invite-reason-border-color: $room-highlight-color; - // blur amounts for left left panel (only for element theme, used in _mods.scss) $roomlist-background-blur-amount: 60px; $groupFilterPanel-background-blur-amount: 30px; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 95c558a0e4..ff58314bdd 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -204,8 +204,6 @@ $message-body-panel-fg-color: $primary-fg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; -$invite-reason-border-color: $room-highlight-color; - $composer-shadow-color: tranparent; // ***** Mixins! ***** diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index a3f83cabe0..121366decb 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -333,8 +333,6 @@ $message-body-panel-fg-color: $muted-fg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; -$invite-reason-border-color: $input-darker-bg-color; - $composer-shadow-color: tranparent; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 3465f555b6..f082247754 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -331,8 +331,6 @@ $message-body-panel-fg-color: $muted-fg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; -$invite-reason-border-color: $input-darker-bg-color; - // blur amounts for left left panel (only for element theme, used in _mods.scss) $roomlist-background-blur-amount: 40px; $groupFilterPanel-background-blur-amount: 20px; diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 077c116873..b15fbbed2b 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -55,22 +55,10 @@ interface IProps { * The mxc:// avatar URL of the displayed user */ avatarUrl?: string; - - /** - * Whether the EventTile should appear faded - */ - faded?: boolean; - - /** - * Callback for when the component is clicked - */ - onClick?: () => void; } interface IState { message: string; - faded: boolean; - eventTileKey: number; } const AVATAR_SIZE = 32; @@ -81,23 +69,9 @@ export default class EventTilePreview extends React.Component { super(props); this.state = { message: props.message, - faded: !!props.faded, - eventTileKey: 0, }; } - changeMessage(message: string) { - this.setState({ - message, - // Change the EventTile key to force React to create a new instance - eventTileKey: this.state.eventTileKey + 1, - }); - } - - unfade() { - this.setState({ faded: false }); - } - private fakeEvent({message}: IState) { // Fake it till we make it /* eslint-disable quote-props */ @@ -147,12 +121,10 @@ export default class EventTilePreview extends React.Component { const className = classnames(this.props.className, { "mx_IRCLayout": this.props.layout == Layout.IRC, "mx_GroupLayout": this.props.layout == Layout.Group, - "mx_EventTilePreview_faded": this.state.faded, }); - return
+ return
{ + constructor(props) { + super(props); + this.state = { + // We hide the reason for invitation by default, since it can be a + // vector for spam/harassment. + hidden: true, + }; + } + + onToggleClick = () => { + this.setState({ + hidden: false, + }); + } + + render() { + const classes = classNames({ + "mx_InviteReason": true, + "mx_InviteReason_hidden": this.state.hidden, + }); + + return
+
{this.props.reason}
+
+ {_t("View message")} +
+
; + } +} diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js index f84458a32f..7f20451d6d 100644 --- a/src/components/views/rooms/RoomPreviewBar.js +++ b/src/components/views/rooms/RoomPreviewBar.js @@ -1,7 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 Vector Creations Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2015-2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -25,10 +23,10 @@ import classNames from 'classnames'; import { _t } from '../../../languageHandler'; import SdkConfig from "../../../SdkConfig"; import IdentityAuthClient from '../../../IdentityAuthClient'; -import SettingsStore from "../../../settings/SettingsStore"; import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; import {UPDATE_EVENT} from "../../../stores/AsyncStore"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import InviteReason from "../elements/InviteReason"; const MessageCase = Object.freeze({ NotLoggedIn: "NotLoggedIn", @@ -303,7 +301,6 @@ export default class RoomPreviewBar extends React.Component { const brand = SdkConfig.get().brand; const Spinner = sdk.getComponent('elements.Spinner'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - const EventTilePreview = sdk.getComponent('elements.EventTilePreview'); let showSpinner = false; let title; @@ -497,24 +494,7 @@ export default class RoomPreviewBar extends React.Component { const myUserId = MatrixClientPeg.get().getUserId(); const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason; if (reason) { - this.reasonElement = React.createRef(); - // We hide the reason for invitation by default, since it can be a - // vector for spam/harassment. - const showReason = () => { - this.reasonElement.current.unfade(); - this.reasonElement.current.changeMessage(reason); - }; - reasonElement =