From 3889659f877a51b0ea2866a1a7d313b4600f6505 Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Wed, 12 Feb 2025 13:57:10 -0700
Subject: [PATCH] change controls
---
.../content-container.component.html | 64 +++++++++----------
.../content-container.component.scss | 54 ++++++++++------
.../content-container.component.ts | 13 +++-
3 files changed, 77 insertions(+), 54 deletions(-)
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 c32da0d..a656f92 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,33 @@
<!-- 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>
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 a32723e..2be838e 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
@@ -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;
+ }
}
}
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 7408d11..17309b7 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';
@@ -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(
--
GitLab