[gnome-shell/wip/re-search-v2: 3/28] searchDisplay, and others: Switch from provider title to provider icon

[Cosimo Cecchi <cosimoc src gnome org>]

commit a96f6387a5a859f4012fcd914fbbe4bb7aa19023
Author: Tanner Doshier <doshitan gmail com>
Date:   Thu Aug 9 16:52:36 2012 -0500

    searchDisplay, and others: Switch from provider title to provider icon
    
    Display a '+' icon on the provider icon if there are more results that are
    hidden. If the provider icon is clicked, ask the provider to launch itself and
    perform a search with the current terms.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=681797

 data/theme/gnome-shell.css |   12 +++++++-
 js/ui/searchDisplay.js     |   66 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 72 insertions(+), 6 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c2b69b1..c59f51a 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -871,8 +871,15 @@ StScrollBar StButton#vhandle:active {
     padding: 4px 8px;
 }
 
+.search-provider-icon-more {
+    background-color: white;
+    border-radius: 5px;
+    color: #777d7c;
+}
+
 .app-well-app > .overview-icon,
 .show-apps > .overview-icon,
+.search-provider-icon,
 .search-result-content > .overview-icon {
     border-radius: 4px;
     padding: 3px;
@@ -889,6 +896,7 @@ StScrollBar StButton#vhandle:active {
 
 .app-well-app:hover > .overview-icon,
 .show-apps:hover > .overview-icon,
+.search-provider-icon:hover,
 .search-result-content:hover > .overview-icon {
     background-color: rgba(255,255,255,0.1);
     text-shadow: black 0px 2px 2px;
@@ -926,8 +934,10 @@ StScrollBar StButton#vhandle:active {
 .app-well-app:focus > .overview-icon,
 .search-result-content:focus > .overview-icon,
 .show-apps:focus > .overview-icon,
+.search-provider-icon:focus,
 .app-well-app:selected > .overview-icon,
-.search-result-content:selected > .overview-icon {
+.search-result-content:selected > .overview-icon,
+.search-provider-icon:selected {
     background-color: rgba(255,255,255,0.33);
 }
 
diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js
index 1259966..ff3ac8a 100644
--- a/js/ui/searchDisplay.js
+++ b/js/ui/searchDisplay.js
@@ -143,6 +143,10 @@ const GridSearchResults = new Lang.Class({
         return this._grid.visibleItemsCount();
     },
 
+    hasMoreResults: function() {
+        return this._notDisplayedResult.length > 0;
+    },
+
     setResults: function(results, terms) {
         // copy the lists
         this._notDisplayedResult = results.slice(0);
@@ -221,11 +225,22 @@ const SearchResults = new Lang.Class({
     },
 
     createProviderMeta: function(provider) {
-        let providerBox = new St.BoxLayout({ style_class: 'search-section',
-                                             vertical: true });
-        let title = new St.Label({ style_class: 'search-section-header',
-                                   text: provider.title });
-        providerBox.add(title, { x_fill: false, x_align: St.Align.START });
+        let providerBox = new St.BoxLayout({ style_class: 'search-section' });
+        let providerIcon = null;
+
+        if (provider.appInfo) {
+            providerIcon = new ProviderIcon(provider);
+            providerIcon.connect('clicked', Lang.bind(this,
+                function() {
+                    provider.launchSearch(this._searchSystem.getTerms());
+                    Main.overview.toggle();
+                }));
+
+            providerBox.add(providerIcon, { x_fill: false,
+                                            y_fill: false,
+                                            x_align: St.Align.START,
+                                            y_align: St.Align.START });
+        }
 
         let resultDisplayBin = new St.Bin({ style_class: 'search-section-results',
                                             x_fill: true,
@@ -236,6 +251,7 @@ const SearchResults = new Lang.Class({
 
         this._providerMeta.push({ provider: provider,
                                   actor: providerBox,
+                                  icon: providerIcon,
                                   resultDisplay: resultDisplay });
         this._content.add(providerBox);
     },
@@ -342,6 +358,9 @@ const SearchResults = new Lang.Class({
             meta.resultDisplay.setResults(providerResults, terms);
             let results = meta.resultDisplay.getResultsForDisplay();
 
+            if (meta.icon)
+                meta.icon.moreIcon.visible = meta.resultDisplay.hasMoreResults();
+
             provider.getResultMetas(results, Lang.bind(this, function(metas) {
                 this._clearDisplayForProvider(provider);
                 meta.actor.show();
@@ -394,3 +413,40 @@ const SearchResults = new Lang.Class({
         }
     }
 });
+
+const ProviderIcon = new Lang.Class({
+    Name: 'ProviderIcon',
+    Extends: St.Button,
+
+    PROVIDER_ICON_SIZE: 48,
+    MORE_ICON_SIZE: 16,
+
+    _init: function(provider) {
+        this.provider = provider;
+        this.parent({ style_class: 'search-provider-icon',
+                      reactive: true,
+                      can_focus: true,
+                      track_hover: true });
+
+        this._content = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this.set_child(this._content);
+
+        let rtl = (this.get_text_direction() == Clutter.TextDirection.RTL);
+
+        this.moreIcon = new St.Icon({ style_class: 'search-provider-icon-more',
+                                      icon_size: this.MORE_ICON_SIZE,
+                                      icon_name: 'list-add-symbolic',
+                                      visible: false,
+                                      x_align: rtl ? Clutter.ActorAlign.START : Clutter.ActorAlign.END,
+                                      y_align: Clutter.ActorAlign.END,
+                                      // HACK: without these, ClutterBinLayout
+                                      // ignores alignment properties on the actor
+                                      x_expand: true,
+                                      y_expand: true });
+
+        let icon = new St.Icon({ icon_size: this.PROVIDER_ICON_SIZE,
+                                 gicon: provider.appInfo.get_icon() });
+        this._content.add_actor(icon);
+        this._content.add_actor(this.moreIcon);
+    }
+});