From 551a520052da7cce2758d7e04edbf6143fbf3a41 Mon Sep 17 00:00:00 2001
From: Raffael Meyer <14891507+barredterra@users.noreply.github.com>
Date: Fri, 24 May 2024 10:02:56 +0200
Subject: [PATCH] feat: kanban style (#26538)

* fix(Kanban): hide sidebar toggle

* fix(Kanban): toggle full-width if more than five columns are visible

* fix(Kanban): show correct cursor on column header

* fix(Kanban): increase column height, add margin

* fix(Kanban): increase card padding

* feat(Kanban): set column background based on indicator

* fix(Kanban): add-button background color

* feat(Kanban): grow columns if there's leftover space

* fix(Kanban): space between columns
---
 .../js/frappe/views/kanban/kanban_column.html    |  2 +-
 .../public/js/frappe/views/kanban/kanban_view.js |  5 ++++-
 frappe/public/scss/desk/kanban.scss              | 16 ++++++----------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frappe/public/js/frappe/views/kanban/kanban_column.html b/frappe/public/js/frappe/views/kanban/kanban_column.html
index 8606cdc69d..03ca487cdd 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_column.html
+++ b/frappe/public/js/frappe/views/kanban/kanban_column.html
@@ -1,4 +1,4 @@
-<div class="kanban-column" data-column-value="{{title}}">
+<div class="kanban-column" data-column-value="{{title}}" style="background-color: var(--bg-{{indicator}});">
 	<div class="kanban-column-header">
 		<span class="kanban-column-title">
 			<span class="indicator-pill {{indicator}}"></span>
diff --git a/frappe/public/js/frappe/views/kanban/kanban_view.js b/frappe/public/js/frappe/views/kanban/kanban_view.js
index 5781052ca3..421bf60e8c 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_view.js
+++ b/frappe/public/js/frappe/views/kanban/kanban_view.js
@@ -136,10 +136,13 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
 		this.hide_card_layout = true;
 		this.hide_sort_selector = true;
 		super.setup_page();
+
+		this.page.disable_sidebar_toggle = true;
+		this.page.setup_sidebar_toggle();
 	}
 
 	setup_view() {
-		if (this.board.columns.length > 5) {
+		if (this.board.columns.filter((col) => col.status !== "Archived").length > 5) {
 			this.page.container.addClass("full-width");
 		}
 		this.setup_realtime_updates();
diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss
index a711a6f820..2eb79ec4de 100644
--- a/frappe/public/scss/desk/kanban.scss
+++ b/frappe/public/scss/desk/kanban.scss
@@ -15,6 +15,7 @@
 
 .kanban {
 	display: flex;
+	gap: 0.5em;
 	overflow-y: hidden;
 
 	-ms-overflow-style: none; /* IE and Edge */
@@ -27,19 +28,17 @@
 	.kanban-column {
 		@include transition();
 
-		flex: 0 0 260px;
-		max-width: 260px;
+		flex: 1 0 260px;
 		border-radius: var(--border-radius);
 		padding: var(--padding-md);
-		min-height: calc(100vh - 250px);
-		max-height: calc(100vh - var(--navbar-height) - var(--page-bottom-margin) - 80px);
+		min-height: calc(100vh - 150px);
 
 		.add-card {
 			@include flex(flex, center, center, null);
 			@include transition();
 
 			color: var(--text-light);
-			background-color: var(--kanban-new-card-bg);
+			background-color: var(--bg-color);
 			height: 27px;
 			font-size: var(--text-md);
 			margin-bottom: var(--margin-sm);
@@ -105,10 +104,6 @@
 					margin: 0;
 				}
 			}
-
-			&:hover {
-				cursor: pointer;
-			}
 		}
 
 		.kanban-column-title {
@@ -123,6 +118,7 @@
 			.kanban-title {
 				@include get_textstyle("lg", "semibold");
 				margin-left: var(--margin-sm);
+				cursor: grab;
 			}
 		}
 
@@ -182,7 +178,7 @@
 
 					.kanban-card-body {
 						cursor: grab;
-						padding: var(--padding-sm);
+						padding: var(--padding-md);
 
 						.kanban-title-area {
 							margin-bottom: 12px;