mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-18 09:00:34 +00:00
colorswatch: Simplify drawing code
This adds a CSS box (complete with padding and border) for the icon. The box is even drawn when no icon is present. Use the ".image" as the style class here instead of -active-color-badge. Use this box to draw the circle around the selection icon in Adwaita.
This commit is contained in:
parent
3897041f4a
commit
be19ee29c2
@ -101,7 +101,7 @@ gtk_color_swatch_init (GtkColorSwatch *swatch)
|
||||
}
|
||||
|
||||
#define INTENSITY(r, g, b) ((r) * 0.30 + (g) * 0.59 + (b) * 0.11)
|
||||
#define ACTIVE_BADGE_RADIUS 10
|
||||
#define PIXBUF_SIZE 16
|
||||
|
||||
static gboolean
|
||||
swatch_draw (GtkWidget *widget,
|
||||
@ -113,18 +113,19 @@ swatch_draw (GtkWidget *widget,
|
||||
GtkStyleContext *context;
|
||||
GtkStateFlags state;
|
||||
GtkIconTheme *theme;
|
||||
GtkBorder border, padding;
|
||||
GdkRectangle rect;
|
||||
GtkIconInfo *icon_info = NULL;
|
||||
|
||||
theme = gtk_icon_theme_get_default ();
|
||||
context = gtk_widget_get_style_context (widget);
|
||||
state = gtk_widget_get_state_flags (widget);
|
||||
state = gtk_style_context_get_state (context);
|
||||
width = gtk_widget_get_allocated_width (widget);
|
||||
height = gtk_widget_get_allocated_height (widget);
|
||||
|
||||
cairo_save (cr);
|
||||
|
||||
gtk_style_context_save (context);
|
||||
gtk_style_context_set_state (context, state);
|
||||
|
||||
_gtk_theming_background_init (&background, context,
|
||||
0, 0, width, height,
|
||||
@ -184,55 +185,40 @@ swatch_draw (GtkWidget *widget,
|
||||
|
||||
if (swatch->priv->icon)
|
||||
{
|
||||
icon_info = gtk_icon_theme_lookup_icon (theme, swatch->priv->icon, 16,
|
||||
icon_info = gtk_icon_theme_lookup_icon (theme, swatch->priv->icon, PIXBUF_SIZE,
|
||||
GTK_ICON_LOOKUP_GENERIC_FALLBACK
|
||||
| GTK_ICON_LOOKUP_USE_BUILTIN);
|
||||
}
|
||||
else if ((state & GTK_STATE_FLAG_SELECTED) != 0)
|
||||
{
|
||||
GdkRGBA bg, border;
|
||||
GtkBorder border_width;
|
||||
GIcon *gicon;
|
||||
|
||||
gtk_style_context_add_class (context, "color-active-badge");
|
||||
_gtk_theming_background_init (&background, context,
|
||||
(width - 2 * ACTIVE_BADGE_RADIUS) / 2, (height - 2 * ACTIVE_BADGE_RADIUS) / 2,
|
||||
2 * ACTIVE_BADGE_RADIUS, 2* ACTIVE_BADGE_RADIUS,
|
||||
GTK_JUNCTION_NONE);
|
||||
gicon = g_themed_icon_new ("object-select-symbolic");
|
||||
/* fallback for themes that don't have object-select-symbolic */
|
||||
g_themed_icon_append_name (G_THEMED_ICON (gicon), "gtk-apply");
|
||||
|
||||
if (_gtk_theming_background_has_background_image (&background))
|
||||
{
|
||||
_gtk_theming_background_render (&background, cr);
|
||||
}
|
||||
else
|
||||
{
|
||||
G_GNUC_BEGIN_IGNORE_DEPRECATIONS
|
||||
gtk_style_context_get_background_color (context, state, &bg);
|
||||
gtk_style_context_get_border_color (context, state, &border);
|
||||
G_GNUC_END_IGNORE_DEPRECATIONS
|
||||
gtk_style_context_get_border (context, state, &border_width);
|
||||
|
||||
cairo_new_sub_path (cr);
|
||||
cairo_arc (cr, width / 2, height / 2, ACTIVE_BADGE_RADIUS, 0, 2 * G_PI);
|
||||
cairo_close_path (cr);
|
||||
gdk_cairo_set_source_rgba (cr, &bg);
|
||||
cairo_fill_preserve (cr);
|
||||
|
||||
gdk_cairo_set_source_rgba (cr, &border);
|
||||
cairo_set_line_width (cr, border_width.left);
|
||||
cairo_stroke (cr);
|
||||
|
||||
gicon = g_themed_icon_new ("object-select-symbolic");
|
||||
/* fallback for themes that don't have object-select-symbolic */
|
||||
g_themed_icon_append_name (G_THEMED_ICON (gicon), "gtk-apply");
|
||||
|
||||
icon_info = gtk_icon_theme_lookup_by_gicon (theme, gicon, 16,
|
||||
GTK_ICON_LOOKUP_GENERIC_FALLBACK
|
||||
| GTK_ICON_LOOKUP_USE_BUILTIN);
|
||||
g_object_unref (gicon);
|
||||
}
|
||||
icon_info = gtk_icon_theme_lookup_by_gicon (theme, gicon, PIXBUF_SIZE,
|
||||
GTK_ICON_LOOKUP_GENERIC_FALLBACK
|
||||
| GTK_ICON_LOOKUP_USE_BUILTIN);
|
||||
g_object_unref (gicon);
|
||||
}
|
||||
|
||||
gtk_style_context_restore (context);
|
||||
|
||||
/* now draw the overlay image */
|
||||
gtk_style_context_save (context);
|
||||
gtk_style_context_add_class (context, GTK_STYLE_CLASS_IMAGE);
|
||||
|
||||
gtk_style_context_get_border (context, state, &border);
|
||||
gtk_style_context_get_padding (context, state, &padding);
|
||||
rect.width = PIXBUF_SIZE + border.left + border.right + padding.left + padding.right;
|
||||
rect.height = PIXBUF_SIZE + border.top + border.bottom + padding.top + padding.bottom;
|
||||
rect.x = (width - rect.width) / 2;
|
||||
rect.y = (height - rect.height) / 2;
|
||||
|
||||
gtk_render_background (context, cr, rect.x, rect.y, rect.width, rect.height);
|
||||
gtk_render_frame (context, cr, rect.x, rect.y, rect.width, rect.height);
|
||||
|
||||
if (icon_info != NULL)
|
||||
{
|
||||
GdkPixbuf *pixbuf;
|
||||
@ -243,8 +229,8 @@ G_GNUC_END_IGNORE_DEPRECATIONS
|
||||
if (pixbuf != NULL)
|
||||
{
|
||||
gtk_render_icon (context, cr, pixbuf,
|
||||
(width - gdk_pixbuf_get_width (pixbuf)) / 2,
|
||||
(height - gdk_pixbuf_get_height (pixbuf)) / 2);
|
||||
rect.x + border.left + padding.left,
|
||||
rect.y + border.top + padding.top);
|
||||
g_object_unref (pixbuf);
|
||||
}
|
||||
|
||||
|
@ -2832,16 +2832,22 @@ GtkColorSwatch {
|
||||
&:only-child {
|
||||
border-radius: 5px;
|
||||
}
|
||||
&.color-active-badge {
|
||||
border-width: 2px;
|
||||
&:hover { background-image: none; }
|
||||
&.color-light, &.color-light:hover {
|
||||
color: transparentize(black,0.7);
|
||||
border-color: transparentize(black,0.7);
|
||||
}
|
||||
&.color-dark, &.color-dark:hover {
|
||||
color: transparentize(white,0.5);
|
||||
border-color: transparentize(white,0.5);
|
||||
&.image, &.image:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
&:selected {
|
||||
border-width: 2px;
|
||||
&.color-light, &.color-light:hover {
|
||||
color: transparentize(black,0.7);
|
||||
border-color: transparentize(black,0.7);
|
||||
}
|
||||
&.color-dark, &.color-dark:hover {
|
||||
color: transparentize(white,0.5);
|
||||
border-color: transparentize(white,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4188,16 +4188,20 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch.color-active-badge {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.color-active-badge:hover {
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.image, GtkColorSwatch.image:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none; }
|
||||
GtkColorSwatch.image:selected, GtkColorSwatch.image:hover:selected {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.image:selected.color-light, GtkColorSwatch.image:selected.color-light:hover, GtkColorSwatch.image:hover:selected.color-light, GtkColorSwatch.image:hover:selected.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.image:selected.color-dark, GtkColorSwatch.image:selected.color-dark:hover, GtkColorSwatch.image:hover:selected.color-dark, GtkColorSwatch.image:hover:selected.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: #2a2f2f;
|
||||
|
@ -4349,16 +4349,20 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch.color-active-badge {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.color-active-badge:hover {
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.image, GtkColorSwatch.image:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none; }
|
||||
GtkColorSwatch.image:selected, GtkColorSwatch.image:hover:selected {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.image:selected.color-light, GtkColorSwatch.image:selected.color-light:hover, GtkColorSwatch.image:hover:selected.color-light, GtkColorSwatch.image:hover:selected.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.image:selected.color-dark, GtkColorSwatch.image:selected.color-dark:hover, GtkColorSwatch.image:hover:selected.color-dark, GtkColorSwatch.image:hover:selected.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: #c7c7c7;
|
||||
|
Loading…
Reference in New Issue
Block a user