[gnome-themes-standard: 19/26] scale: theme GtkScale according to the mockups

[Cosimo Cecchi <cosimoc src gnome org>]

commit 76740c2136e475773a11d91e9e9edc6cb1768952
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu Mar 3 17:05:47 2011 -0500

    scale: theme GtkScale according to the mockups
    
    It's missing a different shape for the case when the range has marks.

 src/adwaita_engine.c           |   82 +++++++++++++++++++---------------------
 themes/Adwaita/gtk-3.0/gtk.css |   62 ++++++++++++++++++++----------
 2 files changed, 80 insertions(+), 64 deletions(-)
---
diff --git a/src/adwaita_engine.c b/src/adwaita_engine.c
index 2541711..8a3c5cd 100644
--- a/src/adwaita_engine.c
+++ b/src/adwaita_engine.c
@@ -845,13 +845,13 @@ adwaita_engine_render_frame (GtkThemingEngine *engine,
 			/* Render GtkScale trough thinner */
 			if (!gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_VERTICAL))
 			{
-				y += height / 2 - 3;
-				height = 6;
+				y += height / 2.0 - 2.0;
+				height = 4;
 			}
 			else
 			{
-				x += width / 2 - 3;
-				width = 6;
+				x += width / 2.0 - 2.0;
+				width = 4;
 			}
 		}
 
@@ -954,13 +954,13 @@ adwaita_engine_render_background (GtkThemingEngine *engine,
 		/* Render GtkScale trough thinner */
 		if (!gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_VERTICAL))
 		{
-			y += height / 2 - 3;
-			height = 6;
+			y += height / 2 - 2;
+			height = 4;
 		}
 		else
 		{
-			x += width / 2 - 3;
-			width = 6;
+			x += width / 2 - 2;
+			width = 4;
 		}
 	}
 
@@ -1060,13 +1060,13 @@ adwaita_engine_render_activity (GtkThemingEngine *engine,
 		/* Render GtkScale fill level thinner */
 		if (!gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_VERTICAL))
 		{
-			y += height / 2 - 3;
-			height = 6;
+			y += height / 2.0 - 2.0;
+			height = 4;
 		}
 		else
 		{
-			x += width / 2 - 3;
-			width = 6;
+			x += width / 2.0 - 2.0;
+			width = 4;
 		}
 	}
 
@@ -1110,60 +1110,56 @@ adwaita_engine_render_slider (GtkThemingEngine *engine,
 
 	if (gtk_widget_path_is_type (path, GTK_TYPE_SCALE))
 	{
-		cairo_pattern_t *pattern;
+		cairo_pattern_t *pattern, *border_pattern;
 		cairo_matrix_t matrix;
 		GtkStateFlags state;
 		GdkRGBA color;
+		gint radius;
+		gdouble shade_factor = 2.0 / 3.0;
 
 		state = gtk_theming_engine_get_state (engine);
 
-		if (orientation == GTK_ORIENTATION_HORIZONTAL)
-		{
-			cairo_move_to (cr, x + width / 2, y);
-			cairo_line_to (cr, x, y + height / 2);
-			cairo_line_to (cr, x, y + height);
-			cairo_line_to (cr, x + width, y + height);
-			cairo_line_to (cr, x + width, y + height / 2);
-			cairo_line_to (cr, x + width / 2, y);
-		}
-		else if (gtk_theming_engine_get_direction (engine) == GTK_TEXT_DIR_RTL)
-		{
-			cairo_move_to (cr, x, y + height / 2);
-			cairo_line_to (cr, x + width / 2, y);
-			cairo_line_to (cr, x + width, y);
-			cairo_line_to (cr, x + width, y + height);
-			cairo_line_to (cr, x + width / 2, y + height);
-			cairo_line_to (cr, x, y + height / 2);
-		}
-		else
-		{
-			cairo_move_to (cr, x + width, y + height / 2);
-			cairo_line_to (cr, x + width / 2, y);
-			cairo_line_to (cr, x, y);
-			cairo_line_to (cr, x, y + height);
-			cairo_line_to (cr, x + width / 2, y + height);
-			cairo_line_to (cr, x + width, y + height / 2);
-		}
+		cairo_translate (cr, x, y);
+		cairo_arc (cr, (width)/ 2.0, (height)/ 2.0,
+			   MIN (height / 2.0, width / 2.0),
+			   0, 2 * G_PI);
 		cairo_close_path (cr);
 
-		cairo_set_line_width (cr, 1);
+		cairo_set_line_width (cr, 1.0);
 
 		gtk_theming_engine_get (engine, state,
 					"background-image", &pattern,
 					NULL);
 
 		cairo_matrix_init_scale (&matrix, 1 / width, 1 / height);
-		cairo_matrix_translate (&matrix, -x, -y);
 		cairo_pattern_set_matrix (pattern, &matrix);
+		cairo_pattern_set_extend (pattern, CAIRO_EXTEND_REPEAT);
 
 		cairo_set_source (cr, pattern);
 		cairo_fill_preserve (cr);
 
 		gtk_theming_engine_get_border_color (engine, state, &color);
-		gdk_cairo_set_source_rgba (cr, &color);
+		border_pattern = cairo_pattern_create_linear (0, 0, 0, height);
+		cairo_pattern_set_extend (pattern, CAIRO_EXTEND_REPEAT);
+		cairo_pattern_add_color_stop_rgba (border_pattern,
+						   0.0,
+						   color.red / shade_factor,
+						   color.green / shade_factor,
+						   color.blue / shade_factor,
+						   color.alpha);
+
+		cairo_pattern_add_color_stop_rgba (border_pattern,
+						   1.0,
+						   color.red,
+						   color.green,
+						   color.blue,
+						   color.alpha);
+
+		cairo_set_source (cr, border_pattern);
 		cairo_stroke (cr);
 
 		cairo_pattern_destroy (pattern);
+		cairo_pattern_destroy (border_pattern);
 	}
 	else
 	{
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index 724ee90..0b8eb34 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -116,11 +116,6 @@
     -GtkToolbar-internal-padding: 4;     /* ??? */
     -GtkTreeView-vertical-separator: 0;  /* ??? */
 
-    /* GtkScale slider size */
-    -GtkScale-slider-length: 14;
-    -GtkRange-slider-width: 20;
-
-
     -GtkMenu-horizontal-padding: 0;
     -GtkMenu-vertical-padding: 0;
 
@@ -241,9 +236,48 @@ GtkProgressBar.trough {
     border-color: shade (@inactive_frame_color, 0.925);
 }
 
-GtkFrame,
-GtkCalendar,
+/************
+ * GtkScale *
+ ************/
 GtkScale {
+    -GtkScale-slider-length: 16;
+    -GtkRange-slider-width: 20;
+}
+
+GtkScale.slider {
+    border-width: 1;
+    border-radius: 2;
+    border-color: shade (@internal_element_color, 0.90);
+
+    background-image: -gtk-gradient (linear,
+                                     left top, left bottom,
+                                     from (@theme_base_color),
+                                     to (@switch_slider_color));
+}
+
+GtkScale.trough {
+    border-width: 1;
+    border-radius: 2;
+    border-style: solid;
+    border-color: @internal_element_color;
+}
+
+GtkScale.trough.horizontal {
+    background-image: -gtk-gradient (linear,
+                                     left top, left bottom,
+                                     from (@trough_bg_color_a),
+                                     to (shade (@trough_bg_color_b, 1.20)));
+}
+
+GtkScale.trough.vertical {
+    background-image: -gtk-gradient (linear,
+                                     left top, right top,
+                                     from (@trough_bg_color_a),
+                                     to (shade (@trough_bg_color_b, 1.20)));
+}
+
+GtkFrame,
+GtkCalendar {
     padding: 2;
 }
 
@@ -823,20 +857,6 @@ GtkSwitch.slider:insensitive {
     background-color: @insensitive_bg_color;
 }
 
-GtkScale.slider {
-    border-width: 1;
-    border-radius: 2;
-    border-color: shade (@frame_color, 1.31);
-    background-image: -gtk-gradient (linear,
-                                     left top, left bottom,
-                                     from (shade (@frame_color, 1.72)),
-                                     to (@theme_base_color));
-}
-
-GtkScale.trough {
-    border-radius: 3;
-}
-
 /* Calendars */
 GtkCalendar.view {
     border-radius: 3;