AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

gtk-demo: Modernize accordion demo

Browse Source
This commit is contained in:
Benjamin Otte 2022-10-09 10:09:59 -04:00 committed by Matthias Clasen
parent 6a6ef0f437
commit 20b49e7c34
3 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
demos/gtk-demo/css_accordion.c
View File

@ -1,20 +1,16 @@
/* Theming/CSS Accordion /* Theming/CSS Accordion
* *
* A simple accordion demo written using CSS transitions and multiple backgrounds * A simple accordion demo written using CSS transitions and multiple backgrounds
*
*/ */
#include <gtk/gtk.h> #include <gtk/gtk.h>
static void static void
apply_css (GtkWidget *widget, GtkStyleProvider *provider) destroy_provider (GtkWidget *window,
GtkStyleProvider *provider)
{ {
GtkWidget *child; gtk_style_context_remove_provider_for_display (gtk_widget_get_display (window), provider);
gtk_style_context_add_provider (gtk_widget_get_style_context (widget), provider, G_MAXUINT);
for (child = gtk_widget_get_first_child (widget);
child != NULL;
child = gtk_widget_get_next_sibling (child))
apply_css (child, provider);
} }
GtkWidget * GtkWidget *
@ -24,8 +20,8 @@ do_css_accordion (GtkWidget *do_widget)
if (!window) if (!window)
{ {
GtkWidget *container, *child; GtkWidget *container, *styled_box, *child;
GtkStyleProvider *provider; GtkCssProvider *provider;
window = gtk_window_new (); window = gtk_window_new ();
gtk_window_set_title (GTK_WINDOW (window), "CSS Accordion"); gtk_window_set_title (GTK_WINDOW (window), "CSS Accordion");
@ -33,10 +29,13 @@ do_css_accordion (GtkWidget *do_widget)
gtk_window_set_default_size (GTK_WINDOW (window), 600, 300); gtk_window_set_default_size (GTK_WINDOW (window), 600, 300);
g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window); g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
styled_box = gtk_frame_new (NULL);
gtk_window_set_child (GTK_WINDOW (window), styled_box);
gtk_widget_add_css_class (styled_box, "accordion");
container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0); container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
gtk_widget_set_halign (container, GTK_ALIGN_CENTER); gtk_widget_set_halign (container, GTK_ALIGN_CENTER);
gtk_widget_set_valign (container, GTK_ALIGN_CENTER); gtk_widget_set_valign (container, GTK_ALIGN_CENTER);
gtk_window_set_child (GTK_WINDOW (window), container); gtk_frame_set_child (GTK_FRAME (styled_box), container);
child = gtk_button_new_with_label ("This"); child = gtk_button_new_with_label ("This");
gtk_box_append (GTK_BOX (container), child); gtk_box_append (GTK_BOX (container), child);
@ -56,10 +55,16 @@ do_css_accordion (GtkWidget *do_widget)
child = gtk_button_new_with_label (":-)"); child = gtk_button_new_with_label (":-)");
gtk_box_append (GTK_BOX (container), child); gtk_box_append (GTK_BOX (container), child);
provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ()); provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (GTK_CSS_PROVIDER (provider), "/css_accordion/css_accordion.css"); gtk_css_provider_load_from_resource (provider, "/css_accordion/css_accordion.css");
apply_css (window, provider); gtk_style_context_add_provider_for_display (gtk_widget_get_display (window),
GTK_STYLE_PROVIDER (provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
g_signal_connect (window, "destroy",
G_CALLBACK (destroy_provider), provider);
g_object_unref (provider);
} }
if (!gtk_widget_get_visible (window)) if (!gtk_widget_get_visible (window))

20
demos/gtk-demo/css_accordion.css
View File

@ -1,13 +1,13 @@
@import url("resource://css_accordion/reset.css"); .accordion, .accordion * {
all: unset;
* {
transition-property: color, background-color, border-color, background-image, padding, border-width; transition-property: color, background-color, border-color, background-image, padding, border-width;
transition-duration: 1s; transition-duration: 1s;
font: 20px Cantarell; font: 20px Cantarell;
} }
window { .accordion {
background: linear-gradient(153deg, #151515, #151515 5px, transparent 5px) 0 0, background: linear-gradient(153deg, #151515, #151515 5px, transparent 5px) 0 0,
linear-gradient(333deg, #151515, #151515 5px, transparent 5px) 10px 5px, linear-gradient(333deg, #151515, #151515 5px, transparent 5px) 10px 5px,
linear-gradient(153deg, #222, #222 5px, transparent 5px) 0 5px, linear-gradient(153deg, #222, #222 5px, transparent 5px) 0 5px,
@ -18,7 +18,7 @@ window {
background-size: 20px 20px; background-size: 20px 20px;
} }
button { .accordion button {
color: black; color: black;
background-color: #bbb; background-color: #bbb;
border-style: solid; border-style: solid;
@ -28,25 +28,25 @@ button {
padding: 12px 4px; padding: 12px 4px;
} }
button:first-child { .accordion button:first-child {
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
} }
button:last-child { .accordion button:last-child {
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
border-width: 2px; border-width: 2px;
} }
button:hover { .accordion button:hover {
padding: 12px 48px; padding: 12px 48px;
background-color: #4870bc; background-color: #4870bc;
} }
button *:hover { .accordion button *:hover {
color: white; color: white;
} }
button:hover:active, .accordion button:hover:active,
button:active { .accordion button:active {
background-color: #993401; background-color: #993401;
} }

1
demos/gtk-demo/demo.gresource.xml
View File

@ -24,7 +24,6 @@
</gresource> </gresource>
<gresource prefix="/css_accordion"> <gresource prefix="/css_accordion">
<file>css_accordion.css</file> <file>css_accordion.css</file>
<file>reset.css</file>
</gresource> </gresource>
<gresource prefix="/css_basics"> <gresource prefix="/css_basics">
<file>css_basics.css</file> <file>css_basics.css</file>