feat: add secondary line in calendar header #INFR-8818

worktile · Jul 19, 2023 · 598fc13 · 598fc13
1 parent c437b0c
commit 598fc13
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 15 deletions.
diff --git a/docs/guides/basic/style.md b/docs/guides/basic/style.md
@@ -24,6 +24,7 @@ order: 50
   $gantt-date-primary-color: #888,
   $gantt-date-primary-font-size: 14px,
   $gantt-date-primary-border: #ddd,
+  $gantt-date-secondary-border: #cacaca,
   $gantt-date-secondary-color: #333,
   $gantt-date-secondary-font-size: 14px,
   $gantt-date-secondary-weekend-color: #aaa,

diff --git a/example/src/app/gantt-custom-view/custom-day-view.ts b/example/src/app/gantt-custom-view/custom-day-view.ts
@@ -22,8 +22,6 @@ const viewOptions: GanttViewOptions = {
 export class GanttViewCustom extends GanttView {
     override showWeekBackdrop = true;
 
-    override showTimeline = true;
-
     override viewType = GanttViewType.day;
 
     constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {

diff --git a/packages/gantt/src/components/calendar/calendar.scss b/packages/gantt/src/components/calendar/calendar.scss
@@ -19,6 +19,10 @@
     stroke: variables.$gantt-date-primary-border;
   }
 
+  .secondary-line {
+    stroke: variables.$gantt-date-secondary-border;
+  }
+
   .gantt-calendar-today-overlay {
     position: relative;
     z-index: 1;
@@ -82,7 +86,6 @@
 
   .secondary-line {
     stroke-dasharray: 2px 5px;
-    stroke: #cacaca;
   }
 
   .secondary-backdrop {

diff --git a/packages/gantt/src/components/calendar/header/calendar-header.component.html b/packages/gantt/src/components/calendar/header/calendar-header.component.html
@@ -26,18 +26,28 @@
         {{ point.text }}
       </text>
     </ng-container>
-
     <g>
-      <line
-        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
-        [attr.x1]="(i + 1) * view.primaryWidth"
-        [attr.x2]="(i + 1) * view.primaryWidth"
-        [attr.y1]="0"
-        [attr.y2]="headerHeight"
-        class="primary-line"
-      ></line>
+      <g *ngIf="view.showHeaderTimeline">
+        <line
+          *ngFor="let point of view.secondaryDatePoints; let i = index; trackBy: trackBy"
+          [attr.x1]="(i + 1) * view.cellWidth"
+          [attr.x2]="(i + 1) * view.cellWidth"
+          [attr.y1]="0"
+          [attr.y2]="headerHeight"
+          class="secondary-line"
+        ></line>
+      </g>
+      <g>
+        <line
+          *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
+          [attr.x1]="(i + 1) * view.primaryWidth"
+          [attr.x2]="(i + 1) * view.primaryWidth"
+          [attr.y1]="0"
+          [attr.y2]="headerHeight"
+          class="primary-line"
+        ></line>
+      </g>
     </g>
-
     <g>
       <line [attr.x1]="0" [attr.x2]="view.width" [attr.y1]="headerHeight" [attr.y2]="headerHeight" class="header-line"></line>
     </g>

diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -18,6 +18,7 @@ $gantt-table-td-padding: 0 15px !default;
 $gantt-date-primary-color: #888 !default;
 $gantt-date-primary-font-size: 14px !default;
 $gantt-date-primary-border: #ddd !default;
+$gantt-date-secondary-border: #cacaca !default;
 $gantt-date-secondary-color: #333 !default;
 $gantt-date-secondary-font-size: 14px !default;
 $gantt-date-secondary-weekend-color: #aaa !default;

diff --git a/packages/gantt/src/views/test/custom-view.mock.ts b/packages/gantt/src/views/test/custom-view.mock.ts
@@ -21,8 +21,6 @@ const viewOptions: GanttViewOptions = {
 export class GanttViewCustom extends GanttView {
     override showWeekBackdrop = true;
 
-    override showTimeline = true;
-
     override viewType = GanttViewType.day;
 
     constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -61,6 +61,8 @@ export abstract class GanttView {
 
     showTimeline = true;
 
+    showHeaderTimeline = false;
+
     showWeekBackdrop: boolean;
 
     options: GanttViewOptions;