From 2e51cca717ea3121f0644ae854dfee644ec444de Mon Sep 17 00:00:00 2001 From: Carlo Nomes Date: Tue, 29 Jan 2019 12:22:29 +0100 Subject: [PATCH] feat(stark-demo): add \`styleguid/layout\` page for documenting the use of Angular Flex-layout ISSUES CLOSED: #668 --- showcase/src/app/app.component.ts | 7 +++++++ .../styleguide-layout-page.component.html | 17 +++++++++++++++++ .../styleguide-layout-page.component.scss | 13 +++++++++++++ .../layout/styleguide-layout-page.component.ts | 10 ++++++++++ showcase/src/app/styleguide/routes.ts | 6 ++++++ .../src/app/styleguide/styleguide.module.ts | 7 +++++-- .../examples/flex-layout/flex-layout.html | 9 +++++++++ .../examples/flex-layout/flex-layout.scss | 13 +++++++++++++ showcase/src/assets/translations/en.json | 5 +++++ showcase/src/assets/translations/fr.json | 4 ++++ showcase/src/assets/translations/nl.json | 4 ++++ showcase/src/styles/styles.scss | 4 +++- 12 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html create mode 100644 showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss create mode 100644 showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts create mode 100644 showcase/src/assets/examples/flex-layout/flex-layout.html create mode 100644 showcase/src/assets/examples/flex-layout/flex-layout.scss diff --git a/showcase/src/app/app.component.ts b/showcase/src/app/app.component.ts index b2a6a32932..a53aace1c2 100644 --- a/showcase/src/app/app.component.ts +++ b/showcase/src/app/app.component.ts @@ -305,6 +305,13 @@ export class AppComponent implements OnInit { isVisible: true, isEnabled: true, targetState: "styleguide.typography" + }, + { + id: "menu-style-layout", + label: "Layout", + isVisible: true, + isEnabled: true, + targetState: "styleguide.layout" } ] } diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html new file mode 100644 index 0000000000..9f91e71277 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html @@ -0,0 +1,17 @@ +

SHOWCASE.DEMO.LAYOUT.TITLE

+

SHOWCASE.DEMO.LAYOUT.ANGULAR_FLEX_LAYOUT

+

+ + +
+
1
+
2
+
3
+
4
+
+ diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss new file mode 100644 index 0000000000..693f61be26 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss @@ -0,0 +1,13 @@ +.flex-layout-demo { + > * { + text-align: center; + padding: 10px; + + background-color: mat-color($primary-palette, 500); + color: mat-contrast($primary-palette, 500); + &.accent { + background-color: mat-color($accent-palette, 500); + color: mat-contrast($accent-palette, 500); + } + } +} diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts new file mode 100644 index 0000000000..de666e9215 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts @@ -0,0 +1,10 @@ +import { Component, Inject } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "demo-layout", + templateUrl: "./styleguide-layout-page.component.html" +}) +export class StyleguideLayoutPageComponent { + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {} +} diff --git a/showcase/src/app/styleguide/routes.ts b/showcase/src/app/styleguide/routes.ts index 1c0d63c399..ca3de551d1 100644 --- a/showcase/src/app/styleguide/routes.ts +++ b/showcase/src/app/styleguide/routes.ts @@ -6,6 +6,7 @@ import { StyleguideHeaderPageComponent, StyleguideTypographyPageComponent } from "./pages"; +import { StyleguideLayoutPageComponent } from "./pages/layout/styleguide-layout-page.component"; export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [ { name: "styleguide", url: "^/styleguide", abstract: true, parent: "app" }, @@ -33,5 +34,10 @@ export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [ name: "styleguide.typography", url: "/typography", views: { "@": { component: StyleguideTypographyPageComponent } } + }, + { + name: "styleguide.layout", + url: "/layout", + views: { "@": { component: StyleguideLayoutPageComponent } } } ]; diff --git a/showcase/src/app/styleguide/styleguide.module.ts b/showcase/src/app/styleguide/styleguide.module.ts index 97d1ccc8a0..eb8fbf732b 100644 --- a/showcase/src/app/styleguide/styleguide.module.ts +++ b/showcase/src/app/styleguide/styleguide.module.ts @@ -14,6 +14,7 @@ import { StyleguideHeaderPageComponent, StyleguideTypographyPageComponent } from "./pages"; +import { StyleguideLayoutPageComponent } from './pages/layout/styleguide-layout-page.component'; @NgModule({ imports: [ @@ -33,7 +34,8 @@ import { StyleguideCardPageComponent, StyleguideTypographyPageComponent, StyleguideColorsPageComponent, - StyleguideHeaderPageComponent + StyleguideHeaderPageComponent, + StyleguideLayoutPageComponent ], entryComponents: [], exports: [ @@ -41,7 +43,8 @@ import { StyleguideCardPageComponent, StyleguideTypographyPageComponent, StyleguideColorsPageComponent, - StyleguideHeaderPageComponent + StyleguideHeaderPageComponent, + StyleguideLayoutPageComponent ] }) export class StyleguideModule {} diff --git a/showcase/src/assets/examples/flex-layout/flex-layout.html b/showcase/src/assets/examples/flex-layout/flex-layout.html new file mode 100644 index 0000000000..577ebb2317 --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/flex-layout.html @@ -0,0 +1,9 @@ +
+
1
+
2
+
3
+
4
+
diff --git a/showcase/src/assets/examples/flex-layout/flex-layout.scss b/showcase/src/assets/examples/flex-layout/flex-layout.scss new file mode 100644 index 0000000000..ee15f29d79 --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/flex-layout.scss @@ -0,0 +1,13 @@ +.flex-layout-demo { + > * { + text-align: center; + padding: 10px; + + background-color: mat-color($primary-palette, 500); + color: mat-contrast($primary-palette, 500); + &.accent { + background-color: mat-color($accent-palette, 500); + color: mat-contrast($accent-palette, 500); + } + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 5dacfd3a75..15aaf1e66f 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -305,6 +305,11 @@ "TITLE": "Based on Angular Material" }, "TITLE": "Stark Typography" + }, + "LAYOUT": { + "TITLE": "Stark Layout", + "INTRO": "We suggest using Angular Flex Layout as a helper library when constructing the layout of your app.", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout" } }, "HOMEPAGE": { diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index f26c800789..6492e121db 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -305,6 +305,10 @@ "TITLE": "Basé sur Angular Material" }, "TITLE": "Stark Typography" + }, + "LAYOUT": { + "TITLE": "Stark Layout", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout" } }, "HOMEPAGE": { diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 33b3b435ca..d0851b734e 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -305,6 +305,10 @@ "TITLE": "Based on Angular Material" }, "TITLE": "Stark Typography" + }, + "LAYOUT": { + "TITLE": "Stark Layout", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout" } }, "HOMEPAGE": { diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss index ab7e33f77d..a85bc6e426 100644 --- a/showcase/src/styles/styles.scss +++ b/showcase/src/styles/styles.scss @@ -1,4 +1,5 @@ -@import "basscss-missing-variables.pcss"; /* FIXME: Remove this import once the issue in basscss is solved (see: https://github.com/basscss/basscss/issues/257) */ +@import "basscss-missing-variables.pcss"; +/* FIXME: Remove this import once the issue in basscss is solved (see: https://github.com/basscss/basscss/issues/257) */ @import "~basscss/css/basscss.css"; @import "~prismjs/themes/prism-okaidia.css"; /* @@ -15,3 +16,4 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i @import "../app/welcome/components/news-item/news-item.component"; @import "../app/demo-ui/pages/message-pane/demo-message-pane-page.component"; @import "../app/demo-ui/pages/app-data/demo-app-data-page.component"; +@import "../app/styleguide/pages/layout/styleguide-layout-page.component";