feat: fonts

artemnih · Oct 6, 2021 · e66d0f8 · e66d0f8
1 parent 1cb0b08
commit e66d0f8
Show file tree

Hide file tree

Showing 19 changed files with 391 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/ngx-explorer/src/lib/common/base-view.ts b/projects/ngx-explorer/src/lib/common/base-view.ts
@@ -1,9 +1,10 @@
-import { OnDestroy } from '@angular/core';
+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';
 
+@Directive()
 export class BaseView implements OnDestroy {
     public selection: XNode[] = [];
     public items: XNode[] = [];

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,6 +1,8 @@
 <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-icon" [ngClass]="{'nxe-icon-selected':isSelected(item)}"></div>
+    <div class="nxe-icons-wrapper" [ngClass]="{'nxe-icon-selected':isSelected(item)}" *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)">
+        <div class="nxe-icon">
+            <i class="fi-xtluxl-folder-thin"></i>
+        </div>
         <div class="nxe-icon-text">{{ getDisplayName(item.data) }}</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,17 +1,30 @@
+// TODO: var colors
+
 .nxe-icons-container {
     display: flex;
 
     .nxe-icons-wrapper {
-        & .nxe-icon-selected {
-            background-color: cadetblue;
+        padding-bottom: 5px;
+        width: 80px;
+        border-radius: 8px;
+        text-align: center;
+        border: 1px solid transparent;
+        margin: 0px 5px;
+
+        &.nxe-icon-selected {
+            background-color: #f1f9ff;
+            border: 1px solid #94cfff;
         }
 
         .nxe-icon {
-            width: 50px;
-            height: 50px;
-            border: 1px solid #ccc;
-            border-radius: 10%;
-            margin: 5px 10px;
+            margin-top: 5px;
+
+            i {
+                font-size: 50px;
+                // color: #f8d775;
+                color: #bbb;
+                font-weight: 500;
+            }
 
             &:hover {
                 cursor: pointer;
@@ -21,5 +34,10 @@
 
     .nxe-icon-text {
         text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
     }
 }