From c0989e41a7a74a75df0f691eb7182616a6117b8e Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Wed, 5 Feb 2025 13:28:35 -0700
Subject: [PATCH] use icon button
---
.../content-container.component.html | 44 ++++++++++---------
1 file changed, 24 insertions(+), 20 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 ce8e77c..c32da0d 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()) {
--
GitLab