admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-08 19:27:46 +02:00
parent ee8974e2ff
commit c65aef11ca
66 changed files with 1691 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/features/demo/components/demo2/demo2.component.css Normal file
View File

501
src/app/features/demo/components/demo2/demo2.component.html Normal file
View File

@@ -0,0 +1,501 @@
<!-- =================================================================================
FINALES & VOLLSTÄNDIGES DEMO-LAYOUT (VERSION 5.0)
Aufgebaut aus wiederverwendbaren Komponenten
================================================================================== -->
<div class="dashboard-container">
<!-- =================================================================== -->
<!-- 1. SIDEBAR (Statisch, da sehr spezifisch für dieses Layout) -->
<!-- =================================================================== -->
<aside class="sidebar">
<div class="sidebar-header"><h1 class="sidebar-title">CustomDash</h1></div>
<nav class="sidebar-nav">
<a href="#" class="nav-item active"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline></svg
><span>Übersicht</span></a
>
<a href="#" class="nav-item"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line></svg
><span>Analysen</span></a
>
<a href="#" class="nav-item"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
></path></svg
><span>Berichte</span></a
>
</nav>
<div class="sidebar-footer">
<a href="#" class="nav-item"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.3 21.7c.9.9 2.5.9 3.4 0l6.9-6.9c.9-.9.9-2.5 0-3.4l-6.9-6.9c-.9-.9-2.5-.9-3.4 0l-6.9 6.9c-.9.9-.9-2.5 0 3.4l6.9 6.9z"
></path></svg
><span>Einstellungen</span></a
>
</div>
</aside>
<!-- =================================================================== -->
<!-- 2. HAUPTINHALT -->
<!-- =================================================================== -->
<main class="main-content">
<app-page-header></app-page-header>
<div class="dashboard-grid">
<!-- Sektion: KPI-Karten -->
<app-kpi-card value="€ 14.750" label="Umsatz (Monat)" color="sales"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="1" x2="12" y2="23"></line>
<path
d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
></path></svg
></app-kpi-card>
<app-kpi-card value="1.284" label="Neue Nutzer" color="users"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
></app-kpi-card>
<app-kpi-card value="312" label="Bestellungen" color="orders"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path></svg
></app-kpi-card>
<app-kpi-card value="99.8%" label="Verfügbarkeit" color="performance"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon
points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"
></polygon></svg
></app-kpi-card>
<app-card>
<h3 card-header>Letzte Bestellungen</h3>
<div class="table-container">
<table class="modern-table">
<thead>
<tr>
<th class="sortable">
<span>Kunde</span
><svg
class="sort-icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M8 3v18l8-9L8 3z"
transform="rotate(90 12 12)"
></path>
</svg>
</th>
<th>Bestell-ID</th>
<th>Status</th>
<th class="text-right">Betrag</th>
<th class="text-center">Aktionen</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="user-cell">
<img
src="https://i.pravatar.cc/40?u=max"
alt="Avatar Max Mustermann"
/>
<div>
<div class="user-name">Max Mustermann</div>
<div class="user-email">
max.mustermann&#64;example.com
</div>
</div>
</div>
</td>
<td><span class="mono">#10543</span></td>
<td>
<app-status-pill status="success"
>Abgeschlossen</app-status-pill
>
</td>
<td class="text-right amount">€ 129,99</td>
<td class="actions-cell">
<app-button color="icon" tooltip="Details anzeigen"
><svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
></path>
<circle cx="12" cy="12" r="3"></circle></svg></app-button
><app-button color="icon" tooltip="Bearbeiten"
><svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
></path>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
></path></svg></app-button
><app-button
color="icon-danger"
tooltip="Löschen"
(click)="openDialog()"
><svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line></svg
></app-button>
</td>
</tr>
<!-- Weitere Tabellenzeilen hier... -->
</tbody>
</table>
</div>
<app-paginator
[currentPage]="currentPage"
[totalItems]="totalItems"
[itemsPerPage]="itemsPerPage"
(pageChange)="onPageChange($event)"
></app-paginator>
</app-card>
<!-- Sektion: Diagramm & Tabelle -->
<app-card class="grid-col-span-2">
<h3 card-header>Umsatzentwicklung</h3>
<div class="chart-container">
<div class="chart-bar" style="height: 60%"><span>Jan</span></div>
<div class="chart-bar" style="height: 75%"><span>Feb</span></div>
<div class="chart-bar" style="height: 50%"><span>Mär</span></div>
<div class="chart-bar" style="height: 85%"><span>Apr</span></div>
<div class="chart-bar" style="height: 90%"><span>Mai</span></div>
<div class="chart-bar" style="height: 65%"><span>Jun</span></div>
</div>
</app-card>
<!-- UI Komponenten Showcase -->
<app-card class="grid-col-span-2">
<h3 card-header>Moderne Formular-Elemente</h3>
<div class="component-grid">
<app-form-field label="Name" type="text"></app-form-field>
<div class="form-field">
<select class="form-input" id="city">
<option>Berlin</option>
<option>München</option></select
><label for="city" class="form-label">Stadt</label>
</div>
<div class="form-field">
<textarea
class="form-input"
id="message"
placeholder=" "
rows="3"
></textarea
><label for="message" class="form-label">Ihre Nachricht</label>
</div>
<div class="form-group-inline">
<label>Benachrichtigungen</label
><app-slide-toggle></app-slide-toggle>
</div>
</div>
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Buttons, Chips & Interaktion</h3>
<div class="component-grid">
<div class="button-group">
<app-button color="primary">Primary</app-button>
<app-button color="secondary">Secondary</app-button>
<app-button color="icon" tooltip="Favorit hinzufügen"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
></path></svg
></app-button>
</div>
<div class="chip-set">
<app-chip label="Technologie" [removable]="true"></app-chip>
<app-chip
label="Angular"
[active]="true"
[removable]="true"
></app-chip>
</div>
<div class="badge-showcase">
<div class="badge-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg
><span class="badge-dot">3</span>
</div>
</div>
</div>
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Indikatoren & Feedback</h3>
<div class="card-body component-grid">
<app-button color="secondary" (click)="triggerSnackbar()"
>Snackbar anzeigen</app-button
>
<app-alert type="success"
><strong>Erfolg!</strong> Ihre Änderungen wurden
gespeichert.</app-alert
>
<app-alert type="danger"
><strong>Fehler!</strong> Bitte füllen Sie alle Felder
aus.</app-alert
>
</div>
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Navigation & Layout</h3>
<div class="component-grid">
<div class="tab-group">
<button class="tab-link active">Profil</button
><button class="tab-link">Konto</button>
</div>
<div class="form-group-inline">
<label>Lautstärke</label
><input
type="range"
class="form-slider"
min="0"
max="100"
value="50"
/>
</div>
<app-expansion-panel title="Weitere Details anzeigen">
Dieser Inhalt wird dynamisch ein- und ausgeblendet. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</app-expansion-panel>
<div class="stepper">
<div class="step step-complete">
<div class="step-icon">✓</div>
<span>Profil</span>
</div>
<div class="step-connector"></div>
<div class="step step-active">
<div class="step-icon">2</div>
<span>Konto</span>
</div>
<div class="step-connector"></div>
<div class="step">
<div class="step-icon">3</div>
<span>Abschluss</span>
</div>
</div>
</div>
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Ladezustände (Skeleton)</h3>
<div *ngIf="isLoading" class="component-grid">
<div class="skeleton-card card">
<app-skeleton type="avatar"></app-skeleton>
<div class="skeleton-content">
<app-skeleton type="line"></app-skeleton
><app-skeleton type="line" width="70%"></app-skeleton>
</div>
</div>
<div class="skeleton-card card">
<app-skeleton type="avatar"></app-skeleton>
<div class="skeleton-content">
<app-skeleton type="line" width="50%"></app-skeleton
><app-skeleton type="line" width="80%"></app-skeleton>
</div>
</div>
</div>
<div class="card-body" *ngIf="!isLoading">
<app-alert type="success"
><strong>Inhalt erfolgreich geladen!</strong></app-alert
>
</div>
</app-card>
</div>
</main>
<!-- 3. OVERLAYS -->
<app-dialog
[isOpen]="isDialogOpen"
(close)="closeDialog()"
title="Bestellung löschen?"
>
<div dialog-content>
<div class="dialog-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</div>
<p>Sind Sie sicher? Diese Aktion kann nicht rückgängig gemacht werden.</p>
</div>
<div dialog-actions>
<app-button color="stroked" (click)="closeDialog()">Abbrechen</app-button>
<app-button color="primary" (click)="closeDialog()"
>Ja, endgültig löschen</app-button
>
</div>
</app-dialog>
</div>

83
src/app/features/demo/components/demo2/demo2.component.ts Normal file
View File

@@ -0,0 +1,83 @@
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SnackbarService } from '../../../../shared/services/snackbar.service';
// Importieren ALLER wiederverwendbaren Komponenten, die im Template genutzt werden
import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
import { CardComponent } from '../../../../shared/components/ui/card/card.component';
import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';
import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
import { KpiCardComponent } from '../../../../shared/components/data-display/kpi-card/kpi-card.component';
import { PageHeaderComponent } from '../../../../shared/components/layout/page-header/page-header.component';
import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
import { StatusPillComponent } from '../../../../shared/components/ui/status-pill/status-pill.component';
import { DialogComponent } from '../../../../shared/components/overlays/dialog/dialog.component';
import { MenuComponent } from '../../../../shared/components/overlays/menu/menu.component';
import { AlertComponent } from '../../../../shared/components/ui/alert/alert.component';
import { PaginatorComponent } from '../../../../shared/components/data-display/paginator/paginator.component';
import { SkeletonComponent } from '../../../../shared/components/ui/skeleton/skeleton.component';
import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';
@Component({
selector: 'app-demo2',
standalone: true,
imports: [
CommonModule,
ButtonComponent,
CardComponent,
ChipComponent,
FormFieldComponent,
KpiCardComponent,
PageHeaderComponent,
SlideToggleComponent,
StatusPillComponent,
DialogComponent,
MenuComponent,
AlertComponent,
PaginatorComponent,
SkeletonComponent,
ExpansionPanelComponent,
],
templateUrl: './demo2.component.html',
styleUrl: './demo2.component.css',
})
export class Demo2Component implements OnInit {
// Zustands-Variablen für diese Demo-Seite
isLoading = true;
isDialogOpen = false;
isComponentMenuOpen = false;
// Eigenschaften für den Paginator
currentPage = 1;
totalItems = 123;
itemsPerPage = 10;
constructor(private snackbarService: SnackbarService) {}
ngOnInit(): void {
setTimeout(() => {
this.isLoading = false;
}, 2000);
}
// Methoden für den Dialog
openDialog(): void {
this.isDialogOpen = true;
}
closeDialog(): void {
this.isDialogOpen = false;
}
// Methode für den Snackbar-Trigger
triggerSnackbar(): void {
const time = new Date().toLocaleTimeString();
this.snackbarService.show('Neues Ereignis um ' + time);
}
// Methode für den Paginator
onPageChange(newPage: number): void {
this.currentPage = newPage;
console.log('Wechsle zu Seite:', newPage);
// Hier würde die Logik zum Neuladen der Tabellendaten folgen
}
}