From 6bc4c87ce4629234c51fc0273dbcdbeb82137a76 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 21:43:49 +0100 Subject: [PATCH] update to new bottomleftmenu. update header and composer heights --- src/components/structures/BottomLeftMenu.js | 13 +++++-- .../matrix-react-sdk/structures/RoomView.css | 6 ++-- .../structures/UserSettings.css | 4 +-- .../views/rooms/MemberList.css | 4 +-- .../views/rooms/MessageComposer.css | 4 +-- .../views/rooms/RoomHeader.css | 4 +-- .../matrix-react-sdk/views/rooms/RoomList.css | 2 +- .../css/vector-web/structures/LeftPanel.css | 36 +++++++++++-------- .../css/vector-web/structures/RightPanel.css | 6 ++-- 9 files changed, 46 insertions(+), 33 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index a4d89fcfed..a4450d67a0 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -47,12 +47,19 @@ module.exports = React.createClass({ render: function() { var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); + var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
- - - +
+ +
+
+ +
+
+ +
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 1c18df28bc..8553e202ac 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -36,8 +36,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } .mx_RoomView_fileDropTarget { @@ -64,7 +64,7 @@ limitations under the License. border: 2px #e1dddd solid; border-bottom: none; position: absolute; - top: 83px; + top: 70px; bottom: 0px; z-index: 3000; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index a1392f05cf..4388142059 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -36,8 +36,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } .mx_UserSettings_body { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index 967b4befa5..b631f05d54 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -79,8 +79,8 @@ limitations under the License. .mx_MemberList_bottom { order: 4; - flex: 0 0 72px; - -webkit-flex: 0 0 72px; + flex: 0 0 60px; + -webkit-flex: 0 0 60px; } .mx_MemberList_bottomRule { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 6299a0f6ba..daf15001af 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -45,7 +45,7 @@ limitations under the License. display: table-cell; width: 100%; vertical-align: middle; - height: 70px; + height: 60px; text-align: center; font-style: italic; color: #888; @@ -55,7 +55,7 @@ limitations under the License. display: table-cell; width: 100%; vertical-align: middle; - height: 70px; + height: 60px; } .mx_MessageComposer_input textarea { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 181420f318..0413e404f8 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomHeader_wrapper { max-width: 960px; margin: auto; - height: 83px; + height: 70px; -webkit-align-items: center; align-items: center; @@ -118,7 +118,7 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 83px; + line-height: 70px; color: #454545; font-size: 22px; font-weight: bold; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css index 1a4ec869f2..a224185345 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomList { - padding-top: 24px; + padding-top: 8px; padding-bottom: 12px; min-height: 400px; } diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 4ee444267b..3dcc4edaa2 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -58,23 +58,29 @@ limitations under the License. -webkit-order: 3; order: 3; - -webkit-flex: 0 0 140px; - flex: 0 0 140px; - - background-color: rgba(118,207,166,0.2); + border-top: 1px solid rgba(0,0,0,0.1); + margin-left: 20px; + margin-right: 20px; + -webkit-flex: 0 0 60px; + flex: 0 0 60px; } -.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile { - color: #454545; -} - -.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { - margin-top: 15px; +.mx_LeftPanel .mx_BottomLeftMenu_options { + margin-top: 18px; width: 100%; } -.mx_LeftPanel .mx_BottomLeftMenu img { - border-radius: 0px; - background-color: transparent; - vertical-align: middle; -} \ No newline at end of file +.mx_LeftPanel .mx_BottomLeftMenu_createRoom, +.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_settings { + display: inline-block; + cursor: pointer; +} + +.mx_LeftPanel .mx_BottomLeftMenu_directory { + margin-left: 10px; +} + +.mx_LeftPanel .mx_BottomLeftMenu_settings { + float: right; +} diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7cad264986..56e1fb4b81 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -33,14 +33,14 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 83px; - flex: 0 0 83px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; } /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 32px; + margin-top: 25px; float: left; background-color: #fff; margin-left: -4px;