fix(stark-ui): style fix: footer, header and table. Adapt Showcase an…

…d Starter.

ISSUES CLOSED: #696, #715, #723

packages/stark-ui/assets/styles/_base.scss

@@ -23,6 +23,7 @@ body {
 
 .stark-main-container {
   align-self: stretch;
+  min-height: 670px;
   padding: 64px 15px;
 }
 

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 {

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 {

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: (

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 {

showcase/src/app/app.component.html

@@ -1,10 +1,8 @@
 <stark-app-container>
 	<stark-app-sidebar>
 		<ng-container stark-app-sidenav-menu>
-			<ng-container stark-app-sidenav-menu>
-				<stark-app-logo></stark-app-logo>
-				<stark-app-menu [parentMenuConfig]="mainMenu"></stark-app-menu>
-			</ng-container>
+			<stark-app-logo></stark-app-logo>
+			<stark-app-menu [parentMenuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
 		<ng-container stark-app-sidenav-left>
 			<div class="stark-app-sidenav-top m1 center">
@@ -39,7 +37,6 @@
 								</button>
 								<button color="white" mat-icon-button (click)="toggleMenu()">
 									<mat-icon starkSvgViewBox svgIcon="menu"></mat-icon>
-
 								</button>
 							</div>
 						</div>
@@ -53,13 +50,15 @@
 								<div class="app-data">
 									<p>App Data</p>
 								</div>
-								<button class="app-data-alt" color="white" mat-icon-button [matTooltip]="'STARK.ICONS.APP_DATA' | translate">
+								<button class="app-data-alt" color="white" mat-icon-button
+										[matTooltip]="'STARK.ICONS.APP_DATA' | translate">
 									<mat-icon starkSvgViewBox svgIcon="dots-vertical"></mat-icon>
 								</button>
 								<stark-app-logout></stark-app-logout>
 							</div>
 							<div class="stark-app-bar-content-right-center">
-								<stark-language-selector color="white" class="stark-full-width" mode="dropdown"></stark-language-selector>
+								<stark-language-selector color="white" class="stark-full-width"
+														 mode="dropdown"></stark-language-selector>
 								<button color="white" (click)="openLeftSidebar()" mat-icon-button>
 									<mat-icon starkSvgViewBox svgIcon="skip-next"></mat-icon>
 								</button>
@@ -91,8 +90,9 @@ <h1>Stark</h1>
 					<ui-view></ui-view>
 				</main>
 			</div>
+			<stark-app-footer legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
+							  helpPageUrl="https://www.nbb.be/en/links">
+			</stark-app-footer>
 		</div>
 	</stark-app-sidebar>
-	<stark-app-footer legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information" helpPageUrl="https://www.nbb.be/en/links">
-	</stark-app-footer>
 </stark-app-container>

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
- */

showcase/src/app/demo/table/demo-table.component.html

@@ -46,6 +46,10 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 					 [tableRowsActionBarConfig]="tableRowsActionBarConfig"
 					 [paginationConfig]="paginationConfig3">
 			<header>
+				<!-- 
+					TODO: Action should also be part of the transclusion so this example can work
+					<div class="example-transcluded" fxLayout="column" fxLayout.gt-sm="row">
+				-->
 				<div class="example-transcluded">
 					<h1 translate>SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR</h1>
 					<stark-action-bar [actionBarConfig]="{actions: customTableActions}"

starter/src/app/app.component.html

@@ -1,14 +1,8 @@
 <stark-app-container>
 	<stark-app-sidebar>
 		<ng-container stark-app-sidenav-menu>
-			<mat-nav-list class="nav-main">
-				<a mat-list-item uiSref="home" uiSrefActive="active">
-					<span matLine translate>STARTER.MENU.HOME</span>
-				</a>
-				<a mat-list-item uiSref="about" [uiParams]="{ paramData: 'data passed via params' }" uiSrefActive="active">
-					<span matLine translate>STARTER.MENU.ABOUT</span>
-				</a>
-			</mat-nav-list>
+			<stark-app-logo></stark-app-logo>
+			<stark-app-menu [parentMenuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
 		<div stark-app-sidenav-content>
 			<header class="stark-app-header">
@@ -19,9 +13,8 @@
 								<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
 									<mat-icon starkSvgViewBox svgIcon="home"></mat-icon>
 								</button>
-								<button color="white" mat-icon-button (click)="openMenu()">
+								<button color="white" mat-icon-button (click)="toggleMenu()">
 									<mat-icon starkSvgViewBox svgIcon="menu"></mat-icon>
-
 								</button>
 							</div>
 						</div>
@@ -66,6 +59,9 @@ <h1>{{ name }}</h1>
 					<ui-view></ui-view>
 				</main>
 			</div>
+			<stark-app-footer legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
+							  helpPageUrl="https://www.nbb.be/en/links">
+			</stark-app-footer>
 		</div>
 	</stark-app-sidebar>
 </stark-app-container>

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;
+      }
+    }
+  }
+}

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 {

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<State>[] = ENV !== "production" ? [logger
 		StarkSettingsModule.forRoot(),
 		StarkRoutingModule.forRoot(),
 		StarkUserModule.forRoot(),
+		StarkAppFooterModule,
 		StarkAppLogoModule,
 		StarkAppLogoutModule,
+		StarkAppMenuModule,
 		StarkAppSidebarModule.forRoot(),
 		StarkLanguageSelectorModule,
 		StarkSvgViewBoxModule,

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";

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";

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)
+);*/

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";