From a8cce44adc92f5c3f9defe2296a54ca41e4afc72 Mon Sep 17 00:00:00 2001
From: Hagen Schink <h.schink@finn.de>
Date: Thu, 22 May 2014 10:06:53 +0200
Subject: [PATCH] Fix design for PEs wihout start or end date

---
 app/assets/javascripts/timelines/SvgHelper.js | 18 +++++++++++++
 .../timelines/model/PlanningElement.js        | 27 +++++++++++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/timelines/SvgHelper.js b/app/assets/javascripts/timelines/SvgHelper.js
index fc54e6c16e..72b69f21bc 100644
--- a/app/assets/javascripts/timelines/SvgHelper.js
+++ b/app/assets/javascripts/timelines/SvgHelper.js
@@ -110,6 +110,24 @@ Timeline.SvgHelper = (function() {
     return node;
   };
 
+  SvgHelper.prototype.gradient = function(id, stops) {
+    var svg = this.root;
+    var svgNS = svg.namespaceURI;
+    var gradient = document.createElementNS(svgNS, 'linearGradient');
+    gradient.setAttribute('id', id);
+    for (var i=0; i < stops.length; i++){
+      var attrs = stops[i];
+      var stop = document.createElementNS(svgNS, 'stop');
+      for (var attr in attrs) {
+        if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
+      }
+      gradient.appendChild(stop);
+    }
+
+    var defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
+    return defs.appendChild(gradient);
+  };
+
   return SvgHelper;
 })();
 
diff --git a/app/assets/javascripts/timelines/model/PlanningElement.js b/app/assets/javascripts/timelines/model/PlanningElement.js
index e98ecb3630..07d1d523bb 100644
--- a/app/assets/javascripts/timelines/model/PlanningElement.js
+++ b/app/assets/javascripts/timelines/model/PlanningElement.js
@@ -332,6 +332,7 @@ Timeline.PlanningElement = {
       // for planning element parents. if there is no planning element
       // type and there are no children, use a default color.
       var pet = this.getPlanningElementType();
+      var paper = this.timeline.getPaper();
       var color;
 
       if (pet && pet.color) {
@@ -344,9 +345,31 @@ Timeline.PlanningElement = {
 
       if (!this.hasBothDates()) {
         if (this.hasStartDate()) {
-          color = "180-#ffffff-" + color;
+          var noEndDateGradient = jQuery('#noEndDateGradient_' + pet.id);
+          if (noEndDateGradient.length == 0) {
+            noEndDateGradient = paper.gradient(
+                'noEndDateGradient_' + pet.id,
+                [
+                  {offset: '5%', 'stop-color': color, 'stop-opacity': '1'},
+                  {offset: '95%', 'stop-color': '#ffffff', 'stop-opacity': '0'}
+                ]
+            );
+          }
+
+          color = 'url(#noEndDateGradient_' + pet.id + ')';
         } else {
-          color = "180-" + color + "-#ffffff";
+          var noStartDateGradient = jQuery('#noStartDateGradient_' + pet.id);
+          if (noStartDateGradient.length == 0) {
+            noStartDateGradient = paper.gradient(
+                'noStartDateGradient_' + pet.id,
+                [
+                  {offset: '5%', 'stop-color': '#ffffff', 'stop-opacity': '0'},
+                  {offset:'95%', 'stop-color': color, 'stop-opacity': '1'}
+                ]
+            );
+          }
+
+          color = 'url(#noStartDateGradient_' + pet.id + ')';
         }
       }