diff --git a/projects/example/src/app/plot-app/plot-app.component.html b/projects/example/src/app/plot-app/plot-app.component.html
index 004d97e24ab131ceadd590f6cbcdac175c4f59f1..91296c85b58391bf48037138ee20ab6aa4b6a956 100644
--- a/projects/example/src/app/plot-app/plot-app.component.html
+++ b/projects/example/src/app/plot-app/plot-app.component.html
@@ -40,86 +40,91 @@
<!-- App content -->
<nshmp-template-main-content>
- <div>Plot application content</div>
+ <mat-tab-group>
+ <mat-tab label="Plots">
+ <div class="padding-x-1 padding-top-2">
+ <mat-accordion>
+ <mat-expansion-panel expanded>
+ <mat-expansion-panel-header>
+ <mat-panel-title> This is the expansion title </mat-panel-title>
+ <mat-panel-description> This is a summary of the content </mat-panel-description>
+ </mat-expansion-panel-header>
+ <p>This is the primary content of the panel.</p>
- <div class="grid-container-widescreen padding-top-4">
- <mat-accordion>
- <mat-expansion-panel expanded>
- <mat-expansion-panel-header>
- <mat-panel-title> This is the expansion title </mat-panel-title>
- <mat-panel-description> This is a summary of the content </mat-panel-description>
- </mat-expansion-panel-header>
- <p>This is the primary content of the panel.</p>
-
- <div>
- <section>
- <div>Basic</div>
- <button mat-button>Basic</button>
- <button mat-button disabled>Basic: Disabled</button>
- </section>
- <mat-divider />
- <section>
- <div>Raised</div>
- <button mat-raised-button class="primary">Basic</button>
- <button mat-raised-button class="secondary">Basic</button>
- <button mat-raised-button class="error">Basic</button>
- <button mat-raised-button disabled>Basic: Disabled</button>
- </section>
- <mat-divider />
- <section>
- <div>Stroked</div>
- <button mat-stroked-button>Basic</button>
- <button mat-stroked-button disabled>Basic: Disabled</button>
- </section>
- <mat-divider />
- <section>
- <div>Flat</div>
- <button mat-flat-button class="primary">Basic</button>
- <button mat-flat-button class="secondary">Basic</button>
- <button mat-flat-button class="error">Basic</button>
- <button mat-flat-button disabled>Basic: Disabled</button>
- </section>
- <mat-divider />
- <section>
- <div>Icon</div>
- <button mat-icon-button>
- <mat-icon>more_vert</mat-icon>
- </button>
- </section>
- <mat-divider />
- <section>
- <div>FAB</div>
- <button mat-fab>
- <mat-icon>delete</mat-icon>
- </button>
- </section>
- <mat-divider />
- <section>
- <div>Mini FAB</div>
- <button mat-mini-fab>
- <mat-icon>menu</mat-icon>
- </button>
- </section>
- <mat-divider />
- <section>
- <div>Extended Fab</div>
- <button mat-fab extended class="primary">
- <mat-icon>favorite</mat-icon>
- Basic
- </button>
- <button mat-fab extended class="secondary">
- <mat-icon>favorite</mat-icon>
- Basic
- </button>
- <button mat-fab extended class="error">
- <mat-icon>favorite</mat-icon>
- Basic
- </button>
- </section>
- </div>
- </mat-expansion-panel>
- </mat-accordion>
- </div>
+ <div>
+ <section>
+ <div>Basic</div>
+ <button mat-button>Basic</button>
+ <button mat-button disabled>Basic: Disabled</button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Raised</div>
+ <button mat-raised-button class="primary">Basic</button>
+ <button mat-raised-button class="secondary">Basic</button>
+ <button mat-raised-button class="error">Basic</button>
+ <button mat-raised-button disabled>Basic: Disabled</button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Stroked</div>
+ <button mat-stroked-button>Basic</button>
+ <button mat-stroked-button disabled>Basic: Disabled</button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Flat</div>
+ <button mat-flat-button class="primary">Basic</button>
+ <button mat-flat-button class="secondary">Basic</button>
+ <button mat-flat-button class="error">Basic</button>
+ <button mat-flat-button disabled>Basic: Disabled</button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Icon</div>
+ <button mat-icon-button>
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>FAB</div>
+ <button mat-fab>
+ <mat-icon>delete</mat-icon>
+ </button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Mini FAB</div>
+ <button mat-mini-fab>
+ <mat-icon>menu</mat-icon>
+ </button>
+ </section>
+ <mat-divider />
+ <section>
+ <div>Extended Fab</div>
+ <button mat-fab extended class="primary">
+ <mat-icon>favorite</mat-icon>
+ Basic
+ </button>
+ <button mat-fab extended class="secondary">
+ <mat-icon>favorite</mat-icon>
+ Basic
+ </button>
+ <button mat-fab extended class="error">
+ <mat-icon>favorite</mat-icon>
+ Basic
+ </button>
+ </section>
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
+ </div>
+ </mat-tab>
+ <mat-tab label="Data">
+ <div>Example data</div>
+ </mat-tab>
+ </mat-tab-group>
</nshmp-template-main-content>
<!-- Setting panel -->
diff --git a/projects/example/src/app/plot-app/plot-app.component.ts b/projects/example/src/app/plot-app/plot-app.component.ts
index 3f5746086ca177728a693b26eae646a197d98bc0..3ff196537f0ebdeaf721e6c6c6d07bf8b7dd72e4 100644
--- a/projects/example/src/app/plot-app/plot-app.component.ts
+++ b/projects/example/src/app/plot-app/plot-app.component.ts
@@ -10,6 +10,7 @@ import {MatIcon} from '@angular/material/icon';
import {MatInput} from '@angular/material/input';
import {MatSelect} from '@angular/material/select';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatTabsModule} from '@angular/material/tabs';
import {
NshmpTemplateAboutComponent,
NshmpTemplateComponent,
@@ -44,6 +45,7 @@ import {navigationList} from '../nav';
MatButtonModule,
MatSlideToggleModule,
MatButtonToggleModule,
+ MatTabsModule,
],
selector: 'app-plot-app',
styleUrl: './plot-app.component.scss',
diff --git a/projects/nshmp-template/src/lib/components/content-container/content-container.component.html b/projects/nshmp-template/src/lib/components/content-container/content-container.component.html
index ce8e77c37c5d123e7518228b1389c0bc4d64dec5..c32da0deb0083907183adb07e08c884bce6107f4 100644
--- a/projects/nshmp-template/src/lib/components/content-container/content-container.component.html
+++ b/projects/nshmp-template/src/lib/components/content-container/content-container.component.html
@@ -10,18 +10,20 @@
<div class="container panel-control">
<div class="spacer"></div>
- <button
- mat-icon-button
- class="control"
- [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
- (click)="headerService.toggleControlPanel()"
- >
- @if (headerService.controlPanelSelected()) {
+ @if (headerService.controlPanelSelected()) {
+ <button
+ mat-icon-button
+ class="control"
+ [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
+ (click)="headerService.toggleControlPanel()"
+ >
<mat-icon matTooltip="Close control panel"> left_panel_close </mat-icon>
- } @else {
+ </button>
+ } @else {
+ <button mat-icon-button class="control" (click)="headerService.toggleControlPanel()">
<mat-icon matTooltip="Open control panel"> left_panel_open </mat-icon>
- }
- </button>
+ </button>
+ }
</div>
@if (headerService.controlPanelSelected()) {
@@ -50,18 +52,20 @@
}"
>
<div class="panel-control">
- <button
- mat-icon-button
- class="control"
- [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
- (click)="headerService.toggleSettingsPanel()"
- >
- @if (headerService.settingsSelected()) {
+ @if (headerService.settingsSelected()) {
+ <button
+ mat-icon-button
+ class="control"
+ [ngClass]="{'touch-target-20': nshmpService.isSmallScreen$ | async}"
+ (click)="headerService.toggleSettingsPanel()"
+ >
<mat-icon matTooltip="Close plot settings panel"> right_panel_close </mat-icon>
- } @else {
+ </button>
+ } @else {
+ <button mat-icon-button class="control" (click)="headerService.toggleSettingsPanel()">
<mat-icon matTooltip="Open plot settings panel"> right_panel_open </mat-icon>
- }
- </button>
+ </button>
+ }
</div>
@if (headerService.settingsSelected()) {
diff --git a/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss b/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
index 289fdc0469ab9e5e0e570e8bbf84fba4b82bd553..a32723e2bedea0d1030244602c470394282137c5 100644
--- a/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
+++ b/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
@@ -25,8 +25,7 @@
z-index: 2;
.panel-control {
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- height: variables.$side-panel-control-height;
+ border-bottom: solid 1px var(--mat-sys-surface-variant);
}
.panel-content {
@@ -49,20 +48,21 @@
.side-panel:not(.selected) {
position: absolute;
- width: 44px;
- height: variables.$side-panel-control-height;
- background-color: var(--mat-sys-surface);
+ width: variables.$side-panel-control-height;
+ background-color: unset;
&.settings {
right: 0;
+ z-index: 100;
}
&.control-panel {
left: 0;
+ z-index: 100;
}
.panel-control {
- box-shadow: none;
+ border-bottom: none;
}
}
@@ -83,42 +83,7 @@
}
body.small-screen :host {
- .side-panel {
- padding-top: 5px;
-
- .panel-control {
- height: variables.$side-panel-control-height-small;
- }
-
- .panel-content {
- height: calc(100% - variables.$side-panel-control-height-small);
- }
-
- .control {
- padding: 2.5px 0 0 0;
-
- @include mat.icon-button-overrides(
- (
- icon-size: 18px,
- state-layer-size: variables.$side-panel-control-height-small,
- touch-target-display: 0,
- )
- );
-
- mat-icon {
- height: 18px;
- width: 18px;
- font-size: 18px;
- }
- }
- }
-
.side-panel.selected {
width: 100%;
}
-
- .side-panel:not(.selected) {
- width: 26px;
- overflow: hidden;
- }
}
diff --git a/projects/nshmp-template/styles/_variables.scss b/projects/nshmp-template/styles/_variables.scss
index 2fda6688e054c4bd2c750c88c6ca2a8c04684e20..a8c7f3e30b55bbf738411a4eec79f0f39f015baa 100644
--- a/projects/nshmp-template/styles/_variables.scss
+++ b/projects/nshmp-template/styles/_variables.scss
@@ -22,8 +22,7 @@ $footer-height: 58px !default;
/* App control and settings panels */
$side-panel-width: 350px !default;
-$side-panel-control-height: 44px;
-$side-panel-control-height-small: 24px;
+$side-panel-control-height: 48px;
/* Form fields */
$form-field-height: 40px !default;