diff --git a/packages/stark-ui/assets/themes/_menu-theme.scss b/packages/stark-ui/assets/themes/_menu-theme.scss index 92a70a47f2..c76f9bb732 100644 --- a/packages/stark-ui/assets/themes/_menu-theme.scss +++ b/packages/stark-ui/assets/themes/_menu-theme.scss @@ -11,3 +11,24 @@ color: map-get($mat-light-theme-foreground, disabled-button); } } + +/* TODO: This code should be moved when the app menu is implemented */ +stark-app-sidebar { + .stark-app-sidenav-menu { + background-color: #16385a; + .mat-nav-list { + padding-top: 0; + .mat-list-item { + color: #fff; + font-size: 13px; + &:hover a { + background-color: rgba($color: #fff, $alpha: 0.3); + } + } + .mat-list-item-focus.active, + a.active { + background-color: rgba($color: #fff, $alpha: 0.4); + } + } + } +} diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts index 3d31b42b7e..0557d3cb7e 100644 --- a/packages/stark-ui/src/modules.ts +++ b/packages/stark-ui/src/modules.ts @@ -2,6 +2,8 @@ export * from "./modules/action-bar"; export * from "./modules/app-logo"; export * from "./modules/app-logout"; export * from "./modules/breadcrumb"; +export * from "./modules/app-sidebar"; +export * from "./modules/keyboard-directives"; export * from "./modules/date-picker"; export * from "./modules/date-range-picker"; export * from "./modules/dropdown"; diff --git a/packages/stark-ui/src/modules/app-sidebar.ts b/packages/stark-ui/src/modules/app-sidebar.ts new file mode 100644 index 0000000000..186230fa7a --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar.ts @@ -0,0 +1,3 @@ +export * from "./app-sidebar/app-sidebar.module"; +export * from "./app-sidebar/components"; +export * from "./app-sidebar/services"; diff --git a/packages/stark-ui/src/modules/app-sidebar/app-sidebar.module.ts b/packages/stark-ui/src/modules/app-sidebar/app-sidebar.module.ts new file mode 100644 index 0000000000..f10fbdd693 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/app-sidebar.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { MatSidenavModule } from "@angular/material/sidenav"; +import { StarkAppSidebarComponent } from "./components"; +import { StarkAppSidebarService } from "./services"; + +@NgModule({ + declarations: [StarkAppSidebarComponent], + imports: [CommonModule, MatSidenavModule], + exports: [StarkAppSidebarComponent], + providers: [StarkAppSidebarService] +}) +export class StarkAppSidebarModule {} diff --git a/packages/stark-ui/src/modules/app-sidebar/components.ts b/packages/stark-ui/src/modules/app-sidebar/components.ts new file mode 100644 index 0000000000..0d51dd2a76 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components.ts @@ -0,0 +1 @@ +export * from "./components/app-sidebar.component"; diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss new file mode 100644 index 0000000000..6e72ed9e5c --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss @@ -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 */ diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss new file mode 100644 index 0000000000..de270fd762 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss @@ -0,0 +1,42 @@ +/* ============================================================================== */ +/* 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; + } + + .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 */ diff --git a/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.html b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.html new file mode 100644 index 0000000000..d16be7f0af --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + +
+ +
+ + diff --git a/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.spec.ts b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.spec.ts new file mode 100644 index 0000000000..d0b5ac431a --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.spec.ts @@ -0,0 +1,81 @@ +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 { StarkAppSidebarService } from "./../services/app-sidebar.service"; + +describe("AppSidebarComponent", () => { + let fixture: ComponentFixture; + let component: StarkAppSidebarComponent; + + beforeEach(async(() => { + return TestBed.configureTestingModule({ + declarations: [StarkAppSidebarComponent], + imports: [CommonModule, MatSidenavModule, NoopAnimationsModule], + providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, StarkAppSidebarService] + }).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); + }); + }); +}); diff --git a/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.ts b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.ts new file mode 100644 index 0000000000..f3ea1a652a --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.ts @@ -0,0 +1,123 @@ +import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; +import { from, Subscription } from "rxjs"; +import { MatSidenav, MatSidenavContainer, MatDrawerToggleResult } from "@angular/material/sidenav"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { StarkAppSidebarOpenEvent } from "../services/app-sidebar-open-event.intf"; +import { StarkAppSidebarService } from "../services/app-sidebar.service"; + +/** + * Name of the component + */ +const componentName: string = "stark-app-sidebar"; + +/** + * Component to display the application's sidebar + * Only 2 sidebars are allowed: https://github.com/angular/material2/issues/1514 + */ +@Component({ + selector: "stark-app-sidebar", + templateUrl: "./app-sidebar.component.html", + encapsulation: ViewEncapsulation.None +}) +export class StarkAppSidebarComponent implements OnDestroy, OnInit { + /** + * Adds class="stark-app-sidebar" attribute on the host component + */ + @HostBinding("class") + public class: string = componentName; + + /** + * Mode for the left sidebar: either the menu is shown or the regular sidebar + */ + @Input() + public sidenavLeftMode: "regular" | "menu"; + + /** + * Reference to the MatSidenavContainer embedded in this component + */ + @ViewChild("appSidenavContainer") + public appSidenavContainer: MatSidenavContainer; + + /** + * Reference to the left MatSidenav embedded in this component + */ + @ViewChild("appSidenavLeft") + public appSidenavLeft: MatSidenav; + + /** + * Reference to the right MatSidenav embedded in this component + */ + @ViewChild("appSidenavRight") + public appSidenavRight: MatSidenav; + + /** + * Subscription to the open sidebar Observable + */ + public openSidebarSubscription: Subscription; + + /** + * Subscription to the close sidebar Observable + */ + public closeSidebarSubscription: Subscription; + + /** + * Class constructor + * @param sidebarService - The sidebar service of the application + */ + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, public sidebarService: StarkAppSidebarService) {} + + /** + * open sidenav handler + */ + public onOpenSideNav(event: StarkAppSidebarOpenEvent): void { + if (event.mode) { + this.sidenavLeftMode = event.mode; + } + switch (event.sidebar) { + case "left": + from(this.appSidenavLeft.open()).subscribe( + (result: MatDrawerToggleResult) => this.logger.debug(componentName + ": left sidenav " + result), + (error: Error) => this.logger.warn(componentName + ": ", error) + ); + break; + case "right": + from(this.appSidenavRight.open()).subscribe( + (result: MatDrawerToggleResult) => this.logger.debug(componentName + ": right sidebar " + result), + (error: Error) => this.logger.warn(componentName + ": ", error) + ); + break; + default: + break; + } + } + + /** + * close sidenav handler + */ + public onCloseSideNavs(): void { + this.appSidenavContainer.close(); + } + + /** + * Component lifecycle OnDestroy hook + * Prevent memory leak when component destroyed + */ + public ngOnDestroy(): void { + this.openSidebarSubscription.unsubscribe(); + this.closeSidebarSubscription.unsubscribe(); + } + + /** + * Component lifecycle OnInit hook + */ + public ngOnInit(): void { + this.logger.debug(componentName + ": component initialized"); + this.openSidebarSubscription = this.sidebarService.openSidebar$.subscribe((event: StarkAppSidebarOpenEvent) => { + this.onOpenSideNav(event); + }); + + this.closeSidebarSubscription = this.sidebarService.closeSidebar$.subscribe(() => { + this.onCloseSideNavs(); + }); + } +} diff --git a/packages/stark-ui/src/modules/app-sidebar/services.ts b/packages/stark-ui/src/modules/app-sidebar/services.ts new file mode 100644 index 0000000000..a0271cb334 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/services.ts @@ -0,0 +1,3 @@ +export * from "./services/app-sidebar.service"; +export * from "./services/app-sidebar-open-event.intf"; +export * from "./services/app-sidebar.service"; diff --git a/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar-open-event.intf.ts b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar-open-event.intf.ts new file mode 100644 index 0000000000..495e1ce124 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar-open-event.intf.ts @@ -0,0 +1,7 @@ +/** + * StarkAppSidebarOpenEvent interface + */ +export interface StarkAppSidebarOpenEvent { + mode?: "regular" | "menu"; + sidebar: "left" | "right"; +} diff --git a/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.intf.ts b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.intf.ts new file mode 100644 index 0000000000..906b354745 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.intf.ts @@ -0,0 +1,39 @@ +import { Observable } from "rxjs"; +import { StarkAppSidebarOpenEvent } from "./app-sidebar-open-event.intf"; + +/** + * Stark User Service. + * Service to fetch the user profile from the REST API. + * In Development, it can also be used to set the user profile manually. + */ +export interface StarkAppSidebarServiceIntf { + /** + * Observable subscribed by components to catch open events + */ + openSidebar$: Observable; + + /** + * Observable subscribed by components to catch close events + */ + closeSidebar$: Observable; + + /** + * open sidebar's menu + */ + openMenu(): void; + + /** + * open the left sidebar + */ + openLeft(): void; + + /** + * open the right sidebar + */ + openRight(): void; + + /** + * close all sidebars + */ + close(): void; +} diff --git a/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.spec.ts b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.spec.ts new file mode 100644 index 0000000000..fda92cf200 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.spec.ts @@ -0,0 +1,40 @@ +import { StarkAppSidebarService } from "./app-sidebar.service"; +import { StarkAppSidebarOpenEvent } from "./app-sidebar-open-event.intf"; +import createSpy = jasmine.createSpy; + +describe("ValueService", () => { + let service: StarkAppSidebarService; + beforeEach(() => { + service = new StarkAppSidebarService(); + }); + + it("openMenu() should raise the correct event", () => { + service.openSidebar$.subscribe((event: StarkAppSidebarOpenEvent) => { + expect(event).toEqual({ mode: "menu", sidebar: "left" }); + }); + service.openMenu(); + }); + + it("openLeft() should raise the correct event", () => { + service.openSidebar$.subscribe((event: StarkAppSidebarOpenEvent) => { + expect(event).toEqual({ mode: "regular", sidebar: "left" }); + }); + service.openLeft(); + }); + + it("openRight() should raise the correct event", () => { + service.openSidebar$.subscribe((event: StarkAppSidebarOpenEvent) => { + expect(event).toEqual({ sidebar: "right" }); + }); + service.openRight(); + }); + + it("close() should raise an event", () => { + const closeSidebars: jasmine.Spy = createSpy("closeSidebarsSpy"); + service.closeSidebar$.subscribe(() => { + closeSidebars(); + }); + service.close(); + expect(closeSidebars).toHaveBeenCalled(); + }); +}); diff --git a/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.ts b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.ts new file mode 100644 index 0000000000..c33987f6b6 --- /dev/null +++ b/packages/stark-ui/src/modules/app-sidebar/services/app-sidebar.service.ts @@ -0,0 +1,48 @@ +import { Injectable } from "@angular/core"; +import { Observable, Subject } from "rxjs"; +import { StarkAppSidebarServiceIntf } from "./app-sidebar.service.intf"; +import { StarkAppSidebarOpenEvent } from "./app-sidebar-open-event.intf"; + +/** + * StarkAppSidebarService service + */ +@Injectable() +export class StarkAppSidebarService implements StarkAppSidebarServiceIntf { + /** + * Subject emitting sidebar open events + */ + private openSidebarSource: Subject = new Subject(); + + public openSidebar$: Observable = this.openSidebarSource.asObservable(); + + /** + * Subject emitting sidebar close events + */ + private closeSidebarSource: Subject = new Subject(); + + public closeSidebar$: Observable = this.closeSidebarSource.asObservable(); + + public openMenu(): void { + this.openSidebarSource.next({ + mode: "menu", + sidebar: "left" + }); + } + + public openLeft(): void { + this.openSidebarSource.next({ + mode: "regular", + sidebar: "left" + }); + } + + public openRight(): void { + this.openSidebarSource.next({ + sidebar: "right" + }); + } + + public close(): void { + this.closeSidebarSource.next(); + } +} diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index 3e20a77e0b..cbbfbdf6f7 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -1,66 +1,5 @@ -
-
-
-
-
- - - -
-
- -
- -
- -
-
-
-

App Data

-
- - -
-
-
App Lang
- - -
-
- - - -
-
-
-

STARK

-
-
-
-
- - - + + Home @@ -98,20 +37,105 @@

STARK

 Pretty Print - - Table + + Sidebar Stark header + + Table + - - -
+ + +
+ Top content +
+
+ Middle content +
+
+ Bottom content +
+ + +
+ Top content +
+
+ Middle content +
+
+ Bottom content +
+ +
+
+
+
+
+
+ + + +
+
+
+ +
+
+
+
+

App Data

+
+ + +
+
+
App Lang
+ + +
+
+ + + +
+
+ +
+

STARK

+
+
+
+
+
- - - +
+ diff --git a/showcase/src/app/app.component.spec.ts b/showcase/src/app/app.component.spec.ts index 4701a2d29e..7556cb0726 100644 --- a/showcase/src/app/app.component.spec.ts +++ b/showcase/src/app/app.component.spec.ts @@ -2,14 +2,15 @@ import { NO_ERRORS_SCHEMA } from "@angular/core"; import { async, TestBed, ComponentFixture } from "@angular/core/testing"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; +import { StarkAppSidebarService } from "@nationalbankbelgium/stark-ui"; /** * Load the implementations that should be tested */ import { AppComponent } from "./app.component"; import { AppState } from "./app.service"; -import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; -import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; +import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE } from "@nationalbankbelgium/stark-core"; +import { MockStarkLoggingService, MockStarkRoutingService } from "@nationalbankbelgium/stark-core/testing"; import Spy = jasmine.Spy; describe(`App`, () => { @@ -25,7 +26,13 @@ describe(`App`, () => { declarations: [AppComponent], imports: [TranslateModule.forRoot()], schemas: [NO_ERRORS_SCHEMA], - providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, AppState, TranslateService] + providers: [ + { provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, + { provide: STARK_ROUTING_SERVICE, useClass: MockStarkRoutingService }, + AppState, + StarkAppSidebarService, + TranslateService + ] }) /** * Compile template and css diff --git a/showcase/src/app/app.component.ts b/showcase/src/app/app.component.ts index 8736b37a21..2ca3d9e4f4 100644 --- a/showcase/src/app/app.component.ts +++ b/showcase/src/app/app.component.ts @@ -1,9 +1,10 @@ /** * Angular 2 decorators and services */ -import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core"; +import { Component, Inject, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; +import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkLoggingService, StarkRoutingService } from "@nationalbankbelgium/stark-core"; +import { StarkAppSidebarComponent, StarkAppSidebarService } from "@nationalbankbelgium/stark-ui"; import { AppState } from "./app.service"; -import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; /** * App Component @@ -19,12 +20,35 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium export class AppComponent implements OnInit { public appState: AppState; - public constructor(appState: AppState, @Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) { + @ViewChild("appSideBar") + public appSidebar: StarkAppSidebarComponent; + + public constructor( + appState: AppState, + public sidebarService: StarkAppSidebarService, + @Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, + @Inject(STARK_ROUTING_SERVICE) public routingService: StarkRoutingService + ) { this.appState = appState; } public ngOnInit(): void { this.logger.debug("Initial App State", this.appState.state); + this.routingService.addTransitionHook("ON_SUCCESS", {}, () => { + this.sidebarService.close(); + }); + } + + public openMenu(): void { + this.sidebarService.openMenu(); + } + + public openLeftSidebar(): void { + this.sidebarService.openLeft(); + } + + public openRightSidebar(): void { + this.sidebarService.openRight(); } } diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index 1055583fd5..0931002c44 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -41,9 +41,11 @@ import { import { StarkAppLogoModule, StarkAppLogoutModule, + StarkAppSidebarModule, + StarkAppSidebarService, + StarkBreadcrumbModule, StarkSvgViewBoxModule, - StarkDatePickerModule, - StarkBreadcrumbModule + StarkDatePickerModule } from "@nationalbankbelgium/stark-ui"; import { routerConfigFn } from "./router.config"; import { registerMaterialIconSet } from "./material-icons.config"; @@ -177,6 +179,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger NewsModule, StarkAppLogoModule, StarkAppLogoutModule, + StarkAppSidebarModule, StarkSvgViewBoxModule, StarkDatePickerModule, StarkBreadcrumbModule @@ -187,6 +190,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger providers: [ environment.ENV_PROVIDERS, APP_PROVIDERS, + StarkAppSidebarService, { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }, // needed for ui-router { provide: STARK_APP_CONFIG, useFactory: starkAppConfigFactory }, { provide: STARK_APP_METADATA, useFactory: starkAppMetadataFactory }, diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index 97738b2501..5ce78c2d7f 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -4,6 +4,7 @@ import { ButtonComponent, DatePickerComponent, DateRangePickerComponent, + DemoSidebarComponent, DropdownComponent, ExampleViewerComponent, HeaderComponent, @@ -30,6 +31,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent }, { name: "demo-logout", url: "/demo/logout", component: LogoutComponent }, { name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent }, + { name: "demo-sidebar", url: "/demo/sidebar", component: DemoSidebarComponent }, { name: "demo-table", url: "/demo/table", component: TableComponent }, { name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent }, { name: "otherwise", url: "/otherwise", component: NoContentComponent } diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 527e4465db..a6d377ddd2 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -18,6 +18,7 @@ import { DemoBreadcrumbComponent } from "./breadcrumb/breadcrumb.component"; import { ButtonComponent } from "./button/button.component"; import { DatePickerComponent } from "./date-picker/date-picker.component"; import { DateRangePickerComponent } from "./date-range-picker/date-range-picker.component"; +import { DemoSidebarComponent } from "./sidebar/demo-sidebar.component"; import { DropdownComponent } from "./dropdown/dropdown.component"; import { LogoutComponent } from "./logout/logout.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; @@ -81,6 +82,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; PrettyPrintComponent, DatePickerComponent, DateRangePickerComponent, + DemoSidebarComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index 65826b8955..7760bf9827 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -3,6 +3,7 @@ export * from "./breadcrumb"; export * from "./button"; export * from "./date-picker"; export * from "./date-range-picker"; +export * from "./sidebar"; export * from "./dropdown"; export * from "./example-viewer"; export * from "./header"; diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.html b/showcase/src/app/demo/sidebar/demo-sidebar.component.html new file mode 100644 index 0000000000..e0b1bed0d3 --- /dev/null +++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.html @@ -0,0 +1,3 @@ + +

SHOWCASE.DEMO.SIDEBAR.INTRO

+ diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.ts b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts new file mode 100644 index 0000000000..6618a7ab2c --- /dev/null +++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "showcase-demo-sidebar", + templateUrl: "./demo-sidebar.component.html" +}) +export class DemoSidebarComponent {} diff --git a/showcase/src/app/demo/sidebar/index.ts b/showcase/src/app/demo/sidebar/index.ts new file mode 100644 index 0000000000..5935dd3572 --- /dev/null +++ b/showcase/src/app/demo/sidebar/index.ts @@ -0,0 +1 @@ +export * from "./demo-sidebar.component"; diff --git a/showcase/src/assets/examples/sidebar/regular.html b/showcase/src/assets/examples/sidebar/regular.html new file mode 100644 index 0000000000..532f987835 --- /dev/null +++ b/showcase/src/assets/examples/sidebar/regular.html @@ -0,0 +1,30 @@ + + + ... + + +
+ Top content +
+
+ Middle content +
+
+ Bottom content +
+ + +
+ Top content +
+
+ Middle content +
+
+ Bottom content +
+ +
+ ... +
+ diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 6a84be197e..b90514f8c5 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -87,6 +87,10 @@ "LOGOUT": { "LOGOUT_DEFAULT_ICON": "Logout button - Default icon", "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon" + }, + "SIDEBAR": { + "TITLE": "App Sidebar", + "INTRO": "The preview of this code is the actual sidebar of the showcase" } }, "STYLEGUIDE": { diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index b3264582df..2b56ac8ece 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -87,6 +87,10 @@ "LOGOUT": { "LOGOUT_DEFAULT_ICON": "Bouton logout - Icône par défaut", "LOGOUT_CUSTOM_ICON": "Bouton logout - Icône custom" + }, + "SIDEBAR": { + "TITLE": "App Sidebar", + "INTRO": "La sidebar du showcase illustre ce code." } }, "STYLEGUIDE": { diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index ceaf497042..0e72b01e05 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -87,6 +87,10 @@ "LOGOUT": { "LOGOUT_DEFAULT_ICON": "Logout-knop - Standaard pictogram", "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram" + }, + "SIDEBAR": { + "TITLE": "App Sidebar", + "INTRO": "De preview van deze code is de eigenlijke zijbalk van de showcase" } }, "STYLEGUIDE": { diff --git a/showcase/src/styles/_sidenav_temp.scss b/showcase/src/styles/_sidenav_temp.scss deleted file mode 100644 index 82563c3d4b..0000000000 --- a/showcase/src/styles/_sidenav_temp.scss +++ /dev/null @@ -1,34 +0,0 @@ -.mat-sidenav-content, -.mat-sidenav { - margin-top: $stark-header-size; -} - -mat-sidenav.mat-drawer { - background-color: #16385a; - width: 200px; -} - -mat-sidenav.mat-drawer .mat-nav-list { - padding-top: 0; -} - -mat-sidenav.mat-drawer .mat-nav-list .mat-list-item { - color: #fff; - font-size: 13px; -} - -mat-sidenav.mat-drawer .mat-list-item:hover a { - background-color: rgba($color: #fff, $alpha: 0.3); -} - -mat-sidenav.mat-drawer .mat-list-item-focus.active, -mat-sidenav.mat-drawer a.active { - background-color: rgba($color: #fff, $alpha: 0.4); -} - -@media #{$tablet-query} { - .mat-sidenav-content, - .mat-sidenav { - margin-top: $stark-header-size-desktop; - } -} diff --git a/showcase/src/styles/_stark-styles.scss b/showcase/src/styles/_stark-styles.scss index 60ec10ecb8..739e320df3 100644 --- a/showcase/src/styles/_stark-styles.scss +++ b/showcase/src/styles/_stark-styles.scss @@ -9,6 +9,8 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar-theme"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/breadcrumb/components/breadcrumb.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/date-range-picker/components/date-range-picker.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/slider/components/slider-theme"; diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss index 9d985d6975..160a566371 100644 --- a/showcase/src/styles/styles.scss +++ b/showcase/src/styles/styles.scss @@ -2,7 +2,6 @@ @import "stark-styles.scss"; @import "../app/news/news-component/news.component"; -@import "sidenav_temp"; @import "~basscss/css/basscss.css"; @import "~normalize.css/normalize.css";