Merge branch 'treeview-sort-arrows' into 'master'

Redo arrow icons in various widgets

Closes #3577

See merge request GNOME/gtk!3097

5 files changed, 103 insertions, 55 deletions

diff --git a/gtk/gtkcolumnviewtitle.c b/gtk/gtkcolumnviewtitle.c
index 160b1b7604..e2e57b29fa 100644
--- a/gtk/gtkcolumnviewtitle.c
+++ b/gtk/gtkcolumnviewtitle.c
@@ -28,7 +28,7 @@
 #include "gtklabel.h"
 #include "gtkwidgetprivate.h"
 #include "gtkbox.h"
-#include "gtkimage.h"
+#include "gtkbuiltiniconprivate.h"
 #include "gtkgestureclick.h"
 #include "gtkpopovermenu.h"
 #include "gtknative.h"
@@ -266,7 +266,7 @@ gtk_column_view_title_init (GtkColumnViewTitle *self)
   self->title = gtk_label_new (NULL);
   gtk_box_append (GTK_BOX (self->box), self->title);
 
-  self->sort = gtk_image_new ();
+  self->sort = gtk_builtin_icon_new ("sort-indicator");
   gtk_box_append (GTK_BOX (self->box), self->sort);
 
   gesture = gtk_gesture_click_new ();
@@ -308,15 +308,15 @@ gtk_column_view_title_update (GtkColumnViewTitle *self)
       active = gtk_column_view_sorter_get_sort_column (view_sorter, &inverted);
 
       gtk_widget_show (self->sort);
-      if (self->column == active)
-        {
-          if (inverted)
-            gtk_image_set_from_icon_name (GTK_IMAGE (self->sort), "pan-down-symbolic");
-          else
-            gtk_image_set_from_icon_name (GTK_IMAGE (self->sort), "pan-up-symbolic");
-        }
+      gtk_widget_remove_css_class (self->sort, "ascending");
+      gtk_widget_remove_css_class (self->sort, "descending");
+      gtk_widget_remove_css_class (self->sort, "unsorted");
+      if (self->column != active)
+        gtk_widget_add_css_class (self->sort, "unsorted");
+      else if (inverted)
+        gtk_widget_add_css_class (self->sort, "descending");
       else
-        gtk_image_clear (GTK_IMAGE (self->sort));
+        gtk_widget_add_css_class (self->sort, "ascending");
     }
   else
     gtk_widget_hide (self->sort);
diff --git a/gtk/gtkmenubutton.c b/gtk/gtkmenubutton.c
index 29a320aff3..255a11c658 100644
--- a/gtk/gtkmenubutton.c
+++ b/gtk/gtkmenubutton.c
@@ -107,12 +107,19 @@
  * |[<!-- language="plain" -->
  * menubutton
  * ╰── button.toggle
- *     ╰── [content]
+ *     ╰── <content>
+ *          ╰── [arrow]
  *]|
  *
  * GtkMenuButton has a single CSS node with name menubutton
  * which contains a toggle button node.
  *
+ * Inside the toggle button content, there is an arrow node for
+ * the indicator, which will carry one of the .none, .up, .down,
+ * .left or .right style classes to indicate the direction that
+ * the menu will appear in. The CSS is expected to provide a suitable
+ * image for each of these cases using the -gtk-icon-source property.
+ *
  * # Accessibility
  *
  * GtkMenuButton uses the #GTK_ACCESSIBLE_ROLE_BUTTON role.
@@ -121,7 +128,7 @@
 #include "config.h"
 
 #include "gtkactionable.h"
-#include "gtkimage.h"
+#include "gtkbuiltiniconprivate.h"
 #include "gtkintl.h"
 #include "gtkmain.h"
 #include "gtkmenubutton.h"
@@ -440,35 +447,40 @@ gtk_menu_button_class_init (GtkMenuButtonClass *klass)
 }
 
 static void
-set_arrow_type (GtkImage     *image,
+set_arrow_type (GtkWidget    *arrow,
                 GtkArrowType  arrow_type,
                 gboolean      visible)
 {
+  gtk_widget_remove_css_class (arrow, "none");
+  gtk_widget_remove_css_class (arrow, "down");
+  gtk_widget_remove_css_class (arrow, "up");
+  gtk_widget_remove_css_class (arrow, "left");
+  gtk_widget_remove_css_class (arrow, "right");
   switch (arrow_type)
     {
     case GTK_ARROW_NONE:
-      gtk_image_set_from_icon_name (image, "open-menu-symbolic");
+      gtk_widget_add_css_class (arrow, "none");
       break;
     case GTK_ARROW_DOWN:
-      gtk_image_set_from_icon_name (image, "pan-down-symbolic");
+      gtk_widget_add_css_class (arrow, "down");
       break;
     case GTK_ARROW_UP:
-      gtk_image_set_from_icon_name (image, "pan-up-symbolic");
+      gtk_widget_add_css_class (arrow, "up");
       break;
     case GTK_ARROW_LEFT:
-      gtk_image_set_from_icon_name (image, "pan-start-symbolic");
+      gtk_widget_add_css_class (arrow, "left");
       break;
     case GTK_ARROW_RIGHT:
-      gtk_image_set_from_icon_name (image, "pan-end-symbolic");
+      gtk_widget_add_css_class (arrow, "right");
       break;
     default:
       break;
     }
 
   if (visible)
-    gtk_widget_show (GTK_WIDGET (image));
+    gtk_widget_show (arrow);
   else
-    gtk_widget_hide (GTK_WIDGET (image));
+    gtk_widget_hide (arrow);
 }
 
 static void
@@ -476,8 +488,8 @@ add_arrow (GtkMenuButton *self)
 {
   GtkWidget *arrow;
 
-  arrow = gtk_image_new ();
-  set_arrow_type (GTK_IMAGE (arrow), self->arrow_type, TRUE);
+  arrow = gtk_builtin_icon_new ("arrow");
+  set_arrow_type (arrow, self->arrow_type, TRUE);
   gtk_button_set_child (GTK_BUTTON (self->button), arrow);
   self->arrow_widget = arrow;
 }
@@ -668,7 +680,7 @@ gtk_menu_button_set_direction (GtkMenuButton *menu_button,
   if (is_image_button && (menu_button->arrow_widget != gtk_button_get_child (GTK_BUTTON (menu_button->button))))
     return;
 
-  set_arrow_type (GTK_IMAGE (menu_button->arrow_widget),
+  set_arrow_type (menu_button->arrow_widget,
                   menu_button->arrow_type,
                   is_image_button || (menu_button->arrow_type != GTK_ARROW_NONE));
   update_popover_direction (menu_button);
@@ -848,9 +860,9 @@ gtk_menu_button_set_label (GtkMenuButton *menu_button,
                                gtk_button_get_use_underline (GTK_BUTTON (menu_button->button)));
   gtk_widget_set_hexpand (label_widget, TRUE);
   gtk_widget_set_halign (label_widget, GTK_ALIGN_CENTER);
-  arrow = gtk_image_new ();
+  arrow = gtk_builtin_icon_new ("arrow");
   menu_button->arrow_widget = arrow;
-  set_arrow_type (GTK_IMAGE (arrow), menu_button->arrow_type, menu_button->arrow_type != GTK_ARROW_NONE);
+  set_arrow_type (arrow, menu_button->arrow_type, menu_button->arrow_type != GTK_ARROW_NONE);
   gtk_box_append (GTK_BOX (box), label_widget);
   gtk_box_append (GTK_BOX (box), arrow);
   gtk_button_set_child (GTK_BUTTON (menu_button->button), box);
diff --git a/gtk/gtktreeview.c b/gtk/gtktreeview.c
index 82d5fd97d8..267c90b4fa 100644
--- a/gtk/gtktreeview.c
+++ b/gtk/gtktreeview.c
@@ -143,9 +143,11 @@
  * |[<!-- language="plain" -->
  * treeview.view
  * ├── header
- * │   ├── <column header>
+ * │   ├── button
+ * │   │   ╰── [sort-indicator]
  * ┊   ┊
- * │   ╰── <column header>
+ * │   ╰── button
+ * │       ╰── [sort-indicator]
  * │
  * ├── [rubberband]
  * ╰── [dndtarget]
@@ -155,6 +157,11 @@
  * It has a subnode with name header, which is the parent for all the column
  * header widgets' CSS nodes.
  *
+ * Each column header consists of a button, which among other content, has a
+ * child with name sort-indicator, which carries the .ascending or .descending
+ * style classes when the column header should show a sort indicator. The CSS
+ * is expected to provide a suitable image using the -gtk-icon-source property.
+ *
  * For rubberband selection, a subnode with name rubberband is used.
  *
  * For the drop target location during DND, a subnode with name dndtarget is used.
diff --git a/gtk/gtktreeviewcolumn.c b/gtk/gtktreeviewcolumn.c
index e321bed4b6..d546c994f2 100644
--- a/gtk/gtktreeviewcolumn.c
+++ b/gtk/gtktreeviewcolumn.c
@@ -38,6 +38,7 @@
 #include "gtkgesturedrag.h"
 #include "gtkeventcontrollerfocus.h"
 #include "gtkeventcontrollerkey.h"
+#include "gtkbuiltiniconprivate.h"
 
 #include <string.h>
 
@@ -52,12 +53,13 @@
  *   [GtkTreeView drag-and-drop][gtk3-GtkTreeView-drag-and-drop]
  *
  * The GtkTreeViewColumn object represents a visible column in a #GtkTreeView widget.
- * It allows to set properties of the column header, and functions as a holding pen for
- * the cell renderers which determine how the data in the column is displayed.
+ * It allows to set properties of the column header, and functions as a holding pen
+ * for the cell renderers which determine how the data in the column is displayed.
  *
  * Please refer to the [tree widget conceptual overview][TreeWidget]
- * for an overview of all the objects and data types related to the tree widget and how
- * they work together.
+ * for an overview of all the objects and data types related to the tree widget and
+ * how they work together, and to the #GtkTreeView documentation for specifics about
+ * the CSS node structure for treeviews and their headers.
  */
 
 
@@ -879,7 +881,7 @@ gtk_tree_view_column_create_button (GtkTreeViewColumn *tree_column)
   gtk_widget_set_halign (priv->frame, GTK_ALIGN_START);
 
   hbox = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 2);
-  priv->arrow = gtk_image_new_from_icon_name ("pan-down-symbolic");
+  priv->arrow = gtk_builtin_icon_new ("sort-indicator");
 
   if (priv->child)
     child = priv->child;
@@ -905,7 +907,7 @@ gtk_tree_view_column_create_button (GtkTreeViewColumn *tree_column)
   gtk_button_set_child (GTK_BUTTON (priv->button), hbox);
 }
 
-static void 
+static void
 gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
 {
   GtkTreeViewColumnPrivate *priv = tree_column->priv;
@@ -914,7 +916,6 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
   GtkWidget *frame;
   GtkWidget *arrow;
   GtkWidget *current_child;
-  const char *icon_name = "missing-image";
   GtkTreeModel *model;
 
   if (priv->tree_view)
@@ -948,17 +949,17 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
       g_return_if_fail (GTK_IS_LABEL (current_child));
 
       if (priv->title)
-	gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
-					  priv->title);
+        gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
+                                          priv->title);
       else
-	gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
-					  "");
+        gtk_label_set_text_with_mnemonic (GTK_LABEL (current_child),
+                                          "");
     }
 
   if (GTK_IS_TREE_SORTABLE (model))
     gtk_tree_sortable_get_sort_column_id (GTK_TREE_SORTABLE (model),
-					  &sort_column_id,
-					  NULL);
+                                          &sort_column_id,
+                                          NULL);
 
   if (priv->show_sort_indicator)
     {
@@ -971,24 +972,19 @@ gtk_tree_view_column_update_button (GtkTreeViewColumn *tree_column)
       else
         alternative = FALSE;
 
-      switch (priv->sort_order)
+      if ((!alternative && priv->sort_order == GTK_SORT_ASCENDING) ||
+          (alternative && priv->sort_order == GTK_SORT_DESCENDING))
         {
-	  case GTK_SORT_ASCENDING:
-            icon_name = alternative ? "pan-up-symbolic" : "pan-down-symbolic";
-	    break;
-
-	  case GTK_SORT_DESCENDING:
-            icon_name = alternative ? "pan-down-symbolic" : "pan-up-symbolic";
-	    break;
-
-	  default:
-	    g_warning (G_STRLOC": bad sort order");
-	    break;
-	}
+          gtk_widget_remove_css_class (arrow, "descending");
+          gtk_widget_add_css_class (arrow, "ascending");
+        }
+      else
+        {
+          gtk_widget_remove_css_class (arrow, "ascending");
+          gtk_widget_add_css_class (arrow, "descending");
+        }
     }
 
-  gtk_image_set_from_icon_name (GTK_IMAGE (arrow), icon_name);
-
   /* Put arrow on the right if the text is left-or-center justified, and on the
    * left otherwise; do this by packing boxes, so flipping text direction will
    * reverse things
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b5094c68e6..9bf97e18bf 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1766,6 +1766,17 @@ treeview.view {
         color: $fg_color;
         transition: none; //I shouldn't need this
       }
+      sort-indicator {
+        &.ascending {
+          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+        }
+        &.descending {
+          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+
+        min-height: 16px;
+        min-width: 16px;
+      }
     }
   }
 
@@ -4303,3 +4314,25 @@ popover.entry-completion > contents {
 statusbar {
   padding: 6px 10px 6px 10px;
 }
+
+menubutton {
+  arrow {
+    min-height: 16px;
+    min-width: 16px;
+    &.none {
+      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
+    }
+    &.down {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+    &.up {
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+    &.left {
+      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
+    }
+    &.right {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    }
+  }
+}