[polari] roomList: Extent headers to the full sidebar width

[Florian Müllner <fmuellner src gnome org>]

commit 65a5e2afbb989c67eac5f1c998ee19015d08f694
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Jan 24 22:56:29 2016 +0100

    roomList: Extent headers to the full sidebar width
    
    The current room header style is slightly odd: On the one hand, we use the
    'row' CSS name to style it like a row (at this time: single background color
    with no borders), on the other hand we add left and right margins that make
    the header appear more like a button inside a row.
    Resolve that inconsistency by removing the margins and slightly tweaking
    the style to be more consistent with "normal" rows while maintaining the
    current visuals when not active/hovered.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=761269

 data/resources/application.css     |   17 +++++++++++++----
 data/resources/room-list-header.ui |   20 ++++++++++++++------
 src/roomList.js                    |   20 ++++++++++++--------
 3 files changed, 39 insertions(+), 18 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index c2ec848..059bf0a 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -44,12 +44,21 @@
 
 .polari-room-list .room-list-header {
     font-size: smaller;
-    padding: 8px 6px 1px 8px;
-    border-bottom: 1px solid alpha(@borders, 0.55);
+    padding: 8px 7px 0;
 }
 
-.polari-room-list .room-list-header:checked {
-    background-color: @polari_dark_bg_color;
+.polari-room-list .room-list-header label:dir(ltr),
+.polari-room-list .room-list-header stack:dir(rtl) {
+    padding-left: 8px;
+}
+
+.polari-room-list .room-list-header stack:dir(ltr),
+.polari-room-list .room-list-header label:dir(rtl) {
+    padding-right: 8px;
+}
+
+.polari-room-list .room-list-header separator {
+    background-color: alpha(@borders, 0.55);
 }
 
 .polari-room-list row {
diff --git a/data/resources/room-list-header.ui b/data/resources/room-list-header.ui
index c3f8762..658029f 100644
--- a/data/resources/room-list-header.ui
+++ b/data/resources/room-list-header.ui
@@ -3,8 +3,6 @@
   <template class="Gjs_RoomListHeader" parent="GtkMenuButton">
     <property name="popover">connectionPopover</property>
     <property name="margin-bottom">4</property>
-    <property name="margin-start">7</property>
-    <property name="margin-end">7</property>
     <property name="focus-on-click">False</property>
     <property name="visible">True</property>
     <style>
@@ -12,8 +10,10 @@
       <class name="activatable" />
     </style>
     <child>
-      <object class="GtkBox">
-        <property name="spacing">2</property>
+      <object class="GtkGrid">
+        <property name="column-spacing">6</property>
+        <property name="row-spacing">2</property>
+        <property name="margin-top">1</property>
         <property name="visible">True</property>
         <style>
           <class name="dim-label" />
@@ -30,8 +30,6 @@
         <child>
           <object class="GtkStack" id="iconStack">
             <property name="transition-type">crossfade</property>
-            <property name="margin-end">4</property>
-            <property name="margin-start">4</property>
             <property name="valign">center</property>
             <property name="visible">True</property>
             <child>
@@ -61,6 +59,16 @@
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+          </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">1</property>
+            <property name="width">2</property>
+          </packing>
+        </child>
       </object>
     </child>
   </template>
diff --git a/src/roomList.js b/src/roomList.js
index 18beef4..51e568c 100644
--- a/src/roomList.js
+++ b/src/roomList.js
@@ -9,6 +9,14 @@ const Tp = imports.gi.TelepathyGLib;
 const ChatroomManager = imports.chatroomManager;
 const Lang = imports.lang;
 
+function _onPopoverVisibleChanged(popover) {
+    let context = popover.relative_to.get_style_context();
+    if (popover.visible)
+        context.add_class('has-open-popup');
+    else
+        context.remove_class('has-open-popup');
+}
+
 const RoomRow = new Lang.Class({
     Name: 'RoomRow',
 
@@ -106,14 +114,7 @@ const RoomRow = new Lang.Class({
                         'app.leave-room(("%s", ""))'.format(room.id));
 
             this._popover = Gtk.Popover.new_from_model(this.widget, menu);
-            this._popover.connect('notify::visible', Lang.bind(this,
-                function() {
-                    let roomContext = this.widget.get_style_context();
-                    if (this._popover.visible)
-                        roomContext.add_class('has-open-popup');
-                    else
-                        roomContext.remove_class('has-open-popup');
-                }));
+            this._popover.connect('notify::visible', _onPopoverVisibleChanged);
             this._popover.position = Gtk.PositionType.BOTTOM;
         }
         this._popover.show();
@@ -178,6 +179,9 @@ const RoomListHeader = new Lang.Class({
         this._app = Gio.Application.get_default();
 
         this.parent(params);
+
+        this.popover.connect('notify::visible', _onPopoverVisibleChanged);
+
         let target = new GLib.Variant('o', this._account.get_object_path());
         this._popoverReconnect.action_target = target;
         this._popoverRemove.action_target = target;