search: Change results to entirely vertical layoutwip/snwh/search-layout-changes

- rearrange search provider button contents
- cleanup search related styles & reduce padding

5 files changed, 56 insertions, 80 deletions

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index c6e64766e..3daffe7a0 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -69,8 +69,8 @@ stage {
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border: 1px solid $osd_outer_borders_color;
-  border-radius: 999px;
   padding: $base_padding*2;
+  border-radius: $modal_radius;
 }
 
 // Overview panels
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 10c1c3f3f..e7d236031 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -233,6 +233,7 @@ $button_bg_color: mix($tc, $c, 5%);
 // tile
 @mixin tile_button($color, $flat: true) {
   @extend %tile;
+  border-radius: $base_border_radius+3px;
   @if $flat {
     background-color: transparent;
   } @else {
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 644c53db5..b3ba47896 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -3,94 +3,72 @@
 // search overview container
 #searchResults {
   margin: 0 $base_margin;
-}
 
-#searchResultsContent {
-  max-width: 1072px;
+  #searchResultsContent {
+    max-width: 1044px; // exactly the width of 6 app results (896px for 5)
+  }
 }
 
 // search results sections "the boxes"
 .search-section {
-  // This should be equal to #searchResultsContent spacing
-  spacing: $base_padding*3;
+  .search-section-content {}
 
-  // separator (unstyled)
-  .search-section-separator { 
-    height: $base_margin*2; // use it as a spacer
-    background-color: transparent;
+  // unstyled, used as whitespace
+  .search-section-separator {
+    height: 24px;
   }
 }
 
-// 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 {
-  @extend %title_1;
-}
-
+// Search results with icons
 .grid-search-results {
   spacing: $base_padding*5;
-  margin:0 $base_margin*3;
-}
 
-// Search results with icons
-.grid-search-result {
-  @extend .app-well-app;
+  .grid-search-result {
+    @extend .app-well-app;
+  }
 }
 
 // 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($osd_insensitive_fg_color);
+  color: $osd_insensitive_fg_color;
+
+  -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;
-}
+  @extend %osd_panel;
+  margin: $base_margin*2 0;
 
-// search result listitem
-.list-search-result {
-  @extend %search_section_content_item;
+  .list-search-result {
+    @include tile_button($osd_fg_color);
 
-  // content
-  .list-search-result-content {
-    spacing: $base_padding;
-  }
+    .list-search-result-content {
+      spacing: $base_padding;
+    }
 
-  // list item title (with leading icon)
-  .list-search-result-title {
-    spacing: $base_padding * 2;
-    // font-weight: bold;
-  }
+    .list-search-result-title {
+      spacing: $base_padding * 2;
+    }
 
-  // list item description
-  .list-search-result-description {
-    color: $osd_insensitive_fg_color;
+    .list-search-result-description {
+      color: $osd_insensitive_fg_color;
+    }
   }
 }
+
+// "no results" text
+.search-statustext {
+  @extend %title_1;
+  color: $osd_insensitive_fg_color;
+}
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index f06130ba9..31ad5a7f9 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -6,6 +6,7 @@ $ws_dot_inactive: $ws_indicator_height / 6;
 
 .workspace-switcher {
   @extend %osd_panel;
+  border-radius: 999px;
   margin-bottom: 4em;
   spacing: $base_padding * 2;
   padding: $base_padding * 2 $base_padding * 3;
diff --git a/js/ui/search.js b/js/ui/search.js
index 3bfb83f9f..2ca30bd78 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;
     }
 });