feat: style breadcrumbs

artemnih · Oct 6, 2021 · d9c0652 · d9c0652
1 parent fde5aca
commit d9c0652
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 15 deletions.
diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html
@@ -1 +1,8 @@
-<span *ngFor="let crumb of breadcrumbs"><button (click)="click(crumb)">{{ crumb.name }} </button> > </span>
+<div class="nxe-breadcrumbs">
+    <span *ngFor="let crumb of breadcrumbs">
+        <span (click)="click(crumb)" class="nxe-breadcrumb">{{ crumb.name }}</span>
+        <span class="nxe-breadcrumb-separator">
+            <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </span>
+    </span>
+</div>
diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss
@@ -0,0 +1,17 @@
+.nxe-breadcrumbs {
+    margin: 5px 10px;
+
+    .nxe-breadcrumb {
+        cursor: pointer;
+        padding: 5px 5px;
+        border-radius: 5px;
+
+        &:hover {
+            background-color: #d7edff;
+        }
+    }
+
+    .nxe-breadcrumb-separator {
+        margin: 0 10px;
+    }
+}
diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.ts b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { XNode } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
@@ -12,9 +12,10 @@ interface Breadcrumb {
 @Component({
     selector: 'nxe-breadcrumbs',
     templateUrl: './breadcrumbs.component.html',
-    styleUrls: ['./breadcrumbs.component.scss']
+    styleUrls: ['./breadcrumbs.component.scss'],
+    encapsulation: ViewEncapsulation.None,
 })
-export class BreadcrumbsComponent {
+export class BreadcrumbsComponent implements OnDestroy {
     public breadcrumbs: Breadcrumb[] = [];
 
     private sub = new Subscription();
@@ -24,11 +25,17 @@ export class BreadcrumbsComponent {
     }
 
     private buildBreadcrumbs(nodes: XNode[]) {
-        this.breadcrumbs = nodes.map(n => ({ name: this.helperService.getName(n.data) || 'HOME', node: n }));
+
+        // TODO: configurable home node name
+        this.breadcrumbs = nodes.map(n => ({ name: this.helperService.getName(n.data) || 'Files', node: n }));
     }
 
     public click(crumb: Breadcrumb) {
         this.explorerService.openNode(crumb.node.id);
     }
 
+    public ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
 }
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'nxe-explorer',
     templateUrl: './explorer.component.html',
-    styleUrls: ['./explorer.component.scss']
+    styleUrls: ['./explorer.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ExplorerComponent {
 }
diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
@@ -12,6 +12,10 @@
         margin: 0px 5px;
         height: 100%;
 
+        &:hover {
+            cursor: pointer;
+        }
+
         .nxe-icon {
             margin-top: 5px;
 
@@ -24,10 +28,6 @@
                     -webkit-text-stroke: 2px white;
                 }
             }
-
-            &:hover {
-                cursor: pointer;
-            }
         }
 
         &.nxe-icon-selected {

diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.ts b/projects/ngx-explorer/src/lib/components/icons/icons.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { BaseView } from '../../common/base-view';
 import { NodeType } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
@@ -7,7 +7,8 @@ import { HelperService } from '../../services/helper.service';
 @Component({
     selector: 'nxe-icons',
     templateUrl: './icons.component.html',
-    styleUrls: ['./icons.component.scss']
+    styleUrls: ['./icons.component.scss'],
+    encapsulation: ViewEncapsulation.None,
 })
 export class IconsComponent extends BaseView {
 

diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts
@@ -1,11 +1,12 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
 
 @Component({
     selector: 'nxe-menu-bar',
     templateUrl: './menu-bar.component.html',
-    styleUrls: ['./menu-bar.component.scss']
+    styleUrls: ['./menu-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MenuBarComponent {
     @ViewChild('uploader', { static: true }) uploader: ElementRef;