From c5629fd06a4187a704b3d0aef016724e9cb388db Mon Sep 17 00:00:00 2001 From: Cosimo Cecchi Date: Thu, 24 May 2012 14:17:25 -0400 Subject: [PATCH] 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(+) create mode 100644 demos/gtk-demo/css_multiplebgs.c create mode 100644 demos/gtk-demo/css_multiplebgs.css diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am index 334e072c5..0ff892ed7 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 \ dialog.c \ drawingarea.c \ editable_cells.c \ @@ -116,6 +117,7 @@ RESOURCES= application.ui \ gtk-logo-48.png \ css_accordion.css \ css_basics.css \ + css_multiplebgs.css \ cssview.css \ fancy.css \ reset.css diff --git a/demos/gtk-demo/css_multiplebgs.c b/demos/gtk-demo/css_multiplebgs.c new file mode 100644 index 000000000..776480a65 --- /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 + +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 000000000..f950d32f9 --- /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 ed2ecf36f..12c7c7363 100644 --- a/demos/gtk-demo/demo.gresource.xml +++ b/demos/gtk-demo/demo.gresource.xml @@ -18,6 +18,9 @@ css_basics.css + + css_multiplebgs.css + fancy.css -- 2.43.2