[gnome-shell] search: Make the results take more horizontal space

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

commit a4262951680ff4a34ab0b7a557e38ef06bc268f2
Author: Rares Visalom <rares visalom gmail com>
Date:   Tue Jun 20 22:13:48 2017 +0300

    search: Make the results take more horizontal space
    
    In order to make gnome-shell search functionality fit on
    smaller screens, like those of devices, search results
    need to take advantage of more horizontal space so that
    any extra space can be used efficiently.
    
    In order to do so, change the layout of the ListSearchResult
    class from a vertical one, to a horizontal one and also
    decrease the padding of the list-search-result-content css
    class.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=749957

 data/theme/gnome-shell-high-contrast.css |    6 ++--
 data/theme/gnome-shell-sass              |    2 +-
 data/theme/gnome-shell.css               |    6 ++--
 js/ui/search.js                          |   35 +++++++++++++++--------------
 4 files changed, 25 insertions(+), 24 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index a388ef0..d639e30 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 4de5298..6a59355 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 4de529843779532db8e5aa76b4e8a74f163e79c5
+Subproject commit 6a5935538568835462fa853f746620967d047bcf
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6f9f201..6d5559a 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }
diff --git a/js/ui/search.js b/js/ui/search.js
index 4d29e59..0dd4870 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -84,33 +84,34 @@ const ListSearchResult = new Lang.Class({
                                          vertical: false });
         this.actor.set_child(content);
 
+        let titleBox = new St.BoxLayout({ style_class: 'list-search-result-title' });
+
+        content.add(titleBox, { x_fill: true,
+                                y_fill: false,
+                                x_align: St.Align.START,
+                                y_align: St.Align.MIDDLE });
+
         // An icon for, or thumbnail of, content
         let icon = this.metaInfo['createIcon'](this.ICON_SIZE);
         if (icon) {
-            content.add(icon);
+            titleBox.add(icon);
         }
 
-        let details = new St.BoxLayout({ vertical: true });
-        content.add(details, { x_fill: true,
-                               y_fill: false,
-                               x_align: St.Align.START,
-                               y_align: St.Align.MIDDLE });
-
-        let title = new St.Label({ style_class: 'list-search-result-title',
-                                   text: this.metaInfo['name'] })
-        details.add(title, { x_fill: false,
-                             y_fill: false,
-                             x_align: St.Align.START,
-                             y_align: St.Align.START });
+        let title = new St.Label({ text: this.metaInfo['name'] });
+        titleBox.add(title, { x_fill: false,
+                              y_fill: false,
+                              x_align: St.Align.START,
+                              y_align: St.Align.MIDDLE });
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
-            let description = new St.Label({ style_class: 'list-search-result-description' });
-            description.clutter_text.set_markup(this.metaInfo['description']);
-            details.add(description, { x_fill: false,
+            let description = new St.Label({ style_class: 'list-search-result-description',
+                                             text: this.metaInfo['description'] });
+
+            content.add(description, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.START,
-                                       y_align: St.Align.END });
+                                       y_align: St.Align.MIDDLE });
         }
     }
 });