[gtk/wip/otte/listview: 1/58] expander: Rename CSS nodes



commit fa8ef79fd7f8e495538f3a32ade20e00d39f3023
Author: Benjamin Otte <otte redhat com>
Date:   Sun Oct 13 21:00:40 2019 +0200

    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                                |  2 +-
 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 +++++++++-----------
 gtk/theme/HighContrast/gtk-contained-inverse.css | 16 ++++++++--------
 gtk/theme/HighContrast/gtk-contained.css         | 16 ++++++++--------
 7 files changed, 48 insertions(+), 52 deletions(-)
---
diff --git a/gtk/gtkexpander.c b/gtk/gtkexpander.c
index 28cd5fe9ee..928fca74e4 100644
--- a/gtk/gtkexpander.c
+++ b/gtk/gtkexpander.c
@@ -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 34df3ba88c..36bde21457 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3816,21 +3816,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 df397d8e11..c55e7a48ae 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1657,17 +1657,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 83e2258bd9..c22d0b1137 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1673,17 +1673,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; }


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]