included frappe-gantt as external library (#2527)

frappe/public/build.json

@@ -230,8 +230,7 @@
 		"public/js/frappe/list/image_view_item_main_head.html",
 		"public/js/frappe/list/header_select_all_like_filter.html",
 		"public/js/frappe/list/item_assigned_to_comment_count.html",
-		"public/js/frappe/views/treeview.js",
-		"public/js/frappe/views/gantt.js"
+		"public/js/frappe/views/treeview.js"
 	],
 	"css/report.min.css": [
 		"public/css/report.css",

frappe/public/css/gantt.css

@@ -1,112 +0,0 @@
-.gantt #grid .grid-background {
-  fill: none;
-}
-.gantt #grid .grid-header {
-  fill: #ffffff;
-  stroke: #d1d8dd;
-  stroke-width: 1.4;
-}
-.gantt #grid .grid-row {
-  fill: #ffffff;
-}
-.gantt #grid .grid-row:nth-child(even) {
-  fill: #fafbfc;
-}
-.gantt #grid .row-line {
-  stroke: #EBEFF2;
-}
-.gantt #grid .tick {
-  stroke: #d1d8dd;
-  stroke-width: 0.2;
-}
-.gantt #grid .tick.thick {
-  stroke-width: 0.4;
-}
-.gantt #grid .today-highlight {
-  fill: #fffce7;
-  opacity: 0.5;
-}
-.gantt #arrow {
-  fill: none;
-  stroke: #8D99A6;
-  stroke-width: 1.4;
-}
-.gantt .bar {
-  fill: #cbd1d8;
-  stroke: #aeb0b1;
-  stroke-width: 0;
-  transition: stroke-width 0.3s ease;
-}
-.gantt .bar-progress {
-  fill: #a8a8ff;
-}
-.gantt .bar-invalid {
-  fill: transparent;
-  stroke: #aeb0b1;
-  stroke-width: 1;
-  stroke-dasharray: 5;
-}
-.gantt .bar-invalid ~ .bar-label {
-  fill: #6c7680;
-}
-.gantt .bar-label {
-  fill: #fff;
-  dominant-baseline: central;
-  text-anchor: middle;
-  font-size: 12px;
-  font-weight: lighter;
-  letter-spacing: 0.8px;
-}
-.gantt .bar-label.big {
-  fill: #6c7680;
-  text-anchor: start;
-}
-.gantt .handle {
-  fill: #F0F4F7;
-  cursor: ew-resize;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity .3s ease;
-}
-.gantt .bar-wrapper {
-  cursor: pointer;
-}
-.gantt .bar-wrapper:hover .bar {
-  stroke-width: 2;
-}
-.gantt .bar-wrapper:hover .handle {
-  visibility: visible;
-  opacity: 1;
-}
-.gantt .bar-wrapper.active .bar {
-  stroke-width: 2;
-}
-.gantt .primary-text,
-.gantt .secondary-text {
-  font-size: 12px;
-  text-anchor: middle;
-}
-.gantt .primary-text {
-  fill: #6c7680;
-}
-.gantt .secondary-text {
-  fill: #36414C;
-}
-.gantt #details {
-  font-size: 14;
-}
-.gantt #details .details-container {
-  stroke: #d1d8dd;
-  stroke-width: 1.1;
-  fill: #fff;
-}
-.gantt #details .details-heading {
-  fill: #36414C;
-  font-weight: 500;
-}
-.gantt #details .details-body {
-  fill: #6c7680;
-}
-.gantt .hide {
-  display: none;
-}

frappe/public/js/frappe/list/doclistview.js

@@ -446,7 +446,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	render_rows_Gantt: function(values) {
-		var gantt_area = $('<svg height="400" width="6000"></svg>')
+		var gantt_area = $('<svg width="20" height="20"></svg>')
 			.appendTo(this.wrapper.find('.result-list').css("overflow", "scroll"));
 		var id = frappe.dom.set_unique_id(gantt_area);
 
@@ -460,41 +460,36 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 				id: item[field_map.id],
 				doctype: me.doctype,
 				progress: item.progress,
-				dependent: item.depends_on_tasks || ""
+				dependencies: item.depends_on_tasks || ""
 			};
 		});
-		frappe.require(["assets/frappe/js/lib/snap.svg-min.js", "assets/frappe/css/gantt.css"], function() {
-			me.gantt = new Gantt({
-				parent_selector: '#' + id,
-				tasks: tasks,
-				date_format: "YYYY-MM-DD",
-				bar: {
-					height: 20
-				},
-				events: {
-					bar_on_click: function (task) {
+		frappe.require([
+				"assets/frappe/js/lib/snap.svg-min.js",
+				"assets/frappe/js/lib/frappe-gantt/frappe-gantt.min.js"
+			], function() {
+				me.gantt = new Gantt("#"+id, tasks, {
+					date_format: "YYYY-MM-DD",
+					on_click: function (task) {
 						frappe.set_route('Form', task.doctype, task.id);
 					},
-					bar_on_date_change: function(task, start, end) {
+					on_date_change: function(task, start, end) {
 						update_field(task.id, field_map.start, start.format("YYYY-MM-DD"), function() {
 							update_field(task.id, field_map.end, end.format("YYYY-MM-DD"), function() {
 								show_alert({message:__("Saved"), indicator:'green'}, 1);
 							});
 						});
 					},
-					bar_on_progress_change: function(task, progress) {
+					on_progress_change: function(task, progress) {
 						update_field(task.id, 'progress', progress, function() {
 							show_alert({message:__("Saved"), indicator:'green'}, 1);
 						});
 					},
-					on_viewmode_change: function(mode) {
+					on_view_change: function(mode) {
 						me.list_settings.view_mode = mode;
 					}
-				}
-			});
-			me.gantt.render();
+				});
 
-			var view_modes = me.gantt.get_view_modes() || [];
+			var view_modes = me.gantt.config.view_modes || [];
 			var dropdown = "<div class='dropdown pull-right'>" +
 				"<a class='text-muted dropdown-toggle' data-toggle='dropdown'>" +
 				"<span class='dropdown-text'>"+__('Day')+"</span><i class='caret'></i></a>" +
@@ -518,7 +513,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 
 			$dropdown.on("click", ".option", function() {
 				var mode = $(this).data('value');
-				me.gantt.set_view_mode(mode)
+				me.gantt.change_view_mode(mode)
 				$dropdown.find(".dropdown-text").text(mode);
 			})
 		});

frappe/public/less/gantt.less

@@ -1,137 +0,0 @@
-@import "variables.less";
-
-@bar-color: #cbd1d8;
-@bar-stroke: #aeb0b1;
-
-.gantt {
-	#grid {
-		.grid-background {
-			fill: none;
-		}
-		.grid-header {
-			fill: #ffffff;
-			stroke: @border-color;
-			stroke-width: 1.4;
-		}
-		.grid-row {
-			fill: #ffffff;
-		}
-		.grid-row:nth-child(even) {
-			fill: @light-bg;
-		}
-		.row-line {
-			stroke: @light-border-color;
-		}
-		.tick {
-			stroke: @border-color;
-			stroke-width: 0.2;
-			&.thick {
-				stroke-width: 0.4;
-			}
-		}
-		.today-highlight {
-			fill: @light-yellow;
-			opacity: 0.5;
-		}
-	}
-
-	#arrow {
-		fill: none;
-		stroke: @text-muted;
-		stroke-width: 1.4;
-	}
-
-	.bar {
-		fill: @bar-color;
-		stroke: @bar-stroke;
-		stroke-width: 0;
-		transition: stroke-width .3s ease;
-	}
-	.bar-progress {
-		fill: lighten(@erpnext-blue, 10%);
-	}
-	.bar-invalid {
-		fill: transparent;
-		stroke: @bar-stroke;
-		stroke-width: 1;
-		stroke-dasharray: 5;
-
-		&~.bar-label {
-			fill: @text-light;
-		}
-	}
-	.bar-label {
-		fill: #fff;
-		dominant-baseline: central;
-		text-anchor: middle;
-		font-size: 12px;
-		font-weight: lighter;
-		letter-spacing: 0.8px;
-
-		&.big {
-			fill: @text-light;
-			text-anchor: start;
-		}
-	}
-
-	.handle {
-		fill: @btn-bg;
-		cursor: ew-resize;
-		opacity: 0;
-		visibility: hidden;
-		transition: opacity .3s ease;
-	}
-
-	.bar-wrapper {
-		cursor: pointer;
-
-		&:hover {
-			.bar {
-				stroke-width: 2;
-			}
-
-			.handle {
-				visibility: visible;
-				opacity: 1;
-			}
-		}
-
-		&.active {
-			.bar {
-				stroke-width: 2;
-			}
-		}
-	}
-
-	.primary-text, .secondary-text {
-		font-size: 12px;
-		text-anchor: middle;
-	}
-	.primary-text {
-		fill: @text-light;
-	}
-	.secondary-text {
-		fill: @text-color;
-	}
-
-	#details {
-		font-size: 14;
-
-		.details-container {
-			stroke: @border-color;
-			stroke-width: 1.1;
-			fill: #fff;
-		}
-		.details-heading {
-			fill: @text-color;
-			font-weight: 500;
-		}
-		.details-body {
-			fill: @text-light;
-		}
-	}
-
-	.hide {
-		display: none;
-	}
-}