[gnome-themes-standard] switch: render switch grip lines with an SVG asset

From: Cosimo Cecchi <cosimoc src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard] switch: render switch grip lines with an SVG asset
Date: Tue, 15 May 2012 22:11:54 +0000 (UTC)
commit d2496abfb806083a6aab27011a144434920edf0a
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sat May 12 00:14:57 2012 -0400

    switch: render switch grip lines with an SVG asset
    
    Using two background layers.

 src/adwaita_engine.c                               |   64 ---------------
 themes/Adwaita/gtk-3.0/assets/Makefile.am          |    4 +-
 .../gtk-3.0/assets/switch-slider-grip-dark.svg     |   84 ++++++++++++++++++++
 .../Adwaita/gtk-3.0/assets/switch-slider-grip.svg  |   84 ++++++++++++++++++++
 .../Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css |    7 +-
 themes/Adwaita/gtk-3.0/gtk-widgets.css             |    6 +-
 themes/Adwaita/gtk-3.0/gtk.gresource.xml           |    2 +
 7 files changed, 182 insertions(+), 69 deletions(-)
---
diff --git a/src/adwaita_engine.c b/src/adwaita_engine.c
index 3f85046..0149a5a 100644
--- a/src/adwaita_engine.c
+++ b/src/adwaita_engine.c
@@ -459,69 +459,6 @@ adwaita_engine_render_activity (GtkThemingEngine *engine,
 }
 
 static void
-render_switch_lines (GtkThemingEngine *engine,
-                     cairo_t *cr,
-                     gdouble x,
-                     gdouble y,
-                     gdouble width,
-                     gdouble height,
-                     GtkOrientation orientation)
-{
-  GtkStateFlags state;
-  GdkRGBA lines_color;
-
-  state = gtk_theming_engine_get_state (engine);
-
-  if (state & GTK_STATE_FLAG_INSENSITIVE)
-    return;
-
-  gtk_theming_engine_get_color (engine, state, &lines_color);
-
-  cairo_save (cr);
-
-  cairo_translate (cr,
-                   x + width / 2.0 - 4.0,
-                   y + height / 2.0 - 3.0);
-
-  cairo_move_to (cr, 0.0, 0.0);
-  cairo_set_line_width (cr, 2.0);
-  cairo_set_line_cap (cr, CAIRO_LINE_CAP_ROUND);
-
-  cairo_line_to (cr, 0.0, 6.0);
-  cairo_move_to (cr, 4.0, 0.0);
-  cairo_line_to (cr, 4.0, 6.0);
-  cairo_move_to (cr, 8.0, 0.0);
-  cairo_line_to (cr, 8.0, 6.0);
-
-  gdk_cairo_set_source_rgba (cr, &lines_color);
-  cairo_stroke (cr);
-
-  cairo_restore (cr);
-}
-
-static void
-adwaita_engine_render_slider (GtkThemingEngine *engine,
-                              cairo_t          *cr,
-                              gdouble           x,
-                              gdouble           y,
-                              gdouble           width,
-                              gdouble           height,
-                              GtkOrientation    orientation)
-{
-  const GtkWidgetPath *path;
-
-  GTK_THEMING_ENGINE_CLASS (adwaita_engine_parent_class)->render_slider
-    (engine, cr,
-     x, y, width, height,
-     orientation);
-
-  path = gtk_theming_engine_get_path (engine);
-
-  if (gtk_widget_path_is_type (path, GTK_TYPE_SWITCH))
-    render_switch_lines (engine, cr, x, y, width, height, orientation);
-}
-
-static void
 adwaita_engine_render_handle (GtkThemingEngine *engine,
                               cairo_t          *cr,
                               gdouble           x,
@@ -590,7 +527,6 @@ adwaita_engine_class_init (AdwaitaEngineClass *klass)
   engine_class->render_background = adwaita_engine_render_background;
   engine_class->render_expander = adwaita_engine_render_expander;
   engine_class->render_activity = adwaita_engine_render_activity;
-  engine_class->render_slider = adwaita_engine_render_slider;
   engine_class->render_handle = adwaita_engine_render_handle;
 
   gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL,
diff --git a/themes/Adwaita/gtk-3.0/assets/Makefile.am b/themes/Adwaita/gtk-3.0/assets/Makefile.am
index 8975b94..6f2a76e 100644
--- a/themes/Adwaita/gtk-3.0/assets/Makefile.am
+++ b/themes/Adwaita/gtk-3.0/assets/Makefile.am
@@ -137,4 +137,6 @@ EXTRA_DIST = 		\
 	sidebar-radio-prelight.svg \
 	sidebar-radio-selected.svg \
 	sidebar-radio-selected-dark.svg \
-	sidebar-radio-selected-prelight.svg
+	sidebar-radio-selected-prelight.svg \
+	switch-slider-grip.svg \
+	switch-slider-grip-dark.svg
diff --git a/themes/Adwaita/gtk-3.0/assets/switch-slider-grip-dark.svg b/themes/Adwaita/gtk-3.0/assets/switch-slider-grip-dark.svg
new file mode 100644
index 0000000..471c1f7
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/assets/switch-slider-grip-dark.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="10"
+   height="8"
+   id="svg4584"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="switch-slider-grip.svg">
+  <defs
+     id="defs4586" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="-0.15396047"
+     inkscape:cy="8"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1280"
+     inkscape:window-height="741"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4589">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-8)">
+    <rect
+       ry="1"
+       rx="1"
+       y="8"
+       x="0"
+       height="8"
+       width="2"
+       id="rect62941"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;display:inline;opacity:0.1" />
+    <rect
+       ry="1"
+       rx="1"
+       y="8"
+       x="4"
+       height="8"
+       width="2"
+       id="rect62943"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;display:inline;opacity:0.1" />
+    <rect
+       ry="1"
+       rx="1"
+       y="8"
+       x="8"
+       height="8"
+       width="2"
+       id="rect62945"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;display:inline;opacity:0.1" />
+  </g>
+</svg>
diff --git a/themes/Adwaita/gtk-3.0/assets/switch-slider-grip.svg b/themes/Adwaita/gtk-3.0/assets/switch-slider-grip.svg
new file mode 100644
index 0000000..3ae1843
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/assets/switch-slider-grip.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="10"
+   height="8"
+   id="svg4584"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="switch-slider-grip-dark.svg">
+  <defs
+     id="defs4586" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="-0.15396047"
+     inkscape:cy="8"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1280"
+     inkscape:window-height="741"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4589">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-8)">
+    <rect
+       ry="1"
+       rx="1"
+       y="8.0356436"
+       x="0"
+       height="8"
+       width="2"
+       id="rect62941"
+       style="fill:#e8e8e5;fill-opacity:1;stroke:none;display:inline" />
+    <rect
+       ry="1"
+       rx="1"
+       y="8.0356436"
+       x="4"
+       height="8"
+       width="2"
+       id="rect62943"
+       style="fill:#e8e8e5;fill-opacity:1;stroke:none;display:inline" />
+    <rect
+       ry="1"
+       rx="1"
+       y="8.0356436"
+       x="8"
+       height="8"
+       width="2"
+       id="rect62945"
+       style="fill:#e8e8e5;fill-opacity:1;stroke:none;display:inline" />
+  </g>
+</svg>
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
index e6dac1b..39a3c76 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
@@ -76,12 +76,15 @@ GtkScale.trough:insensitive:backdrop { /* not working */
 }
 
 GtkSwitch.slider {
-    background-image: -gtk-gradient (linear,
+    background-image: url("assets/switch-slider-grip-dark.svg"),
+                      -gtk-gradient (linear,
                                      left top, left bottom,
                                      from (@theme_bg_color),
                                      to (@switch_slider_color));
 
-    -adwaita-switch-grip-color: shade (@switch_slider_color, 0.9);
+    background-repeat: no-repeat;
+    background-position: center;
+
     border-color: mix (@borders, black, 0.4);
     box-shadow: inset 0 -1px alpha(white, 0.04), 
                 inset 0 1px shade(@theme_bg_color, 1.1),
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index e0a3231..db24862 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -2186,12 +2186,14 @@ GtkSwitch.slider {
 
     padding: 2px 2px 3px 2px;
 
-    background-image: -gtk-gradient (linear,
+    background-image: url("assets/switch-slider-grip.svg"),
+                      -gtk-gradient (linear,
                                      left top, left bottom,
                                      from (@theme_base_color),
                                      to (@switch_slider_color));
 
-    color: shade (@switch_slider_color, 0.95);
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 .primary-toolbar GtkSwitch.slider {
diff --git a/themes/Adwaita/gtk-3.0/gtk.gresource.xml b/themes/Adwaita/gtk-3.0/gtk.gresource.xml
index 486f1be..6d7b1bc 100644
--- a/themes/Adwaita/gtk-3.0/gtk.gresource.xml
+++ b/themes/Adwaita/gtk-3.0/gtk.gresource.xml
@@ -140,6 +140,8 @@
     <file preprocess="to-pixdata">assets/sidebar-radio-selected-dark.svg</file>
     <file preprocess="to-pixdata">assets/sidebar-radio-selected-prelight.svg</file>
     <file preprocess="to-pixdata">assets/sidebar-radio-selected.svg</file>
+    <file preprocess="to-pixdata">assets/switch-slider-grip.svg</file>
+    <file preprocess="to-pixdata">assets/switch-slider-grip-dark.svg</file>
     <file preprocess="to-pixdata">borders/button-border-dark.svg</file>
     <file preprocess="to-pixdata">borders/button-border-focused-dark.svg</file>
     <file preprocess="to-pixdata">borders/button-border-focused.svg</file>
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]