Merge pull request #4060 from netchampfaris/kanban-color

Colors in Kanban and Gantt

frappe/desk/doctype/todo/todo.json

@@ -106,6 +106,36 @@
    "set_only_once": 0, 
    "unique": 0
   }, 
+  {
+   "allow_bulk_edit": 0, 
+   "allow_on_submit": 0, 
+   "bold": 0, 
+   "collapsible": 0, 
+   "columns": 0, 
+   "fieldname": "color", 
+   "fieldtype": "Color", 
+   "hidden": 0, 
+   "ignore_user_permissions": 0, 
+   "ignore_xss_filter": 0, 
+   "in_filter": 0, 
+   "in_global_search": 0, 
+   "in_list_view": 1, 
+   "in_standard_filter": 0, 
+   "label": "Color", 
+   "length": 0, 
+   "no_copy": 0, 
+   "permlevel": 0, 
+   "precision": "", 
+   "print_hide": 0, 
+   "print_hide_if_no_value": 0, 
+   "read_only": 0, 
+   "remember_last_selected_value": 0, 
+   "report_hide": 0, 
+   "reqd": 0, 
+   "search_index": 0, 
+   "set_only_once": 0, 
+   "unique": 0
+  }, 
   {
    "allow_bulk_edit": 0, 
    "allow_on_submit": 0, 
@@ -514,7 +544,7 @@
  "issingle": 0, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2017-07-13 17:44:54.369254", 
+ "modified": "2017-09-05 12:54:58.044162", 
  "modified_by": "Administrator", 
  "module": "Desk", 
  "name": "ToDo", 

frappe/public/js/frappe/list/list_renderer.js

@@ -231,7 +231,10 @@ frappe.views.ListRenderer = Class.extend({
 		this.columns = this.columns.uniqBy(col => col.title);
 
 		// Remove TextEditor field columns
-		this.columns = this.columns.filter(col => col.fieldtype !== 'Text Editor')
+		this.columns = this.columns.filter(col => col.fieldtype !== 'Text Editor');
+
+		// Remove color field
+		this.columns = this.columns.filter(col => col.fieldtype !== 'Color');
 
 		// Limit number of columns to 4
 		this.columns = this.columns.slice(0, 4);

frappe/public/js/frappe/views/gantt/gantt_view.js

@@ -84,6 +84,7 @@ frappe.views.GanttView = frappe.views.ListRenderer.extend({
 			}
 		});
 		this.render_dropdown();
+		this.set_colors();
 	},
 
 	render_dropdown: function() {
@@ -105,8 +106,7 @@ frappe.views.GanttView = frappe.views.ListRenderer.extend({
 				__(view_mode) + "</a></li>";
 		});
 		var $dropdown = $(dropdown)
-		$dropdown.find(".dropdown-menu")
-				.append(dropdown_list);
+		$dropdown.find(".dropdown-menu").append(dropdown_list);
 		me.list_view.$page
 			.find(`[data-list-renderer='Gantt'] > .list-row-right`)
 			.css("margin-right", "15px").html($dropdown)
@@ -117,6 +117,30 @@ frappe.views.GanttView = frappe.views.ListRenderer.extend({
 		});
 	},
 
+	set_colors: function() {
+		const classes = this.tasks
+			.map(t => t.custom_class)
+			.filter(c => c && c.startsWith('color-'));
+
+		let style = classes.map(c => {
+			const class_name = c.replace('#', '');
+			const bar_color = '#' + c.substr(6);
+			const progress_color = frappe.ui.color.get_contrast_color(bar_color);
+			return `
+				.gantt .bar-wrapper.${class_name} .bar {
+					fill: ${bar_color};
+				}
+				.gantt .bar-wrapper.${class_name} .bar-progress {
+					fill: ${progress_color};
+				}
+			`;
+		}).join("");
+
+		style = `<style>${style}</style>`;
+
+		this.wrapper.prepend(style);
+	},
+
 	prepare_tasks: function() {
 		var me = this;
 		var meta = frappe.get_meta(this.doctype);
@@ -147,11 +171,15 @@ frappe.views.GanttView = frappe.views.ListRenderer.extend({
 				dependencies: item.depends_on_tasks || ""
 			};
 
+			if(item.color && frappe.ui.color.validate_hex(item.color)) {
+				r['custom_class'] = 'color-' + item.color.substr(1);
+			}
+
 			if(item.is_milestone) {
 				r['custom_class'] = 'bar-milestone';
-			};
+			}
 
-			return r
+			return r;
 		});
 	},
 	get_item: function(name) {

frappe/public/js/frappe/views/kanban/kanban_board.js

@@ -190,7 +190,7 @@ frappe.provide("frappe.views");
 				// cache original order
 				const _cards = this.cards.slice();
 				const _columns = this.columns.slice();
-				
+
 				frappe.call({
 					method: method_prefix + "update_order",
 					args: {
@@ -363,7 +363,7 @@ frappe.provide("frappe.views");
 			var set_filter_state = function () {
 				fluxify.doAction('set_filter_state');
 			}
-			
+
 			if(isBound(self.$kanban_board, 'after-refresh', set_filter_state)) return;
 
 			store.on('change:filters_modified', function (modified) {
@@ -606,6 +606,20 @@ frappe.provide("frappe.views");
 					'<i class="octicon octicon-comment"></i> ' + card.comment_count +
 					'</span>';
 			html += get_assignees_html();
+
+			if (card.color && frappe.ui.color.validate_hex(card.color)) {
+				const $div = $('<div>');
+				$('<div></div>').css({
+					width: '20px',
+					height: '5px',
+					borderRadius: '2px',
+					marginBottom: '4px',
+					backgroundColor: card.color
+				}).appendTo($div);
+
+				self.$card.find('.kanban-card.content').prepend($div);
+			}
+
 			self.$card.find(".kanban-card-meta").empty().append(html);
 		}
 
@@ -942,6 +956,7 @@ frappe.provide("frappe.views");
 			column: card[state.board.field_name],
 			assigned_list: card.assigned_list || assigned_list,
 			comment_count: card.comment_count || comment_count,
+			color: card.color || null,
 			doc: doc
 		};
 	}