Part 3 of 3: Apply today's changes to experimental again

res/themes/dharma/css/_dharma.scss

@@ -186,6 +186,8 @@ $lightbox-border-color: #ffffff;
 // unused?
 $progressbar-color: #000;
 
+$room-warning-bg-color: #fff8e3;
+
 /*** form elements ***/
 
 // .mx_textinput is a container for a text input
@@ -320,3 +322,11 @@ input[type=search]::-webkit-search-results-decoration {
     font-size: 15px;
     padding: 0px 1.5em 0px 1.5em;
 }
+
+@define-mixin mx_DialogButton_secondary {
+    // flip colours for the secondary ones
+    font-weight: 600;
+    border: 1px solid $accent-color ! important;
+    color: $accent-color;
+    background-color: $accent-fg-color;
+}

src/components/structures/HomePage.js

@@ -91,11 +91,15 @@ class HomePage extends React.Component {
         this._unmounted = true;
     }
 
-    onLoginClick() {
+    onLoginClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
         dis.dispatch({ action: 'start_login' });
     }
 
-    onRegisterClick() {
+    onRegisterClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
         dis.dispatch({ action: 'start_registration' });
     }
 

src/components/structures/MatrixChat.js

@@ -927,6 +927,10 @@ export default React.createClass({
     },
 
     _viewHome: function() {
+        // The home page requires the "logged in" view, so we'll set that.
+        this.setStateForNewView({
+            view: VIEWS.LOGGED_IN,
+        });
         this._setPage(PageTypes.HomePage);
         this.notifyNewScreen('home');
     },
@@ -1183,10 +1187,7 @@ export default React.createClass({
      * @param {string} teamToken
      */
     _onLoggedIn: async function(teamToken) {
-        this.setState({
-            view: VIEWS.LOGGED_IN,
-        });
-
+        this.setStateForNewView({view: VIEWS.LOGGED_IN});
         if (teamToken) {
             // A team member has logged in, not a guest
             this._teamToken = teamToken;

src/components/structures/login/ForgotPassword.js

@@ -162,6 +162,18 @@ module.exports = React.createClass({
         this.setState(newState);
     },
 
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
+    onRegisterClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onRegisterClick();
+    },
+
     showErrorDialog: function(body, title) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
@@ -253,10 +265,10 @@ module.exports = React.createClass({
                     </form>
                     { serverConfigSection }
                     { errorText }
-                    <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                    <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
                         { _t('Return to login screen') }
                     </a>
-                    <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
+                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
                         { _t('Create an account') }
                     </a>
                     <LanguageSelector />

src/components/structures/login/Login.js

@@ -214,7 +214,10 @@ module.exports = React.createClass({
         }).done();
     },
 
-    _onLoginAsGuestClick: function() {
+    _onLoginAsGuestClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+
         const self = this;
         self.setState({
             busy: true,
@@ -297,6 +300,12 @@ module.exports = React.createClass({
         });
     },
 
+    onRegisterClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onRegisterClick();
+    },
+
     _tryWellKnownDiscovery: async function(serverName) {
         if (!serverName.trim()) {
             // Nothing to discover
@@ -567,7 +576,7 @@ module.exports = React.createClass({
                         { errorTextSection }
                         { this.componentForStep(this.state.currentFlow) }
                         { serverConfig }
-                        <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
+                        <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
                             { _t('Create an account') }
                         </a>
                         { loginAsGuestJsx }

src/components/structures/login/Registration.js

@@ -363,6 +363,12 @@ module.exports = React.createClass({
         }
     },
 
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
     _makeRegisterRequest: function(auth) {
         // Only send the bind params if we're sending username / pw params
         // (Since we need to send no params at all to use the ones saved in the
@@ -468,7 +474,7 @@ module.exports = React.createClass({
         let signIn;
         if (!this.state.doingUIAuth) {
             signIn = (
-                <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
                     { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
                 </a>
             );

src/components/views/rooms/RoomList.js

@@ -86,6 +86,7 @@ module.exports = React.createClass({
             incomingCallTag: null,
             incomingCall: null,
             selectedTags: [],
+            hover: false,
         };
     },
 
@@ -294,6 +295,17 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    onMouseEnter: function(ev) {
+        this.setState({hover: true});
+    },
+
+    onMouseLeave: function(ev) {
+        this.setState({hover: false});
+
+        // Refresh the room list just in case the user missed something.
+        this._delayedRefreshRoomList();
+    },
+
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
@@ -346,6 +358,11 @@ module.exports = React.createClass({
     },
 
     refreshRoomList: function() {
+        if (this.state.hover) {
+            // Don't re-sort the list if we're hovering over the list
+            return;
+        }
+
         // TODO: ideally we'd calculate this once at start, and then maintain
         // any changes to it incrementally, updating the appropriate sublists
         // as needed.
@@ -693,7 +710,8 @@ module.exports = React.createClass({
         const subListComponents = this._mapSubListProps(subLists);
 
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList">
+            <div ref={this._collectResizeContainer} className="mx_RoomList"
+                 onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>
         );