From f6003f94a4bc29d0a9375dbdf84b310bd02592cc Mon Sep 17 00:00:00 2001 From: Bertrand Lorentz Date: Thu, 29 May 2014 21:44:49 +0200 Subject: [PATCH] GtkDemo: Add a CssBasics demo to demonstrate CSS theming The main difference with the C demo is that we can't use GResource, as it's only in gio 2.32 and later, so '@import url("resource://...' won't work. Instead, we use a separate CssProvider to apply reset.css. --- sample/GtkDemo/DemoCssBasics.cs | 99 +++++++++++++++++++++++++++++++ sample/GtkDemo/Makefile.am | 14 ++++- sample/GtkDemo/css/css_basics.css | 21 +++++++ sample/GtkDemo/css/reset.css | 67 +++++++++++++++++++++ sample/sample.csproj | 1 + 5 files changed, 200 insertions(+), 2 deletions(-) create mode 100644 sample/GtkDemo/DemoCssBasics.cs create mode 100644 sample/GtkDemo/css/css_basics.css create mode 100644 sample/GtkDemo/css/reset.css diff --git a/sample/GtkDemo/DemoCssBasics.cs b/sample/GtkDemo/DemoCssBasics.cs new file mode 100644 index 000000000..a1cb1d8d3 --- /dev/null +++ b/sample/GtkDemo/DemoCssBasics.cs @@ -0,0 +1,99 @@ +/* CSS Theming/CSS Basics + * + * Gtk themes are written using CSS. Every widget is build of multiple items + * that you can style very similarly to a regular website. + * + */ + +using System; +using System.IO; +using System.Reflection; +using Gtk; + +namespace GtkDemo +{ + [Demo ("CSS Basics", "DemoCssBasics.cs", "CSS Theming")] + public class DemoCssBasics : Window + { + TextBuffer buffer; + CssProvider provider; + CssProvider provider_reset; + + public DemoCssBasics () : base ("CSS Basics") + { + SetDefaultSize (600, 500); + + buffer = new TextBuffer (null); + + var warning = new TextTag ("warning"); + warning.Underline = Pango.Underline.Single; + buffer.TagTable.Add (warning); + + var error = new TextTag ("error"); + error.Underline = Pango.Underline.Error; + buffer.TagTable.Add (error); + + provider = new CssProvider (); + provider_reset = new CssProvider (); + + var container = new ScrolledWindow (); + Add (container); + var view = new TextView (buffer); + container.Add (view); + buffer.Changed += OnCssTextChanged; + + using (Stream stream = Assembly.GetExecutingAssembly ().GetManifestResourceStream ("reset.css")) + using (StreamReader reader = new StreamReader(stream)) + { + provider_reset.LoadFromData (reader.ReadToEnd()); + } + + using (Stream stream = Assembly.GetExecutingAssembly ().GetManifestResourceStream ("css_basics.css")) + using (StreamReader reader = new StreamReader(stream)) + { + buffer.Text = reader.ReadToEnd(); + } + + // TODO: Connect to "parsing-error" signal in CssProvider, added in GTK+ 3.2 + + ApplyCss (this, provider_reset, 800); + ApplyCss (this, provider, UInt32.MaxValue); + + ShowAll (); + } + + private void ApplyCss (Widget widget, CssProvider provider, uint priority) + { + widget.StyleContext.AddProvider (provider, priority); + var container = widget as Container; + if (container != null) { + foreach (var child in container.Children) { + ApplyCss (child, provider, priority); + } + } + } + + private void OnCssTextChanged (object sender, EventArgs e) + { + var start = buffer.StartIter; + var end = buffer.EndIter; + buffer.RemoveAllTags (start, end); + + string text = buffer.Text; + try { + provider.LoadFromData (text); + } catch (GLib.GException) { + // Ignore parsing errors + } + + StyleContext.ResetWidgets (Gdk.Screen.Default); + } + + protected override bool OnDeleteEvent (Gdk.Event evt) + { + Destroy (); + return true; + } + } +} + diff --git a/sample/GtkDemo/Makefile.am b/sample/GtkDemo/Makefile.am index 3532a19b7..98d5a3213 100644 --- a/sample/GtkDemo/Makefile.am +++ b/sample/GtkDemo/Makefile.am @@ -13,7 +13,7 @@ DEBUGS = $(addsuffix .mdb, $(TARGETS)) CLEANFILES = $(TARGETS) $(DEBUGS) noinst_SCRIPTS = $(TARGETS) -EXTRA_DIST = $(sources) $(image_names) +EXTRA_DIST = $(sources) $(image_names) $(css_names) sources = \ DemoApplicationWindow.cs \ @@ -21,6 +21,7 @@ sources = \ DemoButtonBox.cs \ DemoClipboard.cs \ DemoColorSelection.cs \ + DemoCssBasics.cs \ DemoDialog.cs \ DemoDrawingArea.cs \ DemoEditableCells.cs \ @@ -73,9 +74,18 @@ image_names = \ images/gtk-logo-rgb.gif \ images/floppybuddy.gif +css = \ + css/css_basics.css,css_basics.css \ + css/reset.css,reset.css + +css_names = \ + css/css_basics.css \ + css/reset.css + build_sources = $(addprefix $(srcdir)/, $(sources)) build_images = $(addprefix $(srcdir)/, $(images)) -resources = $(addprefix -resource:, $(build_sources), $(build_images)) +build_css = $(addprefix $(srcdir)/, $(css)) +resources = $(addprefix -resource:, $(build_sources), $(build_images), $(build_css)) GtkDemo.exe: $(build_sources) $(assemblies) $(CSC) $(CSFLAGS) -out:GtkDemo.exe $(build_sources) $(references) $(resources) diff --git a/sample/GtkDemo/css/css_basics.css b/sample/GtkDemo/css/css_basics.css new file mode 100644 index 000000000..3920c3ad3 --- /dev/null +++ b/sample/GtkDemo/css/css_basics.css @@ -0,0 +1,21 @@ +/* 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. :) + */ + +/* The content of reset.css has been applied to reset all properties to + * their defaults values and overrides all user settings and the theme in use */ + +/* Set a very futuristic style by default */ +* { + color: green; + font-family: Monospace; + border: 1px solid; +} + +/* Make sure selections are visible */ +:selected { + background-color: darkGreen; + color: black; +} diff --git a/sample/GtkDemo/css/reset.css b/sample/GtkDemo/css/reset.css new file mode 100644 index 000000000..a23195199 --- /dev/null +++ b/sample/GtkDemo/css/reset.css @@ -0,0 +1,67 @@ +/* Apply this CSS to get the default values for every property. + * This is useful when writing special CSS tests that should not be + * inluenced by themes - not even the default ones. + * Keep in mind that the output will be very ugly and not look like + * anything GTK. + */ + +* { + color: inherit; + font-size: inherit; + background-color: initial; + font-family: inherit; + font-style: inherit; + font-variant: inherit; + font-weight: inherit; + text-shadow: inherit; + icon-shadow: inherit; + box-shadow: initial; + margin-top: initial; + margin-left: initial; + margin-bottom: initial; + margin-right: initial; + padding-top: initial; + padding-left: initial; + padding-bottom: initial; + padding-right: initial; + border-top-style: initial; + border-top-width: initial; + border-left-style: initial; + border-left-width: initial; + border-bottom-style: initial; + border-bottom-width: initial; + border-right-style: initial; + border-right-width: initial; + border-top-left-radius: initial; + border-top-right-radius: initial; + border-bottom-right-radius: initial; + border-bottom-left-radius: initial; + outline-style: initial; + outline-width: initial; + outline-offset: initial; + background-clip: initial; + background-origin: initial; + background-size: initial; + background-position: initial; + border-top-color: initial; + border-right-color: initial; + border-bottom-color: initial; + border-left-color: initial; + outline-color: initial; + background-repeat: initial; + background-image: initial; + border-image-source: initial; + border-image-repeat: initial; + border-image-slice: initial; + border-image-width: initial; + transition-property: initial; + transition-duration: initial; + transition-timing-function: initial; + transition-delay: initial; + engine: initial; + gtk-key-bindings: initial; + + -GtkWidget-focus-line-width: 0; + -GtkWidget-focus-padding: 0; + -GtkNotebook-initial-gap: 0; +} diff --git a/sample/sample.csproj b/sample/sample.csproj index f91d7a0e8..89df6a06f 100644 --- a/sample/sample.csproj +++ b/sample/sample.csproj @@ -110,6 +110,7 @@ +