gtk-demo: add a test for a CSS accordion

diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am
index 7ef52f710916fe9e53bc064fef0f78a207bca0e2..52e38df068b343bc2d66c2651020afd2320a2a21 100644 (file)
--- a/demos/gtk-demo/Makefile.am
+++ b/demos/gtk-demo/Makefile.am
@@ -15,6 +15,7 @@ demos =                                               \
        clipboard.c                             \
        colorsel.c                              \
        combobox.c                              \
+       css_accordion.c                         \
        css_basics.c                            \
        dialog.c                                \
        drawingarea.c                           \
@@ -113,6 +114,7 @@ RESOURCES=  application.ui                  \
                theming.ui                      \
                gtk-logo-24.png                 \
                gtk-logo-48.png                 \
+               css_accordion.css               \
                css_basics.css                  \
                fancy.css                       \
                reset.css

diff --git a/demos/gtk-demo/brick.png b/demos/gtk-demo/brick.png
new file mode 100644 (file)
index 0000000..e5ea779
Binary files /dev/null and b/demos/gtk-demo/brick.png differ

diff --git a/demos/gtk-demo/css_accordion.c b/demos/gtk-demo/css_accordion.c
new file mode 100644 (file)
index 0000000..c101061
--- /dev/null
+++ b/demos/gtk-demo/css_accordion.c
@@ -0,0 +1,77 @@
+/* CSS Theming/CSS Accordion
+ *
+ * A simple accordion demo written using CSS transitions and multiple backgrounds
+ *
+ */
+
+#include <gtk/gtk.h>
+
+static GtkWidget *window = NULL;
+
+static void
+apply_css (GtkWidget *widget, GtkStyleProvider *provider)
+{
+  gtk_style_context_add_provider (gtk_widget_get_style_context (widget), provider, G_MAXUINT);
+  if (GTK_IS_CONTAINER (widget))
+    gtk_container_forall (GTK_CONTAINER (widget), (GtkCallback) apply_css, provider);
+}
+
+GtkWidget *
+do_css_accordion (GtkWidget *do_widget)
+{
+  if (!window)
+    {
+      GtkWidget *container, *child;
+      GtkStyleProvider *provider;
+      GBytes *bytes;
+      gsize data_size;
+      const guint8 *data;
+
+      window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
+      gtk_window_set_transient_for (GTK_WINDOW (window), GTK_WINDOW (do_widget));
+      gtk_window_set_default_size (GTK_WINDOW (window), 600, 300);
+      g_signal_connect (window, "destroy",
+                        G_CALLBACK (gtk_widget_destroyed), &window);
+      
+      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_container_add (GTK_CONTAINER (window), container);
+
+      child = gtk_button_new_with_label ("This");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new_with_label ("Is");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new_with_label ("A");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new_with_label ("CSS");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new_with_label ("Accordion");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new_with_label (":-)");
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
+      bytes = g_resources_lookup_data ("/css_accordion/gtk.css", 0, NULL);
+      data = g_bytes_get_data (bytes, &data_size);
+
+      gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider), data, data_size, NULL);
+
+      apply_css (window, provider);
+    }
+
+  if (!gtk_widget_get_visible (window))
+    gtk_widget_show_all (window);
+  else
+    {
+      gtk_widget_destroy (window);
+      window = NULL;
+    }
+
+  return window;
+}

diff --git a/demos/gtk-demo/css_accordion.css b/demos/gtk-demo/css_accordion.css
new file mode 100644 (file)
index 0000000..ffca895
--- /dev/null
+++ b/demos/gtk-demo/css_accordion.css
@@ -0,0 +1,52 @@
+@import url("reset.css");
+
+* {
+    transition-property: color, background-color, border-color, background-image, padding, border-width;
+    transition-duration: 1s;
+
+    font: Cantarell 20px;
+}
+
+GtkWindow {
+    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,
+                linear-gradient(333deg, #222, #222 5px, transparent 5px) 10px 10px,
+                linear-gradient(90deg, #1b1b1b, #1b1b1b 10px, transparent 10px),
+                linear-gradient(#1d1d1d, #1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
+    background-color: #131313;
+    background-size: 20px 20px;
+}
+
+.button {
+    color: black;
+    background-color: #bbb;
+    border-style: solid;
+    border-width: 2px 0 2px 2px;
+    border-color: #333;
+
+    padding: 12px 4px;
+}
+
+.button:first-child {
+    border-radius: 5px 0 0 5px;
+}
+
+.button:last-child {
+    border-radius: 0 5px 5px 0;
+    border-width: 2px;
+}
+
+.button:hover {
+    padding: 12px 48px;
+    background-color: #4870bc;
+}
+
+.button *:hover {
+    color: white;
+}
+
+.button:hover:active,
+.button:active {
+    background-color: #993401;
+}
\ No newline at end of file

diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index 67aeff4f1ba91c4453433e57eb21877280fa7d83..fa090f5e9d524ab0210f2347e37a94f9c85cca3f 100644 (file)
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -11,6 +11,9 @@
   <gresource prefix="/">
     <file>reset.css</file>
   </gresource>
+  <gresource prefix="/css_accordion">
+    <file alias="gtk.css">css_accordion.css</file>
+  </gresource>
   <gresource prefix="/css_basics">
     <file alias="gtk.css">css_basics.css</file>
   </gresource>