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

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

commit 393c1b1016b4cd65b455ff283506596bd178d6b6
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                |   39 +++++++++++++++++++++++++++------------
 4 files changed, 36 insertions(+), 48 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 1384fcb..d01c3a1 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..8bdb744 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;
     },