From 553f0f81f4cbd66703532c7486a42438ed728562 Mon Sep 17 00:00:00 2001 From: Catlabs Date: Wed, 3 Oct 2018 10:40:51 +0200 Subject: [PATCH] fix(stark-ui): style fix: footer, header and table. Adapt Showcase and Starter. ISSUES CLOSED: #696, #715, #723 --- packages/stark-ui/assets/styles/_base.scss | 1 + packages/stark-ui/assets/styles/_header.scss | 5 ++- .../stark-ui/assets/styles/_typography.scss | 10 +++-- .../stark-ui/assets/styles/_variables.scss | 8 ++-- .../components/_app-sidebar.component.scss | 2 +- showcase/src/app/app.component.html | 18 ++++----- showcase/src/app/app.component.ts | 8 ---- .../app/demo/table/demo-table.component.html | 4 ++ starter/src/app/app.component.html | 16 +++----- starter/src/app/app.component.scss | 26 +++++++++++++ starter/src/app/app.component.ts | 38 +++++++++++++++---- starter/src/app/app.module.ts | 4 ++ starter/src/styles/_stark-styles.scss | 5 +++ starter/src/styles/_theme.scss | 1 - starter/src/styles/_variables.scss | 9 +++++ starter/src/styles/styles.scss | 6 +-- 16 files changed, 113 insertions(+), 48 deletions(-) create mode 100644 starter/src/app/app.component.scss diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss index 90582e850a..97c7ab796e 100644 --- a/packages/stark-ui/assets/styles/_base.scss +++ b/packages/stark-ui/assets/styles/_base.scss @@ -23,6 +23,7 @@ body { .stark-main-container { align-self: stretch; + min-height: 670px; padding: 64px 15px; } diff --git a/packages/stark-ui/assets/styles/_header.scss b/packages/stark-ui/assets/styles/_header.scss index 46579854a6..0a8b88a7a7 100644 --- a/packages/stark-ui/assets/styles/_header.scss +++ b/packages/stark-ui/assets/styles/_header.scss @@ -9,9 +9,10 @@ background: mat-color(map-get($base-theme, primary-palette), 900) url(/assets/images/app-header.png) top right no-repeat; color: #fff; .stark-app-bar { + align-items: center; display: flex; justify-content: space-between; - padding-top: 6px; + margin-top: -5px; position: relative; .stark-app-bar-content-left { @@ -86,6 +87,8 @@ .stark-app-header { height: $stark-header-size-desktop; .stark-app-bar { + align-items: flex-start; + margin-top: 6px; .stark-app-bar-content-left { width: 33%; > div { diff --git a/packages/stark-ui/assets/styles/_typography.scss b/packages/stark-ui/assets/styles/_typography.scss index 6e1eb62918..ae2dc1433a 100644 --- a/packages/stark-ui/assets/styles/_typography.scss +++ b/packages/stark-ui/assets/styles/_typography.scss @@ -26,11 +26,15 @@ $typography-config: mat-typography-config( @include mat-core($typography-config); +/* +Angular Material body-1, body-2,... are to be used only for components +In the body, a different font size is used +*/ body { font-family: mat-font-family($typography-config); - font-size: mat-font-size($typography-config, body-1); - font-weight: mat-font-weight($typography-config, body-1); - line-height: mat-line-height($typography-config, body-1); + font-size: 16px; + font-weight: 400; + line-height: 26px; } h1 { diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss index ee8362a302..65b716bad9 100644 --- a/packages/stark-ui/assets/styles/_variables.scss +++ b/packages/stark-ui/assets/styles/_variables.scss @@ -268,13 +268,13 @@ $typography-theme: ( 400 ), body-2: ( - 16px, - 30px, + 14px, + 24px, 500 ), body-1: ( - 16px, - 26px, + 14px, + 20px, 400 ), caption: ( 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 index a8811a3587..3601b6ab77 100644 --- 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 @@ -15,7 +15,7 @@ } .mat-sidenav-container { - min-height: calc(100% - #{$stark-footer-size}); + min-height: 100%; } .mat-sidenav { diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index c1e382700d..ae662eccf7 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -1,10 +1,8 @@ - - - - + +
@@ -39,7 +37,6 @@
@@ -53,13 +50,15 @@

App Data

-
- + @@ -91,8 +90,9 @@

Stark

+ + - - diff --git a/showcase/src/app/app.component.ts b/showcase/src/app/app.component.ts index 5c2dfa6d0a..c4fbf87a05 100644 --- a/showcase/src/app/app.component.ts +++ b/showcase/src/app/app.component.ts @@ -286,11 +286,3 @@ export class AppComponent implements OnInit { this.routingService.navigateToHome(); } } - -/** - * Please review the https://github.com/AngularClass/angular2-examples/ repo for - * more angular app examples that you may copy/paste - * (The examples may not be updated as quickly. Please open an issue on github for us to update it) - * For help or questions please contact us at @AngularClass on twitter - * or our chat on Slack at https://AngularClass.com/slack-join - */ diff --git a/showcase/src/app/demo/table/demo-table.component.html b/showcase/src/app/demo/table/demo-table.component.html index f28c08d762..52b4322e54 100644 --- a/showcase/src/app/demo/table/demo-table.component.html +++ b/showcase/src/app/demo/table/demo-table.component.html @@ -46,6 +46,10 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

[tableRowsActionBarConfig]="tableRowsActionBarConfig" [paginationConfig]="paginationConfig3">
+

SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR

- - - STARTER.MENU.HOME - - - STARTER.MENU.ABOUT - - + +
@@ -19,9 +13,8 @@ -
@@ -66,6 +59,9 @@

{{ name }}

+ + diff --git a/starter/src/app/app.component.scss b/starter/src/app/app.component.scss new file mode 100644 index 0000000000..64c5a92cd3 --- /dev/null +++ b/starter/src/app/app.component.scss @@ -0,0 +1,26 @@ +.stark-app-sidebar { + .stark-app-sidenav-menu { + .stark-app-logo { + border-bottom: 1px solid #ddd; + display: flex; + justify-content: center; + padding: 10px 0 20px; + } + + &.stark-app-sidenav-menu-shifting { + .stark-app-logo { + display: none; + } + } + } +} + +@media #{$desktop-lg-query} { + .stark-app-sidebar { + .stark-app-sidenav-menu { + .stark-app-logo { + display: none; + } + } + } +} diff --git a/starter/src/app/app.component.ts b/starter/src/app/app.component.ts index 0a5f010ebc..dc237ec598 100644 --- a/starter/src/app/app.component.ts +++ b/starter/src/app/app.component.ts @@ -3,7 +3,7 @@ */ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkLoggingService, StarkRoutingService } from "@nationalbankbelgium/stark-core"; -import { STARK_APP_SIDEBAR_SERVICE, StarkAppSidebarService } from "@nationalbankbelgium/stark-ui"; +import { StarkMenuConfig, STARK_APP_SIDEBAR_SERVICE, StarkAppSidebarService } from "@nationalbankbelgium/stark-ui"; /** * App Component @@ -22,25 +22,47 @@ export class AppComponent implements OnInit { */ public name: string = "Stark Starter"; + /** + * App menu configuration + */ + public mainMenu: StarkMenuConfig; + public constructor( @Inject(STARK_APP_SIDEBAR_SERVICE) public sidebarService: StarkAppSidebarService, @Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, @Inject(STARK_ROUTING_SERVICE) public routingService: StarkRoutingService - ) { - this.routingService.addTransitionHook("ON_SUCCESS", {}, () => { - this.sidebarService.close(); - }); - } + ) {} /** * Triggered on the component's initialization */ public ngOnInit(): void { this.logger.debug("app: component loaded"); + + this.mainMenu = { + menuGroups: [ + { + id: "menu-home", + label: "STARTER.MENU.HOME", + isVisible: true, + isEnabled: true, + targetState: "home", + targetStateParams: { param1: "1-1-1", param2: "1-1-2" } + }, + { + id: "menu-about", + label: "STARTER.MENU.ABOUT", + isVisible: true, + isEnabled: true, + targetState: "about", + targetStateParams: { paramData: "data passed via params" } + } + ] + }; } - public openMenu(): void { - this.sidebarService.openMenu(); + public toggleMenu(): void { + this.sidebarService.toggleMenu(); } public goHome(): void { diff --git a/starter/src/app/app.module.ts b/starter/src/app/app.module.ts index 7537f5d072..bcc93d6f8b 100644 --- a/starter/src/app/app.module.ts +++ b/starter/src/app/app.module.ts @@ -44,8 +44,10 @@ import { } from "@nationalbankbelgium/stark-core"; import { + StarkAppFooterModule, StarkAppLogoModule, StarkAppLogoutModule, + StarkAppMenuModule, StarkAppSidebarModule, StarkDatePickerModule, StarkLanguageSelectorModule, @@ -182,8 +184,10 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger StarkSettingsModule.forRoot(), StarkRoutingModule.forRoot(), StarkUserModule.forRoot(), + StarkAppFooterModule, StarkAppLogoModule, StarkAppLogoutModule, + StarkAppMenuModule, StarkAppSidebarModule.forRoot(), StarkLanguageSelectorModule, StarkSvgViewBoxModule, diff --git a/starter/src/styles/_stark-styles.scss b/starter/src/styles/_stark-styles.scss index 73582174d6..4bab25c686 100644 --- a/starter/src/styles/_stark-styles.scss +++ b/starter/src/styles/_stark-styles.scss @@ -5,10 +5,15 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i @import "~@nationalbankbelgium/stark-ui/assets/styles/header"; /* Stark components */ +@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu-theme"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu.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/dropdown/components/dropdown-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/language-selector/components/language-selector.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification-theme"; diff --git a/starter/src/styles/_theme.scss b/starter/src/styles/_theme.scss index a43df4cbf6..4df05be254 100644 --- a/starter/src/styles/_theme.scss +++ b/starter/src/styles/_theme.scss @@ -5,4 +5,3 @@ @import "~@nationalbankbelgium/stark-ui/assets/themes/theming"; @import "~@nationalbankbelgium/stark-ui/assets/themes/button-theme"; @import "~@nationalbankbelgium/stark-ui/assets/themes/card-theme"; -@import "~@nationalbankbelgium/stark-ui/assets/themes/menu-theme"; diff --git a/starter/src/styles/_variables.scss b/starter/src/styles/_variables.scss index e69de29bb2..7e62026c6a 100644 --- a/starter/src/styles/_variables.scss +++ b/starter/src/styles/_variables.scss @@ -0,0 +1,9 @@ +/* Define the custom maps for Stark styles if needed */ + +/*$stark-typography-theme: ( + font-family: '"Oswald", sans-serif', + headline: (90px, 48px, 400), + body-1: (14px, 20px, 400), + body-2: (14px, 24px, 500), + caption: (12px, 20px, 400) +);*/ diff --git a/starter/src/styles/styles.scss b/starter/src/styles/styles.scss index 5635fa4f5b..d020d4479a 100644 --- a/starter/src/styles/styles.scss +++ b/starter/src/styles/styles.scss @@ -1,5 +1,5 @@ +@import "~basscss/css/basscss.css"; + @import "theme"; @import "stark-styles.scss"; - -@import "~normalize.css/normalize.css"; -@import "~prismjs/themes/prism-okaidia.css"; +@import "../app/app.component.scss";