AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'list-styles' into 'master'

Browse Source 
Implement and document list styles

See merge request GNOME/gtk!2421
This commit is contained in:
Matthias Clasen 2020-08-13 21:15:22 +00:00
commit e48a1d2df0
23 changed files with 245 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
build-aux/flatpak/org.gtk.Demo4.json
View File

@ -1,29 +1,38 @@
{
"app-id": "org.gtk.Demo4",
"runtime": "org.gnome.Platform",
"runtime-version": "master",
"sdk": "org.gnome.Sdk",
"command": "gtk4-demo",
"tags": ["devel", "development", "nightly"],
"desktop-file-name-prefix": "(Development) ",
"finish-args": [
"app-id" : "org.gtk.Demo4",
"runtime" : "org.gnome.Platform",
"runtime-version" : "master",
"sdk" : "org.gnome.Sdk",
"command" : "gtk4-demo",
"tags" : [
"devel",
"development",
"nightly"
],
"desktop-file-name-prefix" : "(Development) ",
"finish-args" : [
"--device=dri",
"--share=ipc",
"--socket=fallback-x11",
"--socket=wayland",
"--talk-name=org.gtk.vfs", "--talk-name=org.gtk.vfs.*"
"--talk-name=org.gtk.vfs",
"--talk-name=org.gtk.vfs.*"
],
"cleanup": [
"cleanup" : [
"/include",
"/lib/pkgconfig", "/share/pkgconfig",
"/lib/pkgconfig",
"/share/pkgconfig",
"/share/aclocal",
"/man", "/share/man", "/share/gtk-doc",
"*.la", ".a",
"/man",
"/share/man",
"/share/gtk-doc",
"*.la",
".a",
"/lib/girepository-1.0",
"/share/gir-1.0",
"/share/doc"
],
"modules": [
"modules" : [
{
"name" : "wayland",
"buildsystem" : "autotools",
@ -39,18 +48,18 @@
]
},
{
"name": "graphene",
"buildsystem": "meson",
"builddir": true,
"config-opts": [
"name" : "graphene",
"buildsystem" : "meson",
"builddir" : true,
"config-opts" : [
"--libdir=/app/lib",
"-Dtests=false",
"-Dbenchmarks=false"
],
"sources": [
"sources" : [
{
"type": "git",
"url": "https://github.com/ebassi/graphene.git"
"type" : "git",
"url" : "https://github.com/ebassi/graphene.git"
}
]
},
@ -58,7 +67,7 @@
"name" : "libsass",
"buildsystem" : "meson",
"builddir" : true,
"config-opts": [
"config-opts" : [
"--libdir=/app/lib"
],
"sources" : [
@ -73,7 +82,7 @@
"name" : "sassc",
"buildsystem" : "meson",
"builddir" : true,
"config-opts": [
"config-opts" : [
"--libdir=/app/lib"
],
"sources" : [
@ -85,18 +94,25 @@
]
},
{
"name": "gtk",
"buildsystem": "meson",
"builddir": true,
"config-opts": [
"--libdir=/app/lib"
"name" : "gtk",
"buildsystem" : "meson",
"builddir" : true,
"config-opts" : [
"--libdir=/app/lib",
"-Denable_vulkan=no",
"-Dbuildtype=debugoptimized"
],
"sources": [
"sources" : [
{
"type": "git",
"url": "https://gitlab.gnome.org/GNOME/gtk.git"
"type" : "git",
"url" : "https://gitlab.gnome.org/GNOME/gtk.git"
}
]
}
]
],
"build-options" : {
"env" : {
"GSK_RENDERER" : "opengl"
}
}
}

79
build-aux/flatpak/org.gtk.IconBrowser4.json
View File

@ -1,29 +1,38 @@
{
"app-id": "org.gtk.IconBrowser4",
"runtime": "org.gnome.Platform",
"runtime-version": "master",
"sdk": "org.gnome.Sdk",
"command": "gtk4-icon-browser",
"tags": ["devel", "development", "nightly"],
"desktop-file-name-prefix": "(Development) ",
"finish-args": [
"app-id" : "org.gtk.IconBrowser4",
"runtime" : "org.gnome.Platform",
"runtime-version" : "master",
"sdk" : "org.gnome.Sdk",
"command" : "gtk4-icon-browser",
"tags" : [
"devel",
"development",
"nightly"
],
"desktop-file-name-prefix" : "(Development) ",
"finish-args" : [
"--device=dri",
"--share=ipc",
"--socket=fallback-x11",
"--socket=wayland",
"--talk-name=org.gtk.vfs", "--talk-name=org.gtk.vfs.*"
"--talk-name=org.gtk.vfs",
"--talk-name=org.gtk.vfs.*"
],
"cleanup": [
"cleanup" : [
"/include",
"/lib/pkgconfig", "/share/pkgconfig",
"/lib/pkgconfig",
"/share/pkgconfig",
"/share/aclocal",
"/man", "/share/man", "/share/gtk-doc",
"*.la", ".a",
"/man",
"/share/man",
"/share/gtk-doc",
"*.la",
".a",
"/lib/girepository-1.0",
"/share/gir-1.0",
"/share/doc"
],
"modules": [
"modules" : [
{
"name" : "wayland",
"buildsystem" : "autotools",
@ -39,18 +48,18 @@
]
},
{
"name": "graphene",
"buildsystem": "meson",
"builddir": true,
"config-opts": [
"name" : "graphene",
"buildsystem" : "meson",
"builddir" : true,
"config-opts" : [
"--libdir=/app/lib",
"-Dtests=false",
"-Dbenchmarks=false"
],
"sources": [
"sources" : [
{
"type": "git",
"url": "https://github.com/ebassi/graphene.git"
"type" : "git",
"url" : "https://github.com/ebassi/graphene.git"
}
]
},
@ -58,7 +67,7 @@
"name" : "libsass",
"buildsystem" : "meson",
"builddir" : true,
"config-opts": [
"config-opts" : [
"--libdir=/app/lib"
],
"sources" : [
@ -73,7 +82,7 @@
"name" : "sassc",
"buildsystem" : "meson",
"builddir" : true,
"config-opts": [
"config-opts" : [
"--libdir=/app/lib"
],
"sources" : [
@ -85,18 +94,24 @@
]
},
{
"name": "gtk",
"buildsystem": "meson",
"builddir": true,
"config-opts": [
"--libdir=/app/lib"
"name" : "gtk",
"buildsystem" : "meson",
"builddir" : true,
"config-opts" : [
"--libdir=/app/lib",
"-Denable_vulkan=no",
"-Dbuildtype=debugoptimized"
],
"sources": [
"sources" : [
{
"type": "git",
"url": "https://gitlab.gnome.org/GNOME/gtk.git"
"type" : "git",
"url" : "https://gitlab.gnome.org/GNOME/gtk.git"
}
]
}
]
],
"build-options" : {
"env" : {
}
}
}

9
build-aux/flatpak/org.gtk.WidgetFactory4.json
View File

@ -98,7 +98,9 @@
"buildsystem" : "meson",
"builddir" : true,
"config-opts" : [
"--libdir=/app/lib"
"--libdir=/app/lib",
"-Denable_vulkan=no",
"-Dbuildtype=debugoptimized"
],
"sources" : [
{
@ -110,7 +112,10 @@
],
"build-options" : {
"env" : {
"DBUS_SESSION_BUS_ADDRESS" : "''"
"DBUS_SESSION_BUS_ADDRESS" : "''",
"GSK_RENDERER" : "opengl",
"GDK_DEBUG" : "vulkan-disable",
"G_ENABLE_DEBUG" : "true"
}
}
}

56
demos/gtk-demo/listbox2.ui
View File

@ -36,19 +36,18 @@
<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>
<child>
<object class="GtkListBoxRow">
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -69,15 +68,10 @@
<object class="GtkListBoxRow">
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -101,15 +95,10 @@
<object class="GtkListBoxRow">
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -151,21 +140,19 @@
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -197,15 +184,10 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -234,15 +216,10 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>
@ -274,15 +251,10 @@
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<property name="spacing">12</property>
<property name="height-request">34</property>
<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>

4
demos/gtk-demo/listview_settings.c
View File

@ -5,6 +5,10 @@
* It demonstrates how to implement support for trees with GtkListView.
* It also shows how to set up sorting and filtering for columns in a
* GtkColumnView.
*
* It also demonstrates different styles of list. The tree on the left
* uses the ­.navigation-sidebar style class, the list on the right uses
* the ­.data-table style class.
*/
#include <gtk/gtk.h>

6
demos/gtk-demo/listview_settings.ui
View File

@ -20,6 +20,9 @@
<object class="GtkScrolledWindow">
<child>
<object class="GtkListView" id="listview">
<style>
<class name="navigation-sidebar"/>
</style>
<property name="factory">
<object class="GtkBuilderListItemFactory">
<property name="bytes"><![CDATA[
@ -73,6 +76,9 @@
<property name="vexpand">1</property>
<child>
<object class="GtkColumnView" id="columnview">
<style>
<class name="data-table"/>
</style>
<child>
<object class="GtkColumnViewColumn" id="name_column">
<property name="title">Name</property>

3
demos/gtk-demo/main.ui
View File

@ -70,6 +70,9 @@
<child>
<object class="GtkListView" id="listview">
<style>
<class name="navigation-sidebar"/>
</style>
<property name="factory">
<object class="GtkBuilderListItemFactory">
<property name="resource">/ui/main-listitem.ui</property>

3
demos/widget-factory/widget-factory.ui
View File

@ -1624,6 +1624,9 @@ microphone-sensitivity-medium-symbolic</property>
<object class="GtkListBox" id="listbox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list"/>
</style>
<child type="placeholder">
<object class="GtkLabel">
<property name="label">No rows found</property>

BIN
docs/reference/gtk/images/data-table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
docs/reference/gtk/images/navigation-sidebar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/reference/gtk/images/rich-list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

3
docs/reference/gtk/meson.build
View File

@ -370,6 +370,9 @@ images = [
'images/widget-hvalign.png',
'images/window-default.png',
'images/window.png',
'images/rich-list.png',
'images/data-table.png',
'images/navigation-sidebar.png'
]
content_files = [

24
docs/reference/gtk/section-list-widget.md
View File

@ -165,6 +165,30 @@ rows and provide a similar experience to #GtkTreeView.
Developers should refer to those objects' API reference for more discussion
on the topic.
## List styles {#list-styles}
One of the advantages of the new list widgets over #GtkTreeViews and cell
renderers is that they are fully themable using GTK CSS. This provides a
lot of flexibility. The themes that ship with GTK provide a few predefined
list styles that can be used in many situations:
![Rich list](rich-list.png)
This style of list is low density, spacious and uses an outline focus ring.
It is suitable for lists of controls, e.g. in preference dialogs or
settings panels. Use the .rich-list style class.
![Navigation sidebar](navigation-sidebar.png)
This style of list is medium density, using a full background to indicate
focus and selection. Use the .navigation-sidebar style class.
![Data table](data-table.png)
This style of list is a high density table, similar in style to a traditional
treeview. Individual cells can be selectable and editable. Use the .data-table
style class.
## Comparison to GtkTreeView
Developers familiar with #GtkTreeView may wonder how this way of doing lists

6
gtk/gtkcolumnview.c
View File

@ -80,7 +80,7 @@
* # CSS nodes
*
* |[<!-- language="plain" -->
* columnview[.column-separators]
* columnview[.column-separators][.rich-list][.navigation-sidebar][.data-table]
* ├── header
* │ ├── <column header>
* ┊ ┊
@ -101,6 +101,10 @@
* #GtkColumnView:show-row-separators is set, it will be passed on to the
* list view, causing its CSS node to carry the .separators style class.
* For rubberband selection, a node with name rubberband is used.
*
* The main columnview node may also carry style classes to select
* the style of [list presentation](ListContainers.html#list-styles):
* .rich-list, .navigation-sidebar or .data-table.
*/
struct _GtkColumnView

14
gtk/gtklistbox.c
View File

@ -75,14 +75,18 @@
* # CSS nodes
*
* |[<!-- language="plain" -->
* list[.separators]
* list[.separators][.rich-list][.navigation-sidebar]
* ╰── row[.activatable]
* ]|
*
* GtkListBox uses a single CSS node named list. It may carry the .separators style
* class, when the #GtkListBox:show-separators property is set. Each GtkListBoxRow uses
* a single CSS node named row. The row nodes get the .activatable
* style class added when appropriate.
* GtkListBox uses a single CSS node named list. It may carry the .separators
* style class, when the #GtkListBox:show-separators property is set. Each
* GtkListBoxRow uses a single CSS node named row. The row nodes get the
* .activatable style class added when appropriate.
*
* The main list node may also carry style classes to select
* the style of [list presentation](ListContainers.html#list-styles):
* .rich-list, .navigation-sidebar or .data-table.
*/
typedef struct _GtkListBoxClass GtkListBoxClass;

6
gtk/gtklistview.c
View File

@ -118,7 +118,7 @@
* # CSS nodes
*
* |[<!-- language="plain" -->
* listview[.separators]
* listview[.separators][.rich-list][.navigation-sidebar][.data-table]
* ├── row
* │
* ├── row
@ -132,6 +132,10 @@
* .separators style class, when #GtkListView:show-separators property
* is set. Each child widget uses a single CSS node named row. For
* rubberband selection, a node with name rubberband is used.
*
* The main listview node may also carry style classes to select
* the style of [list presentation](ListContainers.html#list-styles):
* .rich-list, .navigation-sidebar or .data-table.
*/
typedef struct _ListRow ListRow;

1
gtk/gtkplacessidebar.c
View File

@ -3783,6 +3783,7 @@ gtk_places_sidebar_init (GtkPlacesSidebar *sidebar)
/* list box */
sidebar->list_box = gtk_list_box_new ();
gtk_widget_add_css_class (sidebar->list_box, "navigation-sidebar");
gtk_list_box_set_header_func (GTK_LIST_BOX (sidebar->list_box),
list_box_header_func, sidebar, NULL);

21
gtk/inspector/general.ui
View File

@ -18,6 +18,9 @@
<child>
<object class="GtkListBox" id="version_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
@ -178,6 +181,9 @@
<child>
<object class="GtkListBox" id="env_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
@ -405,6 +411,9 @@
<child>
<object class="GtkListBox" id="display_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
@ -506,6 +515,9 @@
<child>
<object class="GtkListBox" id="monitor_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
</object>
</child>
</object>
@ -516,6 +528,9 @@
<child>
<object class="GtkListBox" id="gl_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
@ -588,6 +603,9 @@
<child>
<object class="GtkListBox" id="vulkan_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
@ -691,6 +709,9 @@
<child>
<object class="GtkListBox" id="device_box">
<property name="selection-mode">none</property>
<style>
<class name="rich-list"/>
</style>
</object>
</child>
</object>

3
gtk/inspector/object-tree.ui
View File

@ -42,6 +42,9 @@
<child>
<object class="GtkColumnView" id="list">
<signal name="activate" handler="on_row_activated"/>
<style>
<class name="data-table"/>
</style>
<child>
<object class="GtkColumnViewColumn">
<property name="title">Type</property>

2
gtk/inspector/prop-list.ui
View File

@ -16,7 +16,7 @@
<child>
<object class="GtkColumnView" id="list">
<style>
<class name="list"/>
<class name="data-table"/>
</style>
<child>
<object class="GtkColumnViewColumn" id="name">

3
gtk/inspector/resource-list.ui
View File

@ -51,6 +51,9 @@
<child>
<object class="GtkColumnView" id="list">
<signal name="activate" handler="on_row_activated"/>
<style>
<class name="data-table"/>
</style>
<child>
<object class="GtkColumnViewColumn" id="path">
<property name="title" translatable="yes">Path</property>

8
gtk/inspector/visual.ui
View File

@ -46,7 +46,7 @@
<object class="GtkListBox" id="visual_box">
<property name="selection-mode">none</property>
<style>
<class name="view"/>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
@ -415,6 +415,9 @@
<object class="GtkListBox" id="debug_box">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<child>
@ -600,6 +603,9 @@
<object class="GtkListBox" id="misc_box">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list"/>
</style>
<child>
<object class="GtkListBoxRow">
<child>

35
gtk/theme/Adwaita/_common.scss
View File

@ -3066,7 +3066,7 @@ separator {
* Lists *
*********/
listview,
list {
list, .rich-list {
color: $text_color;
background-color: $base_color;
border-color: $borders_color;
@ -3077,7 +3077,7 @@ list {
border-color: $backdrop_borders_color;
}
> row { padding: 2px; }
> row { padding: 18px; }
> row.expander { padding: 0px; }
> row.expander .row-header { padding: 2px; }
@ -3120,6 +3120,25 @@ row {
}
}
/********************************************************
* Data Tables *
* treeview like tables with individual focusable cells *
* https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 *
********************************************************/
.data-table row:not(:selected) cell editablelabel:not(.editing):focus-within {
outline: 2px solid $focus_border_color;
}
.data-table row:not(:selected) cell editablelabel.editing:focus-within {
outline: 2px solid $selected_bg_color;
}
.data-table row:not(:selected) cell editablelabel.editing text selection {
color: $selected_fg_color;
background-color: $selected_bg_color;
}
/*********************
* App Notifications *
@ -3361,7 +3380,10 @@ row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sid
// see bug #786613 for details
// on this oddity
placessidebar {
/* this should be more generic, only using .navigation-sidebar
https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
*/
placessidebar, .navigation-sidebar {
> scrolledwindow.frame { border-style: none; }
row {
@ -3377,7 +3399,7 @@ placessidebar {
background-color: desaturate($selected_bg_color,100%);
color: $selected_fg_color;
&:focus {
&:focus-visible:focus-within {
outline-width: 0;
color: $selected_fg_color;
background-color: $selected_bg_color;
@ -3388,6 +3410,11 @@ placessidebar {
}
}
&:hover {
color: $fg_color;
background-color: $menu_selected_color;
}
&:disabled { color: $insensitive_fg_color; }
image.sidebar-icon {