AppStd/DigitalData.UserManager
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Click-Event zur zeitbasierten Anzeige von Tooltips implementiert

Browse Source 
- Click-Event-Handler hinzugefügt, um die Anzeige von Tooltips zu steuern.
- Tooltips erscheinen jetzt für eine bestimmte Dauer, wenn sie durch das Click-Event ausgelöst werden.
- Verbesserung der Benutzerinteraktion durch zeitgesteuertes visuelles Feedback.
This commit is contained in:
Developer 02 2024-08-12 16:55:29 +02:00
parent d26fd87367
commit a024cf5409
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
View File

@ -31,16 +31,16 @@
<div class="navbar-collapse justify-content-end me-5">
<a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
<mat-slide-toggle *ngIf="isLogedIn()" [(ngModel)]="updateService.isEditable" [ngStyle]="{ 'visibility': creationService.isVisible ? 'visible' : 'hidden' }"></mat-slide-toggle>
<button *ngIf="isLogedIn()" class="btn" (click)="updateService.executeAll()" [ngStyle]="{ 'visibility': updateService.isVisible ? 'visible' : 'hidden' }">
<button *ngIf="isLogedIn()" class="btn" (click)="updateService.executeAll()" [ngStyle]="{ 'visibility': updateService.isVisible ? 'visible' : 'hidden' }" matTooltip="strg + s" matTooltipPosition="below" [matTooltipClass]="tooltipClass" [matTooltipDisabled]="!updateService.isVisible">
<mat-icon class="scale-pulse" [matBadge]="updateActCount === 0 ? '' : updateActCount">save</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn" (click)="creationService.openDialog()" [ngStyle]="{ 'visibility': creationService.isVisible ? 'visible' : 'hidden' }">
<button *ngIf="isLogedIn()" class="btn" (click)="creationService.openDialog()" [ngStyle]="{ 'visibility': creationService.isVisible ? 'visible' : 'hidden' }" matTooltip="strg + c" matTooltipPosition="below" [matTooltipClass]="tooltipClass" [matTooltipDisabled]="!creationService.isVisible">
<mat-icon class="scale-pulse">add_to_photos</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn" (click)="transferService.executeAll()" [ngStyle]="{ 'visibility': transferService.isVisible ? 'visible' : 'hidden' }">
<button *ngIf="isLogedIn()" class="btn" (click)="transferService.executeAll()" [ngStyle]="{ 'visibility': transferService.isVisible ? 'visible' : 'hidden' }" matTooltip="strg + ␣" matTooltipPosition="below" [matTooltipClass]="tooltipClass" [matTooltipDisabled]="!transferService.isVisible">
<mat-icon class="move-left-right">swap_horiz</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()" [ngStyle]="{ 'visibility': refreshService.isVisible ? 'visible' : 'hidden' }">
<button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()" [ngStyle]="{ 'visibility': refreshService.isVisible ? 'visible' : 'hidden' }" matTooltip="strg + r" matTooltipPosition="below" [matTooltipClass]="tooltipClass" [matTooltipDisabled]="!refreshService.isVisible">
<mat-icon class="turn-360">sync</mat-icon>
</button>
<button *ngIf="isLogedIn()" class="btn" (click)="showInfo()">

31
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, QueryList, ViewChildren } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AuthenticationService, IsLogedIn } from '../../services/api/authentication.service';
import { LoginComponent } from '../login/login.component';
@ -13,11 +13,13 @@ import { TransferService } from '../../services/button/transfer.service';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';
import { InfoComponent } from '../info/info.component'
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';
@Component({
standalone: true,
imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule, MatBadgeModule, MatSlideToggleModule, FormsModule],
imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule, MatBadgeModule, MatSlideToggleModule, FormsModule, MatButtonModule, MatTooltipModule],
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styleUrls: ['./nav-menu.component.css']
@ -68,7 +70,28 @@ export class NavMenuComponent {
}
}
@ViewChildren(MatTooltip) tooltips: QueryList<MatTooltip> | undefined;
private __tooltip_timeout_set = false;
private __shift_tooltip: boolean = true;
get tooltipClass() {
this.__shift_tooltip = !this.__shift_tooltip;
return this.__shift_tooltip ? "pt-3" : "";
}
showInfo() {
this.dialog.open(InfoComponent)
this.tooltips?.forEach(t => {
t.show();
});
if(!this.__tooltip_timeout_set){
this.__tooltip_timeout_set = true;
setTimeout(() => {
this.__tooltip_timeout_set = false;
this.tooltips?.forEach(t => {
t.hide();
});
}, 3000);
}
}
}