From beed2a569429fe1b2f618a237e3728576afb9fe0 Mon Sep 17 00:00:00 2001
From: artemnih <23387542+artemnih@users.noreply.github.com>
Date: Wed, 6 Oct 2021 14:25:27 -0400
Subject: [PATCH] feat: nice css

---
 .../lib/components/icons/icons.component.scss |  3 +-
 .../menu-bar/menu-bar.component.html          | 15 +++++----
 .../menu-bar/menu-bar.component.scss          | 31 +++++++++++++++++++
 .../components/menu-bar/menu-bar.component.ts |  5 ---
 src/app/app.component.scss                    |  2 +-
 5 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
index f4fb5b6..376ef66 100644
--- a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
+++ b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
@@ -3,7 +3,6 @@
 .nxe-icons-container {
     display: flex;
     flex-wrap: wrap;
-    // border: 1px solid #ccc;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box; /* Firefox, other Gecko */
     box-sizing: border-box; /* Opera/IE 8+ */
@@ -30,7 +29,7 @@
 
                 i {
                     font-size: 50px;
-                    color: #bbb;
+                    color: #999;
                     font-weight: 500;
 
                     &.fa {
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html
index f9f4592..b7d2803 100644
--- a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html
+++ b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html
@@ -1,11 +1,10 @@
-<div>
-    <button (click)="back()">Back</button>
-    <button (click)="createFolder()">New Folder</button>
-    <button (click)="refresh()">Refresh</button>
-    <button (click)="rename()">Rename</button>
-    <button (click)="remove()">Delete</button>
-    <button (click)="openUploader()">Upload</button>
-    <button (click)="download()">Download</button>
+<div class="ngx-menubar-container">
+    <button class="nxe-menubar-button" (click)="createFolder()"><i class="fa fa-folder-o" aria-hidden="true"></i>New Folder</button>
+    <button class="nxe-menubar-button" (click)="refresh()"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
+    <button class="nxe-menubar-button" (click)="rename()"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Rename</button>
+    <button class="nxe-menubar-button" (click)="remove()"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</button>
+    <button class="nxe-menubar-button" (click)="openUploader()"><i class="fa fa-upload" aria-hidden="true"></i> Upload</button>
+    <button class="nxe-menubar-button" (click)="download()"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
 
     <input style="display: none" type="file" multiple (change)="handleFiles($event.target.files)" #uploader>
 </div>
\ No newline at end of file
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss
index e69de29..414009c 100644
--- a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss
+++ b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.scss
@@ -0,0 +1,31 @@
+.ngx-menubar-container {
+    width: 100%;
+    border: solid #ccc;
+    border-width: 0 0 1px 0;
+    padding: 10px;
+    -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-menubar-button {
+        cursor: pointer;
+        padding: 5px 5px;
+        border-radius: 5px;
+        background: transparent;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        margin-right: 20px;
+        
+        .fa {
+            margin-right: 5px;
+            color: #555;
+        }
+
+        &:hover {
+            background-color: #d7edff;
+        }
+    }
+
+}
\ No newline at end of file
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
index f3bf8d4..e26a835 100644
--- 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
@@ -13,11 +13,6 @@ export class MenuBarComponent {
 
     constructor(private explorerService: ExplorerService, private helperService: HelperService) { }
 
-    back() {
-        const currentNode = this.explorerService.openedNode.value;
-        this.explorerService.openNode(currentNode.parentId);
-    }
-
     createFolder() {
         const name = prompt("Enter new folder name");
         if (name) {
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c4e6158..39493c3 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -9,6 +9,6 @@
 
 .demo-container {
     width: 50%;
-    height: 400px;
+    height: 800px;
     border: 1px solid #ccc;
 }
\ No newline at end of file