Merge pull request #2868 from matrix-org/dbkr/dialog_redesign

Design tweaks to dialogs

src/Modal.js

@@ -75,10 +75,9 @@ const AsyncWrapper = React.createClass({
     },
 
     render: function() {
-        const {loader, ...otherProps} = this.props;
         if (this.state.component) {
             const Component = this.state.component;
-            return <Component {...otherProps} />;
+            return <Component {...this.props} />;
         } else if (this.state.error) {
             const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -158,7 +157,7 @@ class ModalManager {
     }
 
     createDialog(Element, ...rest) {
-        return this.createDialogAsync(new Promise(resolve => resolve(Element)), ...rest);
+        return this.createDialogAsync(Promise.resolve(Element), ...rest);
     }
 
     createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
@@ -193,36 +192,35 @@ class ModalManager {
      *                                 also be removed from the stack. This is not compatible
      *                                 with being a priority modal. Only one modal can be
      *                                 static at a time.
+     * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
     createDialogAsync(prom, props, className, isPriorityModal, isStaticModal) {
-        const self = this;
         const modal = {};
 
         // never call this from onFinished() otherwise it will loop
         //
-        // nb explicit function() rather than arrow function, to get `arguments`
-        const closeDialog = function() {
-            if (props && props.onFinished) props.onFinished.apply(null, arguments);
-            const i = self._modals.indexOf(modal);
+        const closeDialog = (...args) => {
+            if (props && props.onFinished) props.onFinished.apply(null, args);
+            const i = this._modals.indexOf(modal);
             if (i >= 0) {
-                self._modals.splice(i, 1);
+                this._modals.splice(i, 1);
             }
 
-            if (self._priorityModal === modal) {
-                self._priorityModal = null;
+            if (this._priorityModal === modal) {
+                this._priorityModal = null;
 
                 // XXX: This is destructive
-                self._modals = [];
+                this._modals = [];
             }
 
-            if (self._staticModal === modal) {
-                self._staticModal = null;
+            if (this._staticModal === modal) {
+                this._staticModal = null;
 
                 // XXX: This is destructive
-                self._modals = [];
+                this._modals = [];
             }
 
-            self._reRender();
+            this._reRender();
         };
 
         // don't attempt to reuse the same AsyncWrapper for different dialogs,

src/components/views/dialogs/AddressPickerDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
+Copyright 2017, 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -566,7 +566,7 @@ module.exports = React.createClass({
                 rows="1"
                 id="textinput"
                 ref="textinput"
-                className="mx_ChatInviteDialog_input"
+                className="mx_AddressPickerDialog_input"
                 onChange={this.onQueryChanged}
                 placeholder={this.props.placeholder}
                 defaultValue={this.props.value}
@@ -578,7 +578,7 @@ module.exports = React.createClass({
         let addressSelector;
         if (this.state.error) {
             const validTypeDescriptions = this.props.validAddressTypes.map((t) => _t(addressTypeName[t]));
-            error = <div className="mx_ChatInviteDialog_error">
+            error = <div className="mx_AddressPickerDialog_error">
                 { _t("You have entered an invalid address.") }
                 <br />
                 { _t("Try using one of the following valid address types: %(validTypesList)s.", {
@@ -586,9 +586,9 @@ module.exports = React.createClass({
                 }) }
             </div>;
         } else if (this.state.searchError) {
-            error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
+            error = <div className="mx_AddressPickerDialog_error">{ this.state.searchError }</div>;
         } else if (this.state.query.length > 0 && filteredSuggestedList.length === 0 && !this.state.busy) {
-            error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
+            error = <div className="mx_AddressPickerDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
@@ -601,13 +601,13 @@ module.exports = React.createClass({
         }
 
         return (
-            <BaseDialog className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}
+            <BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
                 onFinished={this.props.onFinished} title={this.props.title}>
-                <div className="mx_ChatInviteDialog_label">
+                <div className="mx_AddressPickerDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
                 <div className="mx_Dialog_content">
-                    <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
+                    <div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
                     { error }
                     { addressSelector }
                     { this.props.extraNode }

src/components/views/dialogs/BaseDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -55,6 +55,11 @@ export default React.createClass({
         // CSS class to apply to dialog div
         className: PropTypes.string,
 
+        // if true, dialog container is 60% of the viewport width. Otherwise,
+        // the container will have no fixed size, allowing its contents to
+        // determine its size. Default: true.
+        fixedWidth: PropTypes.bool,
+
         // Title for the dialog.
         title: PropTypes.node.isRequired,
 
@@ -72,6 +77,7 @@ export default React.createClass({
     getDefaultProps: function() {
         return {
             hasCancel: true,
+            fixedWidth: true,
         };
     },
 
@@ -113,7 +119,10 @@ export default React.createClass({
 
         return (
             <FocusTrap onKeyDown={this._onKeyDown}
-                className={this.props.className}
+                className={classNames({
+                    [this.props.className]: true,
+                    'mx_Dialog_fixedWidth': this.props.fixedWidth,
+                })}
                 role="dialog"
                 aria-labelledby='mx_BaseDialog_title'
                 // This should point to a node describing the dialog.
@@ -131,8 +140,8 @@ export default React.createClass({
                         { this.props.title }
                     </div>
                     { this.props.headerButton }
+                    { cancelButton }
                 </div>
-                { cancelButton }
                 { this.props.children }
             </FocusTrap>
         );

src/components/views/dialogs/UploadConfirmDialog.js

@@ -87,6 +87,7 @@ export default class UploadConfirmDialog extends React.Component {
 
         return (
             <BaseDialog className='mx_UploadConfirmDialog'
+                fixedWidth={false}
                 onFinished={this._onCancelClick}
                 title={title}
                 contentId='mx_Dialog_content'