theme: Port .boxed-list style from libadwaita

Consistently use it for boxed lists in inspector and gtk-demo.

Fixes issues like https://gitlab.gnome.org/GNOME/gtk/-/issues/3145
This commit is contained in:
Alexander Mikhaylenko 2022-06-09 22:42:45 +04:00
parent 7c60fb88b0
commit b4dc7f29d4
8 changed files with 1929 additions and 2037 deletions

View File

@ -30,90 +30,86 @@
</object>
</child>
<child>
<object class="GtkFrame">
<object class="GtkListBox">
<property name="selection-mode">none</property>
<signal name="row-activated" handler="row_activated"/>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<signal name="row-activated" handler="row_activated"/>
<style>
<class name="rich-list"/>
</style>
<object class="GtkListBoxRow">
<child>
<object class="GtkListBoxRow">
<object class="GtkBox">
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="switch_label">
<property name="label" translatable="yes">Switch</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkSwitch" id="switch">
<property name="halign">end</property>
<property name="valign">center</property>
</object>
</child>
<object class="GtkLabel" id="switch_label">
<property name="label" translatable="yes">Switch</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkSwitch" id="switch">
<property name="halign">end</property>
<property name="valign">center</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<child>
<object class="GtkListBoxRow">
<object class="GtkBox">
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="check_label">
<property name="label" translatable="yes">Check</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkCheckButton" id="check">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="active">1</property>
</object>
</child>
<object class="GtkLabel" id="check_label">
<property name="label" translatable="yes">Check</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkCheckButton" id="check">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="active">1</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<child>
<object class="GtkListBoxRow">
<object class="GtkBox">
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="image_label">
<property name="label" translatable="yes">Click here!</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkImage" id="image">
<property name="icon-name">object-select-symbolic</property>
<property name="halign">end</property>
<property name="valign">center</property>
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="opacity">0</property>
</object>
</child>
<object class="GtkLabel" id="image_label">
<property name="label" translatable="yes">Click here!</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkImage" id="image">
<property name="icon-name">object-select-symbolic</property>
<property name="halign">end</property>
<property name="valign">center</property>
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="opacity">0</property>
</object>
</child>
</object>
@ -134,146 +130,142 @@
</style>
</object>
</child>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="scale_label">
<property name="label" translatable="yes">Scale</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">0</property>
<property name="width-request">150</property>
<property name="adjustment">
<object class="GtkAdjustment">
<property name="upper">100</property>
<property name="value">50</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="scale_label">
<property name="label" translatable="yes">Scale</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">0</property>
<property name="width-request">150</property>
<property name="adjustment">
<object class="GtkAdjustment">
<property name="upper">100</property>
<property name="value">50</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="spin_label">
<property name="label" translatable="yes">Spinbutton</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkSpinButton">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="adjustment">
<object class="GtkAdjustment">
<property name="upper">100</property>
<property name="value">50</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="dropdown_label">
<property name="label" translatable="yes">Dropdown</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkDropDown">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="model">
<object class="GtkStringList">
<items>
<item>Choice 1</item>
<item>Choice 2</item>
<item>Choice 3</item>
<item>Choice 4</item>
</items>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="spin_label">
<property name="label" translatable="yes">Spinbutton</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkSpinButton">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="adjustment">
<object class="GtkAdjustment">
<property name="upper">100</property>
<property name="value">50</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="dropdown_label">
<property name="label" translatable="yes">Dropdown</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkDropDown">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="model">
<object class="GtkStringList">
<items>
<item>Choice 1</item>
<item>Choice 2</item>
<item>Choice 3</item>
<item>Choice 4</item>
</items>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="entry_label">
<property name="label" translatable="yes">Entry</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkEntry">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="placeholder-text">Type here…</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel" id="entry_label">
<property name="label" translatable="yes">Entry</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkEntry">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="placeholder-text">Type here…</property>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>

View File

@ -72,7 +72,7 @@
* # CSS nodes
*
* |[<!-- language="plain" -->
* list[.separators][.rich-list][.navigation-sidebar]
* list[.separators][.rich-list][.navigation-sidebar][.boxed-list]
* row[.activatable]
* ]|
*
@ -81,6 +81,9 @@
* Each `GtkListBoxRow` uses a single CSS node named row. The row nodes get the
* .activatable style class added when appropriate.
*
* It may also carry the .boxed-list style class. In this case, the list will be
* automatically surrounded by a frame and have separators.
*
* The main list node may also carry style classes to select
* the style of [list presentation](section-list-widget.html#list-styles):
* .rich-list, .navigation-sidebar or .data-table.

View File

@ -13,41 +13,74 @@
<property name="margin-bottom">60</property>
<property name="spacing">10</property>
<child>
<object class="GtkFrame">
<object class="GtkListBox" id="dnd_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBox" id="dnd_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Drag and hold here</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="dnd_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
<object class="GtkLabel">
<property name="label" translatable="yes">Drag and hold here</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkDropControllerMotion">
<signal name="enter" handler="on_drop_enter" swapped="no"/>
<object class="GtkLabel" id="dnd_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkDropControllerMotion">
<signal name="enter" handler="on_drop_enter" swapped="no"/>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBox" id="clipboard_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Clipboard</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="clipboard_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
</object>
@ -57,75 +90,33 @@
</object>
</child>
<child>
<object class="GtkFrame">
<object class="GtkListBox" id="primary_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBox" id="clipboard_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Clipboard</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="clipboard_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
<object class="GtkLabel">
<property name="label" translatable="yes">Primary</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox" id="primary_formats">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Primary</property>
<property name="halign">start</property>
<property name="valign">baseline</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="primary_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
<object class="GtkLabel" id="primary_info">
<property name="selectable">1</property>
<property name="halign">end</property>
<property name="valign">baseline</property>
<property name="ellipsize">end</property>
<property name="hexpand">1</property>
</object>
</child>
</object>

View File

@ -97,7 +97,7 @@ struct _GtkInspectorGeneral
GtkWidget *vk_device;
GtkWidget *vk_api_version;
GtkWidget *vk_driver_version;
GtkWidget *app_id_frame;
GtkWidget *app_id_box;
GtkWidget *app_id;
GtkWidget *resource_path;
GtkWidget *prefix;
@ -185,7 +185,7 @@ init_app_id (GtkInspectorGeneral *gen)
app = g_application_get_default ();
if (!app)
{
gtk_widget_set_visible (gen->app_id_frame, FALSE);
gtk_widget_set_visible (gen->app_id_box, FALSE);
return;
}
@ -1137,7 +1137,7 @@ gtk_inspector_general_class_init (GtkInspectorGeneralClass *klass)
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, vk_device);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, vk_api_version);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, vk_driver_version);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, app_id_frame);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, app_id_box);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, app_id);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, resource_path);
gtk_widget_class_bind_template_child (widget_class, GtkInspectorGeneral, prefix);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -3401,6 +3401,38 @@ columnview.complex {
}
}
/**********************************************************************
* Boxed Lists *
* Lists inside a rounded frame. Can be used together with .rich-list * *
**********************************************************************/
.boxed-list {
border-radius: $window_radius;
border: 1px solid $borders_color;
> row {
@include focus-ring($offset: -1px);
border-bottom: 1px solid transparentize($borders_color, 0.5);
&:backdrop {
border-bottom-color: transparentize($backdrop_borders_color, 0.5);
}
&:first-child {
border-top-left-radius: $window_radius;
border-top-right-radius: $window_radius;
}
&:last-child {
border-bottom-left-radius: $window_radius;
border-bottom-right-radius: $window_radius;
border-bottom: none;
}
}
}
/*********************
* App Notifications *
*********************/