[gnome-shell/datetime] Use stippled line instead of gradient in calendar

[David Zeuthen <davidz src gnome org>]

commit b10458e57aac3e27868fe597c857993b1a65dfff
Author: David Zeuthen <davidz redhat com>
Date:   Mon Jan 24 16:01:08 2011 -0500

    Use stippled line instead of gradient in calendar
    
    See
    
     http://people.freedesktop.org/~david/shell-calendar-with-dash.png
    
    We still have to move around some stuff to make it look like the mock-up, see
    
     https://live.gnome.org/GnomeShell/Design/Whiteboards/DateNTime
    
    Thanks to Colin for binding Cairo's, set_dash() method.
    
    Signed-off-by: David Zeuthen <davidz redhat com>

 data/theme/gnome-shell.css |    6 ++----
 js/ui/dateMenu.js          |   29 ++++++++++++-----------------
 2 files changed, 14 insertions(+), 21 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4c1a679..4696262 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -675,10 +675,8 @@ StTooltip StLabel {
 /* Calendar popup */
 
 .calendar-vertical-separator {
-    -gradient-width: 2px;
-    -gradient-start: rgba(8,8,8,0);
-    -gradient-end: #333333;
-    -margin-vertical: 1.5em;
+    -stipple-width: 1px;
+    -stipple-color: #505050;
     width: 1em;
 }
 
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 4a3dd2b..8616735 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -29,23 +29,18 @@ function _onVertSepRepaint (area)
     let cr = area.get_context();
     let themeNode = area.get_theme_node();
     let [width, height] = area.get_surface_size();
-    let found, margin, gradientHeight;
-    [found, margin] = themeNode.lookup_length('-margin-vertical', false);
-    [found, gradientWidth] = themeNode.lookup_length('-gradient-width', false);
-    let startColor = new Clutter.Color();
-    themeNode.lookup_color('-gradient-start', false, startColor);
-    let endColor = new Clutter.Color();
-    themeNode.lookup_color('-gradient-end', false, endColor);
-
-    let gradientHeight = (height - margin * 2);
-    let gradientOffset = (width - gradientWidth) / 2;
-    let pattern = new Cairo.LinearGradient(gradientOffset, margin, gradientOffset + gradientWidth, height - margin);
-    pattern.addColorStopRGBA(0, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
-    pattern.addColorStopRGBA(0.5, endColor.red / 255, endColor.green / 255, endColor.blue / 255, endColor.alpha / 255);
-    pattern.addColorStopRGBA(1, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
-    cr.setSource(pattern);
-    cr.rectangle(gradientOffset, margin, gradientWidth, gradientHeight);
-    cr.fill();
+    let found;
+    let stippleWidth = 1.0;
+    let stippleColor = new Clutter.Color();
+    [found, stippleWidth] = themeNode.lookup_length('-stipple-width', false);
+    themeNode.lookup_color('-stipple-color', false, stippleColor);
+    let x = Math.floor(width/2) + 0.5;
+    cr.moveTo(x, 0);
+    cr.lineTo(x, height);
+    Clutter.cairo_set_source_color(cr, stippleColor);
+    cr.setDash([1, 3], 1); // Hard-code for now
+    cr.setLineWidth(stippleWidth);
+    cr.stroke();
 };
 
 function DateMenuButton() {