diff --git a/projects/ngx-explorer/src/lib/common/types.ts b/projects/ngx-explorer/src/lib/common/types.ts index 125a4c1..093f20c 100644 --- a/projects/ngx-explorer/src/lib/common/types.ts +++ b/projects/ngx-explorer/src/lib/common/types.ts @@ -33,4 +33,9 @@ export interface IDataService { export interface IHelperService { getName(data: T): string +} + +export enum AvialableView { // TODO: temp. Allow injection + List = "List", + Icon = "Icon", } \ No newline at end of file diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss index 25dd626..e1bf08a 100644 --- a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss +++ b/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; diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html index 0ef0cee..d45db95 100644 --- a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html +++ b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html @@ -1,8 +1,15 @@
- +
- - + + + + + + + + +
\ No newline at end of file diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts index c35ab03..8a5fc1c 100644 --- a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.ts +++ b/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) { + this.currentView.subscribe(view => { + this.view = view; + }) + } + } diff --git a/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.html b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.html new file mode 100644 index 0000000..a304b17 --- /dev/null +++ b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.html @@ -0,0 +1,9 @@ +
+
+ +
+
+ +
+ +
\ No newline at end of file diff --git a/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.scss new file mode 100644 index 0000000..bc817a4 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.spec.ts b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.spec.ts new file mode 100644 index 0000000..44bfccd --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SecondMenuBarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SecondMenuBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.ts b/projects/ngx-explorer/src/lib/components/second-menu-bar/second-menu-bar.component.ts new file mode 100644 index 0000000..9d66712 --- /dev/null +++ b/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 { +} diff --git a/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.html b/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.html new file mode 100644 index 0000000..58082d1 --- /dev/null +++ b/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.scss b/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.scss new file mode 100644 index 0000000..9464537 --- /dev/null +++ b/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; + } + } +} diff --git a/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.spec.ts b/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.spec.ts new file mode 100644 index 0000000..4e1808b --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ViewSwitcherComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ViewSwitcherComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.ts b/projects/ngx-explorer/src/lib/components/view-switcher/view-switcher.component.ts new file mode 100644 index 0000000..b96fd50 --- /dev/null +++ b/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) { + } + + setView(view: AvialableView) { + this.currentView.next(view); + } + +} diff --git a/projects/ngx-explorer/src/lib/injection-tokens/current-view.token.ts b/projects/ngx-explorer/src/lib/injection-tokens/current-view.token.ts new file mode 100644 index 0000000..5d8fdc5 --- /dev/null +++ b/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>('CURRENT_VIEW', { + providedIn: 'root', + factory: () => new BehaviorSubject(AvialableView.Icon), +}); diff --git a/projects/ngx-explorer/src/lib/ngx-explorer.module.ts b/projects/ngx-explorer/src/lib/ngx-explorer.module.ts index 757823b..8af9c14 100644 --- a/projects/ngx-explorer/src/lib/ngx-explorer.module.ts +++ b/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 { } diff --git a/projects/ngx-explorer/src/public-api.ts b/projects/ngx-explorer/src/public-api.ts index 2d9bf40..4c07aeb 100644 --- a/projects/ngx-explorer/src/public-api.ts +++ b/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'; \ No newline at end of file +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'; \ No newline at end of file