gtk-demo: add a demo for CSS multiple backgrounds
This commit is contained in:
Cosimo Cecchi
parent
561e24b77b
commit
c5629fd06a
@ -17,6 +17,7 @@ demos = \
|
|||||||
combobox.c \
|
combobox.c \
|
||||||
css_accordion.c \
|
css_accordion.c \
|
||||||
css_basics.c \
|
css_basics.c \
|
||||||
|
css_multiplebgs.c \
|
||||||
dialog.c \
|
dialog.c \
|
||||||
drawingarea.c \
|
drawingarea.c \
|
||||||
editable_cells.c \
|
editable_cells.c \
|
||||||
@ -116,6 +117,7 @@ RESOURCES= application.ui \
|
|||||||
gtk-logo-48.png \
|
gtk-logo-48.png \
|
||||||
css_accordion.css \
|
css_accordion.css \
|
||||||
css_basics.css \
|
css_basics.css \
|
||||||
|
css_multiplebgs.css \
|
||||||
cssview.css \
|
cssview.css \
|
||||||
fancy.css \
|
fancy.css \
|
||||||
reset.css
|
reset.css
|
||||||
|
|||||||
170
demos/gtk-demo/css_multiplebgs.c
Normal file
170
demos/gtk-demo/css_multiplebgs.c
Normal 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
136
demos/gtk-demo/css_multiplebgs.css
Normal 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);
|
||||||
|
}
|
||||||
|
*/
|
||||||
@ -18,6 +18,9 @@
|
|||||||
<gresource prefix="/css_basics">
|
<gresource prefix="/css_basics">
|
||||||
<file alias="gtk.css">css_basics.css</file>
|
<file alias="gtk.css">css_basics.css</file>
|
||||||
</gresource>
|
</gresource>
|
||||||
|
<gresource prefix="/css_multiplebgs">
|
||||||
|
<file alias="gtk.css">css_multiplebgs.css</file>
|
||||||
|
</gresource>
|
||||||
<gresource prefix="/theming_custom_css">
|
<gresource prefix="/theming_custom_css">
|
||||||
<file alias="gtk.css">fancy.css</file>
|
<file alias="gtk.css">fancy.css</file>
|
||||||
</gresource>
|
</gresource>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user