forked from NationalBankBelgium/stark
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(stark-ui): implementation of the app sidebar
ISSUES CLOSED: NationalBankBelgium#592
- Loading branch information
Showing
38 changed files
with
808 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export * from "./app-sidebar/app-sidebar.module"; | ||
| export * from "./app-sidebar/components"; | ||
| export * from "./app-sidebar/services"; | ||
| export * from "./app-sidebar/testing"; |
41 changes: 41 additions & 0 deletions
41
packages/stark-ui/src/modules/app-sidebar/app-sidebar.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { NgModule, Optional, SkipSelf } from "@angular/core"; | ||
| import { CommonModule } from "@angular/common"; | ||
| import { MatSidenavModule } from "@angular/material/sidenav"; | ||
| import { StarkAppSidebarComponent } from "./components"; | ||
| import { STARK_APP_SIDEBAR_SERVICE, StarkAppSidebarServiceImpl } from "./services"; | ||
| import { ModuleWithProviders } from "@angular/compiler/src/core"; | ||
|
|
||
| @NgModule({ | ||
| declarations: [StarkAppSidebarComponent], | ||
| imports: [CommonModule, MatSidenavModule], | ||
| exports: [StarkAppSidebarComponent] | ||
| }) | ||
| export class StarkAppSidebarModule { | ||
| /** | ||
| * Instantiates the services only once since they should be singletons | ||
| * so the forRoot() should be called only by the AppModule | ||
| * @link https://angular.io/guide/singleton-services#forroot | ||
| * @returns a module with providers | ||
| */ | ||
| public static forRoot(): ModuleWithProviders { | ||
| return { | ||
| ngModule: StarkAppSidebarModule, | ||
| providers: [{ provide: STARK_APP_SIDEBAR_SERVICE, useClass: StarkAppSidebarServiceImpl }] | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Prevents this module from being re-imported | ||
| * @link https://angular.io/guide/singleton-services#prevent-reimport-of-the-coremodule | ||
| * @param parentModule - the parent module | ||
| */ | ||
| public constructor( | ||
| @Optional() | ||
| @SkipSelf() | ||
| parentModule: StarkAppSidebarModule | ||
| ) { | ||
| if (parentModule) { | ||
| throw new Error("StarkAppSidebarModule is already loaded. Import it in the AppModule only"); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./components/app-sidebar.component"; |
6 changes: 6 additions & 0 deletions
6
packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /* ============================================================================== */ | ||
| /* S t a r k A p p S i d e b a r - T h e m e */ | ||
| /* ============================================================================== */ | ||
| /* stark-ui: src/modules/app-sidebar/components/_app-sidebar-theme.scss */ | ||
|
|
||
| /* END stark-ui: src/modules/app-sidebar/components/_app-sidebar-theme.scss */ |
48 changes: 48 additions & 0 deletions
48
packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* ============================================================================== */ | ||
| /* S t a r k A p p S i d e b a r */ | ||
| /* ============================================================================== */ | ||
| /* stark-ui: src/modules/app-sidebar/components/_app-sidebar.component.scss */ | ||
|
|
||
| .stark-app-sidebar { | ||
| .mat-sidenav-content { | ||
| margin-top: $stark-header-size; | ||
| [stark-app-sidenav-content] { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| } | ||
| } | ||
|
|
||
| .mat-sidenav-container { | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .mat-sidenav { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .stark-app-sidenav-left { | ||
| width: 150px; | ||
| } | ||
| .stark-app-sidenav-right { | ||
| width: 300px; | ||
| } | ||
| .stark-app-sidenav-menu { | ||
| margin-top: $stark-header-size; | ||
| width: 200px; | ||
| } | ||
| } | ||
|
|
||
| @media #{$tablet-query} { | ||
| .stark-app-sidebar { | ||
| .stark-app-sidenav-menu, | ||
| .mat-sidenav-content { | ||
| margin-top: $stark-header-size-desktop; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* END stark-ui: src/modules/app-sidebar/components/_app-sidebar.component.scss */ |
18 changes: 18 additions & 0 deletions
18
packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <mat-sidenav-container #appSidenavContainer> | ||
| <mat-sidenav #appSidenavLeft class="stark-app-sidenav-left" [ngClass]="{'stark-app-sidenav-menu': sidenavLeftMode==='menu'}" mode="over" [fixedInViewport]="true" | ||
| [fixedBottomGap]="0"> | ||
| <ng-container *ngIf="sidenavLeftMode==='regular'"> | ||
| <ng-content class="regular" select="[stark-app-sidenav-left]"></ng-content> | ||
| </ng-container> | ||
| <ng-container class="menu" *ngIf="sidenavLeftMode==='menu'"> | ||
| <ng-content select="[stark-app-sidenav-menu]"></ng-content> | ||
| </ng-container> | ||
| </mat-sidenav> | ||
| <mat-sidenav #appSidenavRight class="stark-app-sidenav-right" mode="over" position="end" [fixedInViewport]="true" | ||
| [fixedBottomGap]="0"> | ||
| <ng-content select="[stark-app-sidenav-right]"></ng-content> | ||
| </mat-sidenav> | ||
| <mat-sidenav-content> | ||
| <ng-content select="[stark-app-sidenav-content]"></ng-content> | ||
| </mat-sidenav-content> | ||
| </mat-sidenav-container> |
86 changes: 86 additions & 0 deletions
86
packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { CommonModule } from "@angular/common"; | ||
| import { NoopAnimationsModule } from "@angular/platform-browser/animations"; | ||
| import { async, ComponentFixture, TestBed } from "@angular/core/testing"; | ||
| import { MatSidenavModule } from "@angular/material/sidenav"; | ||
| import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; | ||
| import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; | ||
| import { StarkAppSidebarComponent } from "./app-sidebar.component"; | ||
| import { MockAppSidebarService } from "./../testing/app-sidebar.mock"; | ||
| import { STARK_APP_SIDEBAR_SERVICE } from "./../services/app-sidebar.service.intf"; | ||
|
|
||
| describe("AppSidebarComponent", () => { | ||
| let fixture: ComponentFixture<StarkAppSidebarComponent>; | ||
| let component: StarkAppSidebarComponent; | ||
|
|
||
| beforeEach(async(() => { | ||
| const mockLogger: MockStarkLoggingService = new MockStarkLoggingService(); | ||
| return TestBed.configureTestingModule({ | ||
| declarations: [StarkAppSidebarComponent], | ||
| imports: [CommonModule, MatSidenavModule, NoopAnimationsModule], | ||
| providers: [ | ||
| { provide: STARK_LOGGING_SERVICE, useValue: mockLogger }, | ||
| { provide: STARK_APP_SIDEBAR_SERVICE, useValue: new MockAppSidebarService() } | ||
| ] | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(StarkAppSidebarComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| describe("sidenavs opening features ", () => { | ||
| it("left sidebar should be opened", () => { | ||
| component.onOpenSideNav({ | ||
| sidebar: "left" | ||
| }); | ||
| expect(component.appSidenavLeft.opened).toBe(true); | ||
| }); | ||
|
|
||
| it("right sidebar should be opened", () => { | ||
| component.onOpenSideNav({ | ||
| sidebar: "right" | ||
| }); | ||
| expect(component.appSidenavRight.opened).toBe(true); | ||
| }); | ||
|
|
||
| it("left sidebar should show the menu in menu mode", () => { | ||
| component.onOpenSideNav({ | ||
| mode: "menu", | ||
| sidebar: "left" | ||
| }); | ||
| fixture.detectChanges(); | ||
| const sidenav: HTMLElement = fixture.nativeElement.querySelector(".stark-app-sidenav-menu"); | ||
| expect(sidenav).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("left sidebar should hide the menu in regular mode", () => { | ||
| component.onOpenSideNav({ | ||
| mode: "regular", | ||
| sidebar: "left" | ||
| }); | ||
| fixture.detectChanges(); | ||
| const sidenav: HTMLElement = fixture.nativeElement.querySelector(".stark-app-sidenav-menu"); | ||
| expect(sidenav).toBeFalsy(); | ||
| }); | ||
| }); | ||
|
|
||
| describe("sidenavs closing features ", () => { | ||
| it("left sidebar should close", () => { | ||
| component.onOpenSideNav({ | ||
| sidebar: "left" | ||
| }); | ||
| component.onCloseSideNavs(); | ||
| expect(component.appSidenavLeft.opened).toBe(false); | ||
| }); | ||
|
|
||
| it("right sidebar should close", () => { | ||
| component.onOpenSideNav({ | ||
| sidebar: "right" | ||
| }); | ||
| component.onCloseSideNavs(); | ||
| expect(component.appSidenavRight.opened).toBe(false); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.