Merge pull request #1303 from netfighter/bugfix/7493_wp_with_only_start_date_display

app/assets/javascripts/angular/helpers/svg-helper.js

@@ -108,6 +108,24 @@ angular.module('openproject.helpers')
     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);
+  };
+
   jQuery.each([SVGSVGElement, SVGRectElement, SVGPathElement,
       SVGTextElement], function (i, klass) {
     klass.prototype.attr = function(attributeHash) {

app/assets/javascripts/angular/models/timelines/planning_element.js

@@ -315,6 +315,7 @@ angular.module('openproject.timelines.models')
       // 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) {
@@ -327,9 +328,31 @@ angular.module('openproject.timelines.models')
 
       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 + ')';
         }
       }