From 2698405e2f17f9d23f85e2b8af861aaf9cdcb486 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 21 Jul 2015 16:12:08 +0100
Subject: [PATCH] Add MatrixToolbar CSS. Make the toolbar part of RoomView and
 don't cover the UI (shift it instead)

---
 skins/base/css/molecules/MatrixToolbar.css | 24 ++++++++++++++++++++++
 skins/base/views/organisms/RoomView.js     |  9 +++++++-
 skins/base/views/pages/MatrixChat.js       |  8 --------
 src/controllers/organisms/RoomView.js      |  4 ++++
 src/controllers/pages/MatrixChat.js        |  4 ----
 5 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 skins/base/css/molecules/MatrixToolbar.css

diff --git a/skins/base/css/molecules/MatrixToolbar.css b/skins/base/css/molecules/MatrixToolbar.css
new file mode 100644
index 0000000000..9c3afd550b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 6ecd02d700..7aa9de833c 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/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">
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 5486d2affa..73af508243 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/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}
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 311a3e1e2c..8465b2ce89 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/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;
         }
     },
 
diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js
index 2cb70d9b02..f72d793dae 100644
--- a/src/controllers/pages/MatrixChat.js
+++ b/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;
         }
     },