[gnome-documents] search-dropdown: add a first implementation of a search dropdown filter

[Cosimo Cecchi <cosimoc src gnome org>]

commit abd829cc97e213e1038cfc8a9ff4fa1fb591a1e8
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Fri Oct 28 17:49:31 2011 -0400

    search-dropdown: add a first implementation of a search dropdown filter
    
    As for the designs, this replaces the "Sources" button and sidebar page
    for a more powerful multi-filter selector accessible from the search
    entry toolbar.

 src/application.js |    3 +
 src/filters.js     |   12 ++++
 src/global.js      |    2 +
 src/mainWindow.js  |   11 ++++
 src/searchbar.js   |  152 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 5 files changed, 176 insertions(+), 4 deletions(-)
---
diff --git a/src/application.js b/src/application.js
index e22788c..5c4ebaf 100644
--- a/src/application.js
+++ b/src/application.js
@@ -46,6 +46,7 @@ const MainWindow = imports.mainWindow;
 const OffsetController = imports.offsetController;
 const Path = imports.path;
 const Query = imports.query;
+const Searchbar = imports.searchbar;
 const Selections = imports.selections;
 const Sources = imports.sources;
 const TrackerController = imports.trackerController;
@@ -144,6 +145,8 @@ Application.prototype = {
                         }
 
                         Global.sourceManager = new Sources.SourceManager();
+                        Global.matchManager = new Searchbar.MatchManager();
+                        Global.typeManager = new Searchbar.SearchTypeManager();
                         Global.queryBuilder = new Query.QueryBuilder();
                         Global.changeMonitor = new ChangeMonitor.TrackerChangeMonitor();
                         Global.collectionManager = new Collections.CollectionManager();
diff --git a/src/filters.js b/src/filters.js
index 414e872..b440881 100644
--- a/src/filters.js
+++ b/src/filters.js
@@ -29,6 +29,7 @@ function SearchFilterController() {
 
 SearchFilterController.prototype = {
     _init: function() {
+        this._dropdownState = false;
         this._filter = '';
     },
 
@@ -42,6 +43,17 @@ SearchFilterController.prototype = {
 
     getFilter: function() {
         return this._filter;
+    },
+
+    setDropownState: function(state) {
+        if (state != this._dropdownState) {
+            this._dropdownState = state;
+            this.emit('search-dropdown', this._dropdownState);
+        }
+    },
+
+    getDropdownState: function() {
+        return this._dropdownState;
     }
 };
 Signals.addSignalMethods(SearchFilterController.prototype);
diff --git a/src/global.js b/src/global.js
index aedfa89..c6083e7 100644
--- a/src/global.js
+++ b/src/global.js
@@ -26,6 +26,7 @@ let documentManager = null;
 let errorHandler = null;
 let focusController = null;
 let goaClient = null;
+let matchManager = null;
 let modeController = null;
 let offsetController = null;
 let queryBuilder = null;
@@ -36,3 +37,4 @@ let settings = null;
 let stage = null;
 let sourceManager = null;
 let trackerController = null;
+let typeManager = null;
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 0c2660c..aff38e8 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -129,6 +129,17 @@ MainWindow.prototype = {
         this._horizLayout.set_expand(this._embed.actor, true);
         this._horizLayout.set_fill(this._embed.actor, true, true);
 
+        // create the dropdown for the search bar, it's hidden by default
+        this._dropdownBox = new Searchbar.Dropdown();
+        this._dropdownBox.actor.add_constraint(
+            new Clutter.BindConstraint({ source: this._horizBox,
+                                         coordinate: Clutter.BindCoordinate.Y }));
+        this._dropdownBox.actor.add_constraint(
+            new Clutter.AlignConstraint({ source: this._horizBox,
+                                          align_axis: Clutter.AlignAxis.X_AXIS,
+                                          factor: 0.50 }));
+        Global.stage.add_actor(this._dropdownBox.actor);
+
         // create the OSD toolbar for selected items, it's hidden by default
         this._selectionToolbar = new Selections.SelectionToolbar();
         this._selectionToolbar.actor.add_constraint(
diff --git a/src/searchbar.js b/src/searchbar.js
index fe97951..c601904 100644
--- a/src/searchbar.js
+++ b/src/searchbar.js
@@ -23,16 +23,145 @@ const Gd = imports.gi.Gd;
 const Gdk = imports.gi.Gdk;
 const Gtk = imports.gi.Gtk;
 const GtkClutter = imports.gi.GtkClutter;
+const _ = imports.gettext.gettext;
 
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 
 const Global = imports.global;
+const Manager = imports.manager;
+const Sources = imports.sources;
 const Tweener = imports.util.tweener;
 const Utils = imports.utils;
 
 const _SEARCH_ENTRY_TIMEOUT = 200;
 
+function SearchType(params) {
+    this._init(params);
+}
+
+SearchType.prototype = {
+    _init: function(params) {
+        this.id = params.id;
+        this.name = params.name;
+    }
+};
+
+function SearchTypeManager() {
+    this._init();
+}
+
+SearchTypeManager.prototype = {
+    __proto__: Manager.BaseManager.prototype,
+
+    _init: function() {
+        Manager.BaseManager.prototype._init.call(this, _("Type"));
+
+        this.addItem(new SearchType({ id: 'all',
+                                      name: _("All") }));
+        this.addItem(new SearchType({ id: 'collections',
+                                      name: _("Collections") }));
+        this.addItem(new SearchType({ id: 'pdf',
+                                      name: _("PDF Files") }));
+        this.addItem(new SearchType({ id: 'presentations',
+                                      name: _("Presentations") }));
+        this.addItem(new SearchType({ id: 'spreadsheets',
+                                      name: _("Spreadsheets") }));
+        this.addItem(new SearchType({ id: 'textdocs',
+                                      name: _("Text Documents") }));
+
+        this.setActiveItemById('all');
+    }
+};
+
+function Match(params) {
+    this._init(params);
+}
+
+Match.prototype = {
+    _init: function(params) {
+        this.id = params.id;
+        this.name = params.name;
+    }
+};
+
+function MatchManager() {
+    this._init();
+}
+
+MatchManager.prototype = {
+    __proto__: Manager.BaseManager.prototype,
+
+    _init: function() {
+        Manager.BaseManager.prototype._init.call(this, _("Match"));
+
+        this.addItem(new Match({ id: 'all',
+                                 name: _("All") }));
+        this.addItem(new Match({ id: 'title',
+                                 name: _("Title") }));
+        this.addItem(new Match({ id: 'author',
+                                 name: _("Author") }));
+
+        this.setActiveItemById('all');
+    }
+};
+
+function Dropdown() {
+    this._init();
+}
+
+Dropdown.prototype = {
+    _init: function() {
+        this._sourceView = new Manager.BaseView(Global.sourceManager);
+        this._typeView = new Manager.BaseView(Global.typeManager);
+        this._matchView = new Manager.BaseView(Global.matchManager);
+
+        this.widget = new Gtk.Frame({ shadow_type: Gtk.ShadowType.IN });
+        this.actor = new GtkClutter.Actor({ contents: this.widget,
+                                            opacity: 0 });
+        let actorWidget = this.actor.get_widget();
+        actorWidget.get_style_context().add_class('dropdown');
+
+        this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL });
+        this.widget.add(this._grid);
+
+        this._grid.add(this._sourceView.widget);
+        this._grid.add(this._typeView.widget);
+        this._grid.add(this._matchView.widget);
+
+        this.widget.show_all();
+
+        Global.searchFilterController.connect('search-dropdown',
+                                              Lang.bind(this, this._onSearchDropdown));
+        this._onSearchDropdown();
+    },
+
+    _onSearchDropdown: function() {
+        let state = Global.searchFilterController.getDropdownState();
+        if (state)
+            this._fadeIn();
+        else
+            this._fadeOut();
+    },
+
+    _fadeIn: function() {
+        this.actor.raise_top();
+        Tweener.addTween(this.actor, { opacity: 245,
+                                       time: 0.20,
+                                       transition: 'easeOutQuad' });
+    },
+
+    _fadeOut: function() {
+        Tweener.addTween(this.actor, { opacity: 0,
+                                       time: 0.20,
+                                       transition: 'easeOutQuad',
+                                       onComplete: function() {
+                                           this.actor.lower_bottom();
+                                       },
+                                       onCompleteScope: this });
+    }
+};
+
 function Searchbar() {
     this._init();
 }
@@ -54,14 +183,28 @@ Searchbar.prototype = {
                                             secondary_icon_name: 'edit-find-symbolic',
                                             secondary_icon_sensitive: false,
                                             secondary_icon_activatable: false,
-                                            no_show_all: true });
-        let item = new Gtk.ToolItem();
-        item.set_expand(true);
+                                            no_show_all: true,
+                                            hexpand: true });
+
+        let box = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL });
+        box.add(this._searchEntry);
+
+        this._dropdownButton = new Gtk.ToggleButton(
+            { child: new Gtk.Arrow({ arrow_type: Gtk.ArrowType.DOWN }) });
+        this._dropdownButton.connect('toggled', Lang.bind(this,
+            function() {
+                let active = this._dropdownButton.get_active();
+                Global.searchFilterController.setDropownState(active);
+            }));
+
+        box.add(this._dropdownButton);
 
         let container = new Gd.MarginContainer({ min_margin: 6,
                                                  max_margin: 64 });
-        container.add(this._searchEntry);
+        container.add(box);
 
+        let item = new Gtk.ToolItem();
+        item.set_expand(true);
         item.add(container);
 
         this._searchEntry.connect('key-press-event', Lang.bind(this,
@@ -184,6 +327,7 @@ Searchbar.prototype = {
                                        transition: 'easeOutQuad',
                                        onComplete: function() {
                                            this._searchEntry.hide();
+                                           this._dropdownButton.set_active(false);
                                        },
                                        onCompleteScope: this });
     }