vicious rewrite of the CSS to support the notifications toolbar, removing all height: 100%'s and letting the flexbox stuff calculate auto-height instead. may have slowed down the rendering, especially when the toolbar is visible

skins/base/css/molecules/MatrixToolbar.css

@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
+    width: 100%;
     text-align: center;
-    height: 25px;
+    background-color: #ff0064;
-    background-color: #a9dbf4;
+    color: #fff;
-    border-bottom: 1px solid #000;
+    font-weight: bold;
     padding: 6px;
-    z-index: 50;
+}
+
+.mx_MatrixToolbar button {
+    margin-left: 12px;
 }

skins/base/css/molecules/MemberTile.css

@@ -37,12 +37,15 @@ limitations under the License.
     background-color: #dbdbdb;
 }
 
+.mx_MemberTile_inviteEditing {
+    display: initial ! important;
+}
+
 .mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
     display: none;
 }
 
 .mx_MemberTile_inviteEditing .mx_MemberTile_name {
-    position: absolute;
     width: 200px;
 }
 

skins/base/css/organisms/RoomDirectory.css

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 .mx_RoomDirectory {
-    max-width: 720px;
+    width: 720px;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_RoomDirectory_input {

skins/base/css/organisms/RoomView.css

@@ -24,7 +24,7 @@ limitations under the License.
     display: -webkit-flex;
     display: flex;
     width: 100%;
-    height: 100%;
+
     flex-direction: column;
     -webkit-flex-direction: column;
 }

skins/base/css/organisms/UserSettings.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_UserSettings {
-    max-width: 720px;
+    width: 720px;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
 }

skins/base/css/pages/MatrixChat.css

@@ -14,8 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MatrixChat_wrapper {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+}
+
+.mx_MatrixToolbar {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    height: 21px;
+}
+
+.mx_MatrixChat_toolbarShowing {
+    height: auto;
+}
+
 .mx_MatrixChat {
-    position: relative;
     width: 100%;
     height: 100%;
 
@@ -24,6 +51,15 @@ limitations under the License.
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1;
+    flex: 1;
 }
 
 .mx_MatrixChat .mx_LeftPanel {
@@ -35,7 +71,6 @@ limitations under the License.
 
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
-    height: 100%;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
@@ -49,7 +84,20 @@ limitations under the License.
     padding-right: 12px;
     background-color: #f3f8fa;
     width: 100%;
-    height: 100%;
+
+    /* XXX: Hack: apparently if you try to nest a flex-box
+     * within a non-flex-box within a flex-box, the height
+     * of the innermost element gets miscalculated if the
+     * parents are both auto.
+     * Ideally we'd launch straight into the RoomView at this
+     * point, but instead we fudge it and make the middlePanel
+     * flex itself.
+     */
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
@@ -62,5 +110,5 @@ limitations under the License.
     background-color: #f3f8fa;
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
-    height: 100%;
+    height: 100%; 
 }

skins/base/views/organisms/RoomView.js

@@ -31,8 +31,6 @@ var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
 var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
 var CallView = ComponentBroker.get("molecules/voip/CallView");
 var RoomSettings = ComponentBroker.get("molecules/RoomSettings");
-var Notifier = ComponentBroker.get('organisms/Notifier');
-var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
 var RoomViewController = require("../../../../src/controllers/organisms/RoomView");
 
 var Loader = require("react-loader");
@@ -143,14 +141,8 @@ module.exports = React.createClass({
                 roomEdit = <Loader/>;
             }
 
-            var top_bar;
-            if (!Notifier.isEnabled()) {
-                top_bar = <MatrixToolbar />;
-            }
-
             return (
                 <div className="mx_RoomView">
-                    {top_bar}
                     <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
                         onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick}/>
                     <div className="mx_RoomView_auxPanel">

skins/base/views/pages/MatrixChat.js

@@ -27,11 +27,14 @@ var UserSettings = ComponentBroker.get('organisms/UserSettings');
 var Register = ComponentBroker.get('templates/Register');
 var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
 var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
+var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
+var Notifier = ComponentBroker.get('organisms/Notifier');
 
 var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
 
 // should be atomised
 var Loader = require("react-loader");
+var classNames = require("classnames");
 
 var dis = require("../../../../src/dispatcher");
 
@@ -72,15 +75,31 @@ module.exports = React.createClass({
                     break;
             }
 
-            return (
+            if (!Notifier.isEnabled()) {
-                <div className="mx_MatrixChat">
+                return (
-                    <LeftPanel selectedRoom={this.state.currentRoom} />
+                        <div className="mx_MatrixChat_wrapper">
-                    <div className="mx_MatrixChat_middlePanel">
+                            <MatrixToolbar />
-                        {page_element}
+                            <div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
-                    </div>
+                                <LeftPanel selectedRoom={this.state.currentRoom} />
-                    {right_panel}
+                                <div className="mx_MatrixChat_middlePanel">
-                </div>
+                                    {page_element}
-            );
+                                </div>
+                                {right_panel}
+                            </div>
+                        </div>
+                );
+            }
+            else {
+                return (
+                        <div className="mx_MatrixChat">
+                            <LeftPanel selectedRoom={this.state.currentRoom} />
+                            <div className="mx_MatrixChat_middlePanel">
+                                {page_element}
+                            </div>
+                            {right_panel}
+                        </div>
+                );
+            }
         } else if (this.state.logged_in) {
             return (
                 <Loader />

src/controllers/pages/MatrixChat.js

@@ -169,6 +169,9 @@ module.exports = {
                     page_type: this.PageTypes.RoomDirectory,
                 });
                 break;
+            case 'notifier_enabled':
+                this.forceUpdate();
+                break;
         }
     },