[gnome-shell/wip/snwh/search-layout-changes: 4/5] search: Change results to entirely horizontal layout

[Sam Hewitt <snwh src gnome org>]

commit 468eb8fa6036ecffd58354290dc6e8f2a4a3fbce
Author: Sam Hewitt <sam snwh org>
Date:   Thu May 26 14:34:02 2022 -0230

    search: Change results to entirely horizontal layout
    
    - rearrange search provider button contents
    - update styles & reduce padding

 .../gnome-shell-sass/widgets/_search-results.scss  | 41 +++++++++++-----------
 js/ui/search.js                                    | 32 ++++++++---------
 2 files changed, 34 insertions(+), 39 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 644c53db58..2da4cf7956 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -11,8 +11,6 @@
 
 // search results sections "the boxes"
 .search-section {
-  // This should be equal to #searchResultsContent spacing
-  spacing: $base_padding*3;
 
   // separator (unstyled)
   .search-section-separator { 
@@ -23,18 +21,10 @@
 
 // content
 .search-section-content {
-  background-color: lighten($system_bg_color, 5%);
-  border-radius: $modal_radius*1.5;
-  border: 1px solid $osd_outer_borders_color;
   color: $osd_fg_color;
   padding: $base_padding*2;
-  margin:0 $base_margin*3;
 }
 
-%search_section_content_item {
-  @include tile_button($osd_fg_color);
-  border-radius: $base_border_radius+3px;
-}
 
 // "no results" text
 .search-statustext {
@@ -52,31 +42,40 @@
 }
 
 // search result provider
-.search-provider-icon {
-  @extend %search_section_content_item;
-  &:ltr {margin-right: $base_margin;}
-  &:rtl {margin-left: $base_margin;}
+.search-provider-info {
+
+  @include tile_button(darken($osd_fg_color, 15%));
+  color: darken($osd_fg_color, 15%);
+
+  border-radius: $base_border_radius+3px;
+  margin-bottom: $base_margin*2;
+  padding: $base_padding;
+
+  -st-icon-style: symbolic;
 
   // content
   .list-search-provider-content {
-    spacing: $base_padding * 2;
+    spacing: $base_padding;
+  } 
 
-    // provider labels
-    .list-search-provider-details {
-      width: 120px;
-      color: $osd_fg_color;
-    }
+  .list-search-provider-title {
+    @extend %heading;
   }
 }
 
 // search results list
 .list-search-results {
   spacing: $base_padding;
+  padding: $base_padding*2;
+  background-color: lighten($system_bg_color, 5%);
+  border-radius: $modal_radius*1.5;
+  border: 1px solid $osd_outer_borders_color;
 }
 
 // search result listitem
 .list-search-result {
-  @extend %search_section_content_item;
+  @include tile_button($osd_fg_color);
+  border-radius: $base_border_radius+3px;
 
   // content
   .list-search-result-content {
diff --git a/js/ui/search.js b/js/ui/search.js
index 3bfb83f9f7..6c795f05bb 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -289,7 +289,10 @@ class ListSearchResults extends SearchResultsBase {
     _init(provider, resultsView) {
         super._init(provider, resultsView);
 
-        this._container = new St.BoxLayout({ style_class: 'search-section-content' });
+        this._container = new St.BoxLayout({
+            style_class: 'search-section-content',
+            vertical: true,
+        });
         this.providerInfo = new ProviderInfo(provider);
         this.providerInfo.connect('key-focus-in', this._keyFocusIn.bind(this));
         this.providerInfo.connect('clicked', () => {
@@ -893,17 +896,18 @@ class ProviderInfo extends St.Button {
     _init(provider) {
         this.provider = provider;
         super._init({
-            style_class: 'search-provider-icon',
+            style_class: 'search-provider-info',
             reactive: true,
             can_focus: true,
             accessible_name: provider.appInfo.get_name(),
             track_hover: true,
+            x_expand: true,
             y_align: Clutter.ActorAlign.START,
         });
 
         this._content = new St.BoxLayout({
-            vertical: false,
             style_class: 'list-search-provider-content',
+            x_expand: true,
         });
         this.set_child(this._content);
 
@@ -912,29 +916,21 @@ class ProviderInfo extends St.Button {
             gicon: provider.appInfo.get_icon(),
         });
 
-        const detailsBox = new St.BoxLayout({
-            style_class: 'list-search-provider-details',
-            vertical: true,
-            x_expand: true,
-        });
-
         const nameLabel = new St.Label({
             text: provider.appInfo.get_name(),
+            style_class: 'list-search-provider-title',
             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._moreLabel = new St.Label({ x_align: Clutter.ActorAlign.END });
+    
         this._content.add_actor(icon);
-        this._content.add_actor(detailsBox);
+        this._content.add_actor(nameLabel);
+        this._content.add_actor(this._moreLabel);
     }
 
     get PROVIDER_ICON_SIZE() {
-        return 32;
+        return 16;
     }
 
     animateLaunch() {
@@ -945,7 +941,7 @@ class ProviderInfo extends St.Button {
     }
 
     setMoreCount(count) {
-        this._moreLabel.text = ngettext("%d more", "%d more", count).format(count);
+        this._moreLabel.text = ngettext("+ %d more", "+ %d more", count).format(count);
         this._moreLabel.visible = count > 0;
     }
 });