callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gtk-demo: add a demo for CSS multiple backgrounds

Browse Source
This commit is contained in:
Cosimo Cecchi 2012-05-24 14:17:25 -04:00
parent 561e24b77b
commit c5629fd06a
4 changed files with 311 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/gtk-demo/Makefile.am
View File

@ -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

170
demos/gtk-demo/css_multiplebgs.c Normal file
View File

@ -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;
}

136
demos/gtk-demo/css_multiplebgs.css Normal file
View File

@ -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);
}
*/

3
demos/gtk-demo/demo.gresource.xml
View File

@ -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="/theming_custom_css">
<file alias="gtk.css">fancy.css</file>
</gresource>