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
This commit is contained in:
nana-4 2020-12-12 15:30:01 +09:00
parent 8e3f2b879e
commit 538cf9e294
3 changed files with 21 additions and 12 deletions

View File

@ -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]);
}

View File

@ -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;
}
}
}

View File

@ -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>