[gnome-documents/wip/abono/sort-by: 2/4] mainToolbar: Move "view as" buttons into a popover

[Alessandro Bono <abono src gnome org>]

commit cba10c03f0796319d2b5c2498b753bddf812f41a
Author: Alessandro Bono <shadow openaliasbox org>
Date:   Thu Oct 15 22:05:10 2015 +0200

    mainToolbar: Move "view as" buttons into a popover

 src/mainToolbar.js |   65 +++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 47 insertions(+), 18 deletions(-)
---
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index 29037b1..cadb9ce 100644
--- a/src/mainToolbar.js
+++ b/src/mainToolbar.js
@@ -109,6 +109,7 @@ const OverviewToolbar = new Lang.Class({
         this._collBackButton = null;
         this._collectionId = 0;
         this._selectionChangedId = 0;
+        this._viewButton = null;
         this._viewGridButton = null;
         this._viewListButton = null;
         this._viewSettingsId = 0;
@@ -146,24 +147,49 @@ const OverviewToolbar = new Lang.Class({
             }));
     },
 
-    _addViewAsButtons: function() {
+    _addViewAsButton: function() {
+        this._viewGridButton = new Gtk.RadioButton({ image: new Gtk.Image({ icon_name: 'view-grid-symbolic',
+                                                                            pixel_size: 16,
+                                                                            width_request: 64,
+                                                                            margin_top: 2,
+                                                                            margin_bottom: 2,
+                                                                            visible: true }),
+                                                     tooltip_text: _("View items as a grid of icons"),
+                                                     draw_indicator: false,
+                                                     visible: true,
+                                                     action_name: 'app.view-as',
+                                                     action_target: GLib.Variant.new('s', 'icon') });
+
+        this._viewListButton = new Gtk.RadioButton({ image: new Gtk.Image({ icon_name: 'view-list-symbolic',
+                                                                            pixel_size: 16,
+                                                                            width_request: 64,
+                                                                            margin_top: 2,
+                                                                            margin_bottom: 2,
+                                                                            visible: true }),
+                                                     tooltip_text: _("View items as a list"),
+                                                     draw_indicator: false,
+                                                     group: this._viewGridButton,
+                                                     visible: true,
+                                                     action_name: 'app.view-as',
+                                                     action_target: GLib.Variant.new('s', 'list') });
+
         let viewAsBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
-                                      spacing: 0 });
+                                      spacing: 0,
+                                      visible: true });
         viewAsBox.get_style_context().add_class('linked');
-        this.toolbar.pack_end(viewAsBox);
-
-        this._viewListButton = new Gtk.Button({ image: new Gtk.Image ({ icon_name: 'view-list-symbolic' }),
-                                                tooltip_text: _("View items as a list"),
-                                                no_show_all: true,
-                                                action_name: 'app.view-as',
-                                                action_target: GLib.Variant.new('s', 'list') });
-        viewAsBox.add(this._viewListButton);
-        this._viewGridButton = new Gtk.Button({ image: new Gtk.Image ({ icon_name: 'view-grid-symbolic' }),
-                                                tooltip_text: _("View items as a grid of icons"),
-                                                no_show_all: true,
-                                                action_name: 'app.view-as',
-                                                action_target: GLib.Variant.new('s', 'icon') });
         viewAsBox.add(this._viewGridButton);
+        viewAsBox.add(this._viewListButton);
+
+        let popoverBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
+                                       margin: 12,
+                                       spacing: 12,
+                                       visible: true });
+        popoverBox.add(viewAsBox);
+
+        let popover = new Gtk.Popover({ child: popoverBox });
+
+        this._viewButton = new Gtk.MenuButton({ tooltip_text: _("View items as a list or a grid"), popover: 
popover });
+        this.toolbar.pack_end(this._viewButton);
 
         this._viewSettingsId = Application.settings.connect('changed::view-as',
             Lang.bind(this, this._updateViewAsButtons));
@@ -172,8 +198,10 @@ const OverviewToolbar = new Lang.Class({
 
     _updateViewAsButtons: function() {
         let viewType = Application.settings.get_enum('view-as');
-        this._viewGridButton.visible = (viewType != Gd.MainViewType.ICON);
-        this._viewListButton.visible = (viewType != Gd.MainViewType.LIST);
+        let iconName = viewType == Gd.MainViewType.ICON ? 'view-grid-symbolic' : 'view-list-symbolic';
+        this._viewButton.image = new Gtk.Image({ icon_name: iconName, pixel_size: 16 })
+        this._viewGridButton.active = (viewType == Gd.MainViewType.ICON);
+        this._viewListButton.active = (viewType == Gd.MainViewType.LIST);
     },
 
     _setToolbarTitle: function() {
@@ -282,7 +310,7 @@ const OverviewToolbar = new Lang.Class({
                 Application.selectionController.setSelectionMode(true);
             }));
 
-        this._addViewAsButtons();
+        this._addViewAsButton();
         this.addSearchButton();
 
         // connect to active collection changes while in this mode
@@ -293,6 +321,7 @@ const OverviewToolbar = new Lang.Class({
 
     _clearStateData: function() {
         this._collBackButton = null;
+        this._viewButton = null;
         this._viewGridButton = null;
         this._viewListButton = null;
         this.toolbar.set_custom_title(null);