From 9a9db53e0aa3e55b537550bd5c92e1841e0efe0b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 14:58:17 +0000 Subject: [PATCH 01/12] fix tinting of read marker again --- .../vector/css/matrix-react-sdk/structures/RoomView.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 64bd4ba682..2b707efd75 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -172,11 +172,10 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 1px #76cfa6; - border-bottom: solid 1px #76cfa6; + border-bottom: solid 2px #76cfa6; margin-top: 0px; position: relative; - top: 5px; + top: 4px; } .mx_RoomView_statusArea { From 4d3918109a30b921b05de5613cb2a4c5e285f778 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 14:58:27 +0000 Subject: [PATCH 02/12] skin new invite UI CSS --- .../views/rooms/MemberList.css | 21 ------------------- .../views/rooms/SearchableEntityList.css | 21 +++++++++++++++++++ 2 files changed, 21 insertions(+), 21 deletions(-) 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 5f16ccac54..3a93b54214 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 @@ -44,27 +44,6 @@ limitations under the License. flex: 1 1 0px; } -.mx_MemberList_invite { - font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; - border-radius: 3px; - border: 1px solid #f0f0f0; - padding: 9px; - color: #454545; - margin-left: 3px; - font-size: 15px; - margin-bottom: 8px; - width: 180px; -} - -.mx_MemberList_invite::-moz-placeholder { - color: #454545; - opacity: 0.5; -} -.mx_MessageList_invite::-webkit-input-placeholder { - color: #454545; - opacity: 0.5; -} - .mx_MemberList_invited h2 { text-transform: uppercase; color: #3d3b39; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css index 0283f56e13..382c05d4f4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css @@ -14,6 +14,27 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_SearchableEntityList_query { + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + border-radius: 3px; + border: 1px solid #f0f0f0; + padding: 9px; + color: #454545; + margin-left: 3px; + font-size: 15px; + margin-bottom: 8px; + width: 180px; +} + +.mx_SearchableEntityList_query::-moz-placeholder { + color: #454545; + opacity: 0.5; +} +.mx_SearchableEntityList_query::-webkit-input-placeholder { + color: #454545; + opacity: 0.5; +} + .mx_SearchableEntityList_list { border-bottom: 1px solid #e1dddd; } From 6ecdb02e81ccae6bd731838e6ead020fbc12fb04 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 15:26:48 +0000 Subject: [PATCH 03/12] sanitize avatar border radii --- .../vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css | 2 +- .../vector/css/matrix-react-sdk/views/rooms/EventTile.css | 5 ----- .../vector/css/matrix-react-sdk/views/rooms/MemberInfo.css | 4 ---- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 4 ---- .../vector/css/matrix-react-sdk/views/rooms/RoomSettings.css | 4 ---- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 4 ---- .../css/matrix-react-sdk/views/rooms/TabCompleteBar.css | 1 - 7 files changed, 1 insertion(+), 23 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css index 487461b5ce..dc9f83291f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css @@ -28,6 +28,6 @@ limitations under the License. } .mx_BaseAvatar_image { - border-radius: 20px; + border-radius: 40px; vertical-align: top; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 6de9f57054..2d0205f58c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -31,11 +31,6 @@ limitations under the License. top: 0px; } -.mx_EventTile_avatar img { - border-radius: 20px; - border: 0px; -} - .mx_EventTile_continuation { margin-top: 8px ! important; } 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 d750a9fdc5..4d421007dc 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 @@ -32,10 +32,6 @@ limitations under the License. clear: both; } -.mx_MemberInfo_avatar img { - border-radius: 48px; -} - .mx_MemberInfo_profile { margin-bottom: 16px; } 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 f242241f3f..6450d4192b 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 @@ -224,10 +224,6 @@ limitations under the License. vertical-align: middle; } -.mx_RoomHeader_avatar .mx_RoomAvatar { - border-radius: 24px; -} - .mx_RoomHeader_avatarPicker_edit { position: absolute; margin-left: 16px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index 396660f12d..19031e4a5a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -150,10 +150,6 @@ limitations under the License. color: #a2a2a2; } -.mx_RoomSettings .mx_RoomAvatar { - border-radius: 120px; -} - .mx_RoomSettings_buttons { text-align: right; margin-bottom: 16px; 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 094125fa11..44b884e859 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 @@ -33,10 +33,6 @@ limitations under the License. vertical-align: middle; } -.mx_RoomTile_avatar img { - border-radius: 20px; -} - .mx_RoomTile_name { display: table-cell; width: 100%; 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 e93eccb96b..e0d0965e34 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 @@ -41,7 +41,6 @@ limitations under the License. } .mx_TabCompleteBar_item img { - border-radius: 24px; margin-right: 8px; vertical-align: middle; } From 60d2d4525537cbeb207336f460f65f9d5c44dae5 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 15:39:42 +0000 Subject: [PATCH 04/12] readd in the .mx_EntityTile_power class. don't understand why it was killed :'( --- .../css/matrix-react-sdk/views/rooms/EntityTile.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css index 99965bff91..819ef2ab40 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css @@ -43,6 +43,14 @@ limitations under the License. position: relative; } +.mx_EntityTile_power { + position: absolute; + width: 16px; + height: 17px; + top: 0px; + right: 6px; +} + .mx_EntityTile_name { display: table-cell; vertical-align: middle; From 82742f9f1387365d5c7ccb7ba42acb496871c789 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 16:06:35 +0000 Subject: [PATCH 05/12] oops, fix tinted read up to marker correctly --- src/skins/vector/css/matrix-react-sdk/structures/RoomView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2b707efd75..23a8303e85 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -172,7 +172,7 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-bottom: solid 2px #76cfa6; + border-top: solid 2px #76cfa6; margin-top: 0px; position: relative; top: 4px; From 6332e3908e780541981ed60918b7b2c14e30ad05 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 16:39:14 +0000 Subject: [PATCH 06/12] roomsettings css fixes --- .../views/rooms/RoomHeader.css | 2 +- .../views/rooms/RoomSettings.css | 31 +++++++++++++++---- 2 files changed, 26 insertions(+), 7 deletions(-) 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 6450d4192b..900e01d1a1 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 @@ -194,7 +194,7 @@ limitations under the License. .mx_RoomHeader_editable { border-bottom: 1px solid #c7c7c7 ! important; - min-width: 70px; + min-width: 150px; cursor: text; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index 19031e4a5a..c58c344115 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -60,7 +60,7 @@ limitations under the License. */ .mx_RoomSettings .mx_RoomSettings_toggles label { - margin-bottom: 10px; + margin-bottom: 8px; display: block; } @@ -74,7 +74,7 @@ limitations under the License. } .mx_RoomSettings .mx_RoomSettings_tags { - margin-bottom: 10px; + margin-bottom: 8px; } .mx_RoomSettings .mx_RoomSettings_roomColor { @@ -99,29 +99,48 @@ limitations under the License. width: 100%; } +.mx_RoomSettings .mx_RoomSettings_aliasLabel { + margin-bottom: 8px; +} + .mx_RoomSettings .mx_RoomSettings_aliasesTable { margin-top: 12px; - margin-bottom: 12px; + margin-bottom: -16px; margin-left: 56px; display: table; } -.mx_RoomSettings .mx_RoomSettings_aliasesRow { +.mx_RoomSettings .mx_RoomSettings_aliasesTableRow { display: table-row; + margin-bottom: 16px; } .mx_RoomSettings .mx_RoomSettings_alias { - display: table-cell; - margin-bottom: 20px; + max-width: 400px; + margin-bottom: 16px; + /* + commented out so margin applies + display: table-cell; */ } .mx_RoomSettings .mx_RoomSettings_addAlias, .mx_RoomSettings .mx_RoomSettings_deleteAlias { display: table-cell; padding-left: 0.5em; + position: relative; cursor: pointer; } +.mx_RoomSettings .mx_RoomSettings_addAlias img, +.mx_RoomSettings .mx_RoomSettings_deleteAlias img { + visibility: hidden; +} + +.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img, +.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img { + visibility: visible; +} + .mx_RoomSettings_editable { border: 0px; border-bottom: 1px solid #c7c7c7; From b830f433718abfe14b9ffdabbdf6081e1810559a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 16:59:53 +0000 Subject: [PATCH 07/12] remove RoomAvatar; stale border-radius; fix aliases table --- .../structures/UserSettings.css | 4 --- .../views/avatars/RoomAvatar.css | 28 ------------------- .../views/rooms/RoomSettings.css | 2 +- 3 files changed, 1 insertion(+), 33 deletions(-) delete mode 100644 src/skins/vector/css/matrix-react-sdk/views/avatars/RoomAvatar.css 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 aa253c1ade..40bb134fde 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -156,10 +156,6 @@ limitations under the License. cursor: pointer; } -.mx_UserSettings_avatarPicker .mx_RoomAvatar { - border-radius: 40px; -} - .mx_UserSettings_avatarPicker_edit { text-align: center; margin-top: 10px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/RoomAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/RoomAvatar.css deleted file mode 100644 index 29b9cefb92..0000000000 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/RoomAvatar.css +++ /dev/null @@ -1,28 +0,0 @@ -/* -Copyright 2015, 2016 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_RoomAvatar { - vertical-align: middle; -} - -.mx_RoomAvatar_initial { - position: absolute; - color: #fff; - text-align: center; - font-weight: normal ! important; - speak: none; - pointer-events: none; -} \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index c58c344115..006882ebb5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -105,7 +105,7 @@ limitations under the License. .mx_RoomSettings .mx_RoomSettings_aliasesTable { margin-top: 12px; - margin-bottom: -16px; + margin-bottom: 0px; margin-left: 56px; display: table; } From 5b2f921190e4196b1351c5645bfce870429dd173 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 17:01:19 +0000 Subject: [PATCH 08/12] Fix bold avatar letters --- .../vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css index dc9f83291f..901a29599a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css @@ -25,6 +25,7 @@ limitations under the License. text-align: center; speak: none; pointer-events: none; + font-weight: normal; } .mx_BaseAvatar_image { From e87e22a438158ad0bd470509d142e93677d24f05 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 17:06:13 +0000 Subject: [PATCH 09/12] rhsbutton --- .../vector/css/matrix-react-sdk/structures/UserSettings.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 40bb134fde..61fb20731e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -143,7 +143,7 @@ limitations under the License. font-size: 16px; } -.mx_UserSettings_logout { +.mx_UserSettings_rhsButton { float: right; margin-right: 32px; margin-left: 32px; From 48052415b7b0c001fd733ee29901560519c112ad Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 17:09:53 +0000 Subject: [PATCH 10/12] usersettings button layout --- .../css/matrix-react-sdk/structures/UserSettings.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 61fb20731e..605c1edc70 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -143,7 +143,14 @@ limitations under the License. font-size: 16px; } -.mx_UserSettings_rhsButton { +.mx_UserSettings_changePasswordButton { + float: right; + margin-right: 32px; + margin-left: 32px; + margin-top: -54px; +} + +.mx_UserSettings_logout { float: right; margin-right: 32px; margin-left: 32px; From 1fd60f1e44dbbecfe2df0327d9b9c17062ed92f3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 17:23:33 +0000 Subject: [PATCH 11/12] revert read marker css --- .../vector/css/matrix-react-sdk/structures/RoomView.css | 5 +++-- .../matrix-react-sdk/views/rooms/SearchableEntityList.css | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) 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 23a8303e85..64bd4ba682 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -172,10 +172,11 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 2px #76cfa6; + border-top: solid 1px #76cfa6; + border-bottom: solid 1px #76cfa6; margin-top: 0px; position: relative; - top: 4px; + top: 5px; } .mx_RoomView_statusArea { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css index 382c05d4f4..b834446026 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css @@ -36,6 +36,9 @@ limitations under the License. } .mx_SearchableEntityList_list { + display: table; + table-layout: fixed; + width: 100%; border-bottom: 1px solid #e1dddd; } From 6117e09a3fd0dce77fb1dbd9b6767a0171d472a7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 20 Jan 2016 22:04:32 +0000 Subject: [PATCH 12/12] implement the correct design for memberlist --- .../views/rooms/EntityTile.css | 12 +++-- .../views/rooms/MemberList.css | 44 ++++++++++++++++++- .../views/rooms/SearchableEntityList.css | 40 +++++++++++++++-- 3 files changed, 88 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css index 819ef2ab40..8bf5f83ce1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css @@ -25,10 +25,7 @@ limitations under the License. display: table-cell; vertical-align: middle; margin-left: 10px; -} - -.mx_EntityTile:hover .mx_MessageTimestamp { - display: block; + width: 26px; } .mx_EntityTile_avatar { @@ -91,4 +88,11 @@ limitations under the License. opacity: 0.25; } +.mx_EntityTile_unknown .mx_EntityTile_avatar, +.mx_EntityTile_unknown .mx_EntityTile_name, +.mx_EntityTile_unknown .mx_EntityTile_name_hover +{ + opacity: 0.25; +} + 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 3a93b54214..5cbc1f019d 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 @@ -44,6 +44,43 @@ limitations under the License. flex: 1 1 0px; } +.mx_MemberList .mx_SearchableEntityList { + order: 1; + flex: 0; + -webkit-flex: 0; +} + +.mx_MemberList .mx_SearchableEntityList_expanded { + flex: 1 1 0; + -webkit-flex: 1 1 0; +} + +.mx_MemberList_joined { + order: 2; + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + + overflow-y: auto; +} + +/* +.mx_MemberList_invited { + order: 3; + flex: 0 0 100px; + -webkit-flex: 0 0 100px; + overflow-y: auto; +} +*/ + +.mx_MemberList_bottom { + order: 4; + flex: 0 0 72px; + -webkit-flex: 0 0 72px; + + border-top: 2px solid #e1dddd; + margin-right: 15px; +} + .mx_MemberList_invited h2 { text-transform: uppercase; color: #3d3b39; @@ -55,8 +92,13 @@ limitations under the License. margin-bottom: 4px; } +/* we have to have display: table in order for the horizontal wrapping to work */ .mx_MemberList_wrapper { - display: table; + display: table; table-layout: fixed; width: 100%; } + +.mx_MemberList_outerWrapper { + height: 0px; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css index b834446026..6709911870 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css @@ -14,6 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_SearchableEntityList { + flex: 1; + -webkit-flex: 1; + + display: flex; + display: -webkit-flex; + + flex-direction: column; + -webkit-flex-direction: column; +} + .mx_SearchableEntityList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; @@ -30,18 +41,41 @@ limitations under the License. color: #454545; opacity: 0.5; } + .mx_SearchableEntityList_query::-webkit-input-placeholder { color: #454545; opacity: 0.5; } +.mx_SearchableEntityList_listWrapper { + flex: 1; + -webkit-flex: 1; + + overflow-y: auto; +} + .mx_SearchableEntityList_list { display: table; table-layout: fixed; width: 100%; - border-bottom: 1px solid #e1dddd; } -.mx_SearchableEntityList_list:empty { - border-bottom: 0px; +.mx_SearchableEntityList_list .mx_EntityTile_chevron { + display: none; +} + +.mx_SearchableEntityList_hrWrapper { + width: 100%; + flex: 0px; + -webkit-flex: 0; +} + +.mx_SearchableEntityList hr { + height: 1px; + border: 0px; + color: #e1dddd; + background-color: #e1dddd; + margin-right: 15px; + margin-top: 11px; + margin-bottom: 11px; }