From 20b49e7c34d1f865674c990124dd259f5c47b164 Mon Sep 17 00:00:00 2001
From: Benjamin Otte <otte@redhat.com>
Date: Sun, 9 Oct 2022 10:09:59 -0400
Subject: [PATCH] gtk-demo: Modernize accordion demo

---
 demos/gtk-demo/css_accordion.c    | 33 ++++++++++++++++++-------------
 demos/gtk-demo/css_accordion.css  | 20 +++++++++----------
 demos/gtk-demo/demo.gresource.xml |  1 -
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/demos/gtk-demo/css_accordion.c b/demos/gtk-demo/css_accordion.c
index c544f8a02d..6d327a8aab 100644
--- a/demos/gtk-demo/css_accordion.c
+++ b/demos/gtk-demo/css_accordion.c
@@ -1,20 +1,16 @@
 /* Theming/CSS Accordion
  *
  * A simple accordion demo written using CSS transitions and multiple backgrounds
+ *
  */
 
 #include <gtk/gtk.h>
 
 static void
-apply_css (GtkWidget *widget, GtkStyleProvider *provider)
+destroy_provider (GtkWidget        *window,
+                  GtkStyleProvider *provider)
 {
-  GtkWidget *child;
-
-  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);
+  gtk_style_context_remove_provider_for_display (gtk_widget_get_display (window), provider);
 }
 
 GtkWidget *
@@ -24,8 +20,8 @@ do_css_accordion (GtkWidget *do_widget)
 
   if (!window)
     {
-      GtkWidget *container, *child;
-      GtkStyleProvider *provider;
+      GtkWidget *container, *styled_box, *child;
+      GtkCssProvider *provider;
 
       window = gtk_window_new ();
       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);
       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);
       gtk_widget_set_halign (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");
       gtk_box_append (GTK_BOX (container), child);
@@ -56,10 +55,16 @@ do_css_accordion (GtkWidget *do_widget)
       child = gtk_button_new_with_label (":-)");
       gtk_box_append (GTK_BOX (container), child);
 
-      provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
-      gtk_css_provider_load_from_resource (GTK_CSS_PROVIDER (provider), "/css_accordion/css_accordion.css");
+      provider = gtk_css_provider_new ();
+      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))
diff --git a/demos/gtk-demo/css_accordion.css b/demos/gtk-demo/css_accordion.css
index ce3346d78e..5d219da998 100644
--- a/demos/gtk-demo/css_accordion.css
+++ b/demos/gtk-demo/css_accordion.css
@@ -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-duration: 1s;
 
     font: 20px Cantarell;
 }
 
-window {
+.accordion {
     background: linear-gradient(153deg, #151515, #151515 5px, transparent 5px) 0 0,
                 linear-gradient(333deg, #151515, #151515 5px, transparent 5px) 10px 5px,
                 linear-gradient(153deg, #222, #222 5px, transparent 5px) 0 5px,
@@ -18,7 +18,7 @@ window {
     background-size: 20px 20px;
 }
 
-button {
+.accordion button {
     color: black;
     background-color: #bbb;
     border-style: solid;
@@ -28,25 +28,25 @@ button {
     padding: 12px 4px;
 }
 
-button:first-child {
+.accordion button:first-child {
     border-radius: 5px 0 0 5px;
 }
 
-button:last-child {
+.accordion button:last-child {
     border-radius: 0 5px 5px 0;
     border-width: 2px;
 }
 
-button:hover {
+.accordion button:hover {
     padding: 12px 48px;
     background-color: #4870bc;
 }
 
-button *:hover {
+.accordion button *:hover {
     color: white;
 }
 
-button:hover:active,
-button:active {
+.accordion button:hover:active,
+.accordion button:active {
     background-color: #993401;
 }
diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index 65b87365e2..9eca1c16a7 100644
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -24,7 +24,6 @@
   </gresource>
   <gresource prefix="/css_accordion">
     <file>css_accordion.css</file>
-    <file>reset.css</file>
   </gresource>
   <gresource prefix="/css_basics">
     <file>css_basics.css</file>