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

[Alessandro Bono <abono src gnome org>]

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

    mainToolbar: Move "view as" buttons into a popover

 data/org.gnome.Documents.data.gresource.xml |    1 +
 data/ui/view-menu.ui                        |   62 +++++++++++++++++++++++++++
 src/mainToolbar.js                          |   33 +++++---------
 3 files changed, 75 insertions(+), 21 deletions(-)
---
diff --git a/data/org.gnome.Documents.data.gresource.xml b/data/org.gnome.Documents.data.gresource.xml
index 506a0f0..fdf09f5 100644
--- a/data/org.gnome.Documents.data.gresource.xml
+++ b/data/org.gnome.Documents.data.gresource.xml
@@ -7,6 +7,7 @@
     <file preprocess="xml-stripblanks">ui/preview-context-menu.ui</file>
     <file preprocess="xml-stripblanks">ui/preview-menu.ui</file>
     <file preprocess="xml-stripblanks">ui/selection-menu.ui</file>
+    <file preprocess="xml-stripblanks">ui/view-menu.ui</file>
     <file alias="ui/dnd-counter.svg" preprocess="to-pixdata">media/dnd-counter.svg</file>
     <file alias="ui/thumbnail-frame.png" preprocess="to-pixdata">media/thumbnail-frame.png</file>
   </gresource>
diff --git a/data/ui/view-menu.ui b/data/ui/view-menu.ui
new file mode 100644
index 0000000..989a656
--- /dev/null
+++ b/data/ui/view-menu.ui
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class ="GtkPopoverMenu" id="viewMenu">
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="border_width">9</property>
+        <property name="orientation">vertical</property>
+        <property name="width_request">160</property>
+        <child>
+          <object class="GtkBox" id="viewsBox">
+            <property name="visible">True</property>
+            <property name="orientation">horizontal</property>
+            <property name="margin-bottom">6</property>
+            <style>
+                <class name="linked"/>
+            </style>
+            <child>
+              <object class="GtkModelButton" id="gridButton">
+                <property name="visible">True</property>
+                <property name="text">Grid</property>
+                <property name="action-name">app.view-as</property>
+                <property name="action-target">'icon'</property>
+                <property name="iconic">True</property>
+                <property name="centered">True</property>
+                <property name="icon">iconGrid</property>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="listButton">
+                <property name="visible">True</property>
+                <property name="text">List</property>
+                <property name="action-name">app.view-as</property>
+                <property name="action-target">'list'</property>
+                <property name="iconic">True</property>
+                <property name="centered">True</property>
+                <property name="icon">iconList</property>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+  <object class="GThemedIcon" id="iconGrid">
+    <property name="name">view-grid-symbolic</property>
+  </object>
+  <object class="GThemedIcon" id="iconList">
+    <property name="name">view-list-symbolic</property>
+  </object>
+</interface>
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index eb82ee4..1b6f0d4 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,13 @@ const OverviewToolbar = new Lang.Class({
             }));
     },
 
-    _addViewAsButtons: function() {
-        let viewAsBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
-                                      spacing: 0 });
-        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);
+    _addViewAsButton: function() {
+        let builder = new Gtk.Builder();
+        builder.add_from_resource('/org/gnome/Documents/ui/view-menu.ui');
+        let viewMenu = builder.get_object('viewMenu');
+
+        this._viewButton = new Gtk.MenuButton({ tooltip_text: _("View items as a list or a grid"), popover: 
viewMenu });
+        this.toolbar.pack_end(this._viewButton);
 
         this._viewSettingsId = Application.application.connect('action-state-changed::view-as',
             Lang.bind(this, this._updateViewAsButtons));
@@ -172,8 +162,8 @@ 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 })
     },
 
     _setToolbarTitle: function() {
@@ -282,7 +272,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 +283,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);