[gtk+/wip/css] gtk-demo: add a demo for CSS multiple backgrounds
- From: Cosimo Cecchi <cosimoc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+/wip/css] gtk-demo: add a demo for CSS multiple backgrounds
- Date: Thu, 24 May 2012 18:54:44 +0000 (UTC)
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]
