Merge branch 'list-widget-styles' into 'master'

List widget styles

Closes #2818

See merge request GNOME/gtk!2035

gtk/gtkcolumnview.c

@@ -55,6 +55,31 @@
  * must be attached to a sort model for the data that the view is showing, and the
  * columns must have sorters attached to them by calling gtk_column_view_column_set_sorter().
  * The initial sort order can be set with gtk_column_view_sort_by_column().
+ *
+ * # CSS nodes
+ *
+ * |[<!-- language="plain" -->
+ * columnview[.column-separators]
+ * ├── header
+ * │   ├── <column header>
+ * ┊   ┊
+ * │   ╰── <column header>
+ * │
+ * ├── listview
+ * │
+ * ┊
+ * ╰── [rubberband]
+
+ * ]|
+ *
+ * GtkColumnView uses a single CSS node named columnview. It may carry the
+ * .column-separators style class, when #GtkColumnView:show-column-separators
+ * property is set. Header widets appear below a node with name header.
+ * The rows are contained in a GtkListView widget, so there is a listview
+ * node with the same structure as for a standalone GtkListView widget. If
+ * #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.
  */
 
 struct _GtkColumnView
@@ -653,7 +678,7 @@ gtk_column_view_class_init (GtkColumnViewClass *klass)
                               G_TYPE_FROM_CLASS (gobject_class),
                               g_cclosure_marshal_VOID__UINTv);
 
-  gtk_widget_class_set_css_name (widget_class, I_("treeview"));
+  gtk_widget_class_set_css_name (widget_class, I_("columnview"));
 }
 
 static void update_column_resize  (GtkColumnView *self,
@@ -1136,7 +1161,7 @@ gtk_column_view_get_columns (GtkColumnView *self)
 /**
  * gtk_column_view_set_show_row_separators:
  * @self: a #GtkColumnView
- * @show_separators: %TRUE to show row separators
+ * @show_row_separators: %TRUE to show row separators
  *
  * Sets whether the list should show separators
  * between rows.

gtk/gtkgridview.c

@@ -48,6 +48,22 @@
  * @see_also: #GListModel
  *
  * GtkGridView is a widget to present a view into a large dynamic grid of items.
+ *
+ * # CSS nodes
+ *
+ * |[<!-- language="plain" -->
+ * gridview
+ * ├── child
+ * │
+ * ├── child
+ * │
+ * ┊
+ * ╰── [rubberband]
+ * ]|
+ *
+ * GtkGridView uses a single CSS node with name gridview. Each child
+ * uses a single CSS node with name child. For rubberband selection,
+ * a subnode with name rubberband is used.
  */
 
 typedef struct _Cell Cell;
@@ -992,7 +1008,7 @@ gtk_grid_view_class_init (GtkGridViewClass *klass)
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
   GObjectClass *gobject_class = G_OBJECT_CLASS (klass);
 
-  list_base_class->list_item_name = "flowboxchild";
+  list_base_class->list_item_name = "child";
   list_base_class->list_item_size = sizeof (Cell);
   list_base_class->list_item_augment_size = sizeof (CellAugment);
   list_base_class->list_item_augment_func = cell_augment;
@@ -1123,7 +1139,7 @@ gtk_grid_view_class_init (GtkGridViewClass *klass)
                                    "u",
                                    gtk_grid_view_activate_item);
 
-  gtk_widget_class_set_css_name (widget_class, I_("flowbox"));
+  gtk_widget_class_set_css_name (widget_class, I_("gridview"));
 }
 
 static void

gtk/gtklistview.c

@@ -46,6 +46,24 @@
  * @see_also: #GListModel
  *
  * GtkListView is a widget to present a view into a large dynamic list of items.
+ *
+ * # CSS nodes
+ *
+ * |[<!-- language="plain" -->
+ * listview[.separators]
+ * ├── row
+ * │
+ * ├── row
+ * │
+ * ┊
+ * ╰── [rubberband]
+
+ * ]|
+ *
+ * GtkListView uses a single CSS node named listview. It may carry the
+ * .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.
  */
 
 typedef struct _ListRow ListRow;
@@ -832,7 +850,7 @@ gtk_list_view_class_init (GtkListViewClass *klass)
                                    "u",
                                    gtk_list_view_activate_item);
 
-  gtk_widget_class_set_css_name (widget_class, I_("list"));
+  gtk_widget_class_set_css_name (widget_class, I_("listview"));
 }
 
 static void

gtk/theme/Adwaita/_common.scss

@@ -123,6 +123,23 @@ flowbox {
   }
 }
 
+gridview {
+  > rubberband { @extend rubberband; }
+
+  > child {
+    padding: 3px;
+    transition: $focus_transition;
+
+    @include focus-ring();
+
+    &:selected {
+      outline-color: $alt_focus_border_color;
+
+      @extend %selected_items;
+    }
+  }
+}
+
 coverflow cover {
   color: $text_color;
   background-color: $base_color;
@@ -1512,6 +1529,7 @@ pathbar > button {
 
 $_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
 $_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
+columnview.view,
 treeview.view {
   border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
   border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, better then nothing
@@ -2977,6 +2995,7 @@ separator {
 /*********
  * Lists *
  *********/
+listview,
 list {
   color: $text_color;
   background-color: $base_color;