[gnome-documents] mainToolbar: use GdHeaderBar and GdHeaderButtons

[Cosimo Cecchi <cosimoc src gnome org>]

commit 79f5a62981778ca40091839d8c0fc9147a01dd8a
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Tue Feb 19 19:05:15 2013 -0500

    mainToolbar: use GdHeaderBar and GdHeaderButtons

 configure.ac       |    1 +
 src/edit.js        |   14 ++++++----
 src/mainToolbar.js |   67 ++++++++++++++++++++++++++++------------------------
 src/preview.js     |   14 ++++++----
 4 files changed, 53 insertions(+), 43 deletions(-)
---
diff --git a/configure.ac b/configure.ac
index b7bf2c3..87c1ebb 100644
--- a/configure.ac
+++ b/configure.ac
@@ -95,6 +95,7 @@ PKG_CHECK_MODULES(MINER,
 
 LIBGD_INIT([
   gtk-hacks
+  header-bar
   main-view
   main-toolbar
   margin-container
diff --git a/src/edit.js b/src/edit.js
index 884d012..dce1c11 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -19,6 +19,7 @@
 
 const WebKit = imports.gi.WebKit;
 const Soup = imports.gi.Soup;
+const Gd = imports.gi.Gd;
 const GdPrivate = imports.gi.GdPrivate;
 const Gdk = imports.gi.Gdk;
 const Gio = imports.gi.Gio;
@@ -185,17 +186,18 @@ const EditToolbar = new Lang.Class({
         let iconName =
             (this.toolbar.get_direction() == Gtk.TextDirection.RTL) ?
             'go-next-symbolic' : 'go-previous-symbolic';
-        let backButton =
-            this.toolbar.add_button(iconName, _("Back"), true);
+        let backButton = new Gd.HeaderSimpleButton({ symbolic_icon_name: iconName,
+                                                     label: _("Back") });
+        this.toolbar.pack_start(backButton);
         backButton.connect('clicked', Lang.bind(this,
             function() {
                 Application.documentManager.setActiveItem(null);
             }));
 
-        let viewButton =
-            this.toolbar.add_button(null, _("View"), false);
+        let viewButton = new Gd.HeaderSimpleButton({ label: _("View"),
+                                                     action_name: 'app.view-current' });
         viewButton.get_style_context().add_class('suggested-action');
-        viewButton.set_action_name('app.view-current');
+        this.toolbar.pack_end(viewButton);
 
         this._setToolbarTitle();
         this.widget.show_all();
@@ -215,6 +217,6 @@ const EditToolbar = new Lang.Class({
         if (doc)
             primary = doc.name;
 
-        this.toolbar.set_labels(primary, null);
+        this.toolbar.set_title(primary);
     }
 });
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index 77f6772..d61909f 100644
--- a/src/mainToolbar.js
+++ b/src/mainToolbar.js
@@ -43,8 +43,7 @@ const MainToolbar = new Lang.Class({
         this.widget = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
         this.widget.show();
 
-        this.toolbar = new Gd.MainToolbar({ icon_size: Gtk.IconSize.MENU });
-        this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_MENUBAR);
+        this.toolbar = new Gd.HeaderBar();
         this.widget.add(this.toolbar);
         this.toolbar.show();
 
@@ -59,9 +58,10 @@ const MainToolbar = new Lang.Class({
     },
 
     addSearchButton: function() {
-        let searchButton =
-            this.toolbar.add_toggle('edit-find-symbolic', _("Search"), false);
-        searchButton.action_name = 'app.search';
+        let searchButton = new Gd.HeaderToggleButton({ symbolic_icon_name: 'edit-find-symbolic',
+                                                       label: _("Search"),
+                                                       action_name: 'app.search' });
+        this.toolbar.pack_end(searchButton);
     }
 });
 
@@ -74,6 +74,7 @@ const OverviewToolbar = new Lang.Class({
         this._collBackButton = null;
         this._collectionId = 0;
         this._selectionChangedId = 0;
+        this._selectionMenu = null;
 
         this.parent();
 
@@ -125,7 +126,6 @@ const OverviewToolbar = new Lang.Class({
         let selectionMode = Application.selectionController.getSelectionMode();
         let activeCollection = Application.collectionManager.getActiveItem();
         let primary = null;
-        let detail = null;
 
         if (!selectionMode) {
             if (activeCollection) {
@@ -144,41 +144,42 @@ const OverviewToolbar = new Lang.Class({
             }
         } else {
             let length = Application.selectionController.getSelection().length;
+            let label = null;
 
             if (length == 0)
-                detail = _("Click on items to select them");
+                label = _("Click on items to select them");
             else
-                detail = Gettext.ngettext("%d selected",
-                                          "%d selected",
-                                          length).format(length);
+                label = Gettext.ngettext("%d selected",
+                                         "%d selected",
+                                         length).format(length);
 
-            if (activeCollection) {
-                primary = activeCollection.name;
-            } else if (length != 0) {
-                primary = detail;
-                detail = null;
-            }
+            if (activeCollection)
+                primary = ("<b>%s</b>  (%s)").format(activeCollection.name, label);
+            else
+                primary = label;
         }
 
-        if (detail)
-            detail = '(' + detail + ')';
-
-        this.toolbar.set_labels(primary, detail);
+        if (this._selectionMenu)
+            this._selectionMenu.set_label(primary);
+        else
+            this.toolbar.set_title(primary);
     },
 
     _populateForSelectionMode: function() {
         this.toolbar.get_style_context().add_class('selection-mode');
-        this.toolbar.reset_style();
 
         this.addSearchButton();
 
         let builder = new Gtk.Builder();
         builder.add_from_resource('/org/gnome/documents/selection-menu.ui');
         let selectionMenu = builder.get_object('selection-menu');
-        this.toolbar.set_labels_menu(selectionMenu);
+        this._selectionMenu = new Gd.HeaderMenuButton({ menu_model: selectionMenu,
+                                                        use_markup: true });
+        this._selectionMenu.get_style_context().add_class('selection-menu');
+        this.toolbar.set_custom_title(this._selectionMenu);
 
-        let selectionButton =
-            this.toolbar.add_button(null, _("Done"), false);
+        let selectionButton = new Gd.HeaderSimpleButton({ label: _("Done") });
+        this.toolbar.pack_end(selectionButton);
         selectionButton.get_style_context().add_class('suggested-action');
         selectionButton.connect('clicked', Lang.bind(this,
             function() {
@@ -195,8 +196,10 @@ const OverviewToolbar = new Lang.Class({
         let item = Application.collectionManager.getActiveItem();
 
         if (item && !this._collBackButton) {
-            this._collBackButton =
-                this.toolbar.add_button('go-previous-symbolic', _("Back"), true);
+            this._collBackButton = new Gd.HeaderSimpleButton({ symbolic_icon_name: 'go-previous-symbolic',
+                                                               label: _("Back"),
+                                                               visible: true });
+            this.toolbar.pack_start(this._collBackButton);
             this._collBackButton.connect('clicked', Lang.bind(this,
                 function() {
                     Application.documentManager.activatePreviousCollection();
@@ -217,8 +220,9 @@ const OverviewToolbar = new Lang.Class({
         this._checkCollectionBackButton();
         this.addSearchButton();
 
-        let selectionButton =
-            this.toolbar.add_button('object-select-symbolic', _("Select Items"), false);
+        let selectionButton = new Gd.HeaderSimpleButton({ symbolic_icon_name: 'object-select-symbolic',
+                                                          label: _("Select Items") });
+        this.toolbar.pack_end(selectionButton);
         selectionButton.connect('clicked', Lang.bind(this,
             function() {
                 Application.selectionController.setSelectionMode(true);
@@ -232,7 +236,8 @@ const OverviewToolbar = new Lang.Class({
 
     _clearStateData: function() {
         this._collBackButton = null;
-        this.toolbar.set_labels_menu(null);
+        this._selectionMenu = null;
+        this.toolbar.set_custom_title(null);
 
         if (this._collectionId != 0) {
             Application.collectionManager.disconnect(this._collectionId);
@@ -249,8 +254,8 @@ const OverviewToolbar = new Lang.Class({
         this._clearStateData();
 
         this.toolbar.get_style_context().remove_class('selection-mode');
-        this.toolbar.reset_style();
-        this.toolbar.clear();
+        let children = this.toolbar.get_children();
+        children.forEach(function(child) { child.destroy(); });
     },
 
     _resetToolbarMode: function() {
diff --git a/src/preview.js b/src/preview.js
index 61a0aa0..c9c584d 100644
--- a/src/preview.js
+++ b/src/preview.js
@@ -785,8 +785,9 @@ const PreviewToolbar = new Lang.Class({
         let iconName =
             (this.toolbar.get_direction() == Gtk.TextDirection.RTL) ?
             'go-next-symbolic' : 'go-previous-symbolic';
-        let backButton =
-            this.toolbar.add_button(iconName, _("Back"), true);
+        let backButton = new Gd.HeaderSimpleButton({ symbolic_icon_name: iconName,
+                                                     label: _("Back") });
+        this.toolbar.pack_start(backButton);
         backButton.connect('clicked', Lang.bind(this,
             function() {
                 Application.documentManager.setActiveItem(null);
@@ -798,9 +799,10 @@ const PreviewToolbar = new Lang.Class({
 
         // menu button, on the right of the toolbar
         let previewMenu = this._getPreviewMenu();
-        let menuButton = this.toolbar.add_menu('emblem-system-symbolic', null, false);
-        menuButton.set_menu_model(previewMenu);
-        menuButton.set_action_name('app.gear-menu');
+        let menuButton = new Gd.HeaderMenuButton({ menu_model: previewMenu,
+                                                   action_name: 'app.gear-menu',
+                                                   symbolic_icon_name: 'emblem-system-symbolic' });
+        this.toolbar.pack_end(menuButton);
 
         this._setToolbarTitle();
         this.toolbar.show_all();
@@ -855,7 +857,7 @@ const PreviewToolbar = new Lang.Class({
         if (doc)
             primary = doc.name;
 
-        this.toolbar.set_labels(primary, null);
+        this.toolbar.set_title(primary);
     },
 
     setModel: function(model) {