diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss index 5d5287e59f..39db941418 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss @@ -1,4 +1,4 @@ -.ant-tree { +abp-tree .ant-tree { color: inherit; .ant-tree-node-content-wrapper.ant-tree-node-selected { @@ -7,6 +7,9 @@ .ant-tree-switcher { line-height: 17px; + align-items: center; + justify-content: center; + display: inline-flex; } .ant-tree-node-content-wrapper { @@ -19,13 +22,12 @@ position: relative; display: inline-block; margin: 0; - padding: 0 5px; line-height: 30px; text-decoration: none; vertical-align: top; border-radius: 2px; cursor: pointer; - padding-left: 8px; + padding: 0 5px 0 8px; border: 1px solid transparent; } diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts index c61b9c3f22..d52600b95c 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts @@ -12,22 +12,27 @@ import { of } from 'rxjs'; import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive'; import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive'; import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'; +import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core'; export type DropEvent = NzFormatEmitEvent & { pos: number }; @Component({ selector: 'abp-tree', templateUrl: 'tree.component.html', - styleUrls: [ - '../../../../../../node_modules/ng-zorro-antd/tree/style/index.min.css', - 'tree.component.scss', - ], + styleUrls: ['tree.component.scss'], encapsulation: ViewEncapsulation.None, + providers: [SubscriptionService], }) export class TreeComponent { dropPosition: number; dropdowns = {} as { [key: string]: NgbDropdown }; + constructor(private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService) { + const loaded$ = this.lazyLoadService.load( + LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), + ); + subscriptionService.addOne(loaded$); + } @ContentChild('menu') menu: TemplateRef; @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;