feat: nice css

artemnih · Oct 6, 2021 · beed2a5 · beed2a5
1 parent 40e1a27
commit beed2a5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 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
@@ -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
@@ -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>
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
@@ -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;
+        }
+    }
+
+}
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
@@ -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
@@ -9,6 +9,6 @@
 
 .demo-container {
     width: 50%;
-    height: 400px;
+    height: 800px;
     border: 1px solid #ccc;
 }