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

@ -29,15 +29,13 @@
</style>
</object>
</child>
<child>
<object class="GtkFrame">
<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"/>
<class name="boxed-list"/>
</style>
<child>
@ -120,8 +118,6 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkLabel">
@ -134,14 +130,12 @@
</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"/>
<class name="boxed-list"/>
</style>
<child>
@ -281,8 +275,6 @@
</object>
</child>
</object>
</child>
</object>
<object class="GtkSizeGroup">
<property name="mode">horizontal</property>
<widgets>

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

@ -12,13 +12,12 @@
<property name="margin-top">60</property>
<property name="margin-bottom">60</property>
<property name="spacing">10</property>
<child>
<object class="GtkFrame">
<child>
<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="GtkListBoxRow">
@ -54,15 +53,12 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame">
<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">
@ -93,15 +89,12 @@
</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"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -136,7 +129,5 @@
</child>
</object>
</child>
</object>
</child>
</template>
</interface>

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);

View File

@ -12,14 +12,13 @@
<property name="margin-top">60</property>
<property name="margin-bottom">60</property>
<property name="spacing">10</property>
<child>
<object class="GtkFrame" id="version_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="version_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -179,17 +178,14 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="app_id_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="app_id_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -245,17 +241,14 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="env_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="env_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -448,16 +441,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="display_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="display_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -540,29 +530,23 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="monitor_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="monitor_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="gl_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="gl_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -643,16 +627,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="vulkan_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="vulkan_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -737,16 +718,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="device_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="device_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
</object>
</child>
@ -754,8 +732,6 @@
</child>
</object>
</child>
</object>
</child>
</template>
<object class="GtkSizeGroup" id="labels">
<widgets>
@ -785,14 +761,14 @@
</object>
<object class="GtkSizeGroup">
<widgets>
<widget name="version_frame"/>
<widget name="app_id_frame"/>
<widget name="gl_frame"/>
<widget name="monitor_frame"/>
<widget name="vulkan_frame"/>
<widget name="env_frame"/>
<widget name="display_frame"/>
<widget name="device_frame"/>
<widget name="version_box"/>
<widget name="app_id_box"/>
<widget name="gl_box"/>
<widget name="monitor_box"/>
<widget name="vulkan_box"/>
<widget name="env_box"/>
<widget name="display_box"/>
<widget name="device_box"/>
</widgets>
</object>
</interface>

View File

@ -11,21 +11,20 @@
<property name="margin-top">30</property>
<property name="margin-bottom">60</property>
<property name="spacing">10</property>
<child>
<object class="GtkFrame">
<property name="halign">center</property>
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<property name="hexpand">False</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow" id="address_row">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="address_label">
@ -52,10 +51,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="type_label">
@ -81,10 +76,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="refcount_label">
@ -111,10 +102,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="state_label">
@ -141,10 +128,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="direction_label">
@ -171,10 +154,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="buildable_id_label">
@ -201,10 +180,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -230,10 +205,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -259,10 +230,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -300,10 +267,6 @@
<property name="visible" bind-source="measure_show" bind-property="active" bind-flags="sync-create"/>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkPicture" id="measure_picture">
@ -328,10 +291,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -357,10 +316,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -386,10 +341,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="surface_label">
@ -425,10 +376,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="renderer_label">
@ -464,10 +411,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel" id="frame_clock_label">
@ -503,10 +446,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -533,10 +472,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -562,10 +497,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -591,10 +522,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -621,10 +548,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -651,10 +574,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -681,10 +600,6 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="spacing">40</property>
<child>
<object class="GtkLabel">
@ -712,8 +627,6 @@
</child>
</object>
</child>
</object>
</child>
</template>
<object class="GtkSizeGroup">
<widgets>

View File

@ -15,14 +15,13 @@
<property name="margin-top">60</property>
<property name="margin-bottom">60</property>
<property name="spacing">10</property>
<child>
<object class="GtkFrame" id="visual_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="visual_box">
<property name="selection-mode">none</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -368,17 +367,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="debug_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="debug_box">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -632,17 +627,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="misc_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox" id="misc_box">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -670,17 +661,13 @@
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkFrame" id="inspector_frame">
<property name="halign">center</property>
<child>
<object class="GtkListBox">
<object class="GtkListBox" id="inspector_box">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<property name="halign">center</property>
<style>
<class name="rich-list"/>
<class name="boxed-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -702,8 +689,6 @@
</child>
</object>
</child>
</object>
</child>
</template>
<object class="GtkSizeGroup">
<widgets>
@ -741,10 +726,10 @@
</object>
<object class="GtkSizeGroup">
<widgets>
<widget name="visual_frame"/>
<widget name="debug_frame"/>
<widget name="misc_frame"/>
<widget name="inspector_frame"/>
<widget name="visual_box"/>
<widget name="debug_box"/>
<widget name="misc_box"/>
<widget name="inspector_box"/>
</widgets>
</object>
</interface>

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 *
*********************/