Merge pull request #1776 from smeup/planner-fix

kup-planner: fixed incorrectly placed horizontal scrollbar + style.
smeup · Feb 7, 2024 · 557ef2f · 557ef2f
2 parents 7a0b951 + 3f67944
commit 557ef2f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -2279,7 +2279,7 @@ export namespace Components {
         "rtl": boolean;
         "scrollNumber": number;
         "svgWidth": number;
-        "taskGanttRef": HTMLDivElement;
+        "taskListTrueRef": HTMLKupTaskListElement;
         "taskListWidth": number;
     }
     interface KupIframe {
@@ -6854,7 +6854,7 @@ declare namespace LocalJSX {
         "rtl"?: boolean;
         "scrollNumber"?: number;
         "svgWidth"?: number;
-        "taskGanttRef"?: HTMLDivElement;
+        "taskListTrueRef"?: HTMLKupTaskListElement;
         "taskListWidth"?: number;
     }
     interface KupIframe {

diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx
@@ -342,7 +342,7 @@ export class KupGantt {
      */
 
     @Element() rootElement: HTMLElement;
-
+    taskListTrueRef: HTMLKupTaskListElement = null;
     //---- Lifecycle hooks ----
 
     componentWillLoad() {
@@ -980,6 +980,7 @@ export class KupGantt {
                             setDoubleView={this.setDoubleView}
                             {...tableProps}
                             class="tasks"
+                            ref={(el) => (this.taskListTrueRef = el)}
                         />
                     )}
                     <kup-task-gantt
@@ -1022,7 +1023,7 @@ export class KupGantt {
                 {this.taskGanttRef && (
                     <kup-horizontal-scroll
                         svgWidth={this.svgWidth}
-                        taskGanttRef={this.taskGanttRef}
+                        taskListTrueRef={this.taskListTrueRef}
                         taskListWidth={this.taskListWidth}
                         scrollNumber={this.scrollX}
                         rtl={this.rtl}

diff --git a/...ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss b/...ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss
@@ -1,8 +1,6 @@
 .scrollWrapper {
   overflow: auto;
   max-width: 100%;
-  /*firefox*/
-  scrollbar-width: thin;
   /*iPad*/
   height: 1.2rem;
 }

diff --git a/.../ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx b/.../ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx
@@ -16,7 +16,7 @@ export class HorizontalScroll {
     svgWidth: number;
 
     @Prop()
-    taskGanttRef: HTMLDivElement;
+    taskListTrueRef: HTMLKupTaskListElement;
 
     @Prop()
     rtl: boolean;
@@ -62,20 +62,17 @@ export class HorizontalScroll {
     }
 
     render() {
-        const rect = this.taskGanttRef.getBoundingClientRect();
+        const w =
+            this.taskListTrueRef?.getBoundingClientRect().width + 24 * 1.5 ?? 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
 
         return (
             <div
                 dir="ltr"
-                style={
-                    rect
-                        ? {
-                              margin: this.rtl
-                                  ? `0px ${rect.x}px 0px 0px`
-                                  : `0px 0px 0px ${rect.x}px`,
-                          }
-                        : undefined
-                }
+                style={{
+                    margin: this.rtl
+                        ? `0px ${w}px 0px 12px`
+                        : `0px 12px 0px ${w}px`,
+                }}
                 class="scrollWrapper"
                 data-scrollx="true"
                 onScroll={this.horizontalScroll}

diff --git a/...ges/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss b/...ges/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss
@@ -2,8 +2,6 @@
   overflow: hidden auto;
   width: 1rem;
   flex-shrink: 0;
-  /*firefox*/
-  scrollbar-width: thin;
 }
 
 .scroll::-webkit-scrollbar {