Commit d7050c63 authored by Matthias Clasen's avatar Matthias Clasen

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

Redo arrow icons in various widgets

Closes #3577

See merge request !3097
parents b7c88ec8 5985b62f
Pipeline #248485 passed with stages
in 19 minutes and 1 second
......@@ -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);
......
......@@ -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);
......
......@@ -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.
......
......@@ -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
......
......@@ -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');
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment