From 18fedb23ecfae873793498eb2acab09d69030557 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 23 Oct 2018 16:57:56 +0200
Subject: [PATCH] fix basic room header layout

make room name take as much space as it needs (but not more than width)
put all items apart from right buttons in one flex container
 so name and topic can grow as required
more small tweaks
---
 res/css/views/rooms/_RoomHeader.scss     | 36 +++++++++++-------------
 src/components/views/rooms/RoomHeader.js | 20 ++++---------
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 7e2e5683d9..fa28db69ae 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -24,17 +24,13 @@ limitations under the License.
     height: 52px;
     align-items: center;
     display: flex;
-}
-
-.mx_RoomHeader_leftRow {
-    display: flex;
-    margin-left: 15px;
-    order: 1;
-    flex: 1;
-    overflow: hidden;
+    align-items: center;
+    min-width: 0;
+    padding: 0 10px 0 19px;
 }
 
 .mx_RoomHeader_spinner {
+    flex: 1;
     height: 36px;
     order: 2;
     padding-left: 12px;
@@ -63,12 +59,11 @@ limitations under the License.
     padding-right: 12px;
 }
 
-.mx_RoomHeader_rightRow {
-    margin-top: 4px;
-    background-color: $primary-bg-color;
+.mx_RoomHeader_buttons {
     display: flex;
     align-items: center;
-    order: 3;
+    margin-top: 4px;
+    background-color: $primary-bg-color;
 }
 
 .mx_RoomHeader_info {
@@ -99,19 +94,19 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name {
+    flex: 0 1 auto;
     overflow: hidden;
     color: $roomheader-color;
     font-weight: 600;
     font-size: 18px;
-    padding-left: 15px;
-    padding-right: 15px;
-    /* why isn't text-overflow working? */
-    text-overflow: ellipsis;
+    margin: 0 7px;
     border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_nametext {
-    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .mx_RoomHeader_settingsHint {
@@ -163,20 +158,23 @@ limitations under the License.
 }
 
 .mx_RoomHeader_topic {
-    max-height: 38px;
+    flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
     font-size: 13px;
-    margin-right: 13px;
+    margin: 0 7px;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
+    line-height: 1.2em;
+    max-height: 2.4em;
 }
 
 .mx_RoomHeader_avatar {
     flex: 0;
     width: 28px;
     height: 28px;
+    margin: 0 7px;
 }
 
 .mx_RoomHeader_avatar .mx_BaseAvatar_image {
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 625920149d..92dd524277 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -302,10 +302,8 @@ module.exports = React.createClass({
                     topic = ev.getContent().topic;
                 }
             }
-            if (topic) {
-                topicElement =
-                    <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
-            }
+            topicElement =
+                <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
         }
 
         let roomAvatar = null;
@@ -413,7 +411,7 @@ module.exports = React.createClass({
 
         if (!this.props.editing) {
             rightRow =
-                <div className="mx_RoomHeader_rightRow">
+                <div className="mx_RoomHeader_buttons">
                     { settingsButton }
                     { pinnedEventsButton }
                     { shareRoomButton }
@@ -427,15 +425,9 @@ module.exports = React.createClass({
         return (
             <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_leftRow">
-                        <div className="mx_RoomHeader_avatar">
-                            { roomAvatar }
-                        </div>
-                        <div className="mx_RoomHeader_info">
-                            { name }
-                            { topicElement }
-                        </div>
-                    </div>
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                    { name }
+                    { topicElement }
                     { spinner }
                     { saveButton }
                     { cancelButton }