Add MatrixToolbar CSS. Make the toolbar part of RoomView and don't cover the UI (shift it instead)

skins/base/css/molecules/MatrixToolbar.css

@@ -0,0 +1,24 @@
+/*
+Copyright 2015 OpenMarket 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_MatrixToolbar {
+    text-align: center;
+    height: 25px;
+    background-color: #a9dbf4;
+    border-bottom: 1px solid #000;
+    padding: 6px;
+    z-index: 50;
+}

skins/base/views/organisms/RoomView.js

@@ -31,7 +31,8 @@ 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");
@@ -142,8 +143,14 @@ 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,8 +27,6 @@ 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 Notifier = ComponentBroker.get('organisms/Notifier');
-var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
 
 var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
 
@@ -54,11 +52,6 @@ module.exports = React.createClass({
 
             var page_element;
             var right_panel = "";
-            var top_bar;
-
-            if (!Notifier.isEnabled()) {
-                top_bar = <MatrixToolbar />;
-            }
 
             switch (this.state.page_type) {
                 case this.PageTypes.RoomView:
@@ -81,7 +74,6 @@ module.exports = React.createClass({
 
             return (
                 <div className="mx_MatrixChat">
-                    {top_bar}
                     <LeftPanel selectedRoom={this.state.currentRoom} />
                     <div className="mx_MatrixChat_middlePanel">
                         {page_element}

src/controllers/organisms/RoomView.js

@@ -32,6 +32,7 @@ var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 100;
 
 var ComponentBroker = require('../../ComponentBroker');
+var Notifier = ComponentBroker.get('organisms/Notifier');
 
 var tileTypes = {
     'm.room.message': ComponentBroker.get('molecules/MessageTile'),
@@ -83,6 +84,9 @@ module.exports = {
                     room: MatrixClientPeg.get().getRoom(this.props.roomId)
                 });
                 break;
+            case'notifier_enabled':
+                this.forceUpdate();
+                break;
         }
     },
 

src/controllers/pages/MatrixChat.js

@@ -25,7 +25,6 @@ var Presence = require("../../Presence");
 var dis = require("../../dispatcher");
 
 var ComponentBroker = require('../../ComponentBroker');
-
 var Notifier = ComponentBroker.get('organisms/Notifier');
 
 module.exports = {
@@ -163,9 +162,6 @@ module.exports = {
                     page_type: this.PageTypes.RoomDirectory,
                 });
                 break;
-            case'notifier_enabled':
-                this.forceUpdate();
-                break;
         }
     },