[gnome-shell/wip/raresv/uiTweaks: 16/26] search.js: Refactor providerIcon into providerInfo

[Rares Visalom <raresvisalom src gnome org>]

commit aed6d466cb8d80096b6899e69da10ebc58527714
Author: raresvis <rares visalom gmail com>
Date:   Tue Jun 20 22:20:50 2017 +0300

    search.js: Refactor providerIcon into providerInfo
    
    In order to match the current mockups, the providerIcon
    class needed to include both the name of the provider
    and the label that informs the user about how many more
    search results are available for that specific provider.
    The latter replaces the plus sign icon that has been
    used so far.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=749957

 data/theme/gnome-shell.css |    5 +++
 js/ui/search.js            |   72 +++++++++++++++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 21 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 7de3e75..17dd551 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1171,6 +1171,11 @@ StScrollBar {
 .list-search-results {
   spacing: 3px; }
 
+.list-search-provider-details {
+  spacing: 3px;
+  width: 150px;
+  margin-left: 30px; }
+
 .search-section-separator {
   -gradient-height: 1px;
   -gradient-start: rgba(255, 255, 255, 0);
diff --git a/js/ui/search.js b/js/ui/search.js
index e956bf4..3d13bfe 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -190,7 +190,7 @@ const SearchResultsBase = new Lang.Class({
         Main.overview.toggle();
     },
 
-    _setMoreIconVisible: function(visible) {
+    _setMoreLabelVisible: function(visible, moreNumber) {
     },
 
     _ensureResultActors: function(results, callback) {
@@ -258,7 +258,8 @@ const SearchResultsBase = new Lang.Class({
                 results.forEach(Lang.bind(this, function(resultId) {
                     this._addItem(this._resultDisplays[resultId]);
                 }));
-                this._setMoreIconVisible(hasMoreResults && this.provider.canLaunchSearch);
+                this._setMoreLabelVisible(hasMoreResults && this.provider.canLaunchSearch,
+                                          providerResults.length - results.length);
                 this.actor.show();
                 callback();
             }));
@@ -274,16 +275,16 @@ const ListSearchResults = new Lang.Class({
         this.parent(provider);
 
         this._container = new St.BoxLayout({ style_class: 'search-section-content' });
-        this.providerIcon = new ProviderIcon(provider);
-        this.providerIcon.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
-        this.providerIcon.connect('clicked', Lang.bind(this,
+        this.providerInfo = new ProviderInfo(provider);
+        this.providerInfo.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
+        this.providerInfo.connect('clicked', Lang.bind(this,
             function() {
-                this.providerIcon.animateLaunch();
+                this.providerInfo.animateLaunch();
                 provider.launchSearch(this._terms);
                 Main.overview.toggle();
             }));
 
-        this._container.add(this.providerIcon, { x_fill: false,
+        this._container.add(this.providerInfo, { x_fill: false,
                                                  y_fill: false,
                                                  x_align: St.Align.START,
                                                  y_align: St.Align.START });
@@ -295,8 +296,8 @@ const ListSearchResults = new Lang.Class({
         this._resultDisplayBin.set_child(this._container);
     },
 
-    _setMoreIconVisible: function(visible) {
-        this.providerIcon.moreIcon.visible = visible;
+    _setMoreLabelVisible: function(visible, moreNumber) {
+        this.providerInfo.setMoreVisible(visible, moreNumber);
     },
 
     _getMaxDisplayedResults: function() {
@@ -680,8 +681,8 @@ const SearchResults = new Lang.Class({
     }
 });
 
-const ProviderIcon = new Lang.Class({
-    Name: 'ProviderIcon',
+const ProviderInfo = new Lang.Class({
+    Name: 'ProviderInfo',
     Extends: St.Button,
 
     PROVIDER_ICON_SIZE: 48,
@@ -694,22 +695,45 @@ const ProviderIcon = new Lang.Class({
                       accessible_name: provider.appInfo.get_name(),
                       track_hover: true });
 
-        this._content = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._content = new St.BoxLayout({ vertical: false });
         this.set_child(this._content);
 
         let rtl = (this.get_text_direction() == Clutter.TextDirection.RTL);
 
-        this.moreIcon = new St.Widget({ style_class: 'search-provider-icon-more',
-                                        visible: false,
-                                        x_align: rtl ? Clutter.ActorAlign.START : Clutter.ActorAlign.END,
-                                        y_align: Clutter.ActorAlign.END,
-                                        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);
+
+        this._providerDetails = new St.BoxLayout({
+                                    style_class: 'list-search-provider-details',
+                                    vertical: true });
+
+        let providerNameLabel = new St.Label({
+                                        style_class: 'list-search-result-title',
+                                        text: provider.appInfo.get_name() });
+
+        this._remainingResultsLabel = new St.Label({
+                                    style_class: 'list-search-result-title' });
+
+        this._providerDetails.add(providerNameLabel,
+                                  { x_fill: false,
+                                    y_fill: false,
+                                    x_align: St.Align.START,
+                                    y_align: St.Align.START });
+        this._providerDetails.add(this._remainingResultsLabel,
+                                  { x_fill: false,
+                                    y_fill: false,
+                                    x_align: St.Align.START,
+                                    y_align: St.Align.START });
+
+
+        this._content.add(icon, { x_fill: false,
+                                  y_fill: false,
+                                  x_align: St.Align.START,
+                                  y_align: St.Align.START });
+        this._content.add(this._providerDetails, { x_fill: false,
+                                                   y_fill: false,
+                                                   x_align: St.Align.START,
+                                                   y_align: St.Align.START });
     },
 
     animateLaunch: function() {
@@ -717,5 +741,11 @@ const ProviderIcon = new Lang.Class({
         let app = appSys.lookup_app(this.provider.appInfo.get_id());
         if (app.state == Shell.AppState.STOPPED)
             IconGrid.zoomOutActor(this._content);
+    },
+
+    setMoreVisible: function(visible, resultsCount) {
+        this._remainingResultsLabel.visible = visible;
+        this._remainingResultsLabel.clutter_text.set_markup(
+                                            _("%d more").format(resultsCount));
     }
 });