From e1d157cf4346245bf756f370651b1efca07a28ca 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 `styleguide/layout` page for documenting the use of Angular Flex-layout ISSUES CLOSED: #668 --- showcase/src/app/app-menu.config.ts | 7 +++++ showcase/src/app/styleguide/pages/index.ts | 1 + .../src/app/styleguide/pages/layout/index.ts | 1 + .../styleguide-layout-page.component.html | 30 +++++++++++++++++++ .../styleguide-layout-page.component.scss | 14 +++++++++ .../styleguide-layout-page.component.ts | 15 ++++++++++ .../layout/styleguide-layout-page.theme.scss | 15 ++++++++++ showcase/src/app/styleguide/routes.ts | 11 ++++++- .../src/app/styleguide/styleguide.module.ts | 9 ++++-- .../src/assets/examples/flex-layout/flex.html | 13 ++++++++ .../src/assets/examples/flex-layout/flex.scss | 13 ++++++++ .../src/assets/examples/flex-layout/grid.html | 13 ++++++++ .../src/assets/examples/flex-layout/grid.scss | 13 ++++++++ showcase/src/assets/translations/en.json | 8 +++++ showcase/src/assets/translations/fr.json | 8 +++++ showcase/src/assets/translations/nl.json | 8 +++++ showcase/src/styles/_theme.scss | 1 + showcase/src/styles/styles.scss | 1 + 18 files changed, 177 insertions(+), 4 deletions(-) create mode 100644 showcase/src/app/styleguide/pages/layout/index.ts 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/app/styleguide/pages/layout/styleguide-layout-page.theme.scss create mode 100644 showcase/src/assets/examples/flex-layout/flex.html create mode 100644 showcase/src/assets/examples/flex-layout/flex.scss create mode 100644 showcase/src/assets/examples/flex-layout/grid.html create mode 100644 showcase/src/assets/examples/flex-layout/grid.scss diff --git a/showcase/src/app/app-menu.config.ts b/showcase/src/app/app-menu.config.ts index d8cfc43676..efa04b697a 100644 --- a/showcase/src/app/app-menu.config.ts +++ b/showcase/src/app/app-menu.config.ts @@ -265,6 +265,13 @@ export const APP_MENU_CONFIG: StarkMenuConfig = { 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/index.ts b/showcase/src/app/styleguide/pages/index.ts index 905081d02a..8ae27140c0 100644 --- a/showcase/src/app/styleguide/pages/index.ts +++ b/showcase/src/app/styleguide/pages/index.ts @@ -3,3 +3,4 @@ export * from "./card"; export * from "./colors"; export * from "./header"; export * from "./typography"; +export * from "./layout"; diff --git a/showcase/src/app/styleguide/pages/layout/index.ts b/showcase/src/app/styleguide/pages/layout/index.ts new file mode 100644 index 0000000000..72504b47d7 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/index.ts @@ -0,0 +1 @@ +export * from "./styleguide-layout-page.component"; 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..737b895c45 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html @@ -0,0 +1,30 @@ +

SHOWCASE.STYLEGUIDE.LAYOUT.TITLE

+

SHOWCASE.STYLEGUIDE.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..2a8e044a67 --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss @@ -0,0 +1,14 @@ +.styleguide-layout-page { + .warning { + margin-bottom: 24px; + + mat-icon > svg { + margin-bottom: -5px; + } + } + + .layout-demo > * { + text-align: center; + padding: 10px; + } +} 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..ca29f91c8a --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts @@ -0,0 +1,15 @@ +import { Component, HostBinding, Inject } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +const componentName: string = "styleguide-layout-page"; + +@Component({ + selector: "demo-layout", + templateUrl: "./styleguide-layout-page.component.html" +}) +export class StyleguideLayoutPageComponent { + @HostBinding("class") + public class: string = componentName; + + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {} +} diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.theme.scss b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.theme.scss new file mode 100644 index 0000000000..88f423419f --- /dev/null +++ b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.theme.scss @@ -0,0 +1,15 @@ +.styleguide-layout-page { + .warning { + color: mat-color($warning-palette, 500); + } + + .layout-demo > * { + 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/routes.ts b/showcase/src/app/styleguide/routes.ts index a122c410f0..30ad1de043 100644 --- a/showcase/src/app/styleguide/routes.ts +++ b/showcase/src/app/styleguide/routes.ts @@ -4,7 +4,8 @@ import { StyleguideCardPageComponent, StyleguideColorsPageComponent, StyleguideHeaderPageComponent, - StyleguideTypographyPageComponent + StyleguideTypographyPageComponent, + StyleguideLayoutPageComponent } from "./pages"; export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [ @@ -48,5 +49,13 @@ export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [ translationKey: "SHOWCASE.STYLEGUIDE.TYPOGRAPHY.TITLE" }, views: { "@": { component: StyleguideTypographyPageComponent } } + }, + { + name: "styleguide.layout", + url: "/layout", + data: { + translationKey: "SHOWCASE.STYLEGUIDE.LAYOUT.TITLE" + }, + views: { "@": { component: StyleguideLayoutPageComponent } } } ]; diff --git a/showcase/src/app/styleguide/styleguide.module.ts b/showcase/src/app/styleguide/styleguide.module.ts index 97d1ccc8a0..3597c23562 100644 --- a/showcase/src/app/styleguide/styleguide.module.ts +++ b/showcase/src/app/styleguide/styleguide.module.ts @@ -12,7 +12,8 @@ import { StyleguideCardPageComponent, StyleguideColorsPageComponent, StyleguideHeaderPageComponent, - StyleguideTypographyPageComponent + StyleguideTypographyPageComponent, + StyleguideLayoutPageComponent } from "./pages"; @NgModule({ @@ -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.html b/showcase/src/assets/examples/flex-layout/flex.html new file mode 100644 index 0000000000..08acf95ba1 --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/flex.html @@ -0,0 +1,13 @@ +
+
1
+
+ 2 +
+
3
+
4
+
diff --git a/showcase/src/assets/examples/flex-layout/flex.scss b/showcase/src/assets/examples/flex-layout/flex.scss new file mode 100644 index 0000000000..49683a0c03 --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/flex.scss @@ -0,0 +1,13 @@ +.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/examples/flex-layout/grid.html b/showcase/src/assets/examples/flex-layout/grid.html new file mode 100644 index 0000000000..83ba0acd3e --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/grid.html @@ -0,0 +1,13 @@ +
+
1
+
+ 2 +
+
3
+
4
+
diff --git a/showcase/src/assets/examples/flex-layout/grid.scss b/showcase/src/assets/examples/flex-layout/grid.scss new file mode 100644 index 0000000000..49683a0c03 --- /dev/null +++ b/showcase/src/assets/examples/flex-layout/grid.scss @@ -0,0 +1,13 @@ +.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 5fa2ce8433..6db55dabc1 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -352,6 +352,14 @@ "TITLE": "Based on Angular Material" }, "TITLE": "Stark Typography" + }, + "LAYOUT": { + "TITLE": "Layout", + "INTRO": "We suggest using Angular Flex-Layout as a helper library when constructing the layout of your app. Full documentation is available on their wiki.", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout", + "FLEX": "Flexbox", + "GRID_WARNING": "Warning, although certain grid directives are available through the Angular Flex-Layout library they are not completely documented. Also keep in mind CSS Grid Layout is not supported in all browsers. MDN", + "GRID": "Grid layout" } } } diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 72742c2b34..71b2e80698 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -352,6 +352,14 @@ "TITLE": "Basé sur Angular Material" }, "TITLE": "Typography" + }, + "LAYOUT": { + "TITLE": "Layout", + "INTRO": "Nous vous suggérons d'utiliser Angular Flex-Layout pour vous aider lors de la construction de l'interface de votre application. Une documentation complète est disponible sur leur wiki.", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout", + "FLEX": "Flexbox", + "GRID_WARNING": "Attention, bien que certaines directives du grid soient disponibles dans la bibliothèque d'Angular Flex-Layout, elles ne sont pas complètement documentées. Gardez également à l'esprit que CSS Grid Layout n'est pas pris en charge par tous les navigateurs. MDN", + "GRID": "Grid layout" } } } diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 50de144dd6..2700da52c9 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -352,6 +352,14 @@ "TITLE": "Based on Angular Material" }, "TITLE": "Typography" + }, + "LAYOUT": { + "TITLE": "Layout", + "INTRO": "We raden aan om Angular Flex-Layout te gebruiken als hulp bij het samenstellen van de lay-out van uw app. Volledige documentatie is beschikbaar op hun wiki.", + "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout", + "FLEX": "Flexbox", + "GRID_WARNING": "Waarschuwing, hoewel bepaalde grid directives beschikbaar zijn via de Angular Flex-Layout bibliotheek, zijn ze niet volledig gedocumenteerd. Hou er ook rekening met dat niet alle browsers CSS Grid Layout ondersteunen. MDN", + "GRID": "Grid layout" } } } diff --git a/showcase/src/styles/_theme.scss b/showcase/src/styles/_theme.scss index 223d64945f..bfc286fd5a 100644 --- a/showcase/src/styles/_theme.scss +++ b/showcase/src/styles/_theme.scss @@ -11,3 +11,4 @@ Import the local variables file first to set the correct variables, see: @import "../app/welcome/pages/getting-started/getting-started-page-theme"; @import "../app/styleguide/pages/typography/styleguide-typography-page-theme"; @import "../app/demo-ui/pages/route-search/demo-route-search-page.component-theme.scss"; +@import "../app/styleguide/pages/layout/styleguide-layout-page.theme.scss"; diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss index ab7e33f77d..def6767733 100644 --- a/showcase/src/styles/styles.scss +++ b/showcase/src/styles/styles.scss @@ -15,3 +15,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";