From 781119069cd4f8afea88303274be9b6e0db2d699 Mon Sep 17 00:00:00 2001 From: Marc Pestel Date: Thu, 9 Nov 2023 08:07:49 +0100 Subject: [PATCH] feat: Provide a Sidebar page-layout #149 --- .../content-panel-container.component.html | 4 - .../content-header.component.html | 0 .../content-header.component.scss | 1 + .../content-header.component.ts | 0 ...ent-panel-container-content.component.html | 0 ...ent-panel-container-content.component.scss | 1 - ...ntent-panel-container-content.component.ts | 0 ...tent-panel-container-footer.component.html | 0 ...tent-panel-container-footer.component.scss | 0 ...ontent-panel-container-footer.component.ts | 0 ...ent-panel-container-sidebar.component.html | 1 + ...ent-panel-container-sidebar.component.scss | 6 ++ ...ntent-panel-container-sidebar.component.ts | 8 ++ .../content-panel-container.component.html | 7 ++ .../content-panel-container.component.scss | 7 ++ .../content-panel-container.component.ts | 0 .../content-panel/content-panel.module.ts | 10 ++- .../main-container.component.html | 0 .../main-container.component.scss | 0 .../main-container.component.ts | 0 .../flowbar/flowbar.component.html | 0 .../flowbar/flowbar.component.scss | 0 .../{ => layout}/flowbar/flowbar.component.ts | 0 .../{ => layout}/flowbar/flowbar.module.ts | 0 .../sidebar-item/sidebar-item.component.html | 4 + .../sidebar-item/sidebar-item.component.scss | 33 ++++++++ .../sidebar-item/sidebar-item.component.ts | 9 +++ .../lib/layout/sidebar/sidebar.component.html | 10 +++ .../lib/layout/sidebar/sidebar.component.scss | 42 ++++++++++ .../lib/layout/sidebar/sidebar.component.ts | 14 ++++ .../src/lib/layout/sidebar/sidebar.module.ts | 13 ++++ .../toolbar/toolbar-action.interface.ts | 0 .../toolbar/toolbar.component.html | 0 .../toolbar/toolbar.component.scss} | 0 .../{ => layout}/toolbar/toolbar.component.ts | 2 +- .../{ => layout}/toolbar/toolbar.module.ts | 4 +- .../{ => layout}/toolbar/toolbar.service.ts | 0 .../src/lib/material-addons.module.ts | 4 +- .../quick-list-compact.component.ts | 10 ++- .../step-header/step-header.component.scss | 3 +- .../src/lib/stepper/stepper.component.scss | 4 +- projects/material-addons/src/public_api.ts | 34 +++++--- src/app/app-routing.module.ts | 26 ++++++- src/app/app.module.ts | 10 ++- .../base-page-layout.component.html | 33 ++++++++ .../base-page-layout.component.scss | 1 + .../base-page-layout.component.ts | 29 +++++++ .../flowbar-page-layout.component.html} | 34 -------- .../flowbar-page-layout.component.scss | 1 + .../flowbar-page-layout.component.ts} | 29 +------ .../sidebar-page-layout.component.html | 16 ++++ .../sidebar-page-layout.component.scss | 1 + .../sidebar-page-layout.component.ts | 40 ++++++++++ .../mad-buttons/mad-buttons.component.html | 6 ++ .../example-page-one.component.html | 25 ++++++ .../example-page-one.component.scss | 3 + .../example-page-one.component.ts | 10 +++ .../example-page-two.component.html | 11 +++ .../example-page-two.component.scss} | 0 .../example-page-two.component.ts | 8 ++ .../flowbar-page-layout.component.scss | 4 + .../full-page-layouts-routing.module.ts | 21 +++++ .../full-page-layouts.component.html | 78 ++++++++----------- .../full-page-layouts.module.ts | 16 +++- .../sidebar-page-layout.component.html | 31 ++++++++ .../sidebar-page-layout.component.scss | 36 +++++++++ .../sidebar-page-layout.component.ts | 23 ++++++ .../home/link-card/link-card.component.scss | 1 + src/assets/i18n/en.json | 4 +- src/navigation-entries.ts | 20 ++++- 70 files changed, 606 insertions(+), 142 deletions(-) delete mode 100644 projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html rename projects/material-addons/src/lib/{ => layout}/content-panel/content-header/content-header.component.html (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-header/content-header.component.scss (50%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-header/content-header.component.ts (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-content/content-panel-container-content.component.html (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-content/content-panel-container-content.component.scss (86%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-content/content-panel-container-content.component.ts (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-footer/content-panel-container-footer.component.html (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts (100%) create mode 100644 projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html create mode 100644 projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss create mode 100644 projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts create mode 100644 projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container/content-panel-container.component.scss (57%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel-container/content-panel-container.component.ts (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/content-panel.module.ts (83%) rename projects/material-addons/src/lib/{ => layout}/content-panel/main-container/main-container.component.html (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/main-container/main-container.component.scss (100%) rename projects/material-addons/src/lib/{ => layout}/content-panel/main-container/main-container.component.ts (100%) rename projects/material-addons/src/lib/{ => layout}/flowbar/flowbar.component.html (100%) rename projects/material-addons/src/lib/{ => layout}/flowbar/flowbar.component.scss (100%) rename projects/material-addons/src/lib/{ => layout}/flowbar/flowbar.component.ts (100%) rename projects/material-addons/src/lib/{ => layout}/flowbar/flowbar.module.ts (100%) create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar.component.html create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts create mode 100644 projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts rename projects/material-addons/src/lib/{ => layout}/toolbar/toolbar-action.interface.ts (100%) rename projects/material-addons/src/lib/{ => layout}/toolbar/toolbar.component.html (100%) rename projects/material-addons/src/lib/{toolbar/toolbar.component.css => layout/toolbar/toolbar.component.scss} (100%) rename projects/material-addons/src/lib/{ => layout}/toolbar/toolbar.component.ts (98%) rename projects/material-addons/src/lib/{ => layout}/toolbar/toolbar.module.ts (84%) rename projects/material-addons/src/lib/{ => layout}/toolbar/toolbar.service.ts (100%) create mode 100644 src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html create mode 100644 src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss create mode 100644 src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts rename src/app/component-demos/page-layouts/{page-layouts.component.html => flowbar-page-layout/flowbar-page-layout.component.html} (61%) create mode 100644 src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss rename src/app/component-demos/page-layouts/{page-layouts.component.ts => flowbar-page-layout/flowbar-page-layout.component.ts} (72%) create mode 100644 src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html create mode 100644 src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss create mode 100644 src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts create mode 100644 src/app/full-page-layouts/example-page-one/example-page-one.component.html create mode 100644 src/app/full-page-layouts/example-page-one/example-page-one.component.scss create mode 100644 src/app/full-page-layouts/example-page-one/example-page-one.component.ts create mode 100644 src/app/full-page-layouts/example-page-two/example-page-two.component.html rename src/app/{component-demos/page-layouts/page-layouts.component.scss => full-page-layouts/example-page-two/example-page-two.component.scss} (100%) create mode 100644 src/app/full-page-layouts/example-page-two/example-page-two.component.ts create mode 100644 src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html create mode 100644 src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss create mode 100644 src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html b/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html deleted file mode 100644 index 382d1b95..00000000 --- a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.html b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.html similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.html rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.html diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss similarity index 50% rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss index e6249792..8dd1b16a 100644 --- a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss +++ b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss @@ -1,3 +1,4 @@ .content-header { padding-right: 0.5rem; + background-color: var(--background-color); } diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.ts similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.ts rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.ts diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.html similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.html rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.html diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss similarity index 86% rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss index fe5ac089..d3b75f18 100644 --- a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss @@ -3,5 +3,4 @@ overflow-y: auto; border-top: 0.05rem solid #cccccc; padding: 1rem; - height: 1rem; } diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.ts similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.ts rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.ts diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.html similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.html rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.html diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html new file mode 100644 index 00000000..6dbc7430 --- /dev/null +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html @@ -0,0 +1 @@ + diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss new file mode 100644 index 00000000..05db7020 --- /dev/null +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss @@ -0,0 +1,6 @@ +:host { + border-top: 0.05rem solid #cccccc; + min-height: 2rem; + display: flex; + flex: 0 0 auto; +} diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts new file mode 100644 index 00000000..375efe39 --- /dev/null +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'mad-content-panel-container-sidebar', + templateUrl: './content-panel-container-sidebar.component.html', + styleUrls: ['./content-panel-container-sidebar.component.scss'], +}) +export class ContentPanelContainerSidebarComponent {} diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html new file mode 100644 index 00000000..2f432ac2 --- /dev/null +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html @@ -0,0 +1,7 @@ +
+ +
+ + +
+
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss similarity index 57% rename from projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss index a97c234c..876292c8 100644 --- a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss @@ -4,6 +4,7 @@ display: flex; flex: 1 1 auto; min-height: 0.05rem; + background-color: var(--background-color); } .content-panel-outer-wrapper { @@ -11,3 +12,9 @@ flex: 1 1 auto; flex-direction: column; } +.content-panel-sidebar-wrapper { + width: 100%; + display: flex; + flex: 1 1 auto; + flex-direction: row; +} diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.ts similarity index 100% rename from projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.ts rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.ts diff --git a/projects/material-addons/src/lib/content-panel/content-panel.module.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts similarity index 83% rename from projects/material-addons/src/lib/content-panel/content-panel.module.ts rename to projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts index 108fce61..01585509 100644 --- a/projects/material-addons/src/lib/content-panel/content-panel.module.ts +++ b/projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts @@ -1,17 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + import { ContentHeaderComponent } from './content-header/content-header.component'; import { ContentPanelContainerComponent } from './content-panel-container/content-panel-container.component'; import { ContentPanelContainerContentComponent } from './content-panel-container-content/content-panel-container-content.component'; import { ContentPanelContainerFooterComponent } from './content-panel-container-footer/content-panel-container-footer.component'; -import { MainContainerComponent } from './main-container/main-container.component'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { ContentPanelContainerSidebarComponent } from './content-panel-container-sidebar/content-panel-container-sidebar.component'; +import { MainContainerComponent } from './main-container/main-container.component'; @NgModule({ declarations: [ ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, + ContentPanelContainerSidebarComponent, MainContainerComponent, ], imports: [CommonModule], @@ -20,6 +23,7 @@ import { CommonModule } from '@angular/common'; ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, + ContentPanelContainerSidebarComponent, MainContainerComponent, ], }) diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.html b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.html similarity index 100% rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.html rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.html diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.scss b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.scss similarity index 100% rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.scss rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.scss diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.ts b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.ts similarity index 100% rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.ts rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.ts diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.html b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.html similarity index 100% rename from projects/material-addons/src/lib/flowbar/flowbar.component.html rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.html diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.scss b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.scss similarity index 100% rename from projects/material-addons/src/lib/flowbar/flowbar.component.scss rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.scss diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.ts b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.ts similarity index 100% rename from projects/material-addons/src/lib/flowbar/flowbar.component.ts rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.ts diff --git a/projects/material-addons/src/lib/flowbar/flowbar.module.ts b/projects/material-addons/src/lib/layout/flowbar/flowbar.module.ts similarity index 100% rename from projects/material-addons/src/lib/flowbar/flowbar.module.ts rename to projects/material-addons/src/lib/layout/flowbar/flowbar.module.ts diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html new file mode 100644 index 00000000..b2c306fd --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html @@ -0,0 +1,4 @@ + + + + diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss new file mode 100644 index 00000000..886bf54f --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss @@ -0,0 +1,33 @@ +[mad-sidebar-item] { + padding: 9px 24px 8px; + color: var(--panel-color); + position: relative; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 16px; + font-weight: 300; + + letter-spacing: 0.5px; + + .focus-overlay { + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + pointer-events: none; + border-radius: inherit; + } + + &.active-sidebar-item { + background-color: var(--panel-select-background); + } + + &:hover { + .focus-overlay { + background-color: black; + opacity: 0.04; + } + } +} diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts new file mode 100644 index 00000000..1e361272 --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts @@ -0,0 +1,9 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: '[mad-sidebar-item]', + templateUrl: 'sidebar-item.component.html', + styleUrls: ['sidebar-item.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class SidebarItemComponent {} diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html new file mode 100644 index 00000000..76de45e0 --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html @@ -0,0 +1,10 @@ +
+
+ +
+
+ +
+
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss new file mode 100644 index 00000000..2da1d77d --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss @@ -0,0 +1,42 @@ +$color-gray: #707070; + +.sidebar-wrapper { + background: var(--panel-background-color); + min-height: 100%; + display: flex; + flex-direction: column; + border-right: 1px solid var(--panel-border-color); + margin-top: 10px; + + transition: width 0.1s ease-in; + + &:not(.collapsed) { + width: 239px; + } + + &.collapsed { + width: 64px; + } + + .sidebar-header { + display: flex; + flex-direction: row-reverse; + border-bottom: 1px solid var(--panel-border-color); + + button { + color: $color-gray; + } + } + + &.collapsed { + .item-list { + display: none; + } + } + + .item-list { + display: flex; + flex-direction: column; + margin-top: 16px; + } +} diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts new file mode 100644 index 00000000..3f1d2fcc --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'mad-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'], +}) +export class SidebarComponent { + collapsed = false; + + toggleCollapse() { + this.collapsed = !this.collapsed; + } +} diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts new file mode 100644 index 00000000..d3797b2f --- /dev/null +++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SidebarComponent } from './sidebar.component'; +import { SidebarItemComponent } from './sidebar-item/sidebar-item.component'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [SidebarComponent, SidebarItemComponent], + exports: [SidebarComponent, SidebarItemComponent], + imports: [CommonModule, MatIconModule, MatButtonModule], +}) +export class SidebarModule {} diff --git a/projects/material-addons/src/lib/toolbar/toolbar-action.interface.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar-action.interface.ts similarity index 100% rename from projects/material-addons/src/lib/toolbar/toolbar-action.interface.ts rename to projects/material-addons/src/lib/layout/toolbar/toolbar-action.interface.ts diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.html b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.html similarity index 100% rename from projects/material-addons/src/lib/toolbar/toolbar.component.html rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.html diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.css b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.scss similarity index 100% rename from projects/material-addons/src/lib/toolbar/toolbar.component.css rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.scss diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts similarity index 98% rename from projects/material-addons/src/lib/toolbar/toolbar.component.ts rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts index 69eb1bf2..b78df5c6 100644 --- a/projects/material-addons/src/lib/toolbar/toolbar.component.ts +++ b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts @@ -9,7 +9,7 @@ import { Action, BackAction, MainAction, ToolbarAction } from './toolbar-action. @Component({ selector: 'mad-toolbar', templateUrl: './toolbar.component.html', - styleUrls: ['./toolbar.component.css'], + styleUrls: ['./toolbar.component.scss'], }) export class ToolbarComponent { isHandset$: Observable = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches)); diff --git a/projects/material-addons/src/lib/toolbar/toolbar.module.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts similarity index 84% rename from projects/material-addons/src/lib/toolbar/toolbar.module.ts rename to projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts index 6edd29a6..08a88535 100644 --- a/projects/material-addons/src/lib/toolbar/toolbar.module.ts +++ b/projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts @@ -2,13 +2,13 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { ToolbarComponent } from './toolbar.component'; -import { MaterialActionButtonModule } from '../material-action-button/material-action-button.module'; +import { MaterialActionButtonModule } from '../../material-action-button/material-action-button.module'; import { MatMenuModule } from '@angular/material/menu'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { ButtonModule } from '../button/button.module'; +import { ButtonModule } from '../../button/button.module'; import { MatBadgeModule } from '@angular/material/badge'; @NgModule({ diff --git a/projects/material-addons/src/lib/toolbar/toolbar.service.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.service.ts similarity index 100% rename from projects/material-addons/src/lib/toolbar/toolbar.service.ts rename to projects/material-addons/src/lib/layout/toolbar/toolbar.service.ts diff --git a/projects/material-addons/src/lib/material-addons.module.ts b/projects/material-addons/src/lib/material-addons.module.ts index 7cfc701e..c5e6b0b7 100644 --- a/projects/material-addons/src/lib/material-addons.module.ts +++ b/projects/material-addons/src/lib/material-addons.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { ToolbarModule } from './toolbar/toolbar.module'; +import { ToolbarModule } from './layout/toolbar/toolbar.module'; import { ReadOnlyFormFieldModule } from './readonly/readonly-form-field.module'; import { MaterialActionButtonModule } from './material-action-button/material-action-button.module'; import { NumericFieldModule } from './numeric-field/numeric-field.module'; @@ -7,6 +7,7 @@ import { CardModule } from './card/card.module'; import { QuickListModule } from './quick-list/quick-list.module'; import { ButtonModule } from './button/button.module'; import { ThrottleClickModule } from './throttle-click/throttle-click.module'; +import { SidebarModule } from './layout/sidebar/sidebar.module'; @NgModule({ exports: [ @@ -18,6 +19,7 @@ import { ThrottleClickModule } from './throttle-click/throttle-click.module'; CardModule, QuickListModule, ThrottleClickModule, + SidebarModule, ], }) export class MaterialAddonsModule {} diff --git a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts index d5669996..447bdfa9 100644 --- a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts +++ b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts @@ -5,7 +5,15 @@ import { FormBuilder } from '@angular/forms'; @Component({ selector: 'mad-quick-list-compact', templateUrl: './quick-list-compact.component.html', - styleUrls: [], + styles: [ + ` + .quick-list-row { + flex-direction: row; + box-sizing: border-box; + display: flex; + } + `, + ], }) export class QuickListCompactComponent extends BaseQuickListComponent { constructor( diff --git a/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss b/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss index 38fed57e..46a34a75 100644 --- a/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss +++ b/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss @@ -8,8 +8,9 @@ width: 100%; height: 62px; - display: flex; flex-direction: row; + box-sizing: border-box; + display: flex; gap: 1em; } diff --git a/projects/material-addons/src/lib/stepper/stepper.component.scss b/projects/material-addons/src/lib/stepper/stepper.component.scss index ef456682..42a0f8a2 100644 --- a/projects/material-addons/src/lib/stepper/stepper.component.scss +++ b/projects/material-addons/src/lib/stepper/stepper.component.scss @@ -36,8 +36,10 @@ border-left: 1px solid lightgrey; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey; - display: flex; + flex-direction: column; + box-sizing: border-box; + display: flex; } .step-content { diff --git a/projects/material-addons/src/public_api.ts b/projects/material-addons/src/public_api.ts index 0167c28f..2cd5c96b 100644 --- a/projects/material-addons/src/public_api.ts +++ b/projects/material-addons/src/public_api.ts @@ -8,10 +8,7 @@ export * from './lib/button/button.module'; export * from './lib/readonly/readonly-form-field.module'; export * from './lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component'; export * from './lib/readonly/readonly-form-field/readonly-form-field.component'; -export * from './lib/toolbar/toolbar.module'; -export * from './lib/toolbar/toolbar.component'; -export * from './lib/toolbar/toolbar.service'; -export * from './lib/toolbar/toolbar-action.interface'; + export * from './lib/numeric-field/numeric-field'; export * from './lib/numeric-field/numeric-field.module'; export * from './lib/numeric-field/number-format.service'; @@ -29,12 +26,25 @@ export * from './lib/stepper/stepper.component'; export * from './lib/stepper/step-header/step-header.component'; export * from './lib/stepper/mad-stepper-animation'; export * from './lib/stepper/stepper.module'; -export * from './lib/content-panel/content-header/content-header.component'; -export * from './lib/content-panel/content-panel-container/content-panel-container.component'; -export * from './lib/content-panel/content-panel-container-content/content-panel-container-content.component'; -export * from './lib/content-panel/content-panel-container-footer/content-panel-container-footer.component'; -export * from './lib/content-panel/main-container/main-container.component'; -export * from './lib/content-panel/content-panel.module'; -export * from './lib/flowbar/flowbar.component'; -export * from './lib/flowbar/flowbar.module'; + +export * from './lib/layout/content-panel/content-header/content-header.component'; +export * from './lib//layout/content-panel/content-panel-container/content-panel-container.component'; +export * from './lib//layout/content-panel/content-panel-container-content/content-panel-container-content.component'; +export * from './lib//layout/content-panel/content-panel-container-footer/content-panel-container-footer.component'; +export * from './lib//layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component'; +export * from './lib//layout/content-panel/main-container/main-container.component'; +export * from './lib//layout/content-panel/content-panel.module'; + +export * from './lib/layout/flowbar/flowbar.component'; +export * from './lib/layout/flowbar/flowbar.module'; + +export * from './lib/layout/sidebar/sidebar.component'; +export * from './lib/layout/sidebar/sidebar-item/sidebar-item.component'; +export * from './lib/layout/sidebar/sidebar.module'; + +export * from './lib/layout/toolbar/toolbar.module'; +export * from './lib/layout/toolbar/toolbar.component'; +export * from './lib/layout/toolbar/toolbar.service'; +export * from './lib/layout/toolbar/toolbar-action.interface'; + export * from './lib/material-addons.module'; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4a28cd3a..7abc3d91 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -13,7 +13,9 @@ import { TableDemoComponent } from './component-demos/table-demo/table-demo.comp import { MadButtonsDemoComponent } from './component-demos/mad-buttons-demo/mad-buttons-demo.component'; import { ThrottleClickDemoComponent } from './component-demos/throttle-click-demo/throttle-click-demo.component'; import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-demo.component'; -import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component'; +import { BasePageLayoutComponent } from './component-demos/page-layouts/base-page-layout/base-page-layout.component'; +import { FlowbarPageLayoutComponent } from './component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component'; +import { SidebarPageLayoutComponent } from './component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component'; import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component'; import { DataTableDemoComponent } from './component-demos/data-table-demo/data-table-demo.component'; @@ -132,11 +134,27 @@ const routes: Routes = [ }, }, { - path: 'page-layouts', - component: PageLayoutsComponent, + path: 'base-page-layout', + component: BasePageLayoutComponent, pathMatch: 'full', data: { - i18n: 'layouts.demos.page-layouts', + i18n: 'layouts.demos.base-page-layout', + }, + }, + { + path: 'flowbar-page-layout', + component: FlowbarPageLayoutComponent, + pathMatch: 'full', + data: { + i18n: 'layouts.demos.flowbar-page-layout', + }, + }, + { + path: 'sidebar-page-layout', + component: SidebarPageLayoutComponent, + pathMatch: 'full', + data: { + i18n: 'layouts.demos.sidebar-page-layout', }, }, { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d9aaa2ba..d374e11a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -86,7 +86,9 @@ import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-dem import { CdkStepperModule } from '@angular/cdk/stepper'; import { MatStepperModule } from '@angular/material/stepper'; import { QuickListCompactBasicComponent } from './example-components/quick-list-compact-basic/quick-list-compact-basic.component'; -import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component'; +import { BasePageLayoutComponent } from './component-demos/page-layouts/base-page-layout/base-page-layout.component'; +import { FlowbarPageLayoutComponent } from './component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component'; +import { SidebarPageLayoutComponent } from './component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component'; import { FullPageLayoutsModule } from './full-page-layouts/full-page-layouts.module'; import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component'; import { DataTableCustomColumnsComponent } from './example-components/data-table-custom-columns/data-table-custom-columns.component'; @@ -103,6 +105,7 @@ import { DataTableChildRowsComponent } from './example-components/data-table-chi import { MatChipsModule } from '@angular/material/chips'; import { QuickListReactiveFormBasicComponent } from './example-components/quick-list-reactive-form-basic/quick-list-reactive-form-basic.component'; import { QuickListReactiveFormCompactComponent } from './example-components/quick-list-reactive-form-compact/quick-list-reactive-form-compact.component'; +import { FullPageLayoutsRoutingModule } from './full-page-layouts/full-page-layouts-routing.module'; export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { return new TranslateHttpLoader(http, './assets/i18n/'); @@ -159,7 +162,9 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { QuickListCompactBasicComponent, StepperComponent, StepperDemoComponent, - PageLayoutsComponent, + BasePageLayoutComponent, + FlowbarPageLayoutComponent, + SidebarPageLayoutComponent, ExampleComponentsLayoutComponent, QuickListReactiveFormBasicComponent, QuickListReactiveFormCompactComponent, @@ -222,6 +227,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { MatSlideToggleModule, DataTableDevModule, MatChipsModule, + FullPageLayoutsRoutingModule, ], providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline', subscriptSizing: 'dynamic' } }], bootstrap: [AppComponent], diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html new file mode 100644 index 00000000..f180bf04 --- /dev/null +++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html @@ -0,0 +1,33 @@ +

Base Pagelayout

+

+ Following example shows a base page layout without multiple pages. If you have different pages (different header, ...) with routing see + next example. +

+
+

Design Guidelines

+

All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.

+

The Base Pagelayout includes the following components:

+
    +
  • Main Navigation
    • +
  • Pagetitle
    • +
  • Content Area
    • +
+

Further components may complete the pagelayout as needed:

+
    +
  • Back Button
    • +
  • Command bar
    • +
  • Content-Panel
    • +
+

Command Bar

+
    +
  • The Command Bar comprises the most common users tasks.
    • +
  • The most important ones are shown, additional ones are accessible in an overflow-menu.
    • +
  • + Other commands, either less common ones or where the proximity to an ui element is crucial, are provided within the content area. +
    • +
+
+ +

Demo

+Open Base Pagelayout Demo
+{{ basePageLayout }} diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss new file mode 100644 index 00000000..cd0f9378 --- /dev/null +++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss @@ -0,0 +1 @@ +// define extra css here diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts new file mode 100644 index 00000000..7280d743 --- /dev/null +++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts @@ -0,0 +1,29 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'base-page-layout', + templateUrl: './base-page-layout.component.html', + styleUrls: ['./base-page-layout.component.scss'], +}) +export class BasePageLayoutComponent { + basePageLayout = ` + +
+
+ +

Base Pagelayout

+
+
+ + + +

Define the page content here

+ + +

Footer here

+ + + `; +} diff --git a/src/app/component-demos/page-layouts/page-layouts.component.html b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html similarity index 61% rename from src/app/component-demos/page-layouts/page-layouts.component.html rename to src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html index 94af9d4c..f0fcfffd 100644 --- a/src/app/component-demos/page-layouts/page-layouts.component.html +++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html @@ -1,37 +1,3 @@ -

Base Pagelayout

-

- Following example shows a base page layout without multiple pages. If you have different pages (different header, ...) with routing see - next example. -

-
-

Design Guidelines

-

All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.

-

The Base Pagelayout includes the following components:

-
    -
  • Main Navigation
    • -
  • Pagetitle
    • -
  • Content Area
    • -
-

Further components may complete the pagelayout as needed:

-
    -
  • Back Button
    • -
  • Command bar
    • -
  • Content-Panel
    • -
-

Command Bar

-
    -
  • The Command Bar comprises the most common users tasks.
    • -
  • The most important ones are shown, additional ones are accessible in an overflow-menu.
    • -
  • - Other commands, either less common ones or where the proximity to an ui element is crucial, are provided within the content area. -
    • -
-
- -

Demo

-Open Base Pagelayout Demo
-{{ basePageLayout }} -

Flow Bar Layout

The Flow Bar Layout extends the Base Page Layout by adding a wizard-like navigation control.

diff --git a/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss new file mode 100644 index 00000000..cd0f9378 --- /dev/null +++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss @@ -0,0 +1 @@ +// define extra css here diff --git a/src/app/component-demos/page-layouts/page-layouts.component.ts b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts similarity index 72% rename from src/app/component-demos/page-layouts/page-layouts.component.ts rename to src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts index 962b51df..b2794f0d 100644 --- a/src/app/component-demos/page-layouts/page-layouts.component.ts +++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts @@ -1,32 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-page-layouts', - templateUrl: './page-layouts.component.html', - styleUrls: ['./page-layouts.component.scss'], + selector: 'flowbar-page-layout', + templateUrl: './flowbar-page-layout.component.html', + styleUrls: ['./flowbar-page-layout.component.scss'], }) -export class PageLayoutsComponent { - basePageLayout = ` - -

-
- -

Base Pagelayout

-
-
- - - -

Define the page content here

- - -

Footer here

- - - `; - +export class FlowbarPageLayoutComponent { flowBarLayout = ` diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html new file mode 100644 index 00000000..eef3e156 --- /dev/null +++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html @@ -0,0 +1,16 @@ +

Sidbar Pagelayout

+

Following example shows a sidebar page layout with a collapsable sidebar container that can hold different navigation entries.

+
+

Design Guidelines

+

All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.

+

The Base SidebarLayout includes the following components:

+
    +
  • Same components as the base page layout
    • +
  • plus a collapsable navigation panel on the right hand side
    • +
+
+ +

Demo

+Open Sidebar Pagelayout Demo
+{{ sidebarPageLayout }} +
diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss new file mode 100644 index 00000000..cd0f9378 --- /dev/null +++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss @@ -0,0 +1 @@ +// define extra css here diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts new file mode 100644 index 00000000..5cc51112 --- /dev/null +++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sidebar-page-layouts', + templateUrl: './sidebar-page-layout.component.html', + styleUrls: ['./sidebar-page-layout.component.scss'], +}) +export class SidebarPageLayoutComponent { + sidebarPageLayout = ` + +
+
+ +

Sidebar layout

+
+
+ + history + + Action A + Action B +
+
+ + + + + Item 1 + Item 2 + A very very long name is here + + + + + + +`; +} diff --git a/src/app/example-components/mad-buttons/mad-buttons.component.html b/src/app/example-components/mad-buttons/mad-buttons.component.html index ff308d25..f112923e 100644 --- a/src/app/example-components/mad-buttons/mad-buttons.component.html +++ b/src/app/example-components/mad-buttons/mad-buttons.component.html @@ -5,3 +5,9 @@ create +

+ + + + + diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.html b/src/app/full-page-layouts/example-page-one/example-page-one.component.html new file mode 100644 index 00000000..86b8c4df --- /dev/null +++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.html @@ -0,0 +1,25 @@ +

Page One

+ + + Clearable input + + + + + + Other input + + sentiment_very_satisfied + + +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor + invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita + kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.scss b/src/app/full-page-layouts/example-page-one/example-page-one.component.scss new file mode 100644 index 00000000..55dcc576 --- /dev/null +++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.scss @@ -0,0 +1,3 @@ +.example-form-field { + width: 200px; +} diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.ts b/src/app/full-page-layouts/example-page-one/example-page-one.component.ts new file mode 100644 index 00000000..39085398 --- /dev/null +++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example-page-one', + templateUrl: './example-page-one.component.html', + styleUrls: ['./example-page-one.component.scss'], +}) +export class ExamplePageOneComponent { + value = 'Clear me'; +} diff --git a/src/app/full-page-layouts/example-page-two/example-page-two.component.html b/src/app/full-page-layouts/example-page-two/example-page-two.component.html new file mode 100644 index 00000000..4e9f8082 --- /dev/null +++ b/src/app/full-page-layouts/example-page-two/example-page-two.component.html @@ -0,0 +1,11 @@ +

Page Two

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem + ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor + invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita + kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

diff --git a/src/app/component-demos/page-layouts/page-layouts.component.scss b/src/app/full-page-layouts/example-page-two/example-page-two.component.scss similarity index 100% rename from src/app/component-demos/page-layouts/page-layouts.component.scss rename to src/app/full-page-layouts/example-page-two/example-page-two.component.scss diff --git a/src/app/full-page-layouts/example-page-two/example-page-two.component.ts b/src/app/full-page-layouts/example-page-two/example-page-two.component.ts new file mode 100644 index 00000000..7f7e3a1b --- /dev/null +++ b/src/app/full-page-layouts/example-page-two/example-page-two.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example-page-two', + templateUrl: './example-page-two.component.html', + styleUrls: ['./example-page-two.component.scss'], +}) +export class ExamplePageTwoComponent {} diff --git a/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss b/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss index dc450bd3..c47e1e50 100644 --- a/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss +++ b/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss @@ -6,3 +6,7 @@ mad-content-panel-container-content { height: 100%; } + +:host { + width: 100%; +} diff --git a/src/app/full-page-layouts/full-page-layouts-routing.module.ts b/src/app/full-page-layouts/full-page-layouts-routing.module.ts index e00176c4..d9f83c4f 100644 --- a/src/app/full-page-layouts/full-page-layouts-routing.module.ts +++ b/src/app/full-page-layouts/full-page-layouts-routing.module.ts @@ -3,6 +3,9 @@ import { BasePageLayoutComponent } from './base-page-layout/base-page-layout.com import { RouterModule, Routes } from '@angular/router'; import { NgModule } from '@angular/core'; import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-layout.component'; +import { SidebarPageLayoutComponent } from './sidebar-page-layout/sidebar-page-layout.component'; +import { ExamplePageOneComponent } from './example-page-one/example-page-one.component'; +import { ExamplePageTwoComponent } from './example-page-two/example-page-two.component'; const routes: Routes = [ { @@ -17,6 +20,24 @@ const routes: Routes = [ path: 'flowbar-page-layout', component: FlowbarPageLayoutComponent, }, + { + path: 'sidebar-page-layout', + component: SidebarPageLayoutComponent, + children: [ + { + path: '1', + component: ExamplePageOneComponent, + }, + { + path: '2', + component: ExamplePageTwoComponent, + }, + { + path: '**', + redirectTo: '1', + }, + ], + }, ], }, ]; diff --git a/src/app/full-page-layouts/full-page-layouts.component.html b/src/app/full-page-layouts/full-page-layouts.component.html index 7ccdd09c..792c67f3 100644 --- a/src/app/full-page-layouts/full-page-layouts.component.html +++ b/src/app/full-page-layouts/full-page-layouts.component.html @@ -1,52 +1,42 @@ -
-
+
+
- -
- -
Project title
+ + + -
- - - - - -
+ + + + + + -
+
-
-
- - - - - - - - - - - - - -
-
-
+ + + + + + + + + + + + +
-
- -
+ + diff --git a/src/app/full-page-layouts/full-page-layouts.module.ts b/src/app/full-page-layouts/full-page-layouts.module.ts index 4392263e..0415dd93 100644 --- a/src/app/full-page-layouts/full-page-layouts.module.ts +++ b/src/app/full-page-layouts/full-page-layouts.module.ts @@ -31,12 +31,16 @@ import { FlowbarModule, NumericFieldModule, QuickListModule, + SidebarModule, TableModule, ThrottleClickModule, } from 'material-addons'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { ContentPanelModule } from '../../../projects/material-addons/src/lib/content-panel/content-panel.module'; +import { ContentPanelModule } from '../../../projects/material-addons/src/lib/layout/content-panel/content-panel.module'; import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-layout.component'; +import { SidebarPageLayoutComponent } from './sidebar-page-layout/sidebar-page-layout.component'; +import { ExamplePageOneComponent } from './example-page-one/example-page-one.component'; +import { ExamplePageTwoComponent } from './example-page-two/example-page-two.component'; @NgModule({ imports: [ @@ -74,7 +78,15 @@ import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-l ThrottleClickModule, ContentPanelModule, FlowbarModule, + SidebarModule, + ], + declarations: [ + FullPageLayoutsComponent, + BasePageLayoutComponent, + FlowbarPageLayoutComponent, + SidebarPageLayoutComponent, + ExamplePageOneComponent, + ExamplePageTwoComponent, ], - declarations: [FullPageLayoutsComponent, BasePageLayoutComponent, FlowbarPageLayoutComponent], }) export class FullPageLayoutsModule {} diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html new file mode 100644 index 00000000..b24519eb --- /dev/null +++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html @@ -0,0 +1,31 @@ + + +
+
+ +

Sidebar layout

+
+
+ + history + + Action A + Action B +
+
+ + + + + Item 1 + Item 2 + A very very long name is here + + + + + + + diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss new file mode 100644 index 00000000..b8c39122 --- /dev/null +++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss @@ -0,0 +1,36 @@ +:host { + width: 100%; + height: 95%; + position: fixed; +} + +.title { + font-weight: unset; + margin-top: 15px; +} + +.fx-gap-1em { + gap: 1em; +} + +.flex-row { + flex-direction: row; + box-sizing: border-box; + display: flex; +} + +mad-content-panel-container-content { + height: 100%; +} + +.align-items-center { + align-items: center; +} + +.place-content-center-space-between { + place-content: center space-between; +} + +.place-content-center { + place-content: center; +} diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts new file mode 100644 index 00000000..5a2e3e09 --- /dev/null +++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-sidebar-page-layout', + templateUrl: './sidebar-page-layout.component.html', + styleUrls: ['./sidebar-page-layout.component.scss'], +}) +export class SidebarPageLayoutComponent { + constructor( + private router: Router, + private location: Location, + ) {} + + public goToPreviousPage(): void { + this.router.navigate([''], { skipLocationChange: true }).then((canRedirect) => { + if (canRedirect) { + this.location.back(); + } + }); + } +} diff --git a/src/app/home/link-card/link-card.component.scss b/src/app/home/link-card/link-card.component.scss index 2b8a6ecd..f8b57710 100644 --- a/src/app/home/link-card/link-card.component.scss +++ b/src/app/home/link-card/link-card.component.scss @@ -3,6 +3,7 @@ } .landing-page-list-card-title { + margin: 0 0 0 -16px; padding-top: 10px; } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 686d9f11..0c4fc925 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -44,7 +44,9 @@ "layouts": { "title": "Layout", "demos": { - "page-layouts": "Page Layouts" + "base-page-layout": "Base Layout", + "flowbar-page-layout": "Flowbar Layout", + "sidebar-page-layout": "Sidebar Layout" } } } diff --git a/src/navigation-entries.ts b/src/navigation-entries.ts index f42e1f5d..e393e3a5 100644 --- a/src/navigation-entries.ts +++ b/src/navigation-entries.ts @@ -23,10 +23,24 @@ export class NavigationEntries { roles: ['TEST', 'TEST2'], children: [ { - name: 'page layouts', - i18n: 'layouts.demos.page-layouts', + name: 'base layout', + i18n: 'layouts.demos.base-page-layout', matIcon: 'insert_drive_file', - route: '/page-layouts', + route: '/base-page-layout', + roles: ['TEST3'], + }, + { + name: 'flowbar layout', + i18n: 'layouts.demos.flowbar-page-layout', + matIcon: 'insert_drive_file', + route: '/flowbar-page-layout', + roles: ['TEST3'], + }, + { + name: 'sidebar layout', + i18n: 'layouts.demos.sidebar-page-layout', + matIcon: 'insert_drive_file', + route: '/sidebar-page-layout', roles: ['TEST3'], }, ],