Merge pull request #37312 from AarDG10/fix-kanban

frappe/public/js/frappe/list/list_view.js

@@ -1092,7 +1092,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		}
 	}
 
-	get_tags_html(user_tags, limit, colored = false) {
+	get_tags_html(user_tags, limit = null, colored = false) {
 		let get_tag_html = (tag) => {
 			let color = "",
 				style = "";
@@ -1105,11 +1105,12 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 				return `<div class="tag-pill ellipsis" title="${tag}" style="${style}">${tag}</div>`;
 			}
 		};
-		return user_tags
-			.split(",")
-			.slice(1, limit + 1)
-			.map(get_tag_html)
-			.join("");
+		user_tags = (user_tags || "").split(",");
+		if (limit !== null) {
+			// if there is a limit apply it
+			user_tags = user_tags.slice(0, limit);
+		}
+		return user_tags.map(get_tag_html).join("");
 	}
 
 	get_meta_html(doc) {

frappe/public/js/frappe/ui/tag_editor.js

@@ -18,6 +18,12 @@ frappe.ui.TagEditor = class TagEditor {
 		this.initialized = true;
 		this.refresh(this.user_tags);
 	}
+	update_user_tags(tags_string) {
+		this.user_tags = tags_string;
+		frappe.model.set_value(this.frm.doctype, this.frm.docname, "_user_tags", this.user_tags);
+		this.on_change && this.on_change(this.user_tags);
+		frappe.tags.utils.fetch_tags();
+	}
 	setup_tags() {
 		var me = this;
 
@@ -40,9 +46,7 @@ frappe.ui.TagEditor = class TagEditor {
 						callback: function (r) {
 							var user_tags = me.user_tags ? me.user_tags.split(",") : [];
 							user_tags.push(tag);
-							me.user_tags = user_tags.join(",");
-							me.on_change && me.on_change(me.user_tags);
-							frappe.tags.utils.fetch_tags();
+							me.update_user_tags(user_tags.join(","));
 						},
 					});
 				}
@@ -55,9 +59,7 @@ frappe.ui.TagEditor = class TagEditor {
 						callback: function (r) {
 							var user_tags = me.user_tags.split(",");
 							user_tags.splice(user_tags.indexOf(tag), 1);
-							me.user_tags = user_tags.join(",");
-							me.on_change && me.on_change(me.user_tags);
-							frappe.tags.utils.fetch_tags();
+							me.update_user_tags(user_tags.join(","));
 						},
 					});
 				}

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

@@ -589,8 +589,6 @@ frappe.provide("frappe.views");
 				group: "cards",
 				animation: 150,
 				dataIdAttr: "data-name",
-				forceFallback: true,
-				fallbackTolerance: 20,
 				onStart: function () {
 					wrapper.find(".kanban-card.add-card").fadeOut(200, function () {
 						wrapper.find(".kanban-cards").height("100vh");
@@ -599,7 +597,6 @@ frappe.provide("frappe.views");
 				onEnd: function (e) {
 					wrapper.find(".kanban-card.add-card").fadeIn(100);
 					wrapper.find(".kanban-cards").height("auto");
-					// update order
 					const args = {
 						name: decodeURIComponent($(e.item).attr("data-name")),
 						from_colname: $(e.from)
@@ -611,7 +608,6 @@ frappe.provide("frappe.views");
 					};
 					store.dispatch("update_order_for_single_card", args);
 				},
-				onAdd: function () {},
 			});
 		}
 
@@ -756,11 +752,26 @@ frappe.provide("frappe.views");
 		}
 
 		function get_tags_html(card) {
-			return card.tags
-				? `<div class="kanban-tags">
-					${cur_list.get_tags_html(card.tags, 3, true)}
-				</div>`
-				: "";
+			if (!card.tags) return "";
+			const tags_array = card.tags.split(",");
+			const limit = 3; // cap. at 3 tags
+			const visible_tags = tags_array.slice(0, limit).join(",");
+			const hidden_tags = tags_array.slice(limit).join(",");
+			const hidden_tags_html = cur_list.get_tags_html(hidden_tags, null, true);
+			const hidden_count = tags_array.length - limit;
+			let html = `<div class="kanban-tags">
+				${cur_list.get_tags_html(visible_tags, null, true)}`;
+
+			if (hidden_count > 0) {
+				html += `
+					<span class="tag-pill more-tags">
+						+${hidden_count}
+						<span class="hidden-tags">${hidden_tags_html}</span>
+					</span>`;
+			}
+
+			html += `</div>`;
+			return html;
 		}
 
 		function render_card_meta() {

frappe/public/scss/desk/kanban.scss

@@ -186,10 +186,23 @@
 
 						.kanban-title-area {
 							margin-bottom: 12px;
-							max-width: 90%;
+							width: 100%;
+							max-width: 100%;
 							font-size: var(--text-md);
 							font-weight: 500;
 
+							.kanban-card-title,
+							.kanban-card-doc {
+								white-space: normal !important;
+								display: -webkit-box;
+								-webkit-box-orient: vertical;
+								-webkit-line-clamp: 2;
+								line-clamp: 2;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								word-break: break-word;
+							}
+
 							.kanban-card-doc {
 								.text-muted div {
 									display: inline;
@@ -330,6 +343,62 @@
 		width: 100%;
 		line-height: 400px;
 	}
+
+	.kanban-tags .more-tags {
+		cursor: pointer;
+
+		.hidden-tags {
+			position: absolute;
+
+			bottom: 70px;
+
+			left: 50%;
+			transform: translateX(-50%);
+
+			background: var(--card-bg);
+			border: 1px solid var(--border-color);
+			padding: 10px;
+			border-radius: var(--border-radius-md);
+			box-shadow: var(--shadow-lg);
+
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+
+			width: calc(100% - 24px);
+			max-width: 220px;
+
+			gap: 6px;
+			opacity: 0;
+			pointer-events: none;
+			z-index: 1000;
+
+			.tag-pill {
+				margin: 0 !important;
+				white-space: nowrap;
+			}
+		}
+
+		&:hover .hidden-tags {
+			opacity: 1;
+			transform: translateX(-50%) translateY(-5px);
+			pointer-events: auto;
+		}
+	}
+
+	.kanban-card-wrapper:hover {
+		z-index: 1001;
+	}
+
+	.kanban-card-wrapper:first-child {
+		.hidden-tags {
+			bottom: auto;
+		}
+
+		&:hover .hidden-tags {
+			transform: translateX(-50%) translateY(5px);
+		}
+	}
 }
 
 body[data-route*="Kanban"] {

frappe/public/scss/desk/tags.scss

@@ -1,10 +1,10 @@
 .tag-pill {
 	background-color: var(--gray-200);
 	border-radius: var(--border-radius);
-	display: inline-block;
-	padding: 3px 10px;
+	display: inline-flex;
+	padding: 4px 10px;
+	align-items: center;
 	color: var(--text-muted);
-	height: 24px;
 	width: 60px;
 	vertical-align: middle;
 }