diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.html b/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.html new file mode 100644 index 000000000..a03d52d72 --- /dev/null +++ b/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.html @@ -0,0 +1,18 @@ + + + + + + + + +

dbx-section-page components can be nested within eachother and retain the proper heights.

+

Can be nested a total of 9 times.

+ + + + + + + + diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.ts b/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.ts new file mode 100644 index 000000000..0b672b857 --- /dev/null +++ b/apps/demo/src/app/modules/doc/modules/layout/container/section.page.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { LOREM } from '../../shared'; + +@Component({ + templateUrl: './section.page.component.html' +}) +export class DocLayoutSectionPageComponent { + lorem = LOREM; +} diff --git a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.module.ts b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.module.ts index 592012437..a9224d825 100644 --- a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.module.ts +++ b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.module.ts @@ -15,6 +15,7 @@ import { DocSelectionItemListComponent, DocSelectionItemListViewComponent, DocSe import { DocCustomItemListComponent, DocCustomItemListViewComponent, DocCustomItemListViewItemComponent } from './component/item.list.custom.component'; import { DocLayoutTwoColumnsComponent } from './container/two.component'; import { DocItemListGridComponent, DocItemListGridViewComponent, DocItemListGridViewItemComponent } from './component/item.list.grid.component'; +import { DocLayoutSectionPageComponent } from './container/section.page.component'; @NgModule({ imports: [ @@ -42,6 +43,7 @@ import { DocItemListGridComponent, DocItemListGridViewComponent, DocItemListGrid DocLayoutBarComponent, DocLayoutFlexComponent, DocLayoutSectionComponent, + DocLayoutSectionPageComponent, DocLayoutContentComponent, DocLayoutListComponent, DocLayoutTwoColumnsComponent, diff --git a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.router.ts b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.router.ts index f0f9294de..b079a01fd 100644 --- a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.router.ts +++ b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.router.ts @@ -7,6 +7,7 @@ import { DocLayoutHomeComponent } from './container/home.component'; import { DocLayoutLayoutComponent } from './container/layout.component'; import { DocLayoutListComponent } from './container/list.component'; import { DocLayoutSectionComponent } from './container/section.component'; +import { DocLayoutSectionPageComponent } from './container/section.page.component'; import { DocLayoutTwoColumnsComponent } from './container/two.component'; export const layoutState: Ng2StateDeclaration = { @@ -46,6 +47,12 @@ export const docLayoutSectionState: Ng2StateDeclaration = { component: DocLayoutSectionComponent }; +export const docLayoutSectionPageState: Ng2StateDeclaration = { + url: '/sectionpage', + name: 'doc.layout.sectionpage', + component: DocLayoutSectionPageComponent +}; + export const docLayoutListState: Ng2StateDeclaration = { url: '/list', name: 'doc.layout.list', @@ -64,4 +71,4 @@ export const docLayoutTwoState: Ng2StateDeclaration = { component: DocLayoutTwoColumnsComponent }; -export const STATES: Ng2StateDeclaration[] = [layoutState, homeState, docLayoutBarState, docLayoutContentState, docLayoutFlexState, docLayoutSectionState, docLayoutListState, docLayoutTwoBlockState, docLayoutTwoState]; +export const STATES: Ng2StateDeclaration[] = [layoutState, homeState, docLayoutBarState, docLayoutContentState, docLayoutFlexState, docLayoutSectionState, docLayoutSectionPageState, docLayoutListState, docLayoutTwoBlockState, docLayoutTwoState]; diff --git a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.ts b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.ts index 2f4adaefc..905009550 100644 --- a/apps/demo/src/app/modules/doc/modules/layout/doc.layout.ts +++ b/apps/demo/src/app/modules/doc/modules/layout/doc.layout.ts @@ -23,6 +23,12 @@ export const DOC_LAYOUT_ROUTES = [ detail: 'dbx-section', ref: 'doc.layout.section' }, + { + icon: 'view_module', + title: 'Section Page', + detail: 'dbx-section-page', + ref: 'doc.layout.sectionpage' + }, { icon: 'list', title: 'List', diff --git a/packages/dbx-web/src/lib/layout/section/_section.scss b/packages/dbx-web/src/lib/layout/section/_section.scss index beab6b17d..3833ec24d 100644 --- a/packages/dbx-web/src/lib/layout/section/_section.scss +++ b/packages/dbx-web/src/lib/layout/section/_section.scss @@ -35,32 +35,89 @@ $header-left-reserved-space-small-screen: 120px; } } - .dbx-section-hint { + .dbx-section-hint, + .dbx-section-hint-inline { margin: 0; + font-size: 16px; } // MARK: Page .dbx-section-page { - > .dbx-section-header > .dbx-section-header-content { + > .dbx-section-header { height: $content-navbar-height; max-height: $content-navbar-height; - overflow-x: auto; - overflow-y: hidden; + overflow: hidden; max-width: 100%; - .dbx-section-header-content-title { - max-width: calc(80% - #{$header-left-reserved-space}); + > .dbx-section-header-content { + height: $content-navbar-height; + max-height: $content-navbar-height; + overflow-x: auto; + overflow-y: hidden; + max-width: 100%; + + .dbx-section-header-content-title { + max-width: calc(80% - #{$header-left-reserved-space}); - display: inline-flex !important; - justify-content: center; - align-items: center; + display: inline-flex !important; + justify-content: center; + align-items: center; - .mat-icon { - margin-right: 4px; + .mat-icon { + margin-right: 4px; + } + + > .title-text { + @include theming.limit-text(); + } } + } + } - > .title-text { - @include theming.limit-text(); + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(1); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(2); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(3); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(4); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(5); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(6); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(7); + + .dbx-section-page { + &.dbx-content-page { + @include theming.nested-content-height(9); + } + } + } + } + } + } + } + } + } + } + } + } + } } } } @@ -84,6 +141,12 @@ $header-left-reserved-space-small-screen: 120px; } } } + + .dbx-section-header.dbx-section-header-full-title > .dbx-section-header-content { + .dbx-section-header-content-title { + max-width: 100%; + } + } } @mixin typography($typography-config) { diff --git a/packages/dbx-web/src/lib/layout/section/section.header.component.ts b/packages/dbx-web/src/lib/layout/section/section.header.component.ts index 486647cba..7b1df8325 100644 --- a/packages/dbx-web/src/lib/layout/section/section.header.component.ts +++ b/packages/dbx-web/src/lib/layout/section/section.header.component.ts @@ -29,12 +29,18 @@ import { DbxSectionHeaderHType } from './section'; -

{{ hint }}

+

{{ hint }}

{{ icon }} - {{ header }} + + {{ header }} + {{ hint }} + - ` + `, + host: { + '[class.dbx-section-header-full-title]': 'onlyHeader' + } }) export class DbxSectionHeaderComponent { @Input() @@ -43,12 +49,18 @@ export class DbxSectionHeaderComponent { @Input() header?: Maybe; + @Input() + onlyHeader = false; + @Input() icon?: Maybe; @Input() hint?: Maybe; + @Input() + hintInline?: Maybe; + get showTitle() { return Boolean(this.header || this.icon); } diff --git a/packages/dbx-web/src/lib/layout/section/section.page.component.ts b/packages/dbx-web/src/lib/layout/section/section.page.component.ts index 6e54d3911..354b7e754 100644 --- a/packages/dbx-web/src/lib/layout/section/section.page.component.ts +++ b/packages/dbx-web/src/lib/layout/section/section.page.component.ts @@ -1,18 +1,25 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { DbxSectionHeaderComponent } from './section.header.component'; /** * Component used to style a page that is made up of app sections. + * + * Should be used on pages that need a section page heading. + * + * Can be nested within eachother, retaining the proper fixed height. */ @Component({ selector: 'dbx-section-page', template: `
-
+
` }) -export class DbxSectionPageComponent extends DbxSectionHeaderComponent {} +export class DbxSectionPageComponent extends DbxSectionHeaderComponent { + @Input() + override hintInline = true; +} diff --git a/packages/dbx-web/src/lib/router/layout/sidenav/sidenav.page.component.ts b/packages/dbx-web/src/lib/router/layout/sidenav/sidenav.page.component.ts index f6941c497..6d8fe965f 100644 --- a/packages/dbx-web/src/lib/router/layout/sidenav/sidenav.page.component.ts +++ b/packages/dbx-web/src/lib/router/layout/sidenav/sidenav.page.component.ts @@ -12,8 +12,8 @@ import { DbxBarColor } from '../../../layout/bar/bar'; @Component({ selector: 'dbx-sidenav-page', template: ` -
- +
+ diff --git a/packages/dbx-web/src/lib/style/_mixin.scss b/packages/dbx-web/src/lib/style/_mixin.scss index bbc55a343..9cea85394 100644 --- a/packages/dbx-web/src/lib/style/_mixin.scss +++ b/packages/dbx-web/src/lib/style/_mixin.scss @@ -73,10 +73,33 @@ Content height that sets the height to $content-height with an optional offset. */ @mixin content-height($additionalOffset: 0) { + $temp: variables.$content-height; + @if $additionalOffset !=0 { - height: calc(variables.$content-height - #{$additionalOffset}); + height: calc($temp - #{$additionalOffset}); + } @else { + height: $temp; + } +} + +/** + Nested content height that sets the height to $content-height minus the total number of $content-navbar-heights above it, with an optional offset. +*/ +@mixin nested-content-height($headers: 1, $additionalOffset: 0) { + @if $headers < 1 { + @error "Headers count #{$headers} must be greater than 1."; + } + + @if $headers == 1 { + @include content-height($additionalOffset); // content-height properly handles this case. } @else { - height: variables.$content-height; + $temp: calc(variables.$content-height - variables.$content-navbar-height * ($headers - 1)); + + @if $additionalOffset !=0 { + height: calc($temp - #{$additionalOffset}); + } @else { + height: $temp; + } } }