From aaa96f1ac166f92d14b00f0d8424f3e6d233a118 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 21 Jul 2015 15:01:05 -0700
Subject: [PATCH] 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 | 12 +++--
skins/base/css/molecules/MemberTile.css | 5 +-
skins/base/css/organisms/RoomDirectory.css | 5 +-
skins/base/css/organisms/RoomView.css | 2 +-
skins/base/css/organisms/UserSettings.css | 5 +-
skins/base/css/pages/MatrixChat.css | 56 ++++++++++++++++++++--
skins/base/views/organisms/RoomView.js | 8 ----
skins/base/views/pages/MatrixChat.js | 37 ++++++++++----
src/controllers/pages/MatrixChat.js | 3 ++
9 files changed, 102 insertions(+), 31 deletions(-)
diff --git a/skins/base/css/molecules/MatrixToolbar.css b/skins/base/css/molecules/MatrixToolbar.css
index 9c3afd55..1e35ee27 100644
--- a/skins/base/css/molecules/MatrixToolbar.css
+++ b/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: #a9dbf4;
- border-bottom: 1px solid #000;
+ background-color: #ff0064;
+ color: #fff;
+ font-weight: bold;
padding: 6px;
- z-index: 50;
+}
+
+.mx_MatrixToolbar button {
+ margin-left: 12px;
}
\ No newline at end of file
diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index ba64ec95..099542a8 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/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;
}
diff --git a/skins/base/css/organisms/RoomDirectory.css b/skins/base/css/organisms/RoomDirectory.css
index 9ca7811f..1be87c1f 100644
--- a/skins/base/css/organisms/RoomDirectory.css
+++ b/skins/base/css/organisms/RoomDirectory.css
@@ -15,8 +15,9 @@ limitations under the License.
*/
.mx_RoomDirectory {
- max-width: 720px;
- margin: auto;
+ width: 720px;
+ margin-left: auto;
+ margin-right: auto;
}
.mx_RoomDirectory_input {
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 77893741..57b24c4e 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/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;
}
diff --git a/skins/base/css/organisms/UserSettings.css b/skins/base/css/organisms/UserSettings.css
index eca55b55..b69399b7 100644
--- a/skins/base/css/organisms/UserSettings.css
+++ b/skins/base/css/organisms/UserSettings.css
@@ -15,6 +15,7 @@ limitations under the License.
*/
.mx_UserSettings {
- max-width: 720px;
- margin: auto;
+ width: 720px;
+ margin-left: auto;
+ margin-right: auto;
}
diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css
index 1cf2dcd3..7ac51b56 100644
--- a/skins/base/css/pages/MatrixChat.css
+++ b/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%;
}
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 7aa9de83..1a4c1ecb 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/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">
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 73af5082..eb2f2a52 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/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 (
- <div className="mx_MatrixChat">
- <LeftPanel selectedRoom={this.state.currentRoom} />
- <div className="mx_MatrixChat_middlePanel">
- {page_element}
- </div>
- {right_panel}
- </div>
- );
+ if (!Notifier.isEnabled()) {
+ return (
+ <div className="mx_MatrixChat_wrapper">
+ <MatrixToolbar />
+ <div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
+ <LeftPanel selectedRoom={this.state.currentRoom} />
+ <div className="mx_MatrixChat_middlePanel">
+ {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 />
diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js
index 93865e73..73f526c2 100644
--- a/src/controllers/pages/MatrixChat.js
+++ b/src/controllers/pages/MatrixChat.js
@@ -169,6 +169,9 @@ module.exports = {
page_type: this.PageTypes.RoomDirectory,
});
break;
+ case 'notifier_enabled':
+ this.forceUpdate();
+ break;
}
},