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 91296c85b58391bf48037138ee20ab6aa4b6a956..62d68d3427671ac14a5348c9acdfdec971802b6a 100644
--- a/projects/example/src/app/plot-app/plot-app.component.html
+++ b/projects/example/src/app/plot-app/plot-app.component.html
@@ -40,7 +40,7 @@
<!-- App content -->
<nshmp-template-main-content>
- <mat-tab-group>
+ <mat-tab-group class="height-full">
<mat-tab label="Plots">
<div class="padding-x-1 padding-top-2">
<mat-accordion>
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 c32da0deb0083907183adb07e08c884bce6107f4..38278984cefd197e9e06e3217bba9ad8288c6f0d 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
@@ -1,32 +1,27 @@
<!-- Appplication Content -->
<div class="app-content">
+ @let controlSelected = headerService.controlPanelSelected();
+ @let settingsSelected = headerService.settingsSelected();
+
<!-- Control Panel -->
<div
class="side-panel control-panel"
[ngClass]="{
- selected: headerService.controlPanelSelected(),
+ selected: controlSelected,
}"
>
- <div class="container panel-control">
- <div class="spacer"></div>
+ @if (!(isSmallScreen && settingsSelected)) {
+ <div class="panel-control">
+ @let icon = controlSelected ? 'left_panel_close' : 'left_panel_open';
+ @let tooltip = controlSelected ? 'Close control panel' : 'Open control panel';
- @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>
+ <button mat-mini-fab class="control" (click)="headerService.toggleControlPanel()">
+ <mat-icon [matTooltip]="tooltip"> {{ icon }} </mat-icon>
</button>
- } @else {
- <button mat-icon-button class="control" (click)="headerService.toggleControlPanel()">
- <mat-icon matTooltip="Open control panel"> left_panel_open </mat-icon>
- </button>
- }
- </div>
+ </div>
+ }
- @if (headerService.controlPanelSelected()) {
+ @if (controlSelected) {
<div class="panel-content">
<ng-content select="nshmp-template-control-panel" />
</div>
@@ -34,9 +29,6 @@
</div>
<!-- Main Content -->
- @let controlSelected = headerService.controlPanelSelected();
- @let settingsSelected = headerService.settingsSelected();
-
@if (!(isSmallScreen && (controlSelected || settingsSelected))) {
<div class="main">
<ng-content select="nshmp-template-main-content" />
@@ -44,31 +36,23 @@
}
<!-- Settings -->
- @if (showSettingsPanel()) {
+ @if (showSettingsPanel() && !(isSmallScreen && controlSelected)) {
<div
class="side-panel settings"
[ngClass]="{
- selected: headerService.settingsSelected(),
+ selected: settingsSelected,
}"
>
<div class="panel-control">
- @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>
- </button>
- } @else {
- <button mat-icon-button class="control" (click)="headerService.toggleSettingsPanel()">
- <mat-icon matTooltip="Open plot settings panel"> right_panel_open </mat-icon>
- </button>
- }
+ @let icon = settingsSelected ? 'right_panel_close' : 'right_panel_open';
+ @let tooltip = settingsSelected ? 'Close plot settings panel' : 'Open plot settings panel';
+
+ <button mat-mini-fab class="control" (click)="headerService.toggleSettingsPanel()">
+ <mat-icon [matTooltip]="tooltip"> {{ icon }} </mat-icon>
+ </button>
</div>
- @if (headerService.settingsSelected()) {
+ @if (settingsSelected) {
<div class="panel-content">
<ng-content select="nshmp-template-settings" />
</div>
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 a32723e2bedea0d1030244602c470394282137c5..6a5d2262b4e6402046eb63cb109c09ea0582a73e 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
@@ -11,6 +11,8 @@
}
}
+$fab-size: 40px;
+
.app-content {
display: flex;
flex-direction: row;
@@ -24,13 +26,25 @@
width: variables.$side-panel-width;
z-index: 2;
+ &.control-panel .control {
+ left: variables.$side-panel-width;
+ }
+
+ &.settings .panel-control {
+ right: 0;
+ }
+
+ &.settings .control {
+ right: variables.$side-panel-width;
+ }
+
.panel-control {
- border-bottom: solid 1px var(--mat-sys-surface-variant);
+ position: absolute;
}
.panel-content {
- overflow: scroll;
- height: calc(100% - variables.$side-panel-control-height);
+ height: 100%;
+ overflow: auto;
button {
margin-bottom: variables.$form-field-padding-bottom;
@@ -43,47 +57,82 @@
state-layer-size: variables.$side-panel-control-height,
)
);
+
+ @include mat.fab-overrides(
+ (
+ small-container-color: var(--mat-sys-background),
+ small-container-elevation-shadow: none,
+ small-hover-container-elevation-shadow: none,
+ small-focus-container-elevation-shadow: none,
+ )
+ );
+
+ &.mat-mdc-mini-fab {
+ width: $fab-size;
+ height: $fab-size;
+ margin: calc((variables.$side-panel-control-height - $fab-size) / 2);
+ }
}
}
.side-panel:not(.selected) {
position: absolute;
- width: variables.$side-panel-control-height;
+ width: 0;
background-color: unset;
&.settings {
right: 0;
- z-index: 100;
}
- &.control-panel {
- left: 0;
+ &.settings .control {
+ right: 0;
z-index: 100;
}
- .panel-control {
- border-bottom: none;
+ &.control-panel .control {
+ left: 0;
+ z-index: 100;
}
}
.main {
height: 100%;
flex: 1;
- overflow: scroll;
width: 100%;
+ overflow: hidden;
}
+}
+
+body.small-screen :host {
+ .side-panel.selected {
+ width: 100%;
+
+ &.control-panel .panel-control {
+ right: 0;
+ }
- .container {
- display: flex;
+ &.control-panel .control {
+ left: unset;
+ }
- .spacer {
- flex: 1 1 auto;
+ &.settings .panel-control {
+ left: 0;
+ right: unset;
+ }
+
+ &.settings .control {
+ left: 0;
+ right: unset;
}
}
}
-body.small-screen :host {
- .side-panel.selected {
- width: 100%;
+body:not(.dark-mode) :host {
+ .control {
+ @include mat.fab-overrides(
+ (
+ small-foreground-color: var(--mat-sys-on-secondary-container)
+ )
+ );
}
}
diff --git a/projects/nshmp-template/src/lib/components/content-container/content-container.component.ts b/projects/nshmp-template/src/lib/components/content-container/content-container.component.ts
index 7408d113d9e0c5f5314bba6cafefd5dcd5aa0054..60f954b8ffbbd25ceaa30b13bdc0b1bb2d81197f 100644
--- a/projects/nshmp-template/src/lib/components/content-container/content-container.component.ts
+++ b/projects/nshmp-template/src/lib/components/content-container/content-container.component.ts
@@ -1,4 +1,4 @@
-import {AsyncPipe, NgClass} from '@angular/common';
+import {NgClass} from '@angular/common';
import {Component, input, OnDestroy, OnInit} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@@ -8,7 +8,7 @@ import {Subscription} from 'rxjs';
import {HeaderService, NshmpTemplateService} from '../../services';
@Component({
- imports: [NgClass, AsyncPipe, MatIconModule, MatButtonModule, MatTooltipModule],
+ imports: [NgClass, MatIconModule, MatButtonModule, MatTooltipModule],
selector: 'nshmp-template-content-container',
styleUrl: './content-container.component.scss',
templateUrl: './content-container.component.html',