[gnome-documents] mainToolbar: Move "view as" buttons into a popover

[Alessandro Bono <abono src gnome org>]

commit 90a046614c6be35ff530a792337bb24b21bf3ad6
Author: Alessandro Bono <abono gnome org>
Date:   Thu Oct 15 22:05:10 2015 +0200

    mainToolbar: Move "view as" buttons into a popover
    
    https://bugzilla.gnome.org/show_bug.cgi?id=683563

 data/org.gnome.Documents.data.gresource.xml |    1 +
 data/ui/view-menu.ui                        |   64 +++++++++++++++++++++++++++
 po/POTFILES.in                              |    1 +
 src/mainToolbar.js                          |   45 +++++++------------
 4 files changed, 83 insertions(+), 28 deletions(-)
---
diff --git a/data/org.gnome.Documents.data.gresource.xml b/data/org.gnome.Documents.data.gresource.xml
index b5f3fd7..482c42c 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..289308f
--- /dev/null
+++ b/data/ui/view-menu.ui
@@ -0,0 +1,64 @@
+<?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">
+                <property name="visible">True</property>
+                <property name="text">Grid</property>
+                <property name="tooltip-text" translatable="yes">View items as a grid of icons</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">
+                <property name="visible">True</property>
+                <property name="text">List</property>
+                <property name="tooltip-text" translatable="yes">View items as a 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/po/POTFILES.in b/po/POTFILES.in
index 1029005..dab6e21 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -11,6 +11,7 @@ data/org.gnome.documents.gschema.xml
 [type: gettext/glade]data/ui/preview-context-menu.ui
 [type: gettext/glade]data/ui/preview-menu.ui
 [type: gettext/glade]data/ui/selection-menu.ui
+[type: gettext/glade]data/ui/view-menu.ui
 src/application.js
 src/documents.js
 src/edit.js
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index 055e35d..deb05e0 100644
--- a/src/mainToolbar.js
+++ b/src/mainToolbar.js
@@ -1,4 +1,5 @@
 /*
+ * Copyright (c) 2015 Alessandro Bono
  * Copyright (c) 2011, 2013, 2015 Red Hat, Inc.
  *
  * Gnome Documents is free software; you can redistribute it and/or modify
@@ -109,8 +110,7 @@ const OverviewToolbar = new Lang.Class({
         this._collBackButton = null;
         this._collectionId = 0;
         this._selectionChangedId = 0;
-        this._viewGridButton = null;
-        this._viewListButton = null;
+        this._viewMenuButton = null;
         this._viewSettingsId = 0;
         this._activeCollection = null;
         this._infoUpdatedId = 0;
@@ -146,34 +146,24 @@ 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);
+    _addViewMenuButton: function() {
+        let builder = new Gtk.Builder();
+        builder.add_from_resource('/org/gnome/Documents/ui/view-menu.ui');
+        let viewMenu = builder.get_object('viewMenu');
+
+        this._viewMenuButton = new Gtk.MenuButton({ tooltip_text: _("View items as a list or a grid"),
+                                                    popover: viewMenu });
+        this.toolbar.pack_end(this._viewMenuButton);
 
         this._viewSettingsId = Application.application.connect('action-state-changed::view-as',
-            Lang.bind(this, this._updateViewAsButtons));
-        this._updateViewAsButtons();
+            Lang.bind(this, this._updateViewMenuButton));
+        this._updateViewMenuButton();
     },
 
-    _updateViewAsButtons: function() {
+    _updateViewMenuButton: 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._viewMenuButton.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._addViewMenuButton();
         this.addSearchButton();
 
         // connect to active collection changes while in this mode
@@ -293,8 +283,7 @@ const OverviewToolbar = new Lang.Class({
 
     _clearStateData: function() {
         this._collBackButton = null;
-        this._viewGridButton = null;
-        this._viewListButton = null;
+        this._viewMenuButton = null;
         this.toolbar.set_custom_title(null);
 
         if (this._collectionId != 0) {