feat: Transferdienst hinzugefügt und in BasePage integriert
- Einen neuen Transferdienst erstellt und in die BasePage-Komponente injiziert. - Einen neuen Button zur NavBar für die Transferfunktionalität hinzugefügt. - CSS-Animationen für den Button angewendet, um die Benutzerinteraktion zu verbessern.
This commit is contained in:
parent
ced8d30952
commit
454570b729
@ -107,11 +107,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.scale-pulse {
|
||||
display: inline-block;
|
||||
transition: transform 1s ease;
|
||||
}
|
||||
|
||||
.scale-pulse:hover {
|
||||
animation: pulse 1s ease forwards;
|
||||
}
|
||||
@ -127,3 +122,22 @@ html {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.move-left-right:hover {
|
||||
animation: move 0.8s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@ -37,6 +37,9 @@
|
||||
<button *ngIf="isLogedIn()" class="btn">
|
||||
<mat-icon class="scale-pulse" (click)="creationService.openDialog()">add_to_photos</mat-icon>
|
||||
</button>
|
||||
<button *ngIf="isLogedIn()" class="btn">
|
||||
<mat-icon class="move-left-right" (click)="transferService.executeAll()">swap_horiz</mat-icon>
|
||||
</button>
|
||||
<button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()">
|
||||
<mat-icon class="turn-360">sync</mat-icon>
|
||||
</button>
|
||||
|
||||
@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { RefreshService } from '../../services/refresh.service';
|
||||
import { CreationService } from '../../services/creation.service';
|
||||
import { UpdateService, UpdateEvent } from '../../services/update.service';
|
||||
import { TransferService } from '../../services/transfer.service';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import {
|
||||
MatSlideToggleModule,
|
||||
@ -32,7 +33,7 @@ export class NavMenuComponent {
|
||||
|
||||
isChecked = true;
|
||||
|
||||
constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService: CreationService, public updateService: UpdateService) {
|
||||
constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService: CreationService, public updateService: UpdateService, public transferService: TransferService) {
|
||||
this.authService.isAuthenticated().then().catch()
|
||||
this.updateActCount = this.updateService.totalCount;
|
||||
this.updateService.addChangeListener(UpdateEvent.CountChange, () => {
|
||||
|
||||
@ -2,6 +2,7 @@ import { Component, HostListener, inject } from '@angular/core';
|
||||
import { RefreshService } from '../../services/refresh.service';
|
||||
import { CreationService } from '../../services/creation.service';
|
||||
import { UpdateService } from '../../services/update.service';
|
||||
import { TransferService } from '../../services/transfer.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-base-page',
|
||||
@ -15,6 +16,7 @@ export class BasePageComponent {
|
||||
protected refreshService: RefreshService = inject(RefreshService)
|
||||
protected creationService: CreationService = inject(CreationService)
|
||||
protected updateService: UpdateService = inject(UpdateService)
|
||||
protected transferService: TransferService = inject(TransferService)
|
||||
|
||||
constructor() {
|
||||
this.refreshService.removeAll()
|
||||
@ -22,6 +24,8 @@ export class BasePageComponent {
|
||||
if (this.updateService.any) {
|
||||
this.updateService.executeAll().then()
|
||||
}
|
||||
if(this.transferService.any)
|
||||
this.transferService.removeAll()
|
||||
}
|
||||
|
||||
@HostListener('window:keydown.control.s', ['$event'])
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TransferService } from './transfer.service';
|
||||
|
||||
describe('TransferService', () => {
|
||||
let service: TransferService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(TransferService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TransferService {
|
||||
|
||||
constructor() { }
|
||||
|
||||
private actions: Array<() => void> = [];
|
||||
|
||||
public get count(): number {
|
||||
return this.actions.length;
|
||||
}
|
||||
|
||||
public get any(): boolean {
|
||||
return this.count > 0;
|
||||
}
|
||||
|
||||
add(action: () => void): void {
|
||||
this.actions.push(action);
|
||||
}
|
||||
|
||||
removeAll(): void {
|
||||
this.actions = [];
|
||||
}
|
||||
|
||||
executeAll(): void {
|
||||
this.actions.forEach(action => action());
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user