From 9219b49d8c320a774a4c8ca368de9b89e53b6099 Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Sat, 14 Dec 2024 23:04:19 +0800
Subject: [PATCH] sticky title in kanban (#7172)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* sticky title in kanban

* optimize header

* optimize ui

* update z-index

* feat: optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: 杨国璇 <ygx@192.168.1.7>
---
 frontend/src/metadata/views/kanban/add-board/index.css    | 8 ++++++++
 frontend/src/metadata/views/kanban/add-board/index.js     | 4 ++--
 .../metadata/views/kanban/boards/board/header/index.css   | 7 ++++++-
 frontend/src/metadata/views/kanban/boards/board/index.css | 6 +++++-
 frontend/src/metadata/views/kanban/boards/index.css       | 1 -
 frontend/src/metadata/views/kanban/index.css              | 1 +
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/metadata/views/kanban/add-board/index.css b/frontend/src/metadata/views/kanban/add-board/index.css
index 1f15698261d..94f33d71a11 100644
--- a/frontend/src/metadata/views/kanban/add-board/index.css
+++ b/frontend/src/metadata/views/kanban/add-board/index.css
@@ -1,3 +1,11 @@
+.sf-metadata-kanban-add-board-wrapper {
+  position: sticky;
+  top: 16px;
+  margin-left: 8px;
+  padding-right: 16px;
+  height: fit-content;
+}
+
 .sf-metadata-view-kanban .sf-metadata-kanban-add-board-button {
   min-width: 300px;
   height: 2rem;
diff --git a/frontend/src/metadata/views/kanban/add-board/index.js b/frontend/src/metadata/views/kanban/add-board/index.js
index 00100b96c48..dc070dd3a94 100644
--- a/frontend/src/metadata/views/kanban/add-board/index.js
+++ b/frontend/src/metadata/views/kanban/add-board/index.js
@@ -34,7 +34,7 @@ const AddBoard = ({ groupByColumn }) => {
   }, [isShowPopover]);
 
   return (
-    <>
+    <div className="sf-metadata-kanban-add-board-wrapper">
       <div id={id} className="sf-metadata-kanban-add-board-button" onClick={handleButtonClick} title={gettext('New category')}>
         <Icon iconName="add-table" />
         <span className="sf-metadata-kanban-add-board-title">{gettext('New category')}</span>
@@ -42,7 +42,7 @@ const AddBoard = ({ groupByColumn }) => {
       {isShowPopover && (
         <AddCategoryPopover target={id} options={options} onCancel={onToggle} onSubmit={handleAddNewOption} />
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/frontend/src/metadata/views/kanban/boards/board/header/index.css b/frontend/src/metadata/views/kanban/boards/board/header/index.css
index cbe1fbabaef..dada34b3280 100644
--- a/frontend/src/metadata/views/kanban/boards/board/header/index.css
+++ b/frontend/src/metadata/views/kanban/boards/board/header/index.css
@@ -1,10 +1,15 @@
 .sf-metadata-view-kanban-board-header {
-  height: 32px;
+  top: 0;
+  position: sticky;
+  height: 48px;
   width: 100%;
   overflow: visible;
   display: flex;
   align-items: center;
+  padding: 16px 8px 0 8px;
   margin-bottom: 8px;
+  background-color: white;
+  z-index: 1;
 }
 
 .sf-metadata-view-kanban-board-header .sf-metadata-view-kanban-board-header-title {
diff --git a/frontend/src/metadata/views/kanban/boards/board/index.css b/frontend/src/metadata/views/kanban/boards/board/index.css
index eb29616a87e..9b75a3f6874 100644
--- a/frontend/src/metadata/views/kanban/boards/board/index.css
+++ b/frontend/src/metadata/views/kanban/boards/board/index.css
@@ -1,11 +1,15 @@
 .sf-metadata-view-kanban-board {
   width: 278px;
   flex-shrink: 0;
-  margin-right: 16px;
+}
+
+.sf-metadata-view-kanban-board:first-child {
+  margin-left: 8px;
 }
 
 .sf-metadata-view-kanban-board .smooth-dnd-container.vertical {
   height: calc(100% - 32px);
+  margin: 0 8px;
 }
 
 .sf-metadata-view-kanban-board .smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper:last-child .sf-metadata-kanban-card {
diff --git a/frontend/src/metadata/views/kanban/boards/index.css b/frontend/src/metadata/views/kanban/boards/index.css
index f63ac6716c2..be30dab0246 100644
--- a/frontend/src/metadata/views/kanban/boards/index.css
+++ b/frontend/src/metadata/views/kanban/boards/index.css
@@ -8,7 +8,6 @@
 .sf-metadata-view-kanban-boards .smooth-dnd-container.horizontal {
   white-space: nowrap;
   display: flex;
-  padding: 16px;
 }
 
 .sf-metadata-view-kanban-boards .smooth-dnd-container {
diff --git a/frontend/src/metadata/views/kanban/index.css b/frontend/src/metadata/views/kanban/index.css
index a0f70fbdf20..47f87f2511b 100644
--- a/frontend/src/metadata/views/kanban/index.css
+++ b/frontend/src/metadata/views/kanban/index.css
@@ -1,4 +1,5 @@
 .sf-metadata-view-kanban {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;