From 619940994c1eff93091427d06030d02d87896fe2 Mon Sep 17 00:00:00 2001
From: Tim Schneider <43130816+DerStimmler@users.noreply.github.com>
Date: Thu, 27 Jul 2023 23:20:25 +0200
Subject: [PATCH] feat(demo): improve config layout

---
 .../demo/src/app/config/config.component.html | 24 +++++++++++--------
 .../demo/src/app/config/config.component.scss |  8 ++++++-
 apps/demo/src/app/config/config.component.ts  |  2 ++
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/demo/src/app/config/config.component.html b/apps/demo/src/app/config/config.component.html
index 1a6f429..1a4ff4a 100644
--- a/apps/demo/src/app/config/config.component.html
+++ b/apps/demo/src/app/config/config.component.html
@@ -6,6 +6,19 @@
           *ngFor="let layerForm of layers.controls; let i = index"
           class="card"
         >
+          <mat-card-header class="card-header">
+            <mat-card-title>Layer #{{i + 1}}</mat-card-title>
+            <button
+              mat-icon-button
+              color="primary"
+              class="control-delete"
+              aria-label="Button to delete a layer with delete icon"
+              matTooltip="Remove layer"
+              (click)="deleteLayer(i)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </mat-card-header>
           <div [formGroupName]="i" class="control-container">
             <mat-form-field
               appearance="outline"
@@ -69,19 +82,10 @@
             >
               isRound
             </mat-checkbox>
-            <button
-              mat-icon-button
-              color="primary"
-              class="control-delete"
-              aria-label="Button to delete a layer with delete icon"
-              (click)="deleteLayer(i)"
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
           </div>
         </mat-card>
       </ng-container>
-      <button mat-mini-fab color="primary" (click)="addLayer()">
+      <button mat-mini-fab color="primary" matTooltip="Add layer" (click)="addLayer()">
         <mat-icon>add</mat-icon>
       </button>
       <div class="others-form">
diff --git a/apps/demo/src/app/config/config.component.scss b/apps/demo/src/app/config/config.component.scss
index bb17ab2..21b306b 100644
--- a/apps/demo/src/app/config/config.component.scss
+++ b/apps/demo/src/app/config/config.component.scss
@@ -13,7 +13,7 @@
 .control-container {
   align-items: center;
   display: grid;
-  grid-template-columns: 1fr 1fr max-content;
+  grid-template-columns: 1fr 1fr;
   column-gap: 0.5rem;
 
   &:first-child {
@@ -45,6 +45,12 @@
 
 .card {
   padding: 1em;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 1rem 0;
+  }
 }
 
 :host::ng-deep {
diff --git a/apps/demo/src/app/config/config.component.ts b/apps/demo/src/app/config/config.component.ts
index 5451310..9a614fe 100644
--- a/apps/demo/src/app/config/config.component.ts
+++ b/apps/demo/src/app/config/config.component.ts
@@ -18,6 +18,7 @@ import { ConfigForm } from './config-form';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Clipboard } from '@angular/cdk/clipboard';
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 @Component({
   selector: 'ngx-parallax-stars-config',
@@ -33,6 +34,7 @@ import { Clipboard } from '@angular/cdk/clipboard';
     MatSelectModule,
     MatSlideToggleModule,
     MatCheckboxModule,
+    MatTooltipModule,
   ],
   templateUrl: './config.component.html',
   styleUrls: ['./config.component.scss'],