[gnome-shell/wip/raresv/uiTweaks] search.js: some more changes regarding the provider info and search results

[Rares Visalom <raresvisalom src gnome org>]

commit 21994f8eafbd7944304503b54a62fac2d93921a3
Author: raresvis <rares visalom gmail com>
Date:   Mon Jun 19 22:35:41 2017 +0300

    search.js: some more changes regarding the provider info and search results

 data/theme/gnome-shell.css |    8 ++--
 js/ui/search.js            |  101 ++++++++++++++++++++++++--------------------
 2 files changed, 59 insertions(+), 50 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f9e7fd8..4701dd1 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1172,15 +1172,15 @@ StScrollBar {
   spacing: 3px; }
 
 .search-section-separator {
-  -gradient-height: 1px;
+  -gradient-height: 2px;
   -gradient-start: rgba(255, 255, 255, 0);
-  -gradient-end: rgba(255, 255, 255, 0.1);
+  -gradient-end: rgba(255, 255, 255, 0.5);
   -margin-horizontal: 1.5em;
-  height: 1px; }
+  height: 2px; }
 
 .list-search-result-content {
   spacing: 12px;
-  padding: 12px; }
+  padding: 2px; }
 
 .list-search-result-title {
   font-size: 1.5em;
diff --git a/js/ui/search.js b/js/ui/search.js
index ba0c904..0d0825e 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -101,14 +101,16 @@ const ListSearchResult = new Lang.Class({
         details.add(title, { x_fill: false,
                              y_fill: false,
                              x_align: St.Align.START,
-                             y_align: St.Align.START });
+                             y_align: St.Align.END });
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
             let description = new St.Label({
                                 style_class: 'list-search-result-description',
+                                /*magic number strikes again*/
                                 style: "margin-left: 30px;",
                                 text: this.metaInfo['description'] });
+
             details.add(description, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.START,
@@ -190,7 +192,7 @@ const SearchResultsBase = new Lang.Class({
         Main.overview.toggle();
     },
 
-    _setMoreIconVisible: function(visible, moreNumber) {
+    _setMoreLabelVisible: function(visible, moreNumber) {
     },
 
     _ensureResultActors: function(results, callback) {
@@ -258,7 +260,7 @@ const SearchResultsBase = new Lang.Class({
                 results.forEach(Lang.bind(this, function(resultId) {
                     this._addItem(this._resultDisplays[resultId]);
                 }));
-                this._setMoreIconVisible(hasMoreResults && this.provider.canLaunchSearch, 
providerResults.length - results.length);
+                this._setMoreLabelVisible(hasMoreResults && this.provider.canLaunchSearch, 
providerResults.length - results.length);
                 this.actor.show();
                 callback();
             }));
@@ -274,34 +276,20 @@ 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 });
 
-        this._moreResultsVisible = false;
-        this._providerDetails = new St.BoxLayout({
-                                            style_class: 'list-search-results',
-                                            /*some magic number*/
-                                            style: "width: 150px;",
-                                            vertical: true });
-
-        let providerNameLabel = new St.Label({
-                                        style_class: 'list-search-result-title',
-                                        text: provider.appInfo.get_name() });
-
-        this._providerDetails.add(providerNameLabel, {});
-
-        this._container.add(this._providerDetails, {});
         this._content = new St.BoxLayout({ style_class: 'list-search-results',
                                            vertical: true });
         this._container.add(this._content, { expand: true });
@@ -309,16 +297,8 @@ const ListSearchResults = new Lang.Class({
         this._resultDisplayBin.set_child(this._container);
     },
 
-    _setMoreIconVisible: function(visible, moreNumber) {
-        /*we don;t want the plus sign anymore*/
-        //this.providerIcon.moreIcon.visible = visible;
-
-        if (!this._moreResultsVisible) {
-            this._providerDetails.add(
-                        new St.Label({ style_class: 'list-search-result-title',
-                                       text: moreNumber + ' more' }));
-            this._moreResultsVisible = true;
-        }
+    _setMoreLabelVisible: function(visible, moreNumber) {
+        this.providerInfo.setMoreVisible(visible, moreNumber);
     },
 
     _getMaxDisplayedResults: function() {
@@ -702,8 +682,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: 60,
@@ -716,24 +696,47 @@ 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 });
-
-        log(provider.appInfo.get_name());
-
         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-results',
+                                            /*some magic numbers*/
+                                            style: "width: 150px; margin-left: 30px;",
+                                            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() {
@@ -741,5 +744,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));
     }
 });