[gtk+/wip/css] gtk-demo: add a demo for CSS multiple backgrounds



commit 6379e66c6bf5fe89cec3267ce2ea2fbb31ae8de3
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu May 24 14:17:25 2012 -0400

    gtk-demo: add a demo for CSS multiple backgrounds

 demos/gtk-demo/Makefile.am         |    2 +
 demos/gtk-demo/css_multiplebgs.c   |  170 ++++++++++++++++++++++++++++++++++++
 demos/gtk-demo/css_multiplebgs.css |  136 ++++++++++++++++++++++++++++
 demos/gtk-demo/demo.gresource.xml  |    3 +
 4 files changed, 311 insertions(+), 0 deletions(-)
---
diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am
index c7fc121..737addd 100644
--- a/demos/gtk-demo/Makefile.am
+++ b/demos/gtk-demo/Makefile.am
@@ -17,6 +17,7 @@ demos =						\
 	combobox.c				\
 	css_accordion.c                         \
 	css_basics.c				\
+	css_multiplebgs.c			\
 	css_pixbufs.c				\
 	dialog.c				\
 	drawingarea.c				\
@@ -117,6 +118,7 @@ RESOURCES=	application.ui			\
 		css_accordion.css		\
 		css_basics.css			\
 		css_pixbufs.css			\
+		css_multiplebgs.css		\
 		cssview.css			\
 		reset.css
 
diff --git a/demos/gtk-demo/css_multiplebgs.c b/demos/gtk-demo/css_multiplebgs.c
new file mode 100644
index 0000000..776480a
--- /dev/null
+++ b/demos/gtk-demo/css_multiplebgs.c
@@ -0,0 +1,170 @@
+/* CSS Theming/Multiple Backgrounds
+ *
+ * Gtk themes are written using CSS. Every widget is build of multiple items
+ * that you can style very similarly to a regular website.
+ *
+ */
+
+#include <gtk/gtk.h>
+
+static GtkWidget *window = NULL;
+
+static void
+show_parsing_error (GtkCssProvider *provider,
+                    GtkCssSection  *section,
+                    const GError   *error,
+                    GtkTextBuffer  *buffer)
+{
+  GtkTextIter start, end;
+  const char *tag_name;
+
+  gtk_text_buffer_get_iter_at_line_index (buffer,
+                                          &start,
+                                          gtk_css_section_get_start_line (section),
+                                          gtk_css_section_get_start_position (section));
+  gtk_text_buffer_get_iter_at_line_index (buffer,
+                                          &end,
+                                          gtk_css_section_get_end_line (section),
+                                          gtk_css_section_get_end_position (section));
+
+  if (g_error_matches (error, GTK_CSS_PROVIDER_ERROR, GTK_CSS_PROVIDER_ERROR_DEPRECATED))
+    tag_name = "warning";
+  else
+    tag_name = "error";
+
+  gtk_text_buffer_apply_tag_by_name (buffer, tag_name, &start, &end);
+}
+                    
+static void
+css_text_changed (GtkTextBuffer  *buffer,
+                  GtkCssProvider *provider)
+{
+  GtkTextIter start, end;
+  char *text;
+
+  gtk_text_buffer_get_start_iter (buffer, &start);
+  gtk_text_buffer_get_end_iter (buffer, &end);
+  gtk_text_buffer_remove_all_tags (buffer, &start, &end);
+
+  text = gtk_text_buffer_get_text (buffer, &start, &end, FALSE);
+  gtk_css_provider_load_from_data (provider, text, -1, NULL);
+  g_free (text);
+
+  gtk_style_context_reset_widgets (gdk_screen_get_default ());
+}
+
+static gboolean
+drawing_area_draw (GtkWidget *widget,
+                   cairo_t *cr)
+{
+  GtkStyleContext *context = gtk_widget_get_style_context (widget);
+
+  gtk_render_background (context, cr,
+                         0, 0,
+                         gtk_widget_get_allocated_width (widget),
+                         gtk_widget_get_allocated_height (widget));
+  gtk_render_frame (context, cr,
+                    0, 0,
+                    gtk_widget_get_allocated_width (widget),
+                    gtk_widget_get_allocated_height (widget));
+
+  return FALSE;
+}
+
+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_multiplebgs (GtkWidget *do_widget)
+{
+  if (!window)
+    {
+      GtkWidget *paned, *container, *child, *b;
+      GtkStyleProvider *provider;
+      GtkTextBuffer *text;
+      GBytes *bytes;
+      
+      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), 400, 300);
+      g_signal_connect (window, "destroy",
+                        G_CALLBACK (gtk_widget_destroyed), &window);
+
+      container = gtk_overlay_new ();
+      gtk_widget_add_events (container, 
+                             GDK_ENTER_NOTIFY_MASK |
+                             GDK_LEAVE_NOTIFY_MASK |
+                             GDK_POINTER_MOTION_MASK);
+      gtk_container_add (GTK_CONTAINER (window), container);
+
+      child = gtk_drawing_area_new ();
+      gtk_widget_set_name (child, "canvas");
+      g_signal_connect (child, "draw",
+                        G_CALLBACK (drawing_area_draw), NULL);
+      gtk_container_add (GTK_CONTAINER (container), child);
+
+      child = gtk_button_new ();
+      gtk_widget_add_events (child, 
+                             GDK_ENTER_NOTIFY_MASK |
+                             GDK_LEAVE_NOTIFY_MASK |
+                             GDK_POINTER_MOTION_MASK);
+      gtk_overlay_add_overlay (GTK_OVERLAY (container), child);
+      gtk_widget_set_name (child, "bricks-button");
+      gtk_widget_set_halign (child, GTK_ALIGN_CENTER);
+      gtk_widget_set_valign (child, GTK_ALIGN_CENTER);
+      gtk_widget_set_size_request (child, 200, 80);
+
+      paned = gtk_paned_new (GTK_ORIENTATION_VERTICAL);
+      gtk_overlay_add_overlay (GTK_OVERLAY (container), paned);
+
+      /* Need a filler so we get a handle */
+      child = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
+      gtk_container_add (GTK_CONTAINER (paned), child);
+
+      text = gtk_text_buffer_new (NULL);
+      gtk_text_buffer_create_tag (text,
+                                  "warning",
+                                  "underline", PANGO_UNDERLINE_SINGLE,
+                                  NULL);
+      gtk_text_buffer_create_tag (text,
+                                  "error",
+                                  "underline", PANGO_UNDERLINE_ERROR,
+                                  NULL);
+
+      provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
+      
+      container = gtk_scrolled_window_new (NULL, NULL);
+      gtk_container_add (GTK_CONTAINER (paned), container);
+      child = gtk_text_view_new_with_buffer (text);
+      gtk_container_add (GTK_CONTAINER (container), child);
+      g_signal_connect (text,
+                        "changed",
+                        G_CALLBACK (css_text_changed),
+                        provider);
+
+      bytes = g_resources_lookup_data ("/css_multiplebgs/gtk.css", 0, NULL);
+      gtk_text_buffer_set_text (text, g_bytes_get_data (bytes, NULL), g_bytes_get_size (bytes));
+
+      g_signal_connect (provider,
+                        "parsing-error",
+                        G_CALLBACK (show_parsing_error),
+                        gtk_text_view_get_buffer (GTK_TEXT_VIEW (child)));
+
+      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_multiplebgs.css b/demos/gtk-demo/css_multiplebgs.css
new file mode 100644
index 0000000..f950d32
--- /dev/null
+++ b/demos/gtk-demo/css_multiplebgs.css
@@ -0,0 +1,136 @@
+/* You can edit the text in this window to change the
+ * appearance of this Window.
+ * Be careful, if you screw it up, nothing might be visible
+ * anymore. :)
+ */
+
+/* This CSS resets all properties to their defaults values
+ *    and overrides all user settings and the theme in use */
+ import url("reset.css");
+ import url("cssview.css");
+
+#canvas {
+    transition-property: background-color, background-image;
+    transition-duration: 0.5s;
+
+    background-color: #4870bc;
+}
+
+/* The gradients below are adapted versions of Lea Verou's CSS3 patterns,
+ * licensed under the MIT license:
+ * Copyright (c) 2011 Lea Verou, http://lea.verou.me/
+ *
+ * See https://github.com/LeaVerou/CSS3-Patterns-Gallery
+ */
+
+/**********
+ * Bricks *
+ **********/
+/*
+ define-color brick_hi #d42;
+ define-color brick_lo #b42;
+ define-color brick_hi_backdrop #888;
+ define-color brick_lo_backdrop #999;
+
+#canvas {
+    background-color: #999;
+    background-image: linear-gradient(205deg, @brick_lo, @brick_lo 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi, @brick_hi 23px, transparent 23px),
+                      linear-gradient(205deg, @brick_lo, @brick_lo 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi, @brick_hi 23px, transparent 23px);
+    background-size: 58px 58px;
+    background-position: 0px 6px, 4px 31px, 29px 35px, 34px 2px;
+}
+
+#canvas:backdrop {
+    background-color: #444;
+    background-image: linear-gradient(205deg, @brick_lo_backdrop, @brick_lo_backdrop 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi_backdrop, @brick_hi_backdrop 23px, transparent 23px),
+	              linear-gradient(205deg, @brick_lo_backdrop, @brick_lo_backdrop 23px, transparent 23px),
+	              linear-gradient(25deg, @brick_hi_backdrop, @brick_hi_backdrop 23px, transparent 23px);
+    background-size: 58px 58px;
+    background-position: 0px 6px, 4px 31px, 29px 35px, 34px 2px;
+}
+*/
+
+/*
+#bricks-button {
+    background-color: #eef;
+    background-image: url('brick.png');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+*/
+/**********
+ * Tartan *
+ **********/
+/*
+ define-color tartan_bg #662e2c;
+ define-color tartan_bg_backdrop #333;
+
+#canvas {
+    background-color: @tartan_bg;
+    background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px,
+                                                rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px,
+                                                rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px,
+                                                transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px,
+                                                rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px,
+                                                rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px,
+                                                rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
+                      repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px,
+                                                transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px,
+                                                transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px,
+                                                rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px,
+                                                rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px,
+                                                rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
+                      repeating-linear-gradient(-55deg, transparent, transparent 1px, rgba(0,0,0,.2) 1px, rgba(0,0,0,.2) 4px,
+                                                transparent 4px, transparent 19px, rgba(0,0,0,.2) 19px,
+                                                rgba(0,0,0,.2) 24px, transparent 24px, transparent 51px, rgba(0,0,0,.2) 51px,
+                                                rgba(0,0,0,.2) 54px, transparent 54px, transparent 74px);
+}
+
+#canvas:backdrop {
+    background-color: @tartan_bg_backdrop;
+}
+*/
+
+/***********
+ * Stripes *
+ ***********/
+
+/*
+ define-color base_bg #4870bc;
+ define-color backdrop_bg #555;
+
+#canvas {
+  background-color: @base_bg;
+  background-image: linear-gradient(to left, transparent, rgba(255,255,255,.07) 50%, transparent 50%),
+                    linear-gradient(to left, transparent, rgba(255,255,255,.13) 50%, transparent 50%),
+                    linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.17) 50%),
+                    linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.19) 50%);
+  background-size: 29px, 59px, 73px, 109px;
+}
+
+#canvas:backdrop {
+  background-color: @backdrop_bg;
+}
+*/
+
+/***************
+ * Lined Paper *
+ ***************/
+/*
+#canvas {
+    background-color: #fff;
+    background-image: linear-gradient(90deg, transparent 79px, alpha(#f98195, 0.40) 79px, #f98195 80px, alpha(#f98195, 0.40) 81px, transparent 81px),
+                      linear-gradient(alpha(#77c5cf, 0.60), alpha(#77c5cf, 0.60) 1px, transparent 1px);
+    background-size: 100% 36px;
+}
+
+#canvas:backdrop {
+    background-color: #f1f2f4;
+    background-image: linear-gradient(90deg, transparent 79px, alpha(#999, 0.40) 79px, #999 80px, alpha(#999, 0.40) 81px, transparent 81px),
+                      linear-gradient(alpha(#bbb, 0.60), alpha(#bbb, 0.60) 1px, transparent 1px);
+}
+*/
\ No newline at end of file
diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index 9058828..dd49815 100644
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -18,6 +18,9 @@
   <gresource prefix="/css_basics">
     <file alias="gtk.css">css_basics.css</file>
   </gresource>
+  <gresource prefix="/css_multiplebgs">
+    <file alias="gtk.css">css_multiplebgs.css</file>
+  </gresource>
   <gresource prefix="/css_pixbufs">
     <file alias="gtk.css">css_pixbufs.css</file>
     <file>background.jpg</file>



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]