Improvements to alt aliases

res/css/_components.scss

@@ -106,6 +106,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
+@import "./views/elements/_OverlaySpinner.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.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

@@ -20,36 +20,46 @@ import {_t} from '../../../languageHandler.js';
 import Field from "./Field";
 import AccessibleButton 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: Event) => {
         e.stopPropagation();
         e.preventDefault();
 
         this.setState({verifyRemove: false});
     };
 
-    _onActuallyRemove = (e) => {
+    _onActuallyRemove = (e: Event) => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -64,11 +74,11 @@ export class EditableItem extends React.Component {
                     <span className="mx_EditableItem_promptText">
                         {_t("Are you sure?")}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="link"
                                       className="mx_EditableItem_confirmBtn">
                         {_t("Yes")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                    <AccessibleButton onClick={this._onDontRemove} kind="link"
                                       className="mx_EditableItem_confirmBtn">
                         {_t("No")}
                     </AccessibleButton>
@@ -85,7 +95,26 @@ export class EditableItem extends React.Component {
     }
 }
 
-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,
@@ -102,18 +131,18 @@ export default class EditableItemList extends React.Component {
         canRemove: PropTypes.bool,
     };
 
-    _onItemAdded = (e) => {
+    _onItemAdded = (e: React.FormEvent<HTMLFormElement>) => {
         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);
     };
 

src/components/views/elements/Field.tsx

@@ -34,7 +34,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInput
     id?: string,
     // The element to create. Defaults to "input".
     // To define options for a select, use <Field><option ... /></Field>
-    element?: "input" | " select" | "textarea",
+    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;

src/components/views/elements/RoomAliasField.js

@@ -47,8 +47,8 @@ export default class RoomAliasField extends React.PureComponent {
                 <Field
                     label={_t("Room address")}
                     className="mx_RoomAliasField"
-                    prefix={poundSign}
-                    postfix={domain}
+                    prefixComponent={poundSign}
+                    postfixComponent={domain}
                     ref={ref => this._fieldRef = ref}
                     onValidate={this._onValidate}
                     placeholder={_t("e.g. my-room")}