From aaa96f1ac166f92d14b00f0d8424f3e6d233a118 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 9c3afd550..1e35ee270 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 ba64ec953..099542a87 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 9ca7811f2..1be87c1f4 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 778937412..57b24c4e5 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 eca55b553..b69399b72 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 1cf2dcd35..7ac51b56a 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 7aa9de833..1a4c1ecbf 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 = ; } - var top_bar; - if (!Notifier.isEnabled()) { - top_bar = ; - } - return (
- {top_bar}
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 73af50824..eb2f2a52a 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 ( -
- -
- {page_element} -
- {right_panel} -
- ); + if (!Notifier.isEnabled()) { + return ( +
+ +
+ +
+ {page_element} +
+ {right_panel} +
+
+ ); + } + else { + return ( +
+ +
+ {page_element} +
+ {right_panel} +
+ ); + } } else if (this.state.logged_in) { return ( diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 93865e730..73f526c23 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; } },