Improvements to alt aliases

res/css/_components.scss

@@ -129,6 +129,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
+@import "./views/elements/_OverlaySpinner.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";

res/css/views/elements/_EditableItemList.scss

@@ -22,6 +22,7 @@ limitations under the License.
 .mx_EditableItem {
     display: flex;
     margin-bottom: 5px;
+    justify-content: flex-end;
 }
 
 .mx_EditableItem_delete {
@@ -43,17 +44,21 @@ limitations under the License.
 
 .mx_EditableItem_promptText {
     margin-right: 10px;
-    order: 2;
+    order: 1;
 }
 
 .mx_EditableItem_confirmBtn {
-    margin-right: 5px;
+    order: 2;
+    padding: inherit; // Override link height (!?)
+
+    &:not(:last-child) {
+        margin-right: 5px;
+    }
 }
 
 .mx_EditableItem_item {
     flex: auto 1 0;
     order: 1;
-    width: calc(100% - 14px); // leave space for the remove button
     overflow-x: hidden;
     text-overflow: ellipsis;
 }

res/css/views/elements/_OverlaySpinner.scss

@@ -0,0 +1,31 @@
+/*
+Copyright 2020 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_OverlaySpinner {
+    background: $primary-bg-color;
+    z-index: 2;
+}
+
+.mx_OverlaySpinner_visible {
+    opacity: 0.9;
+    transition: opacity 0.5s ease-in;
+}
+
+.mx_OverlaySpinner_hidden {
+    opacity: 0;
+    transition: opacity 0.2s ease-in;
+    pointer-events: none;
+}

src/components/views/elements/EditableItemList.js → src/components/views/elements/EditableItemList.tsx

@@ -18,39 +18,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from '../../../languageHandler';
 import Field from "./Field";
-import AccessibleButton from "./AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import AccessibleButton, {ButtonEvent} from "./AccessibleButton";
 
-export class EditableItem extends React.Component {
+interface IEditableItemProps {
+    index: number,
+    value: string,
+    onRemove: (index: number) => void,
+}
+
+interface IEditableItemState {
+    verifyRemove: boolean,
+}
+
+export class EditableItem extends React.Component<IEditableItemProps, IEditableItemState> {
     static propTypes = {
         index: PropTypes.number,
         value: PropTypes.string,
         onRemove: PropTypes.func,
     };
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             verifyRemove: false,
         };
     }
 
-    _onRemove = (e) => {
+    _onRemove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         e.stopPropagation();
         e.preventDefault();
 
         this.setState({verifyRemove: true});
     };
 
-    _onDontRemove = (e) => {
+    _onDontRemove = (e: ButtonEvent) => {
         e.stopPropagation();
         e.preventDefault();
 
         this.setState({verifyRemove: false});
     };
 
-    _onActuallyRemove = (e) => {
+    _onActuallyRemove = (e: ButtonEvent) => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -65,18 +74,14 @@ export class EditableItem extends React.Component {
                     <span className="mx_EditableItem_promptText">
                         {_t("Are you sure?")}
                     </span>
-                    <AccessibleButton
-                        onClick={this._onActuallyRemove}
-                        kind="primary_sm"
-                        className="mx_EditableItem_confirmBtn"
-                    >
+                    <AccessibleButton onClick={this._onActuallyRemove}
+                        kind="link"
+                        className="mx_EditableItem_confirmBtn">
                         {_t("Yes")}
                     </AccessibleButton>
-                    <AccessibleButton
-                        onClick={this._onDontRemove}
-                        kind="danger_sm"
-                        className="mx_EditableItem_confirmBtn"
-                    >
+                    <AccessibleButton onClick={this._onDontRemove}
+                        kind="link"
+                        className="mx_EditableItem_confirmBtn">
                         {_t("No")}
                     </AccessibleButton>
                 </div>
@@ -92,8 +97,26 @@ export class EditableItem extends React.Component {
     }
 }
 
-@replaceableComponent("views.elements.EditableItemList")
-export default class EditableItemList extends React.Component {
+interface IProps {
+    id: string,
+    items: string[],
+    itemsLabel?: string,
+    noItemsLabel?: string,
+    placeholder?: string,
+    newItem?: string,
+    suggestionsListId?: string,
+
+    onItemAdded?: (item: string) => void,
+    onItemRemoved?: (index: number) => void,
+    onNewItemChanged?: (item: string) => void,
+
+    canEdit?: boolean,
+    canRemove?: boolean,
+
+    error?: string, // for the benefit of PublishedAliases
+}
+
+export default class EditableItemList extends React.Component<IProps> {
     static propTypes = {
         id: PropTypes.string.isRequired,
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -110,18 +133,18 @@ export default class EditableItemList extends React.Component {
         canRemove: PropTypes.bool,
     };
 
-    _onItemAdded = (e) => {
+    _onItemAdded = (e: any) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
     };
 
-    _onItemRemoved = (index) => {
+    _onItemRemoved = (index: number) => {
         if (this.props.onItemRemoved) this.props.onItemRemoved(index);
     };
 
-    _onNewItemChanged = (e) => {
+    _onNewItemChanged = (e: any) => {
         if (this.props.onNewItemChanged) this.props.onNewItemChanged(e.target.value);
     };
 
@@ -136,7 +159,10 @@ export default class EditableItemList extends React.Component {
                 <Field label={this.props.placeholder} type="text"
                     autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
                     list={this.props.suggestionsListId} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
+                <AccessibleButton onClick={this._onItemAdded}
+                    kind="primary"
+                    type="submit"
+                    disabled={!this.props.newItem}>
                     {_t("Add")}
                 </AccessibleButton>
             </form>

src/components/views/elements/Field.tsx

@@ -31,7 +31,10 @@ function getId() {
 
 interface IProps {
     // The field's ID, which binds the input and label together. Immutable.
-    id?: string;
+    id?: string,
+    // The element to create. Defaults to "input".
+    // To define options for a select, use <Field><option ... /></Field>
+    element?: "input" | "select" | "textarea",
     // The field's type (when used as an <input>). Defaults to "text".
     type?: string;
     // id of a <datalist> element for suggestions

src/components/views/elements/OverlaySpinner.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2020 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, {useEffect, useRef, useState, FunctionComponent} from "react";
+import Spinner from "./Spinner";
+
+/*
+ * A component which measures its children, and places a spinner over them
+ * while 'active' is true.
+ * We use 'holdOff' and 'holdOver' to shift the animations in time:
+ * We don't animate instantly to avoid a quick 'ghost' spinner for fast round trips.
+ * We have a short holdOver to allow the fade out to occur.
+ */
+
+interface IProps {
+    active: boolean,
+    className?: string,
+}
+
+export const OverlaySpinner: FunctionComponent<IProps> = ({active, className, children}) => {
+    const measured = useRef(null);
+    const [state, setState] = useState({w: 0, h: 0});
+
+    const firstMount = useRef(true);
+    const [holdOver, setHoldOver] = useState(false);
+    const [holdOff, setHoldOff] = useState(false);
+
+    /* Follow the size of the element we're meant to cover */
+    useEffect(() => {
+        const interval = requestAnimationFrame(() => {
+            if (!measured.current) return;
+            setState({
+                w: measured.current.clientWidth,
+                h: measured.current.clientHeight,
+            });
+        });
+        return () => cancelAnimationFrame(interval);
+    });
+
+    /* If it's not the first mount and the state changes to inactive,
+     * set 'holdOver' to true so the exit animation can play */
+    useEffect(() => {
+        if (firstMount.current) {
+            firstMount.current = false;
+            return;
+        }
+        if (!active) {
+            const handle = setTimeout(setHoldOver, 200, false);
+            setHoldOver(true);
+            return () => {
+                setHoldOver(false);
+                clearTimeout(handle);
+            };
+        } else {
+            const handle = setTimeout(setHoldOff, 200, false);
+            setHoldOff(true);
+            return () => {
+                setHoldOff(false);
+                clearTimeout(handle);
+            };
+        }
+    }, [active]);
+
+    const visibility = !holdOff && active ? "visible" : "hidden";
+
+    return (<div className={className} style={{ position: "relative" }}>
+        <div className={`mx_OverlaySpinner mx_OverlaySpinner_${visibility}`} style={{
+            position: "absolute",
+            width: state.w,
+            height: state.h,
+            visibility: active || holdOver ? "visible" : "hidden",
+        }}><Spinner /></div>
+        <div ref={measured}>
+            {children}
+        </div>
+    </div>);
+}
+
+export default OverlaySpinner;