Merge pull request #5694 from robintown/show-invite-reasons

Show invite reasons
2021-04-06 10:48:54 +01:00 · 2021-04-06 10:48:54 +01:00 · 5d027ffcf4
commit 5d027ffcf4
parent 4d72af7916 2477258249
9 changed files with 146 additions and 33 deletions
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@ -40,6 +40,35 @@ 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;
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@ -209,6 +209,8 @@ $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;
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@ -204,6 +204,8 @@ $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! *****
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@ -333,6 +333,8 @@ $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! *****
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@ -331,6 +331,8 @@ $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;
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@ -19,7 +19,6 @@ import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';

 import * as Avatar from '../../../Avatar';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Layout} from "../../../settings/Layout";
@ -41,15 +40,38 @@ interface IProps {
     * classnames to apply to the wrapper of the preview
     */
    className: string;
+
+    /**
+     * The ID of the displayed user
+     */
+    userId: string;
+
+    /**
+     * The display name of the displayed user
+     */
+    displayName?: string;
+
+    /**
+     * 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;
 }

-/* eslint-disable camelcase */
 interface IState {
-    userId: string;
-    displayname: string;
-    avatar_url: string;
+    message: string;
+    faded: boolean;
+    eventTileKey: number;
 }
-/* eslint-enable camelcase */

 const AVATAR_SIZE = 32;

@ -57,45 +79,42 @@ const AVATAR_SIZE = 32;
 export default class EventTilePreview extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
-
        this.state = {
-            userId: "@erim:fink.fink",
-            displayname: "Erimayas Fink",
-            avatar_url: null,
+            message: props.message,
+            faded: !!props.faded,
+            eventTileKey: 0,
        };
    }

-    async componentDidMount() {
-        // Fetch current user data
-        const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
-        const profileInfo = await client.getProfileInfo(userId);
-        const avatarUrl = profileInfo.avatar_url;
-
+    changeMessage(message: string) {
        this.setState({
-            userId,
-            displayname: profileInfo.displayname,
-            avatar_url: avatarUrl,
+            message,
+            // Change the EventTile key to force React to create a new instance
+            eventTileKey: this.state.eventTileKey + 1,
        });
    }

-    private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
+    unfade() {
+        this.setState({ faded: false });
+    }
+
+    private fakeEvent({message}: IState) {
        // Fake it till we make it
        /* eslint-disable quote-props */
        const rawEvent = {
            type: "m.room.message",
-            sender: userId,
+            sender: this.props.userId,
            content: {
                "m.new_content": {
                    msgtype: "m.text",
-                    body: this.props.message,
-                    displayname: displayname,
-                    avatar_url: avatarUrl,
+                    body: message,
+                    displayname: this.props.displayName,
+                    avatar_url: this.props.avatarUrl,
                },
                msgtype: "m.text",
-                body: this.props.message,
-                displayname: displayname,
-                avatar_url: avatarUrl,
+                body: message,
+                displayname: this.props.displayName,
+                avatar_url: this.props.avatarUrl,
            },
            unsigned: {
                age: 97,
@ -108,12 +127,15 @@ export default class EventTilePreview extends React.Component<IProps, IState> {

        // Fake it more
        event.sender = {
-            name: displayname,
-            userId: userId,
+            name: this.props.displayName,
+            userId: this.props.userId,
            getAvatarUrl: (..._) => {
-                return Avatar.avatarUrlForUser({avatarUrl}, AVATAR_SIZE, AVATAR_SIZE, "crop");
+                return Avatar.avatarUrlForUser(
+                    { avatarUrl: this.props.avatarUrl },
+                    AVATAR_SIZE, AVATAR_SIZE, "crop",
+                );
            },
-            getMxcAvatarUrl: () => avatarUrl,
+            getMxcAvatarUrl: () => this.props.avatarUrl,
        };

        return event;
@ -125,10 +147,12 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
        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 <div className={className}>
+        return <div className={className} onClick={this.props.onClick}>
            <EventTile
+                key={this.state.eventTileKey}
                mxEvent={event}
                layout={this.props.layout}
                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@ -25,6 +25,7 @@ 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";
@ -302,10 +303,12 @@ 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;
        let subTitle;
+        let reasonElement;
        let primaryActionHandler;
        let primaryActionLabel;
        let secondaryActionHandler;
@ -491,6 +494,29 @@ export default class RoomPreviewBar extends React.Component {
                    primaryActionLabel = _t("Accept");
                }

+                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 = <EventTilePreview
+                        ref={this.reasonElement}
+                        onClick={showReason}
+                        className="mx_RoomPreviewBar_reason"
+                        message={_t("Invite messages are hidden by default. Click to show the message.")}
+                        layout={SettingsStore.getValue("layout")}
+                        userId={inviteMember.userId}
+                        displayName={inviteMember.rawDisplayName}
+                        avatarUrl={inviteMember.events.member.event.content.avatar_url}
+                        faded={true}
+                    />;
+                }
+
                primaryActionHandler = this.props.onJoinClick;
                secondaryActionLabel = _t("Reject");
                secondaryActionHandler = this.props.onRejectClick;
@ -582,6 +608,7 @@ export default class RoomPreviewBar extends React.Component {
                    { titleElement }
                    { subTitleElements }
                </div>
+                { reasonElement }
                <div className="mx_RoomPreviewBar_actions">
                    { secondaryButton }
                    { extraComponents }
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
+import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
@ -63,6 +64,10 @@ interface IState extends IThemeState {
    systemFont: string;
    showAdvanced: boolean;
    layout: Layout;
+    // User profile data for the message preview
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
 }

@replaceableComponent("views.settings.tabs.user.AppearanceUserSettingsTab")
@ -84,9 +89,25 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
            systemFont: SettingsStore.getValue("systemFont"),
            showAdvanced: false,
            layout: SettingsStore.getValue("layout"),
+            userId: "@erim:fink.fink",
+            displayName: "Erimayas Fink",
+            avatarUrl: null,
        };
    }

+    async componentDidMount() {
+        // Fetch the current user profile for the message preview
+        const client = MatrixClientPeg.get();
+        const userId = client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+
+        this.setState({
+            userId,
+            displayName: profileInfo.displayname,
+            avatarUrl: profileInfo.avatar_url,
+        });
+    }
+
    private calculateThemeState(): IThemeState {
        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
        // show the right values for things.
@ -307,6 +328,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                className="mx_AppearanceUserSettingsTab_fontSlider_preview"
                message={this.MESSAGE_PREVIEW_TEXT}
                layout={this.state.layout}
+                userId={this.state.userId}
+                displayName={this.state.displayName}
+                avatarUrl={this.state.avatarUrl}
            />
            <div className="mx_AppearanceUserSettingsTab_fontSlider">
                <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -1578,6 +1578,7 @@
    "Start chatting": "Start chatting",
    "Do you want to join %(roomName)s?": "Do you want to join %(roomName)s?",
    "<userName/> invited you": "<userName/> invited you",
+    "Invite messages are hidden by default. Click to show the message.": "Invite messages are hidden by default. Click to show the message.",
    "Reject": "Reject",
    "Reject & Ignore user": "Reject & Ignore user",
    "You're previewing %(roomName)s. Want to join it?": "You're previewing %(roomName)s. Want to join it?",