From 6d20fe0bf9f00e01a5545a26fde3637edd262edc Mon Sep 17 00:00:00 2001 From: Benjamin Otte Date: Sun, 13 Oct 2019 21:00:40 +0200 Subject: [PATCH] expander: Rename CSS nodes The expander icon is renamed from "arrow" to "expander". The expander widget itself is renamed from "expander" to "expander-widget" (Better ideas welcome). This makes it possible to have an "expander" icon in more places then the GtkExpander widget (in particular in tree lists) and not confuse it with arrows. --- gtk/gtkexpander.c | 4 ++-- gtk/theme/Adwaita/_common.scss | 22 +++++++++---------- gtk/theme/Adwaita/gtk-contained-dark.css | 12 +++++----- gtk/theme/Adwaita/gtk-contained.css | 12 +++++----- gtk/theme/HighContrast/_common.scss | 20 ++++++++--------- .../HighContrast/gtk-contained-inverse.css | 16 +++++++------- gtk/theme/HighContrast/gtk-contained.css | 16 +++++++------- testsuite/css/nodes/expander.ltr.nodes | 4 ++-- testsuite/css/nodes/expander.rtl.nodes | 4 ++-- 9 files changed, 53 insertions(+), 57 deletions(-) diff --git a/gtk/gtkexpander.c b/gtk/gtkexpander.c index 28cd5fe9ee..7b484f10ba 100644 --- a/gtk/gtkexpander.c +++ b/gtk/gtkexpander.c @@ -342,7 +342,7 @@ gtk_expander_class_init (GtkExpanderClass *klass) G_TYPE_NONE, 0); gtk_widget_class_set_accessible_type (widget_class, GTK_TYPE_EXPANDER_ACCESSIBLE); - gtk_widget_class_set_css_name (widget_class, I_("expander")); + gtk_widget_class_set_css_name (widget_class, I_("expander-widget")); } static void @@ -370,7 +370,7 @@ gtk_expander_init (GtkExpander *expander) NULL); gtk_container_add (GTK_CONTAINER (priv->box), priv->title_widget); - priv->arrow_widget = gtk_icon_new ("arrow"); + priv->arrow_widget = gtk_icon_new ("expander"); gtk_style_context_add_class (gtk_widget_get_style_context (priv->arrow_widget), GTK_STYLE_CLASS_HORIZONTAL); gtk_container_add (GTK_CONTAINER (priv->title_widget), priv->arrow_widget); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 8bd7f993ce..b96dc9a631 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -3798,21 +3798,19 @@ row { * Expanders * *************/ expander { - title > arrow { - min-width: 16px; - min-height: 16px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - &:disabled { color: $insensitive_fg_color; } - &:disabled:backdrop { color: $backdrop_insensitive_color; } - } + &:disabled { color: $insensitive_fg_color; } + &:disabled:backdrop { color: $backdrop_insensitive_color; } - title > arrow:checked, title:checked > arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } +} - title:hover > arrow { - color: lighten($fg_color,30%); //only lightens the arrow - } +expander-widget title:hover > expander { + color: lighten($fg_color,30%); //only lightens the icon } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index e0dfd79c20..04a4c1303d 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1655,17 +1655,17 @@ row.activatable:selected:backdrop { background-color: #15539e; } .app-notification border, .app-notification.frame border { border: none; } /************* Expanders * */ -expander title > arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } -expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } -expander title > arrow:disabled { color: #919190; } +expander:disabled { color: #919190; } -expander title > arrow:disabled:backdrop { color: #5b5b5b; } +expander:disabled:backdrop { color: #5b5b5b; } -expander title > arrow:checked, expander title:checked > arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } -expander title:hover > arrow { color: white; } +expander-widget title:hover > expander { color: white; } /************ Calendar * */ calendar { color: white; border: 1px solid #1b1b1b; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 4504c1f56f..1eb0a12099 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1671,17 +1671,17 @@ row.activatable:selected:backdrop { background-color: #3584e4; } .app-notification border, .app-notification.frame border { border: none; } /************* Expanders * */ -expander title > arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } -expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } -expander title > arrow:disabled { color: #929595; } +expander:disabled { color: #929595; } -expander title > arrow:disabled:backdrop { color: #d4cfca; } +expander:disabled:backdrop { color: #d4cfca; } -expander title > arrow:checked, expander title:checked > arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } -expander title:hover > arrow { color: #748489; } +expander-widget title:hover > expander { color: #748489; } /************ Calendar * */ calendar { color: black; border: 1px solid #cdc7c2; } diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index ed70a0f839..5cf5dc4854 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -2763,20 +2763,18 @@ row.activatable { *************/ expander { - title > arrow { - min-width: 24px; - min-height: 24px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + min-width: 24px; + min-height: 24px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - &:disabled { color: $insensitive_fg_color; } + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - } + &:disabled { color: $insensitive_fg_color; } +} - title:hover > arrow { - color: lighten($fg_color,30%); //only lightens the arrow - } +expander-widget title:hover > expander { + color: lighten($fg_color,30%); //only lightens the icon } /************ diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index e01c521f7b..e4467931d2 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -675,7 +675,7 @@ notebook.frame { border: 1px solid gray; } notebook.frame:backdrop { border-color: #737373; } -notebook header { background-color: #262626; } +notebook header { background-color: #131313; } .frame notebook header { border: 1px solid gray; } @@ -789,11 +789,11 @@ notebook tab:backdrop { background-color: transparent; border-color: transparent .right notebook tab.reorderable-page:backdrop { border-color: transparent; background-color: transparent; } -notebook tab label { padding: 0 2px; font-weight: bold; color: gray; /* color: inherit doesn't work here */ } +notebook tab label { padding: 0 2px; font-weight: bold; color: silver; /* color: inherit doesn't work here */ } notebook tab label:backdrop { color: gray; } -notebook tab:hover label { color: silver; } +notebook tab:hover label { color: #dfdfdf; } notebook tab:checked label { color: #fff; } @@ -1242,15 +1242,15 @@ row:hover, row.activatable:hover { transition: none; } .app-notification border, .app-notification.frame border { border-width: 0; } /************* Expanders * */ -expander title > arrow { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +expander { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } -expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } -expander title > arrow:disabled { color: gray; } +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } -expander title > arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } +expander:disabled { color: gray; } -expander title:hover > arrow { color: white; } +expander-widget title:hover > expander { color: white; } /************ Calendar * */ calendar { border: 1px solid gray; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index ad846885a7..f9c3a11048 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -679,7 +679,7 @@ notebook.frame { border: 1px solid gray; } notebook.frame:backdrop { border-color: #8d8d8d; } -notebook header { background-color: #d9d9d9; } +notebook header { background-color: #ececec; } .frame notebook header { border: 1px solid gray; } @@ -793,11 +793,11 @@ notebook tab:backdrop { background-color: transparent; border-color: transparent .right notebook tab.reorderable-page:backdrop { border-color: transparent; background-color: transparent; } -notebook tab label { padding: 0 2px; font-weight: bold; color: gray; /* color: inherit doesn't work here */ } +notebook tab label { padding: 0 2px; font-weight: bold; color: #404040; /* color: inherit doesn't work here */ } notebook tab label:backdrop { color: gray; } -notebook tab:hover label { color: #404040; } +notebook tab:hover label { color: #202020; } notebook tab:checked label { color: #000; } @@ -1248,15 +1248,15 @@ row:hover, row.activatable:hover { transition: none; } .app-notification border, .app-notification.frame border { border-width: 0; } /************* Expanders * */ -expander title > arrow { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +expander { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } -expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } -expander title > arrow:disabled { color: gray; } +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } -expander title > arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } +expander:disabled { color: gray; } -expander title:hover > arrow { color: #4d4d4d; } +expander-widget title:hover > expander { color: #4d4d4d; } /************ Calendar * */ calendar { border: 1px solid gray; } diff --git a/testsuite/css/nodes/expander.ltr.nodes b/testsuite/css/nodes/expander.ltr.nodes index 25150e50fc..efe3ddd2d3 100644 --- a/testsuite/css/nodes/expander.ltr.nodes +++ b/testsuite/css/nodes/expander.ltr.nodes @@ -1,7 +1,7 @@ [window.background:dir(ltr)] decoration:dir(ltr) - expander:dir(ltr) + expander-widget:dir(ltr) box.vertical:dir(ltr) title.horizontal:dir(ltr) - arrow.horizontal:dir(ltr) + expander.horizontal:dir(ltr) label:dir(ltr) diff --git a/testsuite/css/nodes/expander.rtl.nodes b/testsuite/css/nodes/expander.rtl.nodes index 30b4804e51..17b3c7e61d 100644 --- a/testsuite/css/nodes/expander.rtl.nodes +++ b/testsuite/css/nodes/expander.rtl.nodes @@ -1,7 +1,7 @@ [window.background:dir(rtl)] decoration:dir(rtl) - expander:dir(rtl) + expander-widget:dir(rtl) box.vertical:dir(rtl) title.horizontal:dir(rtl) - arrow.horizontal:dir(rtl) + expander.horizontal:dir(rtl) label:dir(rtl) -- 2.30.2