feat(gantt): 优化甘特图底部横向滚动条展示在窗口可视区域 (#482)

worktile · Sep 9, 2024 · fa55097 · fa55097
1 parent 5d9c445
commit fa55097
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -71,6 +71,7 @@
     class="gantt-scrollbar"
     [style.height.px]="ganttRoot.horizontalScrollbarHeight + 1"
     [style.right.px]="ganttRoot.verticalScrollbarWidth"
+    [ngClass]="{ 'gantt-scrollbar-bg': table?.tableFooterTemplate }"
   >
     <div
       [style.width.px]="tableHeader.tableWidth"

diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -54,6 +54,19 @@
     right: 0;
     z-index: 3;
     display: flex;
+
+    &.gantt-scrollbar-bg {
+      background-color: variables.$gantt-container-background-color;
+
+      .gantt-table-scrollbar {
+        &.with-scrollbar {
+          border-right: 1px solid variables.$gantt-border-color;
+          z-index: 3;
+          box-shadow: variables.$gantt-scrollbar-shadow;
+        }
+      }
+    }
+
     .gantt-table-scrollbar {
       &.with-scrollbar {
         overflow-x: scroll;
@@ -134,6 +147,16 @@
       }
     }
 
+    &.gantt-scroll-container {
+      .gantt-container {
+        .gantt-main-container {
+          &::-webkit-scrollbar {
+            position: static;
+          }
+        }
+      }
+    }
+
     &.gantt-normal-viewport {
       .cdk-virtual-scroll-content-wrapper {
         height: 100%;
@@ -167,15 +190,17 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
+  z-index: 3;
   background-color: white;
   border-top: 1px solid variables.$gantt-border-color;
+  border-bottom: 1px solid variables.$gantt-border-color;
 
   .gantt-table-footer {
     height: variables.$gantt-footer-height;
     border-right: 1px solid variables.$gantt-border-color;
-    box-shadow: variables.$gantt-side-shadow;
+    box-shadow: variables.$gantt-footer-shadow;
   }
+
   .gantt-container-footer {
     height: variables.$gantt-footer-height;
     overflow-x: auto;

diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -57,7 +57,11 @@ $gantt-loader-loading-color: $gantt-primary-color !default;
 
 // footer
 $gantt-footer-height: 44px !default;
+$gantt-footer-shadow: 16px 0 14px -10px rgba(0, 0, 0, 0.15) !default;
 
 // @deprecated, please use global config `GANTT_GLOBAL_CONFIG` set custom height
 $gantt-item-height: none;
 $gantt-group-height: none;
+
+// scrollbar
+$gantt-scrollbar-shadow: 10px 0px 10px -3px rgba(0, 0, 0, 0.15) !default;