feat: empty space click

artemnih · Oct 6, 2021 · 5740535 · 5740535
1 parent a7f599c
commit 5740535
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 57 deletions.
diff --git a/.../ngx-explorer/src/lib/common/base-view.ts → ...mponents/base-view/base-view.directive.ts b/.../ngx-explorer/src/lib/common/base-view.ts → ...mponents/base-view/base-view.directive.ts
@@ -1,8 +1,8 @@
 import { Directive, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { XNode } from './types';
-import { ExplorerService } from '../services/explorer.service';
-import { HelperService } from '../services/helper.service';
+import { XNode } from '../../common/types';
+import { ExplorerService } from '../../services/explorer.service';
+import { HelperService } from '../../services/helper.service';
 
 @Directive()
 export class BaseView implements OnDestroy {
@@ -51,6 +51,10 @@ export class BaseView implements OnDestroy {
         return this.selection.indexOf(item) !== -1;
     }
 
+    emptySpaceClick(): void {
+        this.explorerService.selectNodes([]);
+    }
+
     ngOnDestroy() {
         this.subs.unsubscribe();
     }

diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.ts b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.ts
@@ -17,15 +17,13 @@ interface Breadcrumb {
 })
 export class BreadcrumbsComponent implements OnDestroy {
     public breadcrumbs: Breadcrumb[] = [];
-
     private sub = new Subscription();
 
     constructor(private explorerService: ExplorerService, private helperService: HelperService) {
         this.sub.add(this.explorerService.breadcrumbs.subscribe(n => this.buildBreadcrumbs(n)));
     }
 
     private buildBreadcrumbs(nodes: XNode[]) {
-
         // TODO: configurable home node name
         this.breadcrumbs = nodes.map(n => ({ name: this.helperService.getName(n.data) || 'Files', node: n }));
     }

diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.html b/projects/ngx-explorer/src/lib/components/icons/icons.component.html
@@ -1,10 +1,13 @@
-<div class="nxe-icons-container">
-    <div class="nxe-icons-wrapper" *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)">
-        <div class="nxe-icons-wrapper-inner" [ngClass]="{'nxe-icon-selected':isSelected(item)}">
-            <div class="nxe-icon">
-                <i [className]="icons[item.type]"></i>
+<div class="nxe-icons">
+    <div class="nxe-icons-backpad" (click)="emptySpaceClick()"></div>
+    <div class="nxe-icons-container">
+        <div class="nxe-icons-wrapper" *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)">
+            <div class="nxe-icons-wrapper-inner" [ngClass]="{'nxe-icon-selected':isSelected(item)}">
+                <div class="nxe-icon">
+                    <i [className]="icons[item.type]"></i>
+                </div>
+                <div class="nxe-icon-text">{{ getDisplayName(item.data) }}</div>
             </div>
-            <div class="nxe-icon-text">{{ getDisplayName(item.data) }}</div>
         </div>
     </div>
 </div>
diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
@@ -1,64 +1,79 @@
 // TODO: var colors
 
-.nxe-icons-container {
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-    -moz-box-sizing: border-box; /* Firefox, other Gecko */
-    box-sizing: border-box; /* Opera/IE 8+ */
+.nxe-icons {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-    .nxe-icons-wrapper {
-        margin: 10px 10px 0px 10px;
-        height: 110px;
-        width: 80px;
-        display: inline-block;
-        flex-grow: 0;
-
-        .nxe-icons-wrapper-inner {
-            border: 1px solid transparent;
-            padding-bottom: 5px;
-            text-align: center;
-            border-radius: 5px;
+    .nxe-icons-backpad {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 
-            &:hover {
-                cursor: pointer;
-            }
+    .nxe-icons-container {
+        display: flex;
+        flex-wrap: wrap;
+        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+        -moz-box-sizing: border-box; /* Firefox, other Gecko */
+        box-sizing: border-box; /* Opera/IE 8+ */
 
-            .nxe-icon {
-                margin-top: 5px;
+        .nxe-icons-wrapper {
+            margin: 10px 10px 0px 10px;
+            height: 110px;
+            width: 80px;
+            display: inline-block;
+            flex-grow: 0;
+            z-index: 1;
 
-                i {
-                    font-size: 50px;
-                    color: #999;
-                    font-weight: 500;
+            .nxe-icons-wrapper-inner {
+                border: 1px solid transparent;
+                padding-bottom: 5px;
+                text-align: center;
+                border-radius: 5px;
 
-                    &.fa {
-                        -webkit-text-stroke: 2px white;
-                    }
+                &:hover {
+                    cursor: pointer;
                 }
-            }
-
-            &.nxe-icon-selected {
-                background-color: #f1f9ff;
-                border: 1px solid #94cfff;
 
                 .nxe-icon {
+                    margin-top: 5px;
+
                     i {
+                        font-size: 50px;
+                        color: #999;
+                        font-weight: 500;
+
                         &.fa {
-                            -webkit-text-stroke: 2px #f1f9ff;
+                            -webkit-text-stroke: 2px white;
+                        }
+                    }
+                }
+
+                &.nxe-icon-selected {
+                    background-color: #f1f9ff;
+                    border: 1px solid #94cfff;
+
+                    .nxe-icon {
+                        i {
+                            &.fa {
+                                -webkit-text-stroke: 2px #f1f9ff;
+                            }
                         }
                     }
                 }
             }
-        }
 
-        .nxe-icon-text {
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
+            .nxe-icon-text {
+                text-align: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+            }
         }
     }
 }
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,8 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { BaseView } from '../../common/base-view';
 import { NodeType } from '../../common/types';
 import { ExplorerService } from '../../services/explorer.service';
 import { HelperService } from '../../services/helper.service';
+import { BaseView } from '../base-view/base-view.directive';
 
 @Component({
     selector: 'nxe-icons',
@@ -20,5 +20,6 @@ export class IconsComponent extends BaseView {
     constructor(explorerService: ExplorerService, helperService: HelperService) {
         super(explorerService, helperService);
     }
+
 }
 
diff --git a/projects/ngx-explorer/src/public-api.ts b/projects/ngx-explorer/src/public-api.ts
@@ -10,4 +10,4 @@ export * from './lib/components/icons/icons.component';
 export * from './lib/components/explorer/explorer.component';
 export * from './lib/components/menu-bar/menu-bar.component';
 export * from './lib/components/breadcrumbs/breadcrumbs.component';
-export * from './lib/common/base-view';
+export * from './lib/components/base-view/base-view.directive';