fix: dbx-section-page fixes

- Fixed issue with dbx-section-page header height not being fixed with a proper overflow - dbx-section-page's header hint text is now inline with the header - dbx-section-page can now be nested - fixed other stylings
dereekb · Jun 24, 2022 · c23a9c4 · c23a9c4
1 parent 47a5361
commit c23a9c4
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 24 deletions.
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
@@ -0,0 +1,18 @@
+<dbx-section-page header="dbx-section-page Nesting Example" [onlyHeader]="true">
+  <dbx-section-page header="Page 3">
+    <dbx-section-page header="Page 4">
+      <dbx-section-page header="Page 5">
+        <dbx-section-page header="Page 6">
+          <dbx-section-page header="Page 7">
+            <dbx-section-page header="Page 8">
+              <dbx-section-page header="Page 9">
+                <p>dbx-section-page components can be nested within eachother and retain the proper heights.</p>
+                <p>Can be nested a total of 9 times.</p>
+              </dbx-section-page>
+            </dbx-section-page>
+          </dbx-section-page>
+        </dbx-section-page>
+      </dbx-section-page>
+    </dbx-section-page>
+  </dbx-section-page>
+</dbx-section-page>
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -29,12 +29,18 @@ import { DbxSectionHeaderHType } from './section';
       <span class="spacer"></span>
       <ng-content></ng-content>
     </div>
-    <p *ngIf="hint" class="dbx-section-hint dbx-hint">{{ hint }}</p>
+    <p *ngIf="hint && !hintInline" class="dbx-section-hint dbx-hint">{{ hint }}</p>
     <ng-template #headerContentTitleTemplate>
       <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-      <span class="title-text">{{ header }}</span>
+      <span class="title-text">
+        {{ header }}
+        <span *ngIf="hint && hintInline" class="dbx-section-hint-inline dbx-hint">{{ hint }}</span>
+      </span>
     </ng-template>
-  `
+  `,
+  host: {
+    '[class.dbx-section-header-full-title]': 'onlyHeader'
+  }
 })
 export class DbxSectionHeaderComponent {
   @Input()
@@ -43,12 +49,18 @@ export class DbxSectionHeaderComponent {
   @Input()
   header?: Maybe<string>;
 
+  @Input()
+  onlyHeader = false;
+
   @Input()
   icon?: Maybe<string>;
 
   @Input()
   hint?: Maybe<string>;
 
+  @Input()
+  hintInline?: Maybe<boolean>;
+
   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
@@ -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: `
     <div class="dbx-content-page dbx-section-page">
-      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [icon]="icon" [hint]="hint">
+      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [onlyHeader]="onlyHeader" [icon]="icon" [hint]="hint" [hintInline]="true">
         <ng-content select="[sectionHeader]"></ng-content>
       </div>
       <ng-content></ng-content>
     </div>
   `
 })
-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
@@ -12,8 +12,8 @@ import { DbxBarColor } from '../../../layout/bar/bar';
 @Component({
   selector: 'dbx-sidenav-page',
   template: `
-    <div>
-      <dbx-sidenav-pagebar [color]="color" [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+    <div [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+      <dbx-sidenav-pagebar [color]="color">
         <ng-content left select="[navLeft]"></ng-content>
         <ng-content select="[navRight]"></ng-content>
       </dbx-sidenav-pagebar>

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