sticky title in kanban (#7172)

* sticky title in kanban * optimize header * optimize ui * update z-index * feat: optimize code --------- Co-authored-by: zhouwenxuan <[email protected]> Co-authored-by: 杨国璇 <[email protected]>
haiwen · Dec 14, 2024 · 9219b49 · 9219b49
1 parent 919cd2e
commit 9219b49
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -34,15 +34,15 @@ 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>
       </div>
       {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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,5 @@
 .sf-metadata-view-kanban {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;