[polari/popover: 1/2] ui: Move user list into a popover

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

commit 74bf3534f79f28796598807e56582cf0df05e65d
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Jan 23 08:53:39 2014 -0500

    ui: Move user list into a popover
    
    Currently the user list design is quite odd, as it looks very much
    like a traditional sidebar, but behaves different being overlaid
    over the chat log. Bring the look in line with the behavior by using
    a popover instead, which is what was in the mockups all along.

 data/resources/application.css |    4 +--
 data/resources/main-window.ui  |   24 ---------------------
 src/mainWindow.js              |   17 +++++++--------
 src/userList.js                |   44 ++++++++++++++++++++++++++++++----------
 4 files changed, 42 insertions(+), 47 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index b989bd4..5d2482a 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -10,12 +10,10 @@
     border-image: none;
 }
 
-.polari-sidebar.polari-room-list:dir(ltr),
-.polari-sidebar.polari-user-list:dir(rtl) {
+.polari-sidebar.polari-room-list:dir(ltr) {
     border-width: 0 1px 0 0;
 }
 
-.polari-sidebar.polari-user-list:dir(ltr),
 .polari-sidebar.polari-room-list:dir(rtl) {
     border-width: 0 0 0 1px;
 }
diff --git a/data/resources/main-window.ui b/data/resources/main-window.ui
index 02dc0d5..c5842b8 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -351,30 +351,6 @@
                     </child>
                   </object>
                 </child>
-                <child type="overlay">
-                  <object class="GtkRevealer" id="user_list_revealer">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">end</property>
-                    <property name="hexpand">False</property>
-                    <property name="transition_type">slide-left</property>
-                    <child>
-                      <object class="PolariFixedSizeFrame" id="user_list_sidebar">
-                        <property name="visible">True</property>
-                        <property name="hexpand">False</property>
-                        <property name="width">200</property>
-                        <style>
-                          <class name="sidebar"/>
-                          <class name="polari-sidebar"/>
-                          <class name="polari-user-list"/>
-                        </style>
-                        <child>
-                          <placeholder/>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
               </object>
               <packing>
                 <property name="expand">False</property>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index cd51687..a457b5b 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -78,26 +78,25 @@ const MainWindow = new Lang.Class({
         this._roomList = new RoomList.RoomList();
         scroll.add(this._roomList.widget);
 
-        let sidebar = builder.get_object('user_list_sidebar');
-        this._userListSidebar = new UserList.UserListSidebar();
-        sidebar.add(this._userListSidebar.widget);
+        this._userListPopover = new UserList.UserListPopover();
+        this._userListPopover.widget.relative_to = this._showUserListButton;
+
+        this._userListAction = app.lookup_action('user-list');
 
-        let revealer = builder.get_object('user_list_revealer');
         app.connect('action-state-changed::user-list', Lang.bind(this,
             function(group, actionName, value) {
-                revealer.reveal_child = value.get_boolean();
+                this._userListPopover.widget.visible = value.get_boolean();
             }));
-        revealer.connect('notify::child-revealed', Lang.bind(this,
+        this._userListPopover.widget.connect('notify::visible', Lang.bind(this,
             function() {
-                this._userListSidebar.animateEntry = revealer.child_revealed;
+                if (!this._userListPopover.widget.visible)
+                    this._userListAction.change_state(GLib.Variant.new('b', false));
             }));
 
         this._selectionModeAction = app.lookup_action('selection-mode');
         this._selectionModeAction.connect('notify::state',
                     Lang.bind(this, this._onSelectionModeChanged));
 
-        this._userListAction = app.lookup_action('user-list');
-
         this.window.connect_after('key-press-event', Lang.bind(this,
             function(w, event) {
                 let [, keyval] = event.get_keyval();
diff --git a/src/userList.js b/src/userList.js
index 62e29e9..21904ef 100644
--- a/src/userList.js
+++ b/src/userList.js
@@ -8,12 +8,19 @@ const Tp = imports.gi.TelepathyGLib;
 const ChatroomManager = imports.chatroomManager;
 const Lang = imports.lang;
 
-const UserListSidebar = new Lang.Class({
-    Name: 'UserListSidebar',
+const UserListPopover = new Lang.Class({
+    Name: 'UserListPopover',
 
     _init: function() {
         this._createWidget();
 
+        this.widget.connect('map', Lang.bind(this, function() {
+            this._revealer.transition_duration = 0;
+        }));
+        this._revealer.connect('notify::child-revealed', Lang.bind(this, function() {
+            this._revealer.transition_duration = 250;
+        }));
+
         this._rooms = {};
         this._room = null;
 
@@ -26,15 +33,23 @@ const UserListSidebar = new Lang.Class({
                                   Lang.bind(this, this._activeRoomChanged));
     },
 
-    set animateEntry(animate) {
-        this._revealer.transition_duration = animate ? 250 : 0;
-    },
-
     _createWidget: function() {
-        this.widget = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        this.widget = new Gtk.Popover({ modal: true,
+                                        position: Gtk.PositionType.TOP,
+                                        vexpand: true,
+                                        margin_left: 12,
+                                        margin_right: 12,
+                                        margin_bottom: 12 });
+        this.widget.set_border_width(6);
+        this.widget.set_size_request(250, -1);
+
+        this.widget.get_style_context().add_class('polari-user-list');
+
+        this._box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        this.widget.add(this._box);
 
         this._revealer = new Gtk.Revealer();
-        this.widget.add(this._revealer);
+        this._box.add(this._revealer);
 
         let frame = new Gtk.Frame();
         frame.get_style_context().add_class('polari-user-list-search-area');
@@ -43,7 +58,7 @@ const UserListSidebar = new Lang.Class({
         this._entry = new Gtk.SearchEntry({ margin: 4 });
         this._entry.connect('search-changed',
                             Lang.bind(this, this._updateFilter));
-        this._entry.connect_after('key-press-event', Lang.bind(this,
+        this._entry.connect('key-press-event', Lang.bind(this,
             function(w, event) {
                 let [, keyval] = event.get_keyval();
                 if (keyval == Gdk.KEY_Escape) {
@@ -56,9 +71,9 @@ const UserListSidebar = new Lang.Class({
 
         this._stack = new Gtk.Stack({ hexpand: true, vexpand: true });
         this._stack.transition_type = Gtk.StackTransitionType.CROSSFADE;
-        this.widget.add(this._stack);
+        this._box.add(this._stack);
 
-        this.widget.show_all();
+        this._box.show_all();
     },
 
     _roomAdded: function(roomManager, room) {
@@ -324,6 +339,13 @@ const UserList = new Lang.Class({
         this._list.connect('row-activated',
                            Lang.bind(this, this._onRowActivated));
 
+        // Workaround for GtkListBox not consuming button events and
+        // thus breaking the popover's modality
+        this._list.connect_after('button-press-event',
+                                 function() { return true; });
+        this._list.connect_after('button-release-event',
+                                 function() { return true; });
+
         this._room = room;
         this._rows = {};
         this._activeRow = null;