From bb16d40b456265c2a32eac4a9aea3f722391e420 Mon Sep 17 00:00:00 2001
From: Adrien Plazas <kekun.plazas@laposte.net>
Date: Tue, 4 Sep 2018 10:42:07 +0200
Subject: [PATCH 1/3] example: Load custom style from CSS resource

---
 examples/example.c              | 14 ++++++++++++++
 examples/example.gresources.xml |  1 +
 examples/style.css              |  0
 3 files changed, 15 insertions(+)
 create mode 100644 examples/style.css

diff --git a/examples/example.c b/examples/example.c
index 54c2d0ba..a7cb3293 100644
--- a/examples/example.c
+++ b/examples/example.c
@@ -4,6 +4,19 @@
 
 #include "example-window.h"
 
+static void
+startup (GtkApplication *app)
+{
+  GtkCssProvider *css_provider = gtk_css_provider_new ();
+
+  gtk_css_provider_load_from_resource (css_provider, "/sm/puri/handy/example/ui/style.css");
+  gtk_style_context_add_provider_for_screen (gdk_screen_get_default (),
+                                             GTK_STYLE_PROVIDER (css_provider),
+                                             GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+  g_object_unref (css_provider);
+}
+
 static void
 show_window (GtkApplication *app)
 {
@@ -22,6 +35,7 @@ main (int    argc,
   int status;
 
   app = gtk_application_new ("sm.puri.Handy.Example", G_APPLICATION_FLAGS_NONE);
+  g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
   g_signal_connect (app, "activate", G_CALLBACK (show_window), NULL);
   status = g_application_run (G_APPLICATION (app), argc, argv);
   g_object_unref (app);
diff --git a/examples/example.gresources.xml b/examples/example.gresources.xml
index 017d0d77..d8517867 100644
--- a/examples/example.gresources.xml
+++ b/examples/example.gresources.xml
@@ -2,5 +2,6 @@
 <gresources>
   <gresource prefix="/sm/puri/handy/example/ui">
     <file preprocess="xml-stripblanks">example-window.ui</file>
+    <file compressed="true">style.css</file>
   </gresource>
 </gresources>
diff --git a/examples/style.css b/examples/style.css
new file mode 100644
index 00000000..e69de29b
-- 
GitLab


From c605d14ba75c49a608cf5425c0f1558140a65c02 Mon Sep 17 00:00:00 2001
From: Adrien Plazas <kekun.plazas@laposte.net>
Date: Fri, 7 Sep 2018 16:56:47 +0200
Subject: [PATCH 2/3] example: Draw the right color for sidebar separators

This is needed for the serparators to look right.
---
 examples/style.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/examples/style.css b/examples/style.css
index e69de29b..6c244f39 100644
--- a/examples/style.css
+++ b/examples/style.css
@@ -0,0 +1,23 @@
+stacksidebar * {
+  border-left-width: 0px;
+  border-right-width: 0px;
+}
+
+/* Needed for seaprators to look good. These have been submitted upstream here:
+ * https://gitlab.gnome.org/GNOME/gtk/merge_requests/323
+ */
+
+separator.sidebar {
+  background-color: @borders;
+  border-style: none;
+  margin: 0px 0px 0px 0px;
+}
+
+separator.sidebar:backdrop {
+  background-color: @unfocused_borders;
+}
+
+separator.sidebar.selection-mode,
+.selection-mode separator.sidebar {
+  background-color: mix(@theme_selected_bg_color, #000, 0.2);
+}
-- 
GitLab


From a0e1d1b17a0d77c9647c14346a3ca37e8856f8dc Mon Sep 17 00:00:00 2001
From: Adrien Plazas <kekun.plazas@laposte.net>
Date: Tue, 4 Sep 2018 10:46:59 +0200
Subject: [PATCH 3/3] example: Use separators to separate the panels

Use a GtkSeparator to separate the stack sidebar from the various demo
widgets, use custom styling to make the sidebar not draw its own
separator, and move the start of the header bar and the header bar
separator out of their box and directly into the leaflet.

This allows to have the separators well aligned with no workaround other
than a simple custom style, to have no separator appearing when the
window is folded, and to not trigger the GTK+ bug making titlebar
separators appear black.
---
 examples/example-window.ui | 45 +++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/examples/example-window.ui b/examples/example-window.ui
index 17f17924..050c07e7 100644
--- a/examples/example-window.ui
+++ b/examples/example-window.ui
@@ -31,34 +31,25 @@
         <property name="child-transition-type">slide</property>
         <property name="visible-child-name" bind-source="content_box" bind-property="visible-child-name" bind-flags="sync-create"/>
         <child>
-          <object class="GtkBox" id="header_bar_box">
+          <object class="GtkHeaderBar" id="header_bar">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="hexpand">False</property>
-            <property name="orientation">horizontal</property>
-            <child>
-              <object class="GtkHeaderBar" id="header_bar">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="hexpand">True</property>
-                <property name="title">Handy Widget Factory</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkSeparator">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="orientation">vertical</property>
-              </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
-            </child>
+            <property name="title">Handy Widget Factory</property>
           </object>
           <packing>
             <property name="name">sidebar</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <style>
+              <class name="sidebar"/>
+            </style>
+          </object>
+        </child>
         <child>
           <object class="GtkHeaderBar" id="sub_header_bar">
             <property name="visible">True</property>
@@ -114,6 +105,16 @@
             <property name="name">sidebar</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <style>
+              <class name="sidebar"/>
+            </style>
+          </object>
+        </child>
         <child>
           <object class="GtkStack" id="stack">
             <property name="visible">True</property>
@@ -612,7 +613,7 @@
   <object class="GtkSizeGroup" id="start_pane_size_group">
     <property name="mode">horizontal</property>
     <widgets>
-      <widget name="header_bar_box"/>
+      <widget name="header_bar"/>
       <widget name="sidebar"/>
     </widgets>
   </object>
-- 
GitLab