[gnome-shell] search: Refactor providerIcon into providerInfo

[Florian Müllner <fmuellner src gnome org>]

commit faa0ddafff7bc30ab16d9a6149ead909554526d4
Author: Rares Visalom <rares visalom gmail com>
Date:   Thu Jul 13 02:51:59 2017 +0300

    search: 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/gnome-shell-theme.gresource.xml     |    1 -
 data/theme/gnome-shell-high-contrast.css |   13 ++--
 data/theme/gnome-shell-sass              |    2 +-
 data/theme/gnome-shell.css               |   13 ++--
 data/theme/more-results.svg              |  114 ------------------------------
 js/ui/search.js                          |   58 +++++++++------
 6 files changed, 52 insertions(+), 149 deletions(-)
---
diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 76aeaa5..25769a4 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -18,7 +18,6 @@
     <file>gnome-shell.css</file>
     <file>gnome-shell-high-contrast.css</file>
     <file>logged-in-indicator.svg</file>
-    <file>more-results.svg</file>
     <file>no-events.svg</file>
     <file>no-notifications.svg</file>
     <file>noise-texture.png</file>
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index d639e30..fc16943 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1189,14 +1189,17 @@ StScrollBar {
 .list-search-result-description {
   color: #cacac4; }
 
+.list-search-provider-details {
+  width: 150px;
+  color: #e2e2df;
+  margin-top: 0.24em; }
+
+.list-search-provider-content {
+  spacing: 20px; }
+
 .search-provider-icon {
   padding: 15px; }
 
-.search-provider-icon-more {
-  width: 16px;
-  height: 16px;
-  background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); }
-
 /* DASHBOARD */
 #dash {
   font-size: 9pt;
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 6a59355..07f43e0 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 6a5935538568835462fa853f746620967d047bcf
+Subproject commit 07f43e04251e0daedf2828a5b15c007e8e57fb05
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6d5559a..e1132c7 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1189,14 +1189,17 @@ StScrollBar {
 .list-search-result-description {
   color: #cacac4; }
 
+.list-search-provider-details {
+  width: 150px;
+  color: #e2e2df;
+  margin-top: 0.24em; }
+
+.list-search-provider-content {
+  spacing: 20px; }
+
 .search-provider-icon {
   padding: 15px; }
 
-.search-provider-icon-more {
-  width: 16px;
-  height: 16px;
-  background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); }
-
 /* DASHBOARD */
 #dash {
   font-size: 9pt;
diff --git a/js/ui/search.js b/js/ui/search.js
index 0dd4870..4f9729e 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -102,6 +102,7 @@ const ListSearchResult = new Lang.Class({
                               y_fill: false,
                               x_align: St.Align.START,
                               y_align: St.Align.MIDDLE });
+
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
@@ -189,7 +190,7 @@ const SearchResultsBase = new Lang.Class({
         Main.overview.toggle();
     },
 
-    _setMoreIconVisible: function(visible) {
+    _setMoreCount: function(count) {
     },
 
     _ensureResultActors: function(results, callback) {
@@ -240,7 +241,7 @@ const SearchResultsBase = new Lang.Class({
         } else {
             let maxResults = this._getMaxDisplayedResults();
             let results = this.provider.filterResults(providerResults, maxResults);
-            let hasMoreResults = results.length < providerResults.length;
+            let moreCount = Math.max(providerResults.length - results.length, 0);
 
             this._ensureResultActors(results, Lang.bind(this, function(successful) {
                 if (!successful) {
@@ -257,7 +258,7 @@ const SearchResultsBase = new Lang.Class({
                 results.forEach(Lang.bind(this, function(resultId) {
                     this._addItem(this._resultDisplays[resultId]);
                 }));
-                this._setMoreIconVisible(hasMoreResults && this.provider.canLaunchSearch);
+                this._setMoreCount(this.provider.canLaunchSearch ? moreCount : 0);
                 this.actor.show();
                 callback();
             }));
@@ -273,16 +274,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 });
@@ -294,8 +295,8 @@ const ListSearchResults = new Lang.Class({
         this._resultDisplayBin.set_child(this._container);
     },
 
-    _setMoreIconVisible: function(visible) {
-        this.providerIcon.moreIcon.visible = visible;
+    _setMoreCount: function(count) {
+        this.providerInfo.setMoreCount(count);
     },
 
     _getMaxDisplayedResults: function() {
@@ -679,8 +680,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,
@@ -693,22 +694,28 @@ 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,
+                                           style_class: 'list-search-provider-content' });
         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() });
+
+        let detailsBox = new St.BoxLayout({ style_class: 'list-search-provider-details',
+                                            vertical: true,
+                                            x_expand: true });
+
+        let nameLabel = new St.Label({ text: provider.appInfo.get_name(),
+                                       x_align: Clutter.ActorAlign.START });
+
+        this._moreLabel = new St.Label({ x_align: Clutter.ActorAlign.START });
+
+        detailsBox.add_actor(nameLabel);
+        detailsBox.add_actor(this._moreLabel);
+
+
         this._content.add_actor(icon);
-        this._content.add_actor(this.moreIcon);
+        this._content.add_actor(detailsBox);
     },
 
     animateLaunch: function() {
@@ -716,5 +723,10 @@ 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);
+    },
+
+    setMoreCount: function(count) {
+        this._moreLabel.text = _("%d more").format(count);
+        this._moreLabel.visible = count > 0;
     }
 });