[gnome-documents] all: rework the UI layout towards the new mockups

[Cosimo Cecchi <cosimoc src gnome org>]

commit 67b2007a35255b689f423a56546844423dc0c099
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Mon Aug 1 17:20:26 2011 +0200

    all: rework the UI layout towards the new mockups
    
    - turn the "Sources" combobox into a regular button
    - pack the toolbar into the view on the right and remove the primary
      toolbar hint from it
    - link the currently selected source in GSettings

 data/org.gnome.documents.gschema.xml.in |    5 ++
 src/mainToolbar.js                      |    5 --
 src/mainWindow.js                       |   24 ++++----
 src/sidebar.js                          |  107 +++++++++++++++++++++++++-----
 4 files changed, 106 insertions(+), 35 deletions(-)
---
diff --git a/data/org.gnome.documents.gschema.xml.in b/data/org.gnome.documents.gschema.xml.in
index 4985405..ba8ddaf 100644
--- a/data/org.gnome.documents.gschema.xml.in
+++ b/data/org.gnome.documents.gschema.xml.in
@@ -5,5 +5,10 @@
       <_summary>List view</_summary>
       <_description>Enable list view</_description>
     </key>
+    <key name="active-source" type="s">
+      <default>'all'</default>
+      <_summary>The active source filter</_summary>
+      <_description>The last active source filter</_description>
+    </key>
   </schema>
 </schemalist>
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index abadf93..7653ee2 100644
--- a/src/mainToolbar.js
+++ b/src/mainToolbar.js
@@ -37,12 +37,7 @@ function MainToolbar() {
 MainToolbar.prototype = {
     _init: function() {
         this._searchEntryTimeout = 0;
-        this._initGtkToolbar();
-    },
-
-    _initGtkToolbar: function() {
         this.widget = new Gtk.Toolbar({ icon_size: Gtk.IconSize.MENU });
-        this.widget.get_style_context().add_class('primary-toolbar');
     },
 
     _clearToolbar: function() {
diff --git a/src/mainWindow.js b/src/mainWindow.js
index ce0c933..5ec238c 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -56,8 +56,7 @@ MainWindow.prototype = {
         this._loaderTimeout = 0;
         this._lastFilter = '';
 
-        //TODO save this in GSettings?
-        this._currentSourceId = 'all';
+        this._currentSourceId = Main.settings.get_string('active-source');
 
         this.window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL,
                                        window_position: Gtk.WindowPosition.CENTER,
@@ -72,23 +71,22 @@ MainWindow.prototype = {
             this._refreshViewSettings(true);
         }));
 
-        this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL });
+        this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL });
         this.window.add(this._grid);
 
+        this._sidebar = new Sidebar.Sidebar();
+        this._sidebar.connect('source-filter-changed', Lang.bind(this, this._onSourceFilterChanged));
+        this._grid.add(this._sidebar.widget);
+
+        this._viewContainer = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL });
+        this._grid.add(this._viewContainer);
+
         this._toolbar = new MainToolbar.MainToolbar();
         this._toolbar.connect('search-text-changed',
                               Lang.bind(this, this._onToolbarSearchChanged));
         this._toolbar.connect('back-clicked',
                               Lang.bind(this, this._onToolbarBackClicked));
-
-        this._grid.add(this._toolbar.widget);
-
-        this._viewContainer = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL });
-        this._grid.add(this._viewContainer);
-
-        this._sidebar = new Sidebar.Sidebar();
-        this._sidebar.connect('source-filter-changed', Lang.bind(this, this._onSourceFilterChanged));
-        this._viewContainer.add(this._sidebar.widget);
+        this._viewContainer.add(this._toolbar.widget);
 
         this._scrolledWin = new Gtk.ScrolledWindow({ hexpand: true,
                                                      vexpand: true});
@@ -259,6 +257,8 @@ MainWindow.prototype = {
 
     _onSourceFilterChanged: function(sidebar, id) {
         this._currentSourceId = id;
+        Main.settings.set_string('active-source', id);
+
         this._model.setAccountFilter(id);
     }
 }
diff --git a/src/sidebar.js b/src/sidebar.js
index 5aaaa15..a0dcb00 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -19,6 +19,7 @@
  *
  */
 
+const Gd = imports.gi.Gd;
 const Gtk = imports.gi.Gtk;
 const _ = imports.gettext.gettext;
 
@@ -26,44 +27,114 @@ const Lang = imports.lang;
 const Signals = imports.signals;
 
 const AccountsModel = imports.accountsModel;
+const Main = imports.main;
 
 const _SIDEBAR_WIDTH_REQUEST = 240;
 
+function SourcesPage() {
+    this._init();
+}
+
+SourcesPage.prototype = {
+    _init: function() {
+        this._accountsModel = new AccountsModel.AccountsModel();
+        this._currentSourceId = Main.settings.get_string('active-source');
+
+        this._treeView = new Gtk.TreeView({ headers_visible: false,
+                                            no_show_all: true });
+        Gd.gtk_tree_view_set_activate_on_single_click(this._treeView, true);
+        this.widget = this._treeView;
+        this._treeView.set_model(this._accountsModel.model);
+
+        let selection = this._treeView.get_selection();
+        selection.set_mode(Gtk.SelectionMode.SINGLE);
+
+        this._treeView.connect('row-activated', Lang.bind(this,
+            function(view, path) {
+                let iter = this._accountsModel.model.get_iter(path)[1];
+                let id = this._accountsModel.model.get_value(iter, AccountsModel.ModelColumns.ID);
+                let name = this._accountsModel.model.get_value(iter, AccountsModel.ModelColumns.NAME);
+
+                this._currentSourceId = id;
+
+                this.emit('source-filter-changed', id, name);
+            }));
+
+        let col = new Gtk.TreeViewColumn();
+        this._treeView.append_column(col);
+
+        this._rendererRadio = new Gtk.CellRendererToggle({ radio: true });
+        col.pack_start(this._rendererRadio, false);
+
+        col.set_cell_data_func(this._rendererRadio, Lang.bind(this,
+            function(col, cell, model, iter) {
+                let id = model.get_value(iter, AccountsModel.ModelColumns.ID);
+
+                if (id == this._currentSourceId)
+                    this._rendererRadio.active = true;
+                else
+                    this._rendererRadio.active = false;
+            },
+            null, null));
+
+        this._rendererText = new Gtk.CellRendererText();
+        col.pack_start(this._rendererText, true);
+        col.add_attribute(this._rendererText,
+                          'text', AccountsModel.ModelColumns.NAME);
+
+        this._rendererArrow = new Gtk.CellRendererPixbuf({ icon_name: 'go-next-symbolic' });
+        col.pack_start(this._rendererArrow, false);
+    }
+};
+Signals.addSignalMethods(SourcesPage.prototype);
+
 function Sidebar() {
     this._init();
 }
 
 Sidebar.prototype = {
     _init: function() {
-        this._accountsModel = new AccountsModel.AccountsModel();
-        this.widget = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                               width_request: _SIDEBAR_WIDTH_REQUEST });
-        this.widget.get_style_context().add_class('sidebar');
+        this.widget = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
+        this.widget.get_style_context().add_class(Gtk.STYLE_CLASS_SIDEBAR);
 
         this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
-                                    border_width: 6 });
+                                    border_width: 6,
+                                    width_request: _SIDEBAR_WIDTH_REQUEST,
+                                    column_homogeneous: true });
         this.widget.add_with_viewport(this._grid);
 
-        this._combobox = new Gtk.ComboBox();
-        this._combobox.set_model(this._accountsModel.model);
-
-        this._comboRenderer = new Gtk.CellRendererText({ width: 200 });
-        this._combobox.pack_start(this._comboRenderer, false);
-        this._combobox.add_attribute(this._comboRenderer,
-                                     "text", AccountsModel.ModelColumns.NAME);
+        let buttonContent = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
+                                           row_spacing: 6 });
+        // FIXME: setting yalign here seems wrong, but why are those not aligned
+        // otherwise?
+        buttonContent.add(new Gtk.Image({ icon_size: Gtk.IconSize.MENU,
+                                          icon_name: 'go-previous-symbolic',
+                                          yalign: 0.75 }));
+        this._buttonLabel = new Gtk.Label({ label: _('Sources') });
+        buttonContent.add(this._buttonLabel);
 
-        this._combobox.connect('changed', Lang.bind(this, this._onComboBoxChanged));
-        this._combobox.set_active(0);
+        this._sourcesButton = new Gtk.Button({ child: buttonContent });
+        this._grid.add(this._sourcesButton);
+        this._sourcesButton.connect('clicked', Lang.bind(this, this._onSourcesButtonClicked));
 
-        this._grid.add(this._combobox);
+        this._sourcesPage = new SourcesPage();
+        this._grid.add(this._sourcesPage.widget);
+        this._sourcesPage.connect('source-filter-changed', Lang.bind(this, this._onSourceFilterChanged));
 
         this.widget.show_all();
     },
 
-    _onComboBoxChanged: function() {
-        let iter = this._combobox.get_active_iter()[1];
-        let id = this._accountsModel.model.get_value(iter, AccountsModel.ModelColumns.ID);
+    _onSourcesButtonClicked: function() {
+        this._sourcesButton.hide();
+        this._sourcesPage.widget.show();
+    },
+
+    _onSourceFilterChanged: function(sourcePage, id, name) {
+        this._sourcesPage.widget.hide();
+        this._sourcesButton.show();
+        this._buttonLabel.label = name;
 
+        // forward the signal
         this.emit('source-filter-changed', id);
     }
 };