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

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

commit 6ec8906d93e7ca3124c45ebfb401917dfc8b3fdb
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              |   29 ++++++++++++++---------------
 src/userList.js                |   39 +++++++++++++++++++++++++++------------
 4 files changed, 42 insertions(+), 54 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index 6af03af..8792bcb 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 443ab71..b12871e 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -322,30 +322,6 @@
             <child>
               <placeholder/>
             </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 22e2c7d..7a09a5c 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -50,12 +50,22 @@ const MainWindow = new Lang.Class({
 
         this._updateUserListLabel();
 
+        this._userListAction = app.lookup_action('user-list');
+
+        app.connect('action-state-changed::user-list', Lang.bind(this,
+            function(group, actionName, value) {
+                this._userListPopover.widget.visible = value.get_boolean();
+            }));
+        this._userListPopover.widget.connect('notify::visible', Lang.bind(this,
+            function() {
+                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();
@@ -237,19 +247,8 @@ 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);
-
-        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();
-            }));
-        revealer.connect('notify::child-revealed', Lang.bind(this,
-            function() {
-                this._userListSidebar.animateEntry = revealer.child_revealed;
-            }));
+        this._userListPopover = new UserList.UserListPopover();
+        this._userListPopover.widget.relative_to = this._showUserListButton;
     },
 
     showJoinRoomDialog: function() {
diff --git a/src/userList.js b/src/userList.js
index 53f72af..51a4577 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) {
@@ -99,7 +114,7 @@ const UserListSidebar = new Lang.Class({
             return;
         let userList = this._rooms[this._room.id];
         let [, natHeight] = userList.widget.get_child().get_preferred_height();
-        let height = this.widget.get_allocated_height();
+        let height = userList.widget.get_allocated_height();
         this._revealer.reveal_child = this._entry.text != '' ||
                                       natHeight > height;
     },