Merge branch 'develop' into eecvision/spoiler-command

res/css/_components.scss

@@ -133,7 +133,6 @@
 @import "./views/dialogs/_UploadConfirmDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
-@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
 @import "./views/dialogs/security/_CreateKeyBackupDialog.scss";
@@ -161,6 +160,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_InviteReason.scss";
+@import "./views/elements/_LabelledCheckbox.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
 @import "./views/elements/_Pill.scss";

res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss

@@ -46,10 +46,6 @@ limitations under the License.
         font-size: $font-12px;
 
         .mx_ToggleSwitch {
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 8px;
-
             // downsize the switch + ball
             width: $font-32px;
             height: $font-15px;
@@ -64,10 +60,5 @@ limitations under the License.
                 border-radius: $font-15px;
             }
         }
-
-        .mx_SettingsFlag_label {
-            display: inline-block;
-            vertical-align: middle;
-        }
     }
 }

res/css/views/dialogs/_WidgetOpenIDPermissionsDialog.scss → res/css/views/elements/_LabelledCheckbox.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Travis Ralston
+Copyright 2022 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.
@@ -14,15 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag {
-    .mx_ToggleSwitch {
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 8px;
+.mx_LabelledCheckbox {
+    display: flex;
+    flex-direction: row;
+
+    .mx_Checkbox {
+        margin-top: 3px; // visually align with label text
     }
 
-    .mx_SettingsFlag_label {
-        display: inline-block;
-        vertical-align: middle;
+    .mx_LabelledCheckbox_labels {
+        flex: 1;
+
+        .mx_LabelledCheckbox_label {
+            vertical-align: middle;
+        }
+
+        .mx_LabelledCheckbox_byline {
+            display: block;
+            padding-top: $spacing-4;
+            color: $muted-fg-color;
+            font-size: $font-11px;
+        }
     }
 }

res/css/views/elements/_SettingsFlag.scss

@@ -24,6 +24,19 @@ limitations under the License.
     .mx_ToggleSwitch {
         flex: 0 0 auto;
     }
+
+    &.mx_SettingsFlag_toggleInFront {
+        .mx_ToggleSwitch {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .mx_SettingsFlag_label {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
 }
 
 .mx_SettingsFlag_label {

src/components/views/dialogs/ReportEventDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Michael Telatynski <[email protected]>
+Copyright 2022 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.
@@ -30,6 +31,7 @@ import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
+import LabelledCheckbox from "../elements/LabelledCheckbox";
 
 interface IProps extends IDialogProps {
     mxEvent: MatrixEvent;
@@ -42,6 +44,7 @@ interface IState {
     err?: string;
     // If we know it, the nature of the abuse, as specified by MSC3215.
     nature?: ExtendedNature;
+    ignoreUserToo: boolean; // if true, user will be ignored/blocked on submit
 }
 
 const MODERATED_BY_STATE_EVENT_TYPE = [
@@ -160,9 +163,14 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             err: null,
             // If specified, the nature of the abuse, as specified by MSC3215.
             nature: null,
+            ignoreUserToo: false, // default false, for now. Could easily be argued as default true
         };
     }
 
+    private onIgnoreUserTooChanged = (newVal: boolean): void => {
+        this.setState({ ignoreUserToo: newVal });
+    };
+
     // The user has written down a freeform description of the abuse.
     private onReasonChange = ({ target: { value: reason } }): void => {
         this.setState({ reason });
@@ -232,6 +240,15 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                 // Report to homeserver admin through the dedicated Matrix API.
                 await client.reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim());
             }
+
+            // if the user should also be ignored, do that
+            if (this.state.ignoreUserToo) {
+                await client.setIgnoredUsers([
+                    ...client.getIgnoredUsers(),
+                    ev.getSender(),
+                ]);
+            }
+
             this.props.onFinished(true);
         } catch (e) {
             logger.error(e);
@@ -242,7 +259,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         }
     };
 
-    render() {
+    public render() {
         let error = null;
         if (this.state.err) {
             error = <div className="error">
@@ -259,6 +276,14 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             );
         }
 
+        const ignoreUserCheckbox = <LabelledCheckbox
+            value={this.state.ignoreUserToo}
+            label={_t("Ignore user")}
+            byline={_t("Check if you want to hide all current and future messages from this user.")}
+            onChange={this.onIgnoreUserTooChanged}
+            disabled={this.state.busy}
+        />;
+
         const adminMessageMD = SdkConfig
             .getObject("report_event")?.get("admin_message_md", "adminMessageMD");
         let adminMessage;
@@ -387,6 +412,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                         />
                         { progress }
                         { error }
+                        { ignoreUserCheckbox }
                     </div>
                     <DialogButtons
                         primaryButton={_t("Send report")}
@@ -428,6 +454,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                     />
                     { progress }
                     { error }
+                    { ignoreUserCheckbox }
                 </div>
                 <DialogButtons
                     primaryButton={_t("Send report")}

src/components/views/elements/LabelledCheckbox.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2022 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.
+*/
+
+import React from "react";
+
+import StyledCheckbox from "./StyledCheckbox";
+
+interface IProps {
+    // The value for the checkbox
+    value: boolean;
+    // The translated label for the checkbox
+    label: string;
+    // Optional translated string to show below the checkbox
+    byline?: string;
+    // Whether or not to disable the checkbox
+    disabled?: boolean;
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
+
+const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange }) => {
+    return <label className="mx_LabelledCheckbox">
+        <StyledCheckbox disabled={disabled} checked={value} onChange={e => onChange(e.target.checked)} />
+        <div className="mx_LabelledCheckbox_labels">
+            <span className="mx_LabelledCheckbox_label">{ label }</span>
+            { byline ? <span className="mx_LabelledCheckbox_byline">{ byline }</span> : null }
+        </div>
+    </label>;
+};
+
+export default LabelledCheckbox;

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2022 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.
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import classNames from "classnames";
 
 import ToggleSwitch from "./ToggleSwitch";
 
@@ -35,7 +36,7 @@ interface IProps {
 }
 
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
-    render() {
+    public render() {
         // This is a minimal version of a SettingsFlag
 
         let firstPart = <span className="mx_SettingsFlag_label">{ this.props.label }</span>;
@@ -52,7 +53,9 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
             secondPart = temp;
         }
 
-        const classes = `mx_SettingsFlag ${this.props.className || ""}`;
+        const classes = classNames("mx_SettingsFlag", this.props.className, {
+            "mx_SettingsFlag_toggleInFront": this.props.toggleInFront,
+        });
         return (
             <div className={classes}>
                 { firstPart }