From 4d221c609981945d612c6d8d0c2cca937e16cf1f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 18:15:51 +0100 Subject: [PATCH 01/17] spell out that images are clickable --- .../css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css index 8a92ae4ce2..933724241f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css @@ -29,6 +29,7 @@ limitations under the License. flex: 0 0 100px; margin-left: 15px; text-align: center; + cursor: pointer; } .mx_LinkPreviewWidget_caption { From 8b6cf1fc4127093a64e88a56d6f1203b380a3bbc Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 19:11:58 +0100 Subject: [PATCH 02/17] change badge look & feel; change status bar sizing --- .../matrix-react-sdk/structures/RoomStatusBar.css | 6 +++--- .../css/matrix-react-sdk/structures/RoomView.css | 3 ++- .../css/matrix-react-sdk/structures/UploadBar.css | 7 ++++--- .../matrix-react-sdk/views/rooms/MessageComposer.css | 2 +- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 12 +++++++----- .../matrix-react-sdk/views/rooms/TabCompleteBar.css | 1 + 6 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index 0f6955ce1c..45d164267b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -1,7 +1,7 @@ .mx_RoomStatusBar { - margin-top: 5px; + margin-top: 12px; margin-left: 65px; - min-height: 24px; + min-height: 37px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -99,7 +99,7 @@ .mx_RoomStatusBar_tabCompleteWrapper { display: flex; display: -webkit-flex; - height: 24px; + height: 26px; } .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { 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 4c014461d2..6656767d3e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -207,10 +207,11 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox { max-width: 960px; margin: auto; - min-height: 36px; + min-height: 49px; } .mx_RoomView_statusAreaBox_line { + margin-left: 65px; border-top: 1px solid #eee; height: 1px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css index 5a22e91c07..1a7ce47e46 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css @@ -3,14 +3,15 @@ } .mx_UploadBar_uploadProgressOuter { - height: 4px; + height: 5px; margin-left: 63px; margin-top: -1px; + padding-bottom: 5px; } .mx_UploadBar_uploadProgressInner { background-color: #76cfa6; - height: 4px; + height: 5px; } .mx_UploadBar_uploadFilename { @@ -22,7 +23,7 @@ .mx_UploadBar_uploadIcon { float: left; - margin-top: 1px; + margin-top: 5px; margin-left: 14px; } 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 9ed5f1cb3c..6299a0f6ba 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 @@ -18,7 +18,7 @@ limitations under the License. max-width: 960px; vertical-align: middle; margin: auto; - border-top: 2px solid #e1dddd; + border-top: 1px solid #e5e5e5; } .mx_MessageComposer_row { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index d62c5d1718..e1e8b312dd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -26,7 +26,7 @@ limitations under the License. padding-right: 8px; padding-top: 6px; padding-bottom: 6px; - padding-left: 18px; + padding-left: 20px; width: 24px; height: 24px; position: relative; @@ -98,11 +98,13 @@ limitations under the License. .mx_RoomTile_badge { background-color: #ff0064; - width: 4px; + width: 8px; + height: 8px; position: absolute; - left: 0px; - top: 5px; - bottom: 5px; + left: 7px; + top: 50%; + margin-top: -4px; + border-radius: 4px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index e0d0965e34..84ca3684df 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -37,6 +37,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; + vertical-align: middle; color: #fff; } From 8557a3b70e7d12c24b65074bb2417a392d8249ac Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 19:15:35 +0100 Subject: [PATCH 03/17] fix vertical alignment within status bar --- .../vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index 84ca3684df..71bcd8f78e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -37,7 +37,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; - vertical-align: middle; + vertical-align: initial; color: #fff; } @@ -48,5 +48,6 @@ limitations under the License. .mx_TabCompleteBar_text { color: #4a4a4a; + vertical-align: middle; opacity: 0.5; } From 96c4a24d3d922da3d4d3aab67c0ce2542376e56b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 21:10:55 +0100 Subject: [PATCH 04/17] skin RoomSubList chevrons, horizontal rules and selected room --- src/components/structures/RoomSubList.js | 2 +- .../matrix-react-sdk/structures/RoomView.css | 6 ++--- .../structures/UserSettings.css | 2 +- .../views/rooms/MemberList.css | 2 +- .../views/rooms/RoomHeader.css | 5 ---- .../matrix-react-sdk/views/rooms/RoomTile.css | 20 +++++++++++++-- .../views/rooms/TabCompleteBar.css | 1 + .../views/rooms/TopUnreadMessagesBar.css | 2 +- .../css/vector-web/structures/RoomSubList.css | 4 +-- src/skins/vector/img/list-close.svg | 25 +++++++++++-------- src/skins/vector/img/list-open.svg | 25 +++++++++++-------- 11 files changed, 58 insertions(+), 36 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0b96ed187d..ab89fd0f5b 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -278,7 +278,7 @@ var RoomSubList = React.createClass({ return (

{ this.props.collapsed ? '' : this.props.label } -

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 6656767d3e..1c18df28bc 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -89,7 +89,7 @@ limitations under the License. margin: auto; overflow: auto; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #e5e5e5; -webkit-flex: 0 0 auto; flex: 0 0 auto; @@ -158,7 +158,7 @@ limitations under the License. margin-bottom: 8px; margin-left: 63px; padding-bottom: 6px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .mx_RoomView_invitePrompt { @@ -212,7 +212,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox_line { margin-left: 65px; - border-top: 1px solid #eee; + border-top: 1px solid #e5e5e5; height: 1px; } 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 71a9b2996b..a1392f05cf 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -84,7 +84,7 @@ limitations under the License. margin-bottom: 8px; margin-left: 63px; padding-bottom: 6px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .mx_UserSettings h3 { 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 283addcb0f..967b4befa5 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 @@ -84,7 +84,7 @@ limitations under the License. } .mx_MemberList_bottomRule { - border-top: 2px solid #e1dddd; + border-top: 1px solid #e5e5e5; margin-right: 15px; } 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 eeb45b4d2c..181420f318 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 @@ -24,7 +24,6 @@ limitations under the License. max-width: 960px; margin: auto; height: 83px; - border-bottom: 1px solid #eeeeee; -webkit-align-items: center; align-items: center; @@ -36,10 +35,6 @@ limitations under the License. display: flex; } -.mx_RoomHeader_editing .mx_RoomHeader_wrapper { - border-bottom: 1px solid transparent; -} - .mx_RoomHeader_leftRow { margin-left: -2px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e1e8b312dd..476cce4958 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomTile_avatar { display: table-cell; - padding-right: 8px; + padding-right: 11px; padding-top: 6px; padding-bottom: 6px; padding-left: 20px; @@ -121,18 +121,34 @@ limitations under the License. } .mx_RoomTile_selected .mx_RoomTile_name { - color: #76cfa6 ! important; } .mx_RoomTile_highlight .mx_RoomTile_name { color: #ff0064 ! important; } +.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar { + padding-right: 7px; +} + +.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span { + display: inline-block; + position: relative; + width: 100%; + padding: 4px; + margin-top: -4px; + margin-bottom: -4px; + border-radius: 2px; + background-color: rgba(118,207,166,0.2); +} + +/* .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name { background: url('img/selected.png'); background-repeat: no-repeat; background-position: right center; } +*/ .mx_RoomTile_arrow { position: absolute; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index 71bcd8f78e..f7f4a0bdcb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -21,6 +21,7 @@ limitations under the License. .mx_TabCompleteBar_item { display: inline-block; margin-right: 15px; + margin-bottom: 2px; cursor: pointer; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css index ef639e2e35..77184d424f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css @@ -19,7 +19,7 @@ limitations under the License. max-width: 960px; padding-top: 5px; padding-bottom: 5px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .mx_TopUnreadMessagesBar_scrollUp { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index d385397beb..95248db07e 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -32,10 +32,10 @@ limitations under the License. } .mx_RoomSubList_chevron { - padding-left: 5px; + padding-left: 4px; pointer-events: none; } .collapsed .mx_RoomSubList_chevron { - padding-left: 13px; + padding-left: 12px; } diff --git a/src/skins/vector/img/list-close.svg b/src/skins/vector/img/list-close.svg index eb60864e2c..cd88b2a88f 100644 --- a/src/skins/vector/img/list-close.svg +++ b/src/skins/vector/img/list-close.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + diff --git a/src/skins/vector/img/list-open.svg b/src/skins/vector/img/list-open.svg index a682ec9051..e180be8870 100644 --- a/src/skins/vector/img/list-open.svg +++ b/src/skins/vector/img/list-open.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + From 6bc4c87ce4629234c51fc0273dbcdbeb82137a76 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 21:43:49 +0100 Subject: [PATCH 05/17] 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; From 25b5c14527672458393b0ba598875c9009e729ee Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 22:26:48 +0100 Subject: [PATCH 06/17] fix new bottomleft menu --- src/components/structures/BottomLeftMenu.js | 6 +++--- .../vector/css/vector-web/structures/LeftPanel.css | 14 +++++++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index a4450d67a0..ae49a34706 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -52,13 +52,13 @@ module.exports = React.createClass({
- +
- +
- +
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 3dcc4edaa2..610f152617 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -58,7 +58,7 @@ limitations under the License. -webkit-order: 3; order: 3; - border-top: 1px solid rgba(0,0,0,0.1); + border-top: 1px solid rgba(0, 0, 0, 0.1); margin-left: 20px; margin-right: 20px; -webkit-flex: 0 0 60px; @@ -70,6 +70,10 @@ limitations under the License. width: 100%; } +.mx_BottomLeftMenu_options object { + pointer-events: none; +} + .mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_directory, .mx_LeftPanel .mx_BottomLeftMenu_settings { @@ -77,6 +81,14 @@ limitations under the License. cursor: pointer; } +.collapsed .mx_BottomLeftMenu_createRoom, +.collapsed .mx_BottomLeftMenu_directory, +.collapsed .mx_BottomLeftMenu_settings { + margin-left: 0px ! important; + padding-top: 3px ! important; + padding-bottom: 3px ! important; +} + .mx_LeftPanel .mx_BottomLeftMenu_directory { margin-left: 10px; } From cc1e30c963bfb00506a884cd7d1d0e666c612633 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 01:42:44 +0100 Subject: [PATCH 07/17] dinkier topic --- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 0413e404f8..026b3de110 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 @@ -210,8 +210,9 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 42px; - color: #454545; + color: #A2A2A2; font-weight: 300; + font-size: 12px; margin-left: 19px; margin-right: 16px; overflow: hidden; From f8d5101dbcc35e566b00a700638447b8234b1ea1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 02:23:12 +0100 Subject: [PATCH 08/17] add lost SVGs and implement SearchBox skeleton --- src/component-index.js | 4 ++ src/components/structures/LeftPanel.js | 2 + src/components/structures/SearchBox.js | 55 +++++++++++++++++++ .../structures/RoomStatusBar.css | 16 ++++++ .../matrix-react-sdk/structures/UploadBar.css | 16 ++++++ .../matrix-react-sdk/views/rooms/RoomTile.css | 3 +- src/skins/vector/img/icons-create-room.svg | 20 +++++++ src/skins/vector/img/icons-directory.svg | 21 +++++++ src/skins/vector/img/icons-settings.svg | 17 ++++++ src/skins/vector/img/maximise.svg | 22 ++++++++ src/skins/vector/img/minimise.svg | 18 ++++++ 11 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/components/structures/SearchBox.js create mode 100644 src/skins/vector/img/icons-create-room.svg create mode 100644 src/skins/vector/img/icons-directory.svg create mode 100644 src/skins/vector/img/icons-settings.svg create mode 100644 src/skins/vector/img/maximise.svg create mode 100644 src/skins/vector/img/minimise.svg diff --git a/src/component-index.js b/src/component-index.js index b25b5ef94c..b3baf22aed 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -19,6 +19,9 @@ limitations under the License. * You can edit it you like, but your changes will be overwritten, * so you'd just be trying to swim upstream like a salmon. * You are not a salmon. + * + * To update it, run: + * ./reskindex.js -h header */ module.exports.components = require('matrix-react-sdk/lib/component-index').components; @@ -29,6 +32,7 @@ module.exports.components['structures.LeftPanel'] = require('./components/struct module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel'); module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory'); module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList'); +module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 5c27abc58e..f8a68a88d9 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -87,6 +87,7 @@ var LeftPanel = React.createClass({ render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); + var SearchBox = sdk.getComponent('structures.SearchBox'); var collapseButton; var classes = "mx_LeftPanel mx_fadable"; @@ -110,6 +111,7 @@ var LeftPanel = React.createClass({ return ( ); } diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index beec83bf1c..69434dc2a0 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -25,7 +25,6 @@ module.exports = React.createClass({ render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); - var EditableText = sdk.getComponent("elements.EditableText"); var toggleCollapse; if (this.props.collapsed) { @@ -41,11 +40,9 @@ module.exports = React.createClass({ className="mx_SearchBox_searchButton" src="img/search.svg" width="21" height="19" /> - { toggleCollapse } 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 8553e202ac..c8772b499e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox { max-width: 960px; margin: auto; - min-height: 49px; + min-height: 60px; } .mx_RoomView_statusAreaBox_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 77c8e54fea..8c8c470a37 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -18,8 +18,8 @@ limitations under the License. height: 24px; margin-left: 20px; margin-right: 20px; - padding-top: 23px; - padding-bottom: 23px; + padding-top: 26px; + padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; @@ -33,13 +33,14 @@ limitations under the License. .mx_SearchBox_search { flex: 1; -webkit-flex: 1; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 12px; height: 24px; - vertical-align: middle; -} - -.mx_SearchBox_searchPlaceholder { - opacity: 0.5; + margin-top: -4px; + border: 0px ! important; + /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ + background-color: transparent; + border: 0px; } .mx_SearchBox_minimise, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index e6a340df60..30de93242e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css @@ -15,6 +15,7 @@ limitations under the License. */ .mx_MemberInfo { + margin-top: 20px; height: 100%; } 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 b631f05d54..88f7fafe93 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 @@ -17,6 +17,8 @@ limitations under the License. .mx_MemberList { height: 100%; + margin-top: 12px; + -webkit-flex: 1; flex: 1; @@ -77,17 +79,6 @@ limitations under the License. } */ -.mx_MemberList_bottom { - order: 4; - flex: 0 0 60px; - -webkit-flex: 0 0 60px; -} - -.mx_MemberList_bottomRule { - border-top: 1px solid #e5e5e5; - margin-right: 15px; -} - .mx_MemberList_invited h2 { text-transform: uppercase; color: #3d3b39; diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 56e1fb4b81..f6112da6e7 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -33,6 +33,9 @@ limitations under the License. -webkit-order: 1; order: 1; + border-bottom: 1px solid #e5e5e5; + margin-right: 20px; + -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -90,3 +93,17 @@ limitations under the License. -webkit-order: 2; order: 2; } + +.mx_RightPanel_footer { + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; + + border-top: 1px solid #e5e5e5; + margin-right: 20px; + + -webkit-flex: 0 0 60px; + flex: 0 0 60px; +} From 26d12bebe47d635a90455f576bab5ba567aa569a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 17:54:48 +0100 Subject: [PATCH 11/17] wire up searchbox filtering, and some minor overall tweaks --- src/components/structures/LeftPanel.js | 8 ++- src/components/structures/RoomSubList.js | 21 +++--- src/components/structures/SearchBox.js | 68 ++++++++++++++++--- .../structures/RoomStatusBar.css | 7 +- .../matrix-react-sdk/structures/SearchBox.css | 12 ++++ 5 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f8a68a88d9..58347a068d 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -31,6 +31,7 @@ var LeftPanel = React.createClass({ getInitialState: function() { return { showCallElement: null, + searchFilter: '', }; }, @@ -84,6 +85,10 @@ var LeftPanel = React.createClass({ } }, + onSearch: function(term) { + this.setState({ searchFilter: term }); + }, + render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); @@ -111,12 +116,13 @@ var LeftPanel = React.createClass({ return ( diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ab89fd0f5b..497acdec07 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -65,16 +65,12 @@ var RoomSubList = React.createClass({ selectedRoom: React.PropTypes.string.isRequired, startAsHidden: React.PropTypes.bool, showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded - - // TODO: Fix the name of this. This is too easily confused with the - // "hidden" state which is the expanded (or not) view of the list of rooms. - // What this prop *really* does is control whether the room name is displayed - // so it should be named as such. - collapsed: React.PropTypes.bool.isRequired, + collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed? onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool, incomingCall: React.PropTypes.object, - onShowMoreRooms: React.PropTypes.func + onShowMoreRooms: React.PropTypes.func, + searchFilter: React.PropTypes.string, }, getInitialState: function() { @@ -93,13 +89,20 @@ var RoomSubList = React.createClass({ }, componentWillMount: function() { - this.sortList(this.props.list, this.props.order); + this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order); }, componentWillReceiveProps: function(newProps) { // order the room list appropriately before we re-render //if (debug) console.log("received new props, list = " + newProps.list); - this.sortList(newProps.list, newProps.order); + this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order); + }, + + applySearchFilter: function(list, filter) { + if (filter === "") return list; + return list.filter((room) => { + return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 + }); }, onClick: function(ev) { diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 69434dc2a0..553feffe0c 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -19,32 +19,78 @@ limitations under the License. var React = require('react'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); +var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); module.exports = React.createClass({ displayName: 'SearchBox', + propTypes: { + collapsed: React.PropTypes.bool, + onSearch: React.PropTypes.func, + }, + + onChange: new rate_limited_func( + function() { + if (this.refs.search) { + this.props.onSearch(this.refs.search.value); + } + }, + 100 + ), + + onToggleCollapse: function(show) { + if (show) { + dis.dispatch({ + action: 'show_left_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_left_panel', + }); + } + }, + render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); var toggleCollapse; if (this.props.collapsed) { - toggleCollapse = <; + toggleCollapse = +
+ +
} else { - toggleCollapse = <; + toggleCollapse = +
+ +
} + var searchControls; + if (!this.props.collapsed) { + searchControls = [ + , + + ]; + } + + var self = this; return (
- - + { searchControls } { toggleCollapse }
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index dfbc354aed..4d91755c3f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -15,9 +15,9 @@ limitations under the License. */ .mx_RoomStatusBar { - margin-top: 12px; + margin-top: 15px; margin-left: 65px; - min-height: 37px; + min-height: 34px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -33,8 +33,9 @@ limitations under the License. .mx_RoomStatusBar_placeholderIndicator span { color: #4a4a4a; opacity: 0.5; -/* position: relative; + top: -4px; +/* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 8c8c470a37..d94efd9826 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -45,5 +45,17 @@ limitations under the License. .mx_SearchBox_minimise, .mx_SearchBox_maximise { + cursor: pointer; +} + +.mx_SearchBox_minimise { margin-left: 10px; } + +.mx_SearchBox_maximise { + margin-left: 6px; +} + +.mx_SearchBox object { + pointer-events: none; +} \ No newline at end of file From 51bc18aef081d5350159a6df139c3bf4954bdbd0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:05:57 +0100 Subject: [PATCH 12/17] prettier icon --- src/components/structures/SearchBox.js | 2 +- .../matrix-react-sdk/structures/SearchBox.css | 7 ++++--- src/skins/vector/img/right_search.svg | 19 +++++++++++++++++++ 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/skins/vector/img/right_search.svg diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 553feffe0c..8c98859e1d 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -74,7 +74,7 @@ module.exports = React.createClass({ , + + + right_search + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file From d0d4760ddc40a9fd6e8f8a441f17a09df9c6df7d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:09:10 +0100 Subject: [PATCH 13/17] align highlight with droptarget RHS --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 3be8cacf07..e0faa87c1c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -39,7 +39,7 @@ limitations under the License. vertical-align: middle; overflow: hidden; word-break: break-word; - padding-right: 16px; + padding-right: 19px; color: rgba(69, 69, 69, 0.8); } From cf3cdaccf3404698e22404713ded943900e58194 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:23:47 +0100 Subject: [PATCH 14/17] fix up UserSettings a bit --- src/components/structures/RightPanel.js | 3 ++ .../matrix-react-sdk/structures/SearchBox.css | 2 +- .../structures/UserSettings.css | 32 +++++++++---------- .../css/vector-web/structures/RightPanel.css | 3 +- src/skins/vector/img/maximise.svg | 5 +-- 5 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f03c63b371..431bdba5fa 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -155,7 +155,10 @@ module.exports = React.createClass({ panel = } } + } + if (!panel) { + panel =
; } var classes = "mx_RightPanel mx_fadable"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 8b9e98964f..ecd8c42985 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -54,7 +54,7 @@ limitations under the License. } .mx_SearchBox_maximise { - margin-left: 6px; + margin-left: 9px; } .mx_SearchBox object { 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 4388142059..6ef69f1d3b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -50,9 +50,25 @@ limitations under the License. -webkit-flex: 1 1 0; flex: 1 1 0; + margin-top: -20px; overflow-y: auto; } +.mx_UserSettings h3 { + clear: both; + margin-left: 63px; + text-transform: uppercase; + color: #3d3b39; + font-weight: 600; + font-size: 13px; + margin-top: 26px; + margin-bottom: 10px; +} + +.mx_UserSettings_section h3 { + margin-left: 0px; +} + .mx_UserSettings_spinner { display: inline-block; vertical-align: middle; @@ -78,22 +94,6 @@ limitations under the License. cursor: pointer; } -.mx_UserSettings h2 { - clear: both; - margin-top: 32px; - margin-bottom: 8px; - margin-left: 63px; - padding-bottom: 6px; - border-bottom: 1px solid #e5e5e5; -} - -.mx_UserSettings h3 { - font-weight: bold; - font-size: 15px; - margin-top: 4px; - margin-bottom: 4px; -} - .mx_UserSettings_section { margin-left: 63px; margin-top: 28px; diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index f6112da6e7..af8517b2b6 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -86,7 +86,8 @@ limitations under the License. } .mx_RightPanel .mx_MemberList, -.mx_RightPanel .mx_MemberInfo { +.mx_RightPanel .mx_MemberInfo, +.mx_RightPanel_blank { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; diff --git a/src/skins/vector/img/maximise.svg b/src/skins/vector/img/maximise.svg index 4df7d5bb02..79c6c0ab8b 100644 --- a/src/skins/vector/img/maximise.svg +++ b/src/skins/vector/img/maximise.svg @@ -3,9 +3,6 @@ - minimise Created with sketchtool. @@ -13,7 +10,7 @@ - + From c7d717f0a44bdf9a531272c837b9c3f057c8bf68 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:29:49 +0100 Subject: [PATCH 15/17] fix RightPanel --- src/skins/vector/css/vector-web/structures/RightPanel.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index af8517b2b6..7257d8b4a0 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -93,6 +93,8 @@ limitations under the License. -ms-flex-order: 2; -webkit-order: 2; order: 2; + flex: 1; + -webkit-flex: 1; } .mx_RightPanel_footer { From 7cd24e7dbd93e30ac71b10fa765e21616fad1127 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:29:57 +0100 Subject: [PATCH 16/17] commented out fading for RoomDirectory --- src/components/structures/RoomDirectory.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index f3614092bb..a4a5670d51 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -43,6 +43,14 @@ module.exports = React.createClass({ } }, + componentWillMount: function() { + // dis.dispatch({ + // action: 'ui_opacity', + // sideOpacity: 0.3, + // middleOpacity: 0.3, + // }); + }, + componentDidMount: function() { var self = this; MatrixClientPeg.get().publicRooms(function (err, data) { @@ -65,6 +73,14 @@ module.exports = React.createClass({ }); }, + componentWillUnmount: function() { + // dis.dispatch({ + // action: 'ui_opacity', + // sideOpacity: 1.0, + // middleOpacity: 1.0, + // }); + }, + showRoom: function(roomId) { // extract the metadata from the publicRooms structure to pass // as out-of-band data to view_room, because we get information From c606912a8d08f4cb838b86a5a7ba7e816cbe6f7f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:45:52 +0100 Subject: [PATCH 17/17] fix topic font size --- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 026b3de110..0229500cfb 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 @@ -212,7 +212,7 @@ limitations under the License. max-height: 42px; color: #A2A2A2; font-weight: 300; - font-size: 12px; + font-size: 13px; margin-left: 19px; margin-right: 16px; overflow: hidden;