Commit dfedda3d authored by Matthias Clasen's avatar Matthias Clasen

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.
parent 42a231a6
......@@ -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
......
......@@ -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)
......
......@@ -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;
......
......@@ -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); }
......
......@@ -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); }
......
......@@ -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;
......
......@@ -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); }
......
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