From 650421eefb20c7046d35eca065b734a33cceaa9b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 12 Apr 2021 12:28:42 +0100 Subject: [PATCH] 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 =