feat(gant-table): add gantt table style

worktile · May 28, 2020 · f195f79 · f195f79
1 parent 89a7db9
commit f195f79
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 14 deletions.
diff --git a/example/src/app/examples/examples.component.html b/example/src/app/examples/examples.component.html
@@ -1,7 +1,7 @@
 <ngx-gantt start="1514736000" end="1609430400" [items]="items" [groups]="groups">
   <ngx-gantt-column name="标题">
     <ng-template #cell let-row>
-      {{ row.origin.title }}
+      {{ row.title }}
     </ng-template>
   </ngx-gantt-column>
   <ng-template #group let-group>

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -25,7 +25,7 @@ import { Subject, fromEvent } from 'rxjs';
 import { GanttTableColumnComponent } from './table/column/column.component';
 
 const defaultStyles = {
-    lineHeight: 55,
+    lineHeight: 50,
     barHeight: 25,
 };
 

diff --git a/packages/gantt/src/gantt.scss b/packages/gantt/src/gantt.scss
@@ -48,10 +48,10 @@ $gantt-date-today-color: #FF9F73 !default;
 
   .gantt-viewer-container {
     width: 100%;
-    height: calc(100% - 60px);
+    height: calc(100% - 50px);
     flex: 1;
     position: absolute;
-    top: 60px;
+    top: 50px;
     bottom: 0;
     left: 0;
     right: 0;
@@ -62,13 +62,13 @@ $gantt-date-today-color: #FF9F73 !default;
     }
 
     .gantt-group {
-      height: 45px;
+      height: 50px;
       box-sizing: border-box;
       background: #fafafa;
     }
 
     .gantt-item {
-      height: 55px;
+      height: 50px;
       border-bottom: 1px solid $gantt-border-color;
       box-sizing: border-box;
       position: relative;

diff --git a/packages/gantt/src/table/gantt-table.component.html b/packages/gantt/src/table/gantt-table.component.html
@@ -1,5 +1,5 @@
 <gantt-side>
-  <div class="gantt-items-header" *ngIf="columns?.length">
+  <div class="gantt-table-header" *ngIf="columns?.length">
     <table>
       <thead>
         <th *ngFor="let column of columns" [title]="column.name">
@@ -8,15 +8,15 @@
       </thead>
     </table>
   </div>
-  <div class="gantt-items-container">
+  <div class="gantt-table-container">
     <ng-container *ngIf="groups.length; else itemsTemplate">
       <gantt-table-group *ngFor="let group of groups" [group]="group" [groupHeader]="groupTemplate">
         <gantt-table-items [items]="group.items" [columns]="columns"></gantt-table-items>
       </gantt-table-group>
     </ng-container>
-    <ng-template #itemsTemplate
-      ><gantt-table-items [items]="items" [columns]="columns"></gantt-table-items
-    ></ng-template>
+    <ng-template #itemsTemplate>
+      <gantt-table-items [items]="items" [columns]="columns"></gantt-table-items>
+    </ng-template>
   </div>
 </gantt-side>
 <gantt-container>

diff --git a/packages/gantt/src/table/gantt-table.component.scss b/packages/gantt/src/table/gantt-table.component.scss
@@ -1,3 +1,48 @@
+$gantt-table-color: #333 !default;
+$gantt-table-td-height: 50px !default;
+$gantt-table-thead-height: 50px !default;
+$gantt-table-td-padding: 0 15px !default;
+$gantt-table-bg: #fff !default;
+$gantt-table-border-color: #eee !default;
+
+@import './group/group.component.scss';
+
 .gantt-table {
+    table {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        table-layout: fixed;
+        border-collapse: separate;
+        border-spacing: 0;
+        color: $gantt-table-color;
+        background-color: transparent;
+        thead,
+        tbody {
+            tr {
+                height: $gantt-table-td-height;
+            }
+
+            th,
+            td {
+                padding: $gantt-table-td-padding;
+                background-color: $gantt-table-bg;
+                border-right: 1px solid $gantt-table-border-color;
+                border-bottom: 1px solid $gantt-table-border-color;
+                position: relative;
+            }
 
+            td {
+                transition: width 0.5s;
+            }
+        }
+        thead {
+            th {
+                font-weight: 400;
+                height: $gantt-table-thead-height;
+            }
+        }
+    }
+    .gantt-table-header {
+    }
 }
diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, ElementRef, ChangeDetectionStrategy, Input, EventEmitter, Output, HostBinding } from '@angular/core';
 import { GanttUpper } from '../gantt-upper';
 import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 import { GanttDependencyDragEvent, GanttDependencyEvent, GanttItemInternal } from '../class';
@@ -23,6 +23,8 @@ export class GanttTableComponent extends GanttUpper implements GanttRef, OnInit
 
     @Output() dependencyClick = new EventEmitter<GanttDependencyEvent>();
 
+    @HostBinding('class.gantt-table') ganttTableClass = true;
+
     constructor(elementRef: ElementRef) {
         super(elementRef);
     }

diff --git a/packages/gantt/src/table/group/group.component.scss b/packages/gantt/src/table/group/group.component.scss
@@ -0,0 +1,10 @@
+.gantt-table-group {
+    .gantt-table-group-header {
+        height: 50px;
+        background: #fafafa;
+        vertical-align: middle;
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+    }
+}
diff --git a/packages/gantt/src/table/items/items.component.html b/packages/gantt/src/table/items/items.component.html
@@ -17,7 +17,7 @@
           [ngTemplateOutlet]="tdTemplate"
           [ngTemplateOutletContext]="{
             column: column,
-            row: row,
+            row: row.origin,
             index: i
           }"
         ></ng-template>
@@ -29,6 +29,6 @@
 <ng-template #tdTemplate let-column="column" let-row="row" let-index="index">
   <ng-template
     [ngTemplateOutlet]="column.templateRef"
-    [ngTemplateOutletContext]="{ $implicit: row, row: row, index: index }"
+    [ngTemplateOutletContext]="{ $implicit: row, row: row.origin, index: index }"
   ></ng-template>
 </ng-template>