fix(module: tree): reset style

NG-ZORRO · May 31, 2018 · 696cade · 696cade
1 parent 2c93645
commit 696cade
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 96 deletions.
diff --git a/components/core/style/index.less b/components/core/style/index.less
@@ -109,35 +109,33 @@
 }
 
 // hack tree css
-.ant-tree-show-line {
-  > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
-    > li:before {
-      content: ' ';
-      width: 1px;
-      border-left: 1px solid @border-color-base;
-      height: 100%;
-      position: absolute;
-      left: 12px;
-      margin: 22px 0;
+.ant-tree {
+  &.ant-tree-show-line {
+    > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
+      > li:before {
+        content: ' ';
+        width: 1px;
+        border-left: 1px solid @border-color-base;
+        height: 100%;
+        position: absolute;
+        left: 12px;
+        margin: 22px 0;
+      }
     }
-  }
-  .ant-tree-child-tree > nz-tree-node:last-child {
-    > li:before {
-      content: ' ';
-      width: 1px;
-      border-left: 0px solid @border-color-base;
-      height: 100%;
-      position: absolute;
-      left: 12px;
-      margin: 22px 0;
+    .ant-tree-child-tree > nz-tree-node:last-child {
+      > li:before {
+        content: ' ';
+        width: 1px;
+        border-left: 0px solid @border-color-base;
+        height: 100%;
+        position: absolute;
+        left: 12px;
+        margin: 22px 0;
+      }
     }
   }
-}
-
-span {
-  &.ant-tree-icon_loading {
-    position: relative !important;
-    transform: translateX(0%) !important;
+  .font-highlight {
+    color: @highlight-color;
   }
 }
 

diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -33,48 +33,30 @@ export class NzDemoTreeBasicComponent implements OnInit {
           key     : '10001',
           children: [
             {
-              title   : 'child1.1',
-              key     : '100011',
-              children: []
+              title : 'child1.1',
+              key   : '100011',
+              isLeaf: true
             },
             {
-              title   : 'child1.2',
-              key     : '100012',
-              children: [
-                {
-                  title   : 'grandchild1.2.1',
-                  key     : '1000121',
-                  isLeaf  : true,
-                  disabled: true
-                },
-                {
-                  title : 'grandchild1.2.2',
-                  key   : '1000122',
-                  isLeaf: true
-                }
-              ]
+              title : 'child1.2',
+              key   : '100012',
+              isLeaf: true
             }
           ]
-        }
-      ]
-    }),
-    new NzTreeNode({
-      title   : 'root2',
-      key     : '1002',
-      children: [
-        {
-          title          : 'child2.1',
-          key            : '10021',
-          children       : [],
-          disableCheckbox: true
         },
         {
-          title   : 'child2.2',
-          key     : '10022',
+          title   : 'child2',
+          key     : '10002',
           children: [
             {
-              title : 'grandchild2.2.1',
-              key   : '100221',
+              title   : 'grandchild1.2.1',
+              key     : '1000121',
+              isLeaf  : true,
+              disabled: true
+            },
+            {
+              title : 'grandchild1.2.2',
+              key   : '1000122',
               isLeaf: true
             }
           ]

diff --git a/components/tree/demo/draggable-confirm.ts b/components/tree/demo/draggable-confirm.ts
@@ -42,9 +42,9 @@ export class NzDemoTreeDraggableConfirmComponent {
           key     : '10001',
           children: [
             {
-              title   : 'child1.1',
-              key     : '100011',
-              children: []
+              title : 'child1.1',
+              key   : '100011',
+              isLeaf: true
             },
             {
               title   : 'child1.2',
@@ -65,10 +65,6 @@ export class NzDemoTreeDraggableConfirmComponent {
               ]
             }
           ]
-        },
-        {
-          title: 'child2',
-          key  : '10002'
         }
       ]
     }),
@@ -77,23 +73,23 @@ export class NzDemoTreeDraggableConfirmComponent {
       key     : '1002',
       children: [
         {
-          title   : 'child2.1',
-          key     : '10021',
-          children: []
+          title : 'child2.1',
+          key   : '10021',
+          isLeaf: true
         },
         {
           title   : 'child2.2',
           key     : '10022',
           children: [
             {
-              title: 'grandchild2.2.1',
-              key  : '100221'
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
             }
           ]
         }
       ]
-    }),
-    new NzTreeNode({ title: 'root3', key: '1003' })
+    })
   ];
 
   mouseAction(name: string, e: NzFormatEmitEvent): void {

diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts
@@ -34,9 +34,9 @@ export class NzDemoTreeDraggableComponent implements OnInit {
           key     : '10001',
           children: [
             {
-              title   : 'child1.1',
-              key     : '100011',
-              children: []
+              title : 'child1.1',
+              key   : '100011',
+              isLeaf: true
             },
             {
               title   : 'child1.2',
@@ -57,10 +57,6 @@ export class NzDemoTreeDraggableComponent implements OnInit {
               ]
             }
           ]
-        },
-        {
-          title: 'child2',
-          key  : '10002'
         }
       ]
     }),
@@ -69,23 +65,23 @@ export class NzDemoTreeDraggableComponent implements OnInit {
       key     : '1002',
       children: [
         {
-          title   : 'child2.1',
-          key     : '10021',
-          children: []
+          title : 'child2.1',
+          key   : '10021',
+          isLeaf: true
         },
         {
           title   : 'child2.2',
           key     : '10022',
           children: [
             {
-              title: 'grandchild2.2.1',
-              key  : '100221'
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
             }
           ]
         }
       ]
-    }),
-    new NzTreeNode({ title: 'root3', key: '1003' })
+    })
   ];
 
   mouseAction(name: string, e: NzFormatEmitEvent): void {

diff --git a/components/tree/demo/line.ts b/components/tree/demo/line.ts
@@ -24,11 +24,6 @@ export class NzDemoTreeLineComponent {
           title   : 'child1',
           key     : '10001',
           children: [
-            {
-              title   : 'child1.1',
-              key     : '100011',
-              children: []
-            },
             {
               title   : 'child1.2',
               key     : '100012',
@@ -51,7 +46,18 @@ export class NzDemoTreeLineComponent {
         {
           title   : 'child2',
           key     : '10002',
-          children: []
+          children: [
+            {
+              title : 'grandchild2.1',
+              key   : '1000122',
+              isLeaf: true
+            },
+            {
+              title : 'grandchild2.2',
+              key   : '1000123',
+              isLeaf: true
+            }
+          ]
         }
       ]
     }),

diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -31,6 +31,7 @@ import { NzTreeService } from './nz-tree.service';
       <ng-container *ngIf="nzShowExpand">
                 <span
                   class="ant-tree-switcher"
+                  [ngStyle]="loadingStyle"
                   [class.ant-tree-switcher_open]="nzTreeNode.isExpanded && !nzTreeNode.isLeaf && !nzTreeNode.isLoading"
                   [class.ant-tree-switcher_close]="!nzTreeNode.isExpanded && !nzTreeNode.isLeaf && !nzTreeNode.isLoading"
                   [class.ant-tree-switcher-noop]="nzTreeNode.isLeaf && !nzTreeNode.isLoading"
@@ -64,7 +65,7 @@ import { NzTreeService } from './nz-tree.service';
                         <span class="ant-tree-title">
                             <ng-container *ngIf="matchValue.length==2">
                                 <span>
-                                    {{matchValue[0]}}<span class="font-red">{{nzSearchValue}}</span>{{matchValue[1]}}
+                                    {{matchValue[0]}}<span class="font-highlight">{{nzSearchValue}}</span>{{matchValue[1]}}
                                 </span>
                             </ng-container>
                             <ng-container *ngIf="matchValue.length!=2">
@@ -222,6 +223,14 @@ export class NzTreeNodeComponent implements OnInit, AfterViewInit {
     return this._searchValue;
   }
 
+  get loadingStyle(): { [key: string]: string } {
+    const isLoading = this.nzTreeNode.isLoading && !this.nzTreeNode.isLeaf;
+    return {
+      position : isLoading ? 'relative' : '',
+      transform: isLoading ? 'translateX(0%)' : ''
+    };
+  }
+
   @Output() clickNode: EventEmitter<NzFormatEmitEvent> = new EventEmitter();
   @Output() dblClick: EventEmitter<NzFormatEmitEvent> = new EventEmitter();
   @Output() contextMenu: EventEmitter<NzFormatEmitEvent> = new EventEmitter();

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -1,4 +1,4 @@
-import { forwardRef, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { Component, ContentChild, EventEmitter, forwardRef, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';