Merge branch 'element-roomlist-polish' into 'element'

Element roomlist polish

See merge request new-vector/element/element-web/matrix-react-sdk!5

res/css/structures/_LeftPanel2.scss

@@ -64,33 +64,28 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             // Create another flexbox column for the rows to stack within
             display: flex;
             flex-direction: column;
+        }
 
-            // This is basically just breadcrumbs. The row above that is handled by the UserMenu
+        .mx_LeftPanel2_breadcrumbsContainer {
-            .mx_LeftPanel2_headerRow {
+            overflow-y: hidden;
-                // Create yet another flexbox, this time within the row, to ensure items stay
+            overflow-x: scroll;
-                // aligned correctly. This is also a row-based flexbox.
+            margin: 12px 12px 0 12px;
-                display: flex;
+            flex: 0 0 auto;
-                align-items: center;
+            // Create yet another flexbox, this time within the row, to ensure items stay
+            // aligned correctly. This is also a row-based flexbox.
+            display: flex;
+            align-items: center;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%);
             }
 
-            .mx_LeftPanel2_breadcrumbsContainer {
+            &.mx_IndicatorScrollbar_rightOverflow {
-                width: 100%;
+                mask-image: linear-gradient(90deg, black, black 95%, transparent);
-                overflow-y: hidden;
+            }
-                overflow-x: scroll;
-                margin-top: 20px;
-                padding-bottom: 2px;
 
-                &.mx_IndicatorScrollbar_leftOverflow {
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
-                    mask-image: linear-gradient(90deg, transparent, black 10%);
+                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
-                }
-
-                &.mx_IndicatorScrollbar_rightOverflow {
-                    mask-image: linear-gradient(90deg, black, black 90%, transparent);
-                }
-
-                &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
-                    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-                }
             }
         }
 

res/css/structures/_RoomSearch.scss

@@ -19,7 +19,7 @@ limitations under the License.
     flex: 1;
     border-radius: 20px;
     background-color: $roomlist2-button-bg-color;
-    height: 26px;
+    height: 28px;
     padding: 2px;
 
     // Create a flexbox for the icons (easier to manage)

res/css/structures/_TagPanel.scss

@@ -67,9 +67,10 @@ limitations under the License.
     align-items: center;
 
     height: 100%;
+    padding-top: 6px;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    margin: 8px 0;
+    margin: 6px 0;
 }
 
 .mx_TagPanel .mx_TagTile {

res/css/structures/_UserMenu.scss

@@ -15,6 +15,10 @@ limitations under the License.
 */
 
 .mx_UserMenu {
+
+    // to make the ... button sort of aligned with the explore button below
+    padding-right: 6px;
+
     .mx_UserMenu_headerButtons {
         width: 16px;
         height: 16px;
@@ -48,6 +52,7 @@ limitations under the License.
 
             .mx_UserMenu_userAvatar {
                 border-radius: 32px; // should match avatar size
+                object-fit: cover;
             }
         }
 

res/css/views/rooms/_RoomHeader.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomHeader {
-    flex: 0 0 52px;
+    flex: 0 0 56px;
     border-bottom: 1px solid $primary-hairline-color;
     background-color: $roomheader-bg-color;
 
@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_RoomHeader_wrapper {
     margin: auto;
-    height: 52px;
+    height: 56px;
     display: flex;
     align-items: center;
     min-width: 0;
@@ -174,7 +174,7 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    margin: 0 7px;
+    margin: 0 7px 0 6px;
     position: relative;
 }
 

src/components/structures/LeftPanel2.tsx

@@ -314,24 +314,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     };
 
     private renderHeader(): React.ReactNode {
-        let breadcrumbs;
+        return (
+            <div className="mx_LeftPanel2_userHeader">
+                <UserMenu isMinimized={this.props.isMinimized} />
+            </div>
+        );
+    }
+
+    private renderBreadcrumbs(): React.ReactNode {
         if (this.state.showBreadcrumbs && !this.props.isMinimized) {
-            breadcrumbs = (
+            return (
                 <IndicatorScrollbar
-                    className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
+                    className="mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
                 >
                     <RoomBreadcrumbs2 />
                 </IndicatorScrollbar>
             );
         }
-
-        return (
-            <div className="mx_LeftPanel2_userHeader">
-                <UserMenu isMinimized={this.props.isMinimized} />
-                {breadcrumbs}
-            </div>
-        );
     }
 
     private renderSearchExplore(): React.ReactNode {
@@ -393,6 +393,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
+                    {this.renderBreadcrumbs()}
                     <div className="mx_LeftPanel2_roomListWrapper">
                         <div
                             className={roomListClasses}

src/components/views/rooms/RoomHeader.js

@@ -221,7 +221,7 @@ export default createReactClass({
         }
         const topicElement =
             <div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
-        const avatarSize = 28;
+        const avatarSize = 32;
         let roomAvatar;
         if (this.props.room) {
             roomAvatar = (<RoomAvatar