feat: view swticher

projects/ngx-explorer/src/lib/common/types.ts

@@ -33,4 +33,9 @@ export interface IDataService<T> {
 
 export interface IHelperService {
     getName<T>(data: T): string
+}
+
+export enum AvialableView { // TODO: temp. Allow injection
+    List = "List",
+    Icon = "Icon",
 }

projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss

@@ -1,11 +1,5 @@
 .nxe-breadcrumbs-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-breadcrumb-button {
         cursor: pointer;

projects/ngx-explorer/src/lib/components/explorer/explorer.component.html

@@ -1,8 +1,15 @@
 <div class="nxe-explorer-container">
     <nxe-menu-bar></nxe-menu-bar>
-    <nxe-breadcrumbs></nxe-breadcrumbs>
+    <nxe-second-menu-bar></nxe-second-menu-bar>
     <div class="nxe-explorer-view-container">
-        <!-- <nxe-icons></nxe-icons> -->
-        <nxe-list></nxe-list>
+
+        <ng-container *ngIf="view === avialableView.Icon">
+            <nxe-icons></nxe-icons>
+        </ng-container>
+
+        <ng-container *ngIf="view === avialableView.List">
+            <nxe-list></nxe-list>
+        </ng-container>
+
     </div>
 </div>

projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts

@@ -1,4 +1,7 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { AvialableView } from '../../common/types';
+import { CURRENT_VIEW } from '../../injection-tokens/current-view.token';
 
 @Component({
     selector: 'nxe-explorer',
@@ -7,4 +10,14 @@ import { Component, ViewEncapsulation } from '@angular/core';
     encapsulation: ViewEncapsulation.None
 })
 export class ExplorerComponent {
+
+    public avialableView = AvialableView;
+    public view: string;
+
+    constructor(@Inject(CURRENT_VIEW) private currentView: BehaviorSubject<AvialableView>) {
+        this.currentView.subscribe(view => {
+            this.view = view;
+        })
+    }
+
 }

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.html

@@ -0,0 +1,9 @@
+<div class="nxe-second-menu-bar">
+    <div class="nxe-second-menu-bar-left">
+        <nxe-breadcrumbs></nxe-breadcrumbs>
+    </div>
+    <div class="nxe-second-menu-bar-right">
+        <nxe-view-switcher></nxe-view-switcher>
+    </div>
+
+</div>

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss

@@ -0,0 +1,10 @@
+.nxe-second-menu-bar {
+    display: flex;
+    border: solid #ccc;
+    border-width: 0 0 1px 0;
+
+    .nxe-second-menu-bar-left {
+        flex-grow: 1;
+    }
+
+}

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SecondMenuBarComponent } from './second-menu-bar.component';
+
+describe('SecondMenuBarComponent', () => {
+  let component: SecondMenuBarComponent;
+  let fixture: ComponentFixture<SecondMenuBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SecondMenuBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SecondMenuBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.ts

@@ -0,0 +1,10 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'nxe-second-menu-bar',
+  templateUrl: './second-menu-bar.component.html',
+  styleUrls: ['./second-menu-bar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SecondMenuBarComponent {
+}

projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.html

@@ -0,0 +1,4 @@
+<div class="nxe-view-switcher">
+    <button (click)="setView(avialableView.Icon)"><i class="fa fa-th" aria-hidden="true"></i></button>
+    <button (click)="setView(avialableView.List)"><i class="fa fa-list" aria-hidden="true"></i></button>
+</div>

projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.scss

@@ -0,0 +1,24 @@
+.nxe-view-switcher {
+    padding: 10px;
+
+    button {
+        cursor: pointer;
+        padding: 5px 5px;
+        border-radius: 5px;
+        background: transparent;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+
+        i {
+            &.fa {
+                -webkit-text-stroke: 1px white;
+            }
+        }
+
+        &:hover {
+            background-color: #d7edff;
+        }
+    }
+}

projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewSwitcherComponent } from './view-switcher.component.ts';
+
+describe('ViewSwitcherComponent', () => {
+  let component: ViewSwitcherComponent;
+  let fixture: ComponentFixture<ViewSwitcherComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewSwitcherComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewSwitcherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.ts

@@ -0,0 +1,23 @@
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { AvialableView } from 'ngx-explorer';
+import { BehaviorSubject } from 'rxjs';
+import { CURRENT_VIEW } from '../../injection-tokens/current-view.token';
+
+@Component({
+  selector: 'nxe-view-switcher',
+  templateUrl: './view-switcher.component.html',
+  styleUrls: ['./view-switcher.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ViewSwitcherComponent {
+
+  public avialableView = AvialableView;
+
+  constructor(@Inject(CURRENT_VIEW) private currentView: BehaviorSubject<AvialableView>) {
+  }
+
+  setView(view: AvialableView) {
+    this.currentView.next(view);
+  }
+
+}

projects/ngx-explorer/src/lib/injection-tokens/current-view.token.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { AvialableView } from '../common/types';
+
+export const CURRENT_VIEW = new InjectionToken<BehaviorSubject<AvialableView>>('CURRENT_VIEW', {
+    providedIn: 'root',
+    factory: () => new BehaviorSubject(AvialableView.Icon),
+});

projects/ngx-explorer/src/lib/ngx-explorer.module.ts

@@ -5,6 +5,8 @@ import { ExplorerComponent } from './components/explorer/explorer.component';
 import { MenuBarComponent } from './components/menu-bar/menu-bar.component';
 import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component';
 import { ListComponent } from './components/list/list.component';
+import { SecondMenuBarComponent } from './components/second-menu-bar/second-menu-bar.component';
+import { ViewSwitcherComponent } from './components/view-switcher/view-switcher.component';
 
 @NgModule({
   declarations: [
@@ -13,6 +15,8 @@ import { ListComponent } from './components/list/list.component';
     MenuBarComponent,
     BreadcrumbsComponent,
     ListComponent,
+    SecondMenuBarComponent,
+    ViewSwitcherComponent,
   ],
   imports: [
     CommonModule
@@ -21,7 +25,9 @@ import { ListComponent } from './components/list/list.component';
     IconsComponent, 
     ExplorerComponent, 
     MenuBarComponent,
-    BreadcrumbsComponent
+    BreadcrumbsComponent,
+    SecondMenuBarComponent,
+    ViewSwitcherComponent,
   ]
 })
 export class NgxExplorerModule { }

projects/ngx-explorer/src/public-api.ts

@@ -10,4 +10,6 @@ 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/components/base-view/base-view.directive';
+export * from './lib/components/base-view/base-view.directive';
+export * from './lib/components/second-menu-bar/second-menu-bar.component';
+export * from './lib/components/view-switcher/view-switcher.component';