styles
This commit is contained in:
Tizian.Breuch
@@ -0,0 +1,85 @@
|
||||
/* Verschieben Sie alle Tabellen-Stile aus styles.css hierher */
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.modern-table thead th {
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: var(--color-text-light);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
.modern-table th.sortable {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.modern-table th.sortable:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.modern-table .sort-icon {
|
||||
opacity: 0.5;
|
||||
transition: all var(--transition-speed);
|
||||
}
|
||||
.modern-table th.sortable:hover .sort-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.modern-table tbody tr {
|
||||
transition: background-color var(--transition-speed);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.modern-table tbody tr:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
.modern-table tbody tr:hover {
|
||||
background-color: var(--color-body-bg);
|
||||
}
|
||||
.modern-table tbody td {
|
||||
padding: 1rem 1.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.user-cell img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.user-email {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
.amount { font-weight: 600; }
|
||||
.mono { font-family: 'Courier New', Courier, monospace; }
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.no-data-cell {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<div class="table-container">
|
||||
<table class="modern-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable">
|
||||
<span>Kunde</span>
|
||||
<app-icon name="chevron-down"></app-icon>
|
||||
</th>
|
||||
<th>Bestell-ID</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Betrag</th>
|
||||
<th class="text-center">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Schleife, die über die übergebenen Bestelldaten iteriert -->
|
||||
<tr *ngFor="let order of orders">
|
||||
<td>
|
||||
<div class="user-cell">
|
||||
<img [src]="order.user.avatarUrl" [alt]="'Avatar von ' + order.user.name" />
|
||||
<div>
|
||||
<div class="user-name">{{ order.user.name }}</div>
|
||||
<div class="user-email">{{ order.user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="mono">#{{ order.id }}</span></td>
|
||||
<td>
|
||||
<!-- <app-status-pill [status]="order.status">{{ order.statusText }}</app-status-pill> -->
|
||||
</td>
|
||||
<td class="text-right amount">{{ order.amount }}</td>
|
||||
<td class="actions-cell">
|
||||
<app-button
|
||||
buttonType="icon"
|
||||
tooltip="Details anzeigen"
|
||||
iconName="eye"
|
||||
(click)="viewDetails.emit(order.id)">
|
||||
</app-button>
|
||||
<app-button
|
||||
buttonType="icon"
|
||||
tooltip="Bearbeiten"
|
||||
iconName="edit"
|
||||
(click)="editOrder.emit(order.id)">
|
||||
</app-button>
|
||||
<app-button
|
||||
buttonType="icon-danger"
|
||||
tooltip="Löschen"
|
||||
iconName="trash-2"
|
||||
(click)="deleteOrder.emit(order.id)">
|
||||
</app-button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Fallback, wenn keine Daten vorhanden sind -->
|
||||
<tr *ngIf="!orders || orders.length === 0">
|
||||
<td colspan="5" class="no-data-cell">Keine Bestellungen gefunden.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { StatusPillComponent } from '../../ui/status-pill/status-pill.component';
|
||||
import { ButtonComponent } from '../../ui/button/button.component';
|
||||
import { IconComponent } from '../../ui/icon/icon.component';
|
||||
|
||||
// Interfaces für die Datenstruktur
|
||||
export interface OrderUser {
|
||||
name: string;
|
||||
email: string;
|
||||
avatarUrl: string;
|
||||
}
|
||||
|
||||
export interface Order {
|
||||
id: string;
|
||||
user: OrderUser;
|
||||
amount: string;
|
||||
status: 'success' | 'warning' | 'danger';
|
||||
statusText: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-orders-table',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
ButtonComponent,
|
||||
IconComponent
|
||||
],
|
||||
templateUrl: './orders-table.component.html',
|
||||
styleUrl: './orders-table.component.css'
|
||||
})
|
||||
export class OrdersTableComponent {
|
||||
// Nimmt die anzuzeigenden Bestelldaten entgegen
|
||||
@Input() orders: Order[] = [];
|
||||
|
||||
// Gibt Events für die Aktionen aus, mit der ID der betroffenen Bestellung
|
||||
@Output() viewDetails = new EventEmitter<string>();
|
||||
@Output() editOrder = new EventEmitter<string>();
|
||||
@Output() deleteOrder = new EventEmitter<string>();
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Verschieben Sie alle .sidebar... und .nav-item... Klassen aus styles.css hierher */
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: background-color var(--transition-speed),
|
||||
border-color var(--transition-speed);
|
||||
}
|
||||
.sidebar-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--color-text-light);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-speed);
|
||||
}
|
||||
.nav-item app-icon {
|
||||
font-size: 20px; /* Steuert die Größe des Icons */
|
||||
transition: color var(--transition-speed);
|
||||
}
|
||||
.nav-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
:host-context(body.dark-theme) .nav-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.nav-item.active {
|
||||
background: var(--color-primary-gradient);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
.nav-item.active app-icon {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h1 class="sidebar-title">CustomDash</h1>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a
|
||||
class="nav-item"
|
||||
[class.active]="activeRoute === 'dashboard'"
|
||||
(click)="setActive('dashboard')"
|
||||
>
|
||||
<app-icon name="placeholder"></app-icon>
|
||||
<span>Übersicht</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="nav-item"
|
||||
[class.active]="activeRoute === 'analytics'"
|
||||
(click)="setActive('analytics')"
|
||||
>
|
||||
<app-icon name="placeholder"></app-icon>
|
||||
<span>Analysen</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="nav-item"
|
||||
[class.active]="activeRoute === 'reports'"
|
||||
(click)="setActive('reports')"
|
||||
>
|
||||
<app-icon name="placeholder"></app-icon>
|
||||
<span>Berichte</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<a
|
||||
class="nav-item"
|
||||
[class.active]="activeRoute === 'settings'"
|
||||
(click)="setActive('settings')"
|
||||
>
|
||||
<app-icon name="placeholder"></app-icon>
|
||||
<span>Einstellungen</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { IconComponent } from '../../ui/icon/icon.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
standalone: true,
|
||||
imports: [CommonModule, IconComponent],
|
||||
templateUrl: './sidebar.component.html',
|
||||
styleUrl: './sidebar.component.css'
|
||||
})
|
||||
export class SidebarComponent {
|
||||
// Wir verwalten nur noch, welcher Link aktiv ist. 'dashboard' ist der Standard.
|
||||
activeRoute = 'dashboard';
|
||||
|
||||
// Methode, um den aktiven Link bei einem Klick zu ändern.
|
||||
// In einer echten App würde dies durch den Angular Router gesteuert werden.
|
||||
setActive(route: string): void {
|
||||
this.activeRoute = route;
|
||||
}
|
||||
}
|
||||
@@ -1,31 +1,46 @@
|
||||
/* Verschieben Sie diese Stile aus styles.css hierher */
|
||||
:host {
|
||||
position: relative; /* Wichtig, damit das Panel sich daran ausrichtet */
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-trigger {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Der unsichtbare Hintergrund, der die ganze Seite abdeckt */
|
||||
.menu-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 899; /* Direkt unter dem Menü-Panel */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
top: calc(100% + 8px); /* Position direkt unter dem Trigger */
|
||||
min-width: 200px;
|
||||
padding: 0.5rem 0;
|
||||
z-index: 900;
|
||||
z-index: 900; /* Über dem Backdrop */
|
||||
border: 1px solid var(--color-border);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity var(--transition-speed), transform var(--transition-speed);
|
||||
box-shadow: var(--box-shadow-md);
|
||||
}
|
||||
|
||||
:host-context(.open) .menu-panel {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
/* Ausrichtung des Panels */
|
||||
.menu-panel.align-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.menu-panel.align-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Wir verwenden ::ng-deep, um die Stile auf die von außen projizierten Elemente anzuwenden */
|
||||
::ng-deep .menu-item {
|
||||
/* Stile für die Menü-Items */
|
||||
.menu-item {
|
||||
display: block;
|
||||
padding: 0.6rem 1.25rem;
|
||||
color: var(--color-text);
|
||||
@@ -34,11 +49,14 @@
|
||||
transition: background-color 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep .menu-item:hover {
|
||||
.menu-item:hover {
|
||||
background-color: var(--color-body-bg);
|
||||
}
|
||||
|
||||
::ng-deep .menu-item-danger {
|
||||
.menu-item-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@@ -1,11 +1,26 @@
|
||||
<div class="menu-container" [class.open]="isOpen">
|
||||
<!-- Hier wird der Button, der das Menü auslöst, von außen eingefügt -->
|
||||
<div (click)="toggle()">
|
||||
<ng-content select="[menu-trigger]"></ng-content>
|
||||
</div>
|
||||
<div class="menu-container" [class.open]="isMenuOpen">
|
||||
|
||||
<div class="menu-panel card">
|
||||
<!-- Hier werden die Menü-Einträge von außen eingefügt -->
|
||||
<ng-content></ng-content>
|
||||
<!-- Der Trigger-Button bleibt Teil der Komponente -->
|
||||
<app-button (click)="isMenuOpen = !isMenuOpen">
|
||||
Menü öffnen
|
||||
</app-button>
|
||||
|
||||
<!-- Das Panel wird nur angezeigt, wenn das Menü offen ist -->
|
||||
<div *ngIf="isMenuOpen" class="menu-panel card" @menuAnimation>
|
||||
|
||||
<!-- Schleife, die die dynamischen Einträge rendert -->
|
||||
<ng-container *ngFor="let item of items">
|
||||
<!-- Zeigt einen Trenner an, wenn `dividerBefore` true ist -->
|
||||
<hr class="divider" *ngIf="item.dividerBefore" />
|
||||
|
||||
<!-- Der eigentliche Menü-Eintrag -->
|
||||
<a
|
||||
class="menu-item"
|
||||
[class.menu-item-danger]="item.isDanger"
|
||||
(click)="onItemClick(item)">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,18 +1,44 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { trigger, transition, style, animate } from '@angular/animations';
|
||||
import { ButtonComponent } from '../../ui/button/button.component';
|
||||
|
||||
// Interface, das die Struktur eines Menü-Eintrags definiert
|
||||
export interface MenuItem {
|
||||
label: string;
|
||||
action: () => void; // Funktion, die bei Klick ausgeführt wird
|
||||
isDanger?: boolean; // Für rote Färbung
|
||||
dividerBefore?: boolean; // Um einen Trenner davor anzuzeigen
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule,ButtonComponent],
|
||||
templateUrl: './menu.component.html',
|
||||
styleUrl: './menu.component.css'
|
||||
styleUrl: './menu.component.css',
|
||||
animations: [
|
||||
trigger('menuAnimation', [
|
||||
transition(':enter', [
|
||||
style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }),
|
||||
animate('150ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))
|
||||
]),
|
||||
transition(':leave', [
|
||||
animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }))
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class MenuComponent {
|
||||
@Input() triggerText = 'Menü öffnen';
|
||||
isOpen = false;
|
||||
// Zustand, ob das Menü offen oder geschlossen ist
|
||||
isMenuOpen = false;
|
||||
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
// Input, um die dynamischen Menü-Einträge von der Eltern-Komponente zu erhalten
|
||||
@Input() items: MenuItem[] = [];
|
||||
|
||||
// Methode, die aufgerufen wird, wenn ein Item geklickt wird
|
||||
onItemClick(item: MenuItem): void {
|
||||
item.action(); // Führt die definierte Aktion aus
|
||||
this.isMenuOpen = false; // Schließt das Menü
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* Stile, die NUR für diese Button-Komponente gelten */
|
||||
:host {
|
||||
display: inline-block; /* Sorgt für korrektes Layout-Verhalten */
|
||||
}
|
||||
|
||||
/* Basis-Stil für alle Buttons */
|
||||
.btn {
|
||||
position: relative; /* Wichtig für den Ripple-Effekt */
|
||||
overflow: hidden; /* Verhindert, dass der Ripple über den Button hinausgeht */
|
||||
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0.6rem 1.2rem;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
/* Stellt sicher, dass der Inhalt (Text/Icon) zentriert ist */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--box-shadow-md);
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
/* Kleiner "Drück"-Effekt beim aktiven Klick */
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
}
|
||||
|
||||
/* Farbvarianten */
|
||||
.btn-primary {
|
||||
background: var(--color-primary-gradient);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.btn-stroked {
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
.btn-flat {
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
box-shadow: none; /* Flat-Buttons haben keinen Schatten */
|
||||
}
|
||||
.btn-icon {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-light);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-icon:hover:not(:disabled) {
|
||||
background-color: var(--color-border);
|
||||
transform: none; /* Kein Hover-Effekt für Icon-Buttons */
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-icon-danger:hover:not(:disabled) {
|
||||
background-color: #fee2e2;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
:host-context(body.dark-theme) .btn-icon-danger:hover:not(:disabled) {
|
||||
background-color: #991b1b;
|
||||
}
|
||||
|
||||
/* Deaktivierter Zustand */
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Modifikatoren */
|
||||
.btn-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Klick-Effekt (Ripple) */
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple-effect 0.6s linear;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.btn-secondary .ripple, .btn-stroked .ripple, .btn-flat .ripple, .btn-icon .ripple {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes ripple-effect {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,16 @@
|
||||
<button
|
||||
[type]="type"
|
||||
[type]="submitType"
|
||||
[disabled]="disabled"
|
||||
class="btn"
|
||||
[class.btn-primary]="color === 'primary'"
|
||||
[class.btn-secondary]="color === 'secondary'"
|
||||
[class.btn-stroked]="color === 'stroked'"
|
||||
[class.btn-flat]="color === 'flat'"
|
||||
[class.btn-icon]="color === 'icon' || color === 'icon-danger'"
|
||||
[class.btn-icon-danger]="color === 'icon-danger'"
|
||||
[class.btn-primary]="buttonType === 'primary'"
|
||||
[class.btn-secondary]="buttonType === 'secondary'"
|
||||
[class.btn-stroked]="buttonType === 'stroked'"
|
||||
[class.btn-flat]="buttonType === 'flat'"
|
||||
[class.btn-icon]="buttonType === 'icon' || buttonType === 'icon-danger'"
|
||||
[class.btn-icon-danger]="buttonType === 'icon-danger'"
|
||||
[class.btn-full-width]="fullWidth"
|
||||
[attr.data-tooltip]="tooltip"
|
||||
>
|
||||
<!-- HIER IST DIE KORREKTUR: Binding an [svgColor] statt [iconColor] -->
|
||||
[attr.data-tooltip]="tooltip">
|
||||
|
||||
<app-icon *ngIf="iconName" [name]="iconName" [svgColor]="svgColor"></app-icon>
|
||||
<ng-content></ng-content>
|
||||
</button>
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, ElementRef, Renderer2, HostListener } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { IconComponent } from '../icon/icon.component';
|
||||
|
||||
@@ -7,21 +7,48 @@ type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon
|
||||
@Component({
|
||||
selector: 'app-button',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
IconComponent
|
||||
],
|
||||
imports: [CommonModule, IconComponent],
|
||||
templateUrl: './button.component.html',
|
||||
styleUrl: './button.component.css'
|
||||
})
|
||||
export class ButtonComponent {
|
||||
@Input() color: ButtonColor = 'primary';
|
||||
@Input() type: 'button' | 'submit' = 'button';
|
||||
@Input() buttonType: ButtonColor = 'primary';
|
||||
@Input() submitType: 'button' | 'submit' = 'button';
|
||||
@Input() disabled = false;
|
||||
@Input() fullWidth = false;
|
||||
|
||||
@Input() tooltip: string | null = null;
|
||||
@Input() iconName: string | null = null;
|
||||
// --- HIER IST DIE KORREKTUR: Umbenennung zu svgColor ---
|
||||
@Input() svgColor: string | null = null; // Farbe des SVG-Inhalts im Button
|
||||
@Input() svgColor: string | null = null;
|
||||
|
||||
constructor(private el: ElementRef, private renderer: Renderer2) {}
|
||||
|
||||
// HostListener fängt Klick-Events direkt auf dem Host-Element (<app-button>) ab
|
||||
@HostListener('click', ['$event'])
|
||||
onClick(event: MouseEvent) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = this.el.nativeElement.querySelector('.btn');
|
||||
if (!button) return;
|
||||
|
||||
// Entferne alte Ripple-Effekte
|
||||
const existingRipple = button.querySelector('.ripple');
|
||||
if (existingRipple) {
|
||||
existingRipple.remove();
|
||||
}
|
||||
|
||||
// Erzeuge den Ripple-Effekt
|
||||
const circle = this.renderer.createElement('span');
|
||||
const diameter = Math.max(button.clientWidth, button.clientHeight);
|
||||
const radius = diameter / 2;
|
||||
|
||||
this.renderer.setStyle(circle, 'width', `${diameter}px`);
|
||||
this.renderer.setStyle(circle, 'height', `${diameter}px`);
|
||||
this.renderer.setStyle(circle, 'left', `${event.clientX - button.offsetLeft - radius}px`);
|
||||
this.renderer.setStyle(circle, 'top', `${event.clientY - button.offsetTop - radius}px`);
|
||||
this.renderer.addClass(circle, 'ripple');
|
||||
|
||||
this.renderer.appendChild(button, circle);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user