change controls

projects/nshmp-template/src/lib/components/content-container/content-container.component.html

 <!-- 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>
-      } @else {
-        <button mat-icon-button class="control" (click)="headerService.toggleControlPanel()">
-          <mat-icon matTooltip="Open control panel"> left_panel_open </mat-icon>
-        </button>
-      }
-    </div>
+        @if (controlType() === ControlType.FAB) {
+          <button mat-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]="tooltip"> {{ icon }} </mat-icon>
+          </button>
+        }
+      </div>
+    }
 
-    @if (headerService.controlPanelSelected()) {
+    @if (controlSelected) {
       <div class="panel-content">
         <ng-content select="nshmp-template-control-panel" />
       </div>
@@ -34,9 +35,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 +42,29 @@
   }
 
   <!-- 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>
+        @let icon = settingsSelected ? 'right_panel_close' : 'right_panel_open';
+        @let tooltip = settingsSelected ? 'Close plot settings panel' : 'Open plot settings panel';
+
+        @if (controlType() === ControlType.FAB) {
+          <button mat-fab class="control" (click)="headerService.toggleSettingsPanel()">
+            <mat-icon [matTooltip]="tooltip"> {{ icon }} </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>
+            <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>

projects/nshmp-template/src/lib/components/content-container/content-container.component.scss

@@ -24,14 +24,23 @@
     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);
-
       button {
         margin-bottom: variables.$form-field-padding-bottom;
       }
@@ -53,37 +62,46 @@
 
     &.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%;
   }
-
-  .container {
-    display: flex;
-
-    .spacer {
-      flex: 1 1 auto;
-    }
-  }
 }
 
 body.small-screen :host {
   .side-panel.selected {
     width: 100%;
+
+    &.control-panel .panel-control {
+      right: 0;
+    }
+
+    &.control-panel .control {
+      left: unset;
+    }
+
+    &.settings .panel-control {
+      left: 0;
+      right: unset;
+    }
+
+    &.settings .control {
+      left: 0;
+      right: unset;
+    }
   }
 }

projects/nshmp-template/src/lib/components/content-container/content-container.component.ts

-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';
@@ -7,8 +7,13 @@ import {Subscription} from 'rxjs';
 
 import {HeaderService, NshmpTemplateService} from '../../services';
 
+export enum ControlType {
+  FAB,
+  ICON,
+}
+
 @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',
@@ -19,6 +24,10 @@ export class NshmpTemplateContentContainerComponent implements OnInit, OnDestroy
 
   isSmallScreen = false;
 
+  ControlType = ControlType;
+
+  controlType = input(ControlType.ICON);
+
   showSettingsPanel = input(true);
 
   constructor(