[gtk+] color editor: Redo the non-activatable color swatch

[Matthias Clasen <matthiasc src gnome org>]

commit dfedda3deefc16a5ef8c45218dd600f81fd16d71
Author: Matthias Clasen <mclasen redhat com>
Date:   Fri Oct 30 22:16:18 2015 -0400

    color editor: Redo the non-activatable color swatch
    
    Use a .activatable style class on the color swatch and tie the
    hover effect to it. The color editor simply removes this class
    now to get an inert color swatch.
    
    This is more flexible and lets us avoid referring to the
    GtkColorEditor type in the theme.

 gtk/gtkcoloreditor.c                     |    2 ++
 gtk/gtkcolorswatch.c                     |    8 ++++++++
 gtk/theme/Adwaita/_common.scss           |   14 ++------------
 gtk/theme/Adwaita/gtk-contained-dark.css |   11 ++---------
 gtk/theme/Adwaita/gtk-contained.css      |   11 ++---------
 gtk/theme/HighContrast/_common.scss      |   14 ++------------
 gtk/theme/HighContrast/gtk.css           |    9 +--------
 7 files changed, 19 insertions(+), 50 deletions(-)
---
diff --git a/gtk/gtkcoloreditor.c b/gtk/gtkcoloreditor.c
index 8fbc8d5..fa80b35 100644
--- a/gtk/gtkcoloreditor.c
+++ b/gtk/gtkcoloreditor.c
@@ -377,6 +377,8 @@ gtk_color_editor_init (GtkColorEditor *editor)
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->sv_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->h_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->a_popup);
+
+  gtk_style_context_remove_class (gtk_widget_get_style_context (editor->priv->swatch), "activatable");
 }
 
 static void
diff --git a/gtk/gtkcolorswatch.c b/gtk/gtkcolorswatch.c
index 9296320..05d8734 100644
--- a/gtk/gtkcolorswatch.c
+++ b/gtk/gtkcolorswatch.c
@@ -31,6 +31,7 @@
 #include "gtkrenderprivate.h"
 #include "gtkcssnodeprivate.h"
 #include "gtkwidgetprivate.h"
+#include "gtkstylecontextprivate.h"
 #include "a11y/gtkcolorswatchaccessibleprivate.h"
 
 
@@ -39,6 +40,9 @@
  * and a subnode named overlay. The main node gets the .light or .dark
  * style classes added depending on the brightness of the color that
  * the swatch is showing.
+ *
+ * The color swatch has the .activatable style class by default. It can
+ * be removed for non-activatable swatches.
  */
 
 struct _GtkColorSwatchPrivate
@@ -93,6 +97,7 @@ static void
 gtk_color_swatch_init (GtkColorSwatch *swatch)
 {
   GtkCssNode *widget_node;
+  GtkStyleContext *context;
 
   swatch->priv = gtk_color_swatch_get_instance_private (swatch);
   swatch->priv->use_alpha = TRUE;
@@ -119,6 +124,9 @@ gtk_color_swatch_init (GtkColorSwatch *swatch)
   gtk_css_node_set_parent (swatch->priv->overlay_node, widget_node);
   gtk_css_node_set_state (swatch->priv->overlay_node, gtk_css_node_get_state (widget_node));
   g_object_unref (swatch->priv->overlay_node);
+
+  context = gtk_widget_get_style_context (GTK_WIDGET (swatch));
+  gtk_style_context_add_class (context, "activatable");
 }
 
 #define INTENSITY(r, g, b) ((r) * 0.30 + (g) * 0.59 + (b) * 0.11)
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b6290de..8b6ef0d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3113,8 +3113,8 @@ colorswatch {
   &:only-child > overlay { border-radius: $_colorswatch-radius; }
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -3132,16 +3132,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors
   &.dark overlay {
     color: white;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index f78854c..be48970 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4280,22 +4280,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index abfdfbf..c73d400 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4452,22 +4452,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 99b0e1a..bbf3111 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2408,8 +2408,8 @@ colorswatch {
   // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -2421,16 +2421,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
   &.dark {
     color: white;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index d046e11..7e12fc1 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2626,19 +2626,12 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
   colorswatch:backdrop, colorswatch:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark {
     color: white;
     outline-color: rgba(0, 0, 0, 0.3); }