feat: support set item line height

worktile · Jun 11, 2020 · 571d7df · 571d7df
1 parent 8dcf412
commit 571d7df
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 14 deletions.
diff --git a/example/src/app/flat/flat.component.html b/example/src/app/flat/flat.component.html
@@ -13,7 +13,6 @@
       <input type="checkbox" [(ngModel)]="options.draggable" />
     </span>
   </div>
-
   <div class="header-section">
     <span class="header-section-title">合并间隔天数：</span>
     <span class="header-section-content">
@@ -31,6 +30,7 @@
     [viewType]="options.viewType"
     [draggable]="options.draggable"
     [mergeIntervalDays]="options.mergeIntervalDays"
+    [styles]="options.styles"
   >
     <ng-template #group let-group="group">
       {{ group.title }}

diff --git a/example/src/app/flat/flat.component.ts b/example/src/app/flat/flat.component.ts
@@ -17,7 +17,10 @@ export class AppFlatExampleComponent implements OnInit {
     options = {
         viewType: GanttViewType.month,
         draggable: true,
-        mergeIntervalDays: 3
+        mergeIntervalDays: 3,
+        styles: {
+            lineHeight: 50
+        }
     };
 
     @HostBinding('class.gantt-demo') class = true;

diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html
@@ -16,7 +16,7 @@
 
 <ng-template #ganttItems let-items="items">
   <ng-container *ngFor="let item of items; trackBy: trackBy">
-    <div class="gantt-item">
+    <div class="gantt-item" [style.height.px]="ganttRef.styles.lineHeight">
       <gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></gantt-bar>
     </div>
     <ng-container *ngFor="let item of item.children; trackBy: trackBy">

diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html
@@ -40,7 +40,7 @@
 
 <ng-template #ganttItems let-items="items">
   <ng-container *ngFor="let item of items">
-    <div class="gantt-table-item gantt-table-row">
+    <div class="gantt-table-item gantt-table-row" [style.height.px]="ganttRef.styles.lineHeight" [style.lineHeight.px]="ganttRef.styles.lineHeight">
       <div class="item-column gantt-table-column" *ngFor="let column of columnList" [style.width.px]="column.width">
         <ng-template
           [ngTemplateOutlet]="column.templateRef"

diff --git a/packages/gantt/src/components/table/gantt-table.component.scss b/packages/gantt/src/components/table/gantt-table.component.scss
@@ -4,16 +4,14 @@
 
     .gantt-table-row {
         display: flex;
+        box-sizing: border-box;
+        border-bottom: 1px solid $gantt-border-color;
 
         .gantt-table-column {
-            height: $gantt-item-height;
-            line-height: $gantt-item-height;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            border-bottom: 1px solid $gantt-border-color;
             border-right: 1px solid $gantt-border-color;
-            box-sizing: border-box;
 
             &:last-child {
                 border-right: none;
@@ -27,6 +25,8 @@
         top: 0;
         background: #fff;
         z-index: 1;
+        height: $gantt-header-height;
+        line-height: $gantt-header-height;
 
         .header-column {
             font-weight: 400;
@@ -36,7 +36,7 @@
     .gantt-table-body {
         .gantt-table-group {
             display: flex;
-            height: $gantt-item-height;
+            height: $gantt-group-height;
             background: $gantt-group-background-color;
             padding: 0 10px;
             align-items: center;

diff --git a/packages/gantt/src/flat/gantt-flat.component.html b/packages/gantt/src/flat/gantt-flat.component.html
@@ -24,7 +24,7 @@
         <ng-container *ngFor="let group of groups; trackBy: trackBy">
           <div class="gantt-flat-group">
             <ng-container *ngFor="let items of group.mergedItems">
-              <div class="gantt-flat-items">
+              <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
                 <ng-container *ngFor="let item of items; trackBy: trackBy">
                   <gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></gantt-bar>
                 </ng-container>

diff --git a/packages/gantt/src/flat/gantt-flat.component.scss b/packages/gantt/src/flat/gantt-flat.component.scss
@@ -24,6 +24,5 @@
 
     .gantt-flat-items {
         position: relative;
-        height: $gantt-item-height;
     }
 }
diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -64,7 +64,6 @@
     }
 
     .gantt-item {
-      height: $gantt-item-height;
       border-bottom: 1px solid $gantt-border-color;
       box-sizing: border-box;
       position: relative;

diff --git a/packages/gantt/src/gantt.styles.ts b/packages/gantt/src/gantt.styles.ts
@@ -3,10 +3,10 @@ export const defaultStyles = {
     barHeight: 22
 };
 
-export type GanttStyles = typeof defaultStyles;
-
 export const headerHeight = 44;
 
+export type GanttStyles = typeof defaultStyles;
+
 export const sideWidth = 400;
 
 export const sideMiddleWidth = 500;