[gtk: 1/2] dropdown: Improve search bar styling

[Jakub Steiner <jimmac src gnome org>]

commit 538cf9e29432186586f0983f6dbd3baae34a94d1
Author: nana-4 <hnmaigo gmail com>
Date:   Sat Dec 12 15:30:01 2020 +0900

    dropdown: Improve search bar styling
    
    As per the mockup. See:
    
    https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/master/dropdown-lists/dropdown-lists.png

 gtk/gtkdropdown.c              |  4 +++-
 gtk/theme/Adwaita/_common.scss |  9 ++++-----
 gtk/ui/gtkdropdown.ui          | 20 ++++++++++++++------
 3 files changed, 21 insertions(+), 12 deletions(-)
---
diff --git a/gtk/gtkdropdown.c b/gtk/gtkdropdown.c
index 669305d539..4d1b178952 100644
--- a/gtk/gtkdropdown.c
+++ b/gtk/gtkdropdown.c
@@ -96,6 +96,7 @@ struct _GtkDropDown
   GtkWidget *button_stack;
   GtkWidget *button_item;
   GtkWidget *button_placeholder;
+  GtkWidget *search_box;
   GtkWidget *search_entry;
 
   gboolean enable_search;
@@ -521,6 +522,7 @@ gtk_drop_down_class_init (GtkDropDownClass *klass)
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, button_item);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, popup);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, popup_list);
+  gtk_widget_class_bind_template_child (widget_class, GtkDropDown, search_box);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, search_entry);
 
   gtk_widget_class_bind_template_callback (widget_class, row_activated);
@@ -936,7 +938,7 @@ gtk_drop_down_set_enable_search (GtkDropDown *self,
   self->enable_search = enable_search;
 
   gtk_editable_set_text (GTK_EDITABLE (self->search_entry), "");
-  gtk_widget_set_visible (self->search_entry, enable_search);
+  gtk_widget_set_visible (self->search_box, enable_search);
   
   g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_ENABLE_SEARCH]);
 }
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 845582650d..303d1922f6 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1230,11 +1230,10 @@ combobox {
       }
    }
 
-    .search { //drodowns with searchboxes on top
-      border-radius: $popover_radius;
-      padding: 3px 10px;
-      border-radius: 3px;
-      margin: 4px 4px -4px 4px;
+    // drodowns with searchboxes on top
+    .dropdown-searchbar {
+      padding: 6px;
+      border-bottom: 1px solid $borders_color;
     }
   }
 }
diff --git a/gtk/ui/gtkdropdown.ui b/gtk/ui/gtkdropdown.ui
index e2dbdaf4d1..16e55b5b3d 100644
--- a/gtk/ui/gtkdropdown.ui
+++ b/gtk/ui/gtkdropdown.ui
@@ -55,13 +55,21 @@
       <object class="GtkBox">
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <signal name="search-changed" handler="search_changed"/>
-            <signal name="stop-search" handler="search_stop"/>
+          <object class="GtkBox" id="search_box">
             <property name="visible">0</property>
-            <property name="max-width-chars">6</property>
-            <property name="width-chars">6</property>
-            <property name="placeholder-text" translatable="yes">Search…</property>
+            <style>
+              <class name="dropdown-searchbar"/>
+            </style>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <signal name="search-changed" handler="search_changed"/>
+                <signal name="stop-search" handler="search_stop"/>
+                <property name="hexpand">1</property>
+                <property name="max-width-chars">6</property>
+                <property name="width-chars">6</property>
+                <property name="placeholder-text" translatable="yes">Search…</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>