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.

diff --git a/gtk/gtkexpander.c b/gtk/gtkexpander.c
index 28cd5fe9eea14d3b30a9836de4898a015e9a8b1a..7b484f10ba5110de3d46cfc1deda9492ac461212 100644 (file)
--- 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 8bd7f993ce7a04741dfef2a4a86af9848f30f857..b96dc9a6310e2adb0f23f0c44ab2523ed97bffc1 100644 (file)
--- 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 e0dfd79c2039fccd0f4143b666fa8aac69528ba4..04a4c1303da511d034938c380c879836b0d7f37f 100644 (file)
--- 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 4504c1f56fbedcb139960bc1fb3f175848684901..1eb0a12099681b596a8c137529f13db37da2db70 100644 (file)
--- 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 ed70a0f8390fc690f7a87f29678f522a33cec793..5cf5dc48540dd840ee8b3616509e760884122153 100644 (file)
--- 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 e01c521f7b9cf033176cb7a5f62049ae532dca6f..e4467931d247fca76616351ba988351c5741684b 100644 (file)
--- 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 ad846885a76970877ac0c6b754c8f45d25078a1b..f9c3a11048f92487bf3ddbf9ec007dc81279f730 100644 (file)
--- 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 25150e50fc7de393755963a2a734890d44002c91..efe3ddd2d3bacaaf598e78812cb66305454a686d 100644 (file)
--- 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 30b4804e513f7d518b8b407b9129150a7ecefeb3..17b3c7e61d558e7151938d4d064a6a28e50d5f9b 100644 (file)
--- 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)