Merge branch 'develop' into travis/fix-group-members

CHANGELOG.md

@@ -1,3 +1,10 @@
+Changes in [0.14.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.1) (2018-10-19)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.0...v0.14.1)
+
+ * Apply the user's tint once the MatrixClientPeg is moderately ready
+   [\#2214](https://github.com/matrix-org/matrix-react-sdk/pull/2214)
+
 Changes in [0.14.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.0) (2018-10-16)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.0-rc.1...v0.14.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

res/css/_common.scss

@@ -222,6 +222,11 @@ textarea {
     word-wrap: break-word;
 }
 
+.mx_Dialog_buttons {
+    padding-right: 58px;
+    text-align: right;
+}
+
 .mx_Dialog button, .mx_Dialog input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;

res/css/_components.scss

@@ -38,7 +38,6 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
-@import "./views/dialogs/_QuestionDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SetMxIdDialog.scss";

res/css/structures/_LoginBox.scss

@@ -19,6 +19,7 @@ limitations under the License.
     height: unset !important;
     padding-top: 13px !important;
     padding-bottom: 14px !important;
+    order: 4;
 }
 
 .mx_LoginBox_loginButton_wrapper {

res/css/views/dialogs/_ChatInviteDialog.scss

@@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ChatInviteDialog {
-    /* XXX: padding-left is on mx_Dialog but padding-right has subsequently
-     * been added on other dialogs. Surely all our dialogs should have consistent
-     * right hand padding?
-     */
-    padding-right: 58px;
-}
-
 /* Using a textarea for this element, to circumvent autofill */
 .mx_ChatInviteDialog_input,
 .mx_ChatInviteDialog_input:focus

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_DevTools_dialog {
+    padding-right: 58px;
+}
+
 .mx_DevTools_content {
     margin: 10px 0;
 }

res/css/views/dialogs/_QuestionDialog.scss

@@ -1,18 +0,0 @@
-/*
-Copyright 2017 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.
-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_QuestionDialog {
-    padding-right: 58px;
-}

res/css/views/rooms/_RoomPreviewBar.scss

@@ -56,3 +56,7 @@ limitations under the License.
 .mx_RoomPreviewBar_warningIcon {
     padding: 12px;
 }
+
+.mx_RoomPreviewBar_spinnerIntro {
+    margin-top: 50px;
+}

src/components/structures/LeftPanel.js

@@ -181,14 +181,8 @@ var LeftPanel = React.createClass({
         const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        let topBox;
-        if (this.context.matrixClient.isGuest()) {
-            const LoginBox = sdk.getComponent('structures.LoginBox');
-            topBox = <LoginBox collapsed={ this.props.collapsed }/>;
-        } else {
         const SearchBox = sdk.getComponent('structures.SearchBox');
-            topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
+        const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-        }
 
         const classes = classNames(
             "mx_LeftPanel",

src/components/structures/LoginBox.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 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.
@@ -16,31 +17,15 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 import { _t } from '../../languageHandler';
-var sdk = require('../../index')
+const dis = require('../../dispatcher');
-var dis = require('../../dispatcher');
+const AccessibleButton = require('../../components/views/elements/AccessibleButton');
-var rate_limited_func = require('../../ratelimitedfunc');
-var AccessibleButton = require('../../components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'LoginBox',
 
     propTypes: {
-        collapsed: React.PropTypes.bool,
-    },
-
-    onToggleCollapse: function(show) {
-        if (show) {
-            dis.dispatch({
-                action: 'show_left_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_left_panel',
-            });
-        }
     },
 
     onLoginClick: function() {
@@ -52,25 +37,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const loginButton = (
-
-        var toggleCollapse;
-        if (this.props.collapsed) {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
-                </AccessibleButton>
-        }
-        else {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
-                </AccessibleButton>
-        }
-
-        var loginButton;
-        if (!this.props.collapsed) {
-            loginButton = (
             <div className="mx_LoginBox_loginButton_wrapper">
                 <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
                     { _t("Login") }
@@ -80,13 +47,10 @@ module.exports = React.createClass({
                 </AccessibleButton>
             </div>
         );
-        }
 
-        var self = this;
         return (
-            <div className="mx_SearchBox mx_LoginBox">
+            <div className="mx_LoginBox">
                 { loginButton }
-                { toggleCollapse }
             </div>
         );
     }

src/components/structures/RoomView.js

@@ -1514,6 +1514,7 @@ module.exports = React.createClass({
                                             canPreview={false} error={this.state.roomLoadError}
                                             roomAlias={roomAlias}
                                             spinner={this.state.joining}
+                                            spinnerState="joining"
                                             inviterName={inviterName}
                                             invitedEmail={invitedEmail}
                                             room={this.state.room}
@@ -1558,6 +1559,7 @@ module.exports = React.createClass({
                                             inviterName={inviterName}
                                             canPreview={false}
                                             spinner={this.state.joining}
+                                            spinnerState="joining"
                                             room={this.state.room}
                             />
                         </div>
@@ -1645,6 +1647,7 @@ module.exports = React.createClass({
                                 onForgetClick={this.onForgetClick}
                                 onRejectClick={this.onRejectThreepidInviteButtonClicked}
                                 spinner={this.state.joining}
+                                spinnerState="joining"
                                 inviterName={inviterName}
                                 invitedEmail={invitedEmail}
                                 canPreview={this.state.canPeek}
@@ -1670,7 +1673,7 @@ module.exports = React.createClass({
         let messageComposer, searchInfo;
         const canSpeak = (
             // joined and not showing search results
-            myMembership == 'join' && !this.state.searchResults
+            myMembership === 'join' && !this.state.searchResults
         );
         if (canSpeak) {
             messageComposer =
@@ -1684,6 +1687,11 @@ module.exports = React.createClass({
                 />;
         }
 
+        if (MatrixClientPeg.get().isGuest()) {
+            const LoginBox = sdk.getComponent('structures.LoginBox');
+            messageComposer = <LoginBox/>;
+        }
+
         // TODO: Why aren't we storing the term/scope/count in this format
         // in this.state if this is what RoomHeader desires?
         if (this.state.searchResults) {

src/components/views/dialogs/DevtoolsDialog.js

@@ -625,7 +625,7 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <div>
+            body = <div className="mx_DevTools_dialog">
                 <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
                 <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                 <div className="mx_DevTools_label_bottom" />
@@ -634,7 +634,7 @@ export default class DevtoolsDialog extends React.Component {
         } else {
             const classes = "mx_DevTools_RoomStateExplorer_button";
             body = <div>
-                <div>
+                <div className="mx_DevTools_dialog">
                     <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
                     <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                     <div className="mx_DevTools_label_bottom" />

src/components/views/elements/DialogButtons.js

@@ -70,6 +70,8 @@ module.exports = React.createClass({
         }
         return (
             <div className="mx_Dialog_buttons">
+                { cancelButton }
+                { this.props.children }
                 <button className={primaryButtonClassName}
                         onClick={this.props.onPrimaryButtonClick}
                         autoFocus={this.props.focus}
@@ -77,8 +79,6 @@ module.exports = React.createClass({
                 >
                     { this.props.primaryButton }
                 </button>
-                { this.props.children }
-                { cancelButton }
             </div>
         );
     },

src/components/views/room_settings/AliasSettings.js

@@ -220,8 +220,9 @@ module.exports = React.createClass({
         let canonical_alias_section;
         if (this.props.canSetCanonicalAlias) {
             let found = false;
+            const canonicalValue = this.state.canonicalAlias || "";
             canonical_alias_section = (
-                <select onChange={this.onCanonicalAliasChange} value={this.state.canonicalAlias}>
+                <select onChange={this.onCanonicalAliasChange} value={canonicalValue}>
                     <option value="" key="unset">{ _t('not specified') }</option>
                     {
                         Object.keys(self.state.domainToAliases).map((domain, i) => {

src/components/views/rooms/RoomPreviewBar.js

@@ -44,9 +44,13 @@ module.exports = React.createClass({
         error: PropTypes.object,
 
         canPreview: PropTypes.bool,
-        spinner: PropTypes.bool,
         room: PropTypes.object,
 
+        // When a spinner is present, a spinnerState can be specified to indicate the
+        // purpose of the spinner.
+        spinner: PropTypes.bool,
+        spinnerState: PropTypes.oneOf(["joining"]),
+
         // The alias that was used to access this room, if appropriate
         // If given, this will be how the room is referred to (eg.
         // in error messages).
@@ -93,7 +97,12 @@ module.exports = React.createClass({
 
         if (this.props.spinner || this.state.busy) {
             const Spinner = sdk.getComponent("elements.Spinner");
+            let spinnerIntro = "";
+            if (this.props.spinnerState === "joining") {
+                spinnerIntro = _t("Joining room...");
+            }
             return (<div className="mx_RoomPreviewBar">
+                <p className="mx_RoomPreviewBar_spinnerIntro">{ spinnerIntro }</p>
                 <Spinner />
             </div>);
         }

src/i18n/strings/en_EN.json

@@ -512,6 +512,7 @@
     "You have no historical rooms": "You have no historical rooms",
     "Historical": "Historical",
     "System Alerts": "System Alerts",
+    "Joining room...": "Joining room...",
     "Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.",
     "This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:",
     "You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.",
@@ -1267,5 +1268,6 @@
     "You've previously used Riot on %(host)s with lazy loading of members enabled. In this version lazy loading is disabled. As the local cache is not compatible between these two settings, Riot needs to resync your account.": "You've previously used Riot on %(host)s with lazy loading of members enabled. In this version lazy loading is disabled. As the local cache is not compatible between these two settings, Riot needs to resync your account.",
     "If the other version of Riot is still open in another tab, please close it as using Riot on the same host with both lazy loading enabled and disabled simultaneously will cause issues.": "If the other version of Riot is still open in another tab, please close it as using Riot on the same host with both lazy loading enabled and disabled simultaneously will cause issues.",
     "Incompatible local cache": "Incompatible local cache",
-    "Clear cache and resync": "Clear cache and resync"
+    "Clear cache and resync": "Clear cache and resync",
+    "Add some now": "Add some now"
 }