gtk-demo: Add animated icons to the dnd demo

This is to test animated drag icons.
This commit is contained in:
Matthias Clasen 2020-06-19 19:18:45 -04:00
parent 4a43c77f66
commit eb25fc1d5a
3 changed files with 123 additions and 3 deletions

View File

@ -105,6 +105,9 @@
<file>zoom_in_cursor.png</file>
<file>zoom_out_cursor.png</file>
</gresource>
<gresource prefix="/dnd">
<file>dnd.css</file>
</gresource>
<gresource prefix="/fishbowl">
<file>fishbowl.ui</file>
<file>gtkfishbowl.c</file>

View File

@ -38,15 +38,20 @@ set_color (CanvasItem *item,
char *str;
GtkStyleContext *context;
GtkCssProvider *provider;
const char *old_class;
str = gdk_rgba_to_string (color);
css = g_strdup_printf ("* { background: %s; padding: 10px; margin: 1px; }", str);
css = g_strdup_printf ("* { background: %s; }", str);
context = gtk_widget_get_style_context (item->label);
provider = g_object_get_data (G_OBJECT (context), "style-provider");
if (provider)
gtk_style_context_remove_provider (context, GTK_STYLE_PROVIDER (provider));
old_class = (const char *)g_object_get_data (G_OBJECT (item->label), "css-class");
if (old_class)
gtk_widget_remove_css_class (item->label, old_class);
provider = gtk_css_provider_new ();
gtk_css_provider_load_from_data (provider, css, -1);
gtk_style_context_add_provider (gtk_widget_get_style_context (item->label), GTK_STYLE_PROVIDER (provider), 800);
@ -56,6 +61,27 @@ set_color (CanvasItem *item,
g_free (css);
}
static void
set_css (CanvasItem *item,
const char *class)
{
GtkStyleContext *context;
GtkCssProvider *provider;
const char *old_class;
context = gtk_widget_get_style_context (item->label);
provider = g_object_get_data (G_OBJECT (context), "style-provider");
if (provider)
gtk_style_context_remove_provider (context, GTK_STYLE_PROVIDER (provider));
old_class = (const char *)g_object_get_data (G_OBJECT (item->label), "css-class");
if (old_class)
gtk_widget_remove_css_class (item->label, old_class);
g_object_set_data_full (G_OBJECT (item->label), "css-class", g_strdup (class), g_free);
gtk_widget_add_css_class (item->label, class);
}
static gboolean
item_drag_drop (GtkDropTarget *dest,
const GValue *value,
@ -65,7 +91,10 @@ item_drag_drop (GtkDropTarget *dest,
GtkWidget *label = gtk_event_controller_get_widget (GTK_EVENT_CONTROLLER (dest));
CanvasItem *item = CANVAS_ITEM (gtk_widget_get_parent (gtk_widget_get_parent (label)));
if (G_VALUE_TYPE (value) == GDK_TYPE_RGBA)
set_color (item, g_value_get_boxed (value));
else if (G_VALUE_TYPE (value) == G_TYPE_STRING)
set_css (item, g_value_get_string (value));
return TRUE;
}
@ -132,11 +161,13 @@ canvas_item_init (CanvasItem *item)
GdkRGBA rgba;
GtkDropTarget *dest;
GtkGesture *gesture;
GType types[2] = { GDK_TYPE_RGBA, G_TYPE_STRING };
n_items++;
text = g_strdup_printf ("Item %d", n_items);
item->label = gtk_label_new (text);
gtk_widget_add_css_class (item->label, "canvasitem");
g_free (text);
item->fixed = gtk_fixed_new ();
@ -154,7 +185,8 @@ canvas_item_init (CanvasItem *item)
item->angle = 0;
dest = gtk_drop_target_new (GDK_TYPE_RGBA, GDK_ACTION_COPY);
dest = gtk_drop_target_new (G_TYPE_INVALID, GDK_ACTION_COPY);
gtk_drop_target_set_gtypes (dest, types, G_N_ELEMENTS (types));
g_signal_connect (dest, "drop", G_CALLBACK (item_drag_drop), NULL);
gtk_widget_add_controller (GTK_WIDGET (item->label), GTK_EVENT_CONTROLLER (dest));
@ -529,6 +561,42 @@ canvas_new (void)
return canvas;
}
static GdkContentProvider *
css_drag_prepare (GtkDragSource *source,
double x,
double y,
GtkWidget *button)
{
const char *class;
GdkPaintable *paintable;
class = (const char *)g_object_get_data (G_OBJECT (button), "css-class");
paintable = gtk_widget_paintable_new (button);
gtk_drag_source_set_icon (source, paintable, 0, 0);
g_object_unref (paintable);
return gdk_content_provider_new_typed (G_TYPE_STRING, class);
}
static GtkWidget *
css_button_new (const char *class)
{
GtkWidget *button;
GtkDragSource *source;
button = gtk_image_new ();
gtk_widget_set_size_request (button, 48, 32);
gtk_widget_add_css_class (button, class);
g_object_set_data (G_OBJECT (button), "css-class", (gpointer)class);
source = gtk_drag_source_new ();
g_signal_connect (source, "prepare", G_CALLBACK (css_drag_prepare), button);
gtk_widget_add_controller (button, GTK_EVENT_CONTROLLER (source));
return button;
}
static GtkWidget *window = NULL;
GtkWidget *
@ -548,10 +616,18 @@ do_dnd (GtkWidget *do_widget)
};
int i;
int x, y;
GtkCssProvider *provider;
button = gtk_color_button_new ();
g_object_unref (g_object_ref_sink (button));
provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider, "/dnd/dnd.css");
gtk_style_context_add_provider_for_display (gdk_display_get_default (),
GTK_STYLE_PROVIDER (provider),
800);
g_object_unref (provider);
window = gtk_window_new ();
gtk_window_set_display (GTK_WINDOW (window),
gtk_widget_get_display (do_widget));
@ -606,6 +682,10 @@ do_dnd (GtkWidget *do_widget)
NULL);
gtk_box_append (GTK_BOX (box3), swatch);
}
gtk_box_append (GTK_BOX (box3), css_button_new ("rainbow1"));
gtk_box_append (GTK_BOX (box3), css_button_new ("rainbow2"));
gtk_box_append (GTK_BOX (box3), css_button_new ("rainbow3"));
}
if (!gtk_widget_get_visible (window))

37
demos/gtk-demo/dnd.css Normal file
View File

@ -0,0 +1,37 @@
label.canvasitem {
padding: 10px;
margin: 1px;
}
.canvasitem.rainbow1,
image.rainbow1 {
background: linear-gradient(140deg,red,orange,yellow,green,blue,purple);
}
.canvasitem.rainbow2,
image.rainbow2 {
animation: rainbow2 1s infinite linear;
}
@keyframes rainbow2 {
0% { background: linear-gradient(0deg,red,orange,yellow,green,blue,purple); }
25% { background: linear-gradient(90deg,red,orange,yellow,green,blue,purple); }
50% { background: linear-gradient(180deg,red,orange,yellow,green,blue,purple); }
75% { background: linear-gradient(270deg,red,orange,yellow,green,blue,purple); }
100% { background: linear-gradient(360deg,red,orange,yellow,green,blue,purple); }
}
.canvasitem.rainbow3,
image.rainbow3 {
animation: rainbow3 1s infinite linear;
}
@keyframes rainbow3 {
0% { background: linear-gradient(140deg,red,orange,yellow,green,blue,purple); }
16.6% { background: linear-gradient(140deg,purple,red,orange,yellow,green,blue); }
33.2% { background: linear-gradient(140deg,blue,purple,red,orange,yellow,green); }
50% { background: linear-gradient(140deg,green,blue,purple,red,orange,yellow); }
66.6% { background: linear-gradient(140deg,yellow,green,blue,purple,red,orange); }
83.2% { background: linear-gradient(140deg,orange,yellow,green,blue,purple,red); }
100% { background: linear-gradient(140deg,red,orange,yellow,green,blue,purple); }
}