Merge pull request #697 from vector-im/matthew/roompreview

Lots of CSS bugfixes and polishing

src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css

@@ -143,6 +143,13 @@ limitations under the License.
     font-size: 16px;
 }
 
+.mx_UserSettings_changePasswordButton {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+    margin-top: -54px;
+}
+
 .mx_UserSettings_logout {
     float: right;
     margin-right: 32px;
@@ -156,10 +163,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;

src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css

@@ -25,9 +25,10 @@ limitations under the License.
     text-align: center;
     speak: none;
     pointer-events: none;
+    font-weight: normal;
 }
 
 .mx_BaseAvatar_image {
-    border-radius: 20px;
+    border-radius: 40px;
     vertical-align: top;
 }

src/skins/vector/css/matrix-react-sdk/views/avatars/RoomAvatar.css

@@ -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;
-}

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;
-}
+    width: 26px;
-
-.mx_EntityTile:hover .mx_MessageTimestamp {
-    display: block;
 }
 
 .mx_EntityTile_avatar {
@@ -43,6 +40,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;
@@ -83,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;
+}
+
 

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;
 }

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;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css

@@ -44,25 +44,41 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList_invite {
+.mx_MemberList .mx_SearchableEntityList {
-    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    order: 1;
-    border-radius: 3px;
+    flex: 0;
-    border: 1px solid #f0f0f0;
+    -webkit-flex: 0;
-    padding: 9px;
-    color: #454545;
-    margin-left: 3px;
-    font-size: 15px;
-    margin-bottom: 8px;
-    width: 180px;
 }
 
-.mx_MemberList_invite::-moz-placeholder {
+.mx_MemberList .mx_SearchableEntityList_expanded {
-    color: #454545;
+    flex: 1 1 0;
-    opacity: 0.5;
+    -webkit-flex: 1 1 0;
 }
-.mx_MessageList_invite::-webkit-input-placeholder {
+
-    color: #454545;
+.mx_MemberList_joined {
-    opacity: 0.5;
+    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 {
@@ -76,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; 
     table-layout: fixed;
     width: 100%;
 }
+
+.mx_MemberList_outerWrapper {
+    height: 0px;
+}

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;
 }
 
@@ -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;

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: 0px;
     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;
+    max-width: 400px;
-    margin-bottom: 20px;
+    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;
@@ -150,10 +169,6 @@ limitations under the License.
     color: #a2a2a2;
 }
 
-.mx_RoomSettings .mx_RoomAvatar {
-    border-radius: 120px;
-}
-
 .mx_RoomSettings_buttons {
     text-align: right;
     margin-bottom: 16px;

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%;

src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css

@@ -14,10 +14,68 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SearchableEntityList_list {
+.mx_SearchableEntityList {
-    border-bottom: 1px solid #e1dddd;
+    flex: 1;
+    -webkit-flex: 1;
+
+    display: flex;
+    display: -webkit-flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
 }
 
-.mx_SearchableEntityList_list:empty {
+.mx_SearchableEntityList_query {
-    border-bottom: 0px;
+    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_listWrapper {
+    flex: 1;
+    -webkit-flex: 1;
+
+    overflow-y: auto;    
+}
+
+.mx_SearchableEntityList_list {
+    display: table;
+    table-layout: fixed;
+    width: 100%;    
+}
+
+.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;
 }

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;
 }