From 49c0cc8722762760cfe8ae9021bf345070d530a1 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 27 May 2024 13:21:05 +0200
Subject: [PATCH] [editor] Add tooltips to props-panel tab headers

...and make tooltip config global.
---
 projects/editor/src/app/app.module.ts                | 12 +++++++++++-
 .../element-properties-panel.component.html          |  6 +++---
 .../app/components/unit-view/page-menu.component.ts  | 11 +----------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 2c12a580a..355416d17 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -124,6 +124,15 @@ import {
   EleSpecificPropsComponent
 } from 'editor/src/app/components/properties-panel/model-properties-tab/input-groups/ele-specific-props.component';
 import { PageMenu } from 'editor/src/app/components/unit-view/page-menu.component';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
+
+/** Custom options the configure the tooltip's default show/hide delays. */
+export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
+  showDelay: 400,
+  hideDelay: 0,
+  touchendHideDelay: 0,
+  position: 'above'
+};
 
 @NgModule({
   declarations: [
@@ -225,7 +234,8 @@ import { PageMenu } from 'editor/src/app/components/unit-view/page-menu.componen
     PageMenu
   ],
   providers: [
-    { provide: APIService, useExisting: VeronaAPIService }
+    { provide: APIService, useExisting: VeronaAPIService },
+    {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}
   ]
 })
 
diff --git a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
index 2f4a18a61..0d75d9921 100644
--- a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
+++ b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
@@ -13,7 +13,7 @@
   <mat-tab-group class="fx-flex" mat-stretch-tabs>
     <mat-tab>
       <ng-template mat-tab-label>
-        <mat-icon class="example-tab-icon">build</mat-icon>
+        <mat-icon class="example-tab-icon" [matTooltip]="'Elementspezifische Eigenschaften'">build</mat-icon>
       </ng-template>
       <aspect-element-model-properties-component [combinedProperties]="combinedProperties"
                                                  [selectedElements]="selectedElements"
@@ -23,7 +23,7 @@
 
     <mat-tab>
       <ng-template mat-tab-label>
-        <mat-icon class="example-tab-icon">format_shapes</mat-icon>
+        <mat-icon class="example-tab-icon" [matTooltip]="'Position & Maße'">format_shapes</mat-icon>
       </ng-template>
       <aspect-position-and-dimension-properties
         [dimensions]="combinedProperties.type === 'trigger' ? null : combinedProperties.dimensions"
@@ -34,7 +34,7 @@
 
     <mat-tab *ngIf="combinedProperties.styling">
       <ng-template mat-tab-label>
-        <mat-icon class="example-tab-icon">palette</mat-icon>
+        <mat-icon class="example-tab-icon" [matTooltip]="'Gestaltung'">palette</mat-icon>
       </ng-template>
         <aspect-element-style-properties [styles]="combinedProperties.styling">
         </aspect-element-style-properties>
diff --git a/projects/editor/src/app/components/unit-view/page-menu.component.ts b/projects/editor/src/app/components/unit-view/page-menu.component.ts
index 6604a1c63..e45125116 100644
--- a/projects/editor/src/app/components/unit-view/page-menu.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-menu.component.ts
@@ -18,17 +18,9 @@ import { UnitService } from 'editor/src/app/services/unit-services/unit.service'
 import { DialogService } from 'editor/src/app/services/dialog.service';
 import { MessageService } from 'common/services/message.service';
 import { Subject } from 'rxjs';
-import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions, MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { PageService } from 'editor/src/app/services/unit-services/page.service';
 
-/** Custom options the configure the tooltip's default show/hide delays. */
-export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
-  showDelay: 400,
-  hideDelay: 0,
-  touchendHideDelay: 0,
-  position: 'above'
-};
-
 @Component({
   selector: 'aspect-unit-view-page-menu',
   standalone: true,
@@ -48,7 +40,6 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
     FormsModule,
     MatTooltipModule
   ],
-  providers: [{provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}],
   templateUrl: 'page-menu.component.html',
   styles: `
     :host {
-- 
GitLab