From 3bd0bcde4b054a25ad83a51e50d1920dd8ad0c29 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 6 Nov 2018 14:03:01 +0100
Subject: [PATCH] align room sub list header with design

also make css more maintainable with less hardcoded dimensions
---
 res/css/structures/_RoomSubList.scss     | 73 ++++++++----------------
 src/components/structures/RoomSubList.js |  2 +-
 2 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 1a92a792d6..2223d8eee8 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_nonEmpty {
-    margin-bottom: 8px;
+    margin-bottom: 4px;
 }
 
 .mx_RoomSubList_labelContainer {
@@ -30,34 +30,30 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     flex: 0 0 auto;
-    margin: 8px 19px 0 0;
+    margin: 0 16px;
+    height: 36px;
 }
 
 .mx_RoomSubList_label {
     flex: 1;
-    position: relative;
+    cursor: pointer;
+    background-color: $secondary-accent-color;
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+}
+
+.mx_RoomSubList_label > span {
+    flex: 1 1 auto;
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
     font-size: 12px;
-    margin-left: 16px;
-    padding-left: 16px; /* gutter */
-    padding-right: 16px; /* gutter */
-    padding-top: 6px;
-    padding-bottom: 6px;
-    cursor: pointer;
-    background-color: $secondary-accent-color;
-}
-
-.mx_RoomSubList_label.mx_RoomSubList_fixed {
-    position: fixed;
-    top: 0;
-    z-index: 5;
-    /* pointer-events: none; */
+    margin-left: 8px;
 }
 
 .mx_RoomSubList_badge {
-    flex: 0 1 content;
+    flex: 0 0 auto;
     border-radius: 8px;
     color: $accent-fg-color;
     font-weight: 600;
@@ -66,12 +62,8 @@ limitations under the License.
     background-color: $accent-color;
 }
 
-.mx_RoomSubList_label .mx_RoomSubList_badge:hover {
-    filter: brightness($focus-brightness);
-}
-
 .mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
-    margin: 5px;
+    margin-left: 7px;
 }
 
 .mx_RoomSubList_addRoom {
@@ -84,7 +76,6 @@ limitations under the License.
     height: 16px;
     flex: 0 0 16px;
     background-clip: content-box;
-    padding: 2px;
 }
 
 .mx_RoomSubList_badgeHighlight {
@@ -92,15 +83,14 @@ limitations under the License.
 }
 
 .mx_RoomSubList_chevron {
-    left: 0px;
     pointer-events: none;
-    position: absolute;
-    top: 11px;
-    width: 10px;
-    height: 6px;
     background-image: url('../../img/topleft-chevron.svg');
     background-repeat: no-repeat;
     transition: transform 0.2s ease-in;
+    width: 10px;
+    height: 10px;
+    background-position: center;
+    margin-left: 2px;
 }
 
 .mx_RoomSubList_chevronDown {
@@ -126,31 +116,18 @@ limitations under the License.
     .mx_RoomSubList_scroll {
         padding: 0;
     }
-    .mx_RoomSubList_label {
-        height: 17px;
-        padding-right: 0;
-        width: 28px; /* collapsed LHS Panel width */
-    }
 
     .mx_RoomSubList_labelContainer {
-        width: 28px; /* collapsed LHS Panel width */
+        margin-right: 14px;
+        margin-left: 2px;
     }
 
-    .mx_RoomSubList_line {
-        display: none;
+    .mx_RoomSubList_addRoom {
+        margin-left: 3px;
+        margin-right: 28px;
     }
 
-    .mx_RoomSubList_moreBadge {
-        position: static;
-        margin-left: 16px;
-        margin-top: 2px;
-    }
-
-    .mx_RoomSubList_ellipsis {
-        height: 20px;
-    }
-
-    .mx_RoomSubList_more {
+    .mx_RoomSubList_label > span {
         display: none;
     }
 }
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index f5a9ede9c9..ee4aa3f11e 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -325,7 +325,7 @@ const RoomSubList = React.createClass({
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
                     { chevron }
-                    { this.props.collapsed ? '' : this.props.label }
+                    <span>{this.props.label}</span>
                     { incomingCall }
                 </AccessibleButton>
                 { badge }