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-16 16:11:30 +02:00
parent 1ad34a9ecf
commit 1bb9a408b8
17 changed files with 257 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/auth/components/auth-layout/auth-layout.component.html
View File

@@ -1,3 +1,5 @@
<div class="auth-container">
<div class="auth-card card">
<div class="auth-header">

7
src/app/features/auth/components/auth-layout/auth-layout.component.ts
View File

@@ -1,13 +1,12 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CardComponent } from '../../../../shared/components/ui/card/card.component';
@Component({
selector: 'app-auth-layout',
imports: [
RouterOutlet
],
imports: [RouterOutlet, CardComponent],
templateUrl: './auth-layout.component.html',
styleUrl: './auth-layout.component.css'
styleUrl: './auth-layout.component.css',
})
export class AuthLayoutComponent {
// Diese Komponente benötigt in der Regel keine eigene Logik.

11
src/app/features/auth/components/login/login.component.css
View File

@@ -1,11 +0,0 @@
/* src\app\features\auth\components\login\login.component.css */
@import '../../_auth-common.css';
/* Stile NUR für die Login-Seite */
:host { display: block; width: 100%; }
.form-actions {
text-align: right;
margin-top: -0.75rem;
margin-bottom: 0.5rem;
}

18
src/app/features/auth/components/login/login.component.ts
View File

@@ -1,16 +1,26 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
// WICHTIG: ReactiveFormsModule HIER importieren
import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
import {
ReactiveFormsModule,
FormBuilder,
Validators,
FormGroup,
} from '@angular/forms';
import { RouterLink } from '@angular/router';
// Importieren der wiederverwendbaren Komponenten
import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
@Component({
selector: 'app-login',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
RouterLink,
ReactiveFormsModule // <-- HIER IST DIE KORREKTUR. Jetzt kennt die Komponente [formGroup].
ButtonComponent,
FormFieldComponent,
],
templateUrl: './login.component.html',
styleUrl: './login.component.css',

135
src/app/features/demo/components/demo2/demo2.component.html
View File

@@ -1,24 +1,19 @@
<main>
<app-slide-toggle
label="Dark Mode"
[ngModel]="darkModeAktiv"
(ngModelChange)="onDarkModeChange($event)"
name="mainDarkModeToggle"
></app-slide-toggle>
<div class="dashboard-grid grid-col-span-4">
<app-kpi-card
*ngFor="let kpi of kpiData"
[value]="kpi.value"
[label]="kpi.label"
[color]="kpi.color"
[iconName]="kpi.iconName"
>
</app-kpi-card>
<div class="grid-col-span-4">
<app-page-header></app-page-header>
</div>
<app-kpi-card
*ngFor="let kpi of kpiData"
[value]="kpi.value"
[label]="kpi.label"
[color]="kpi.color"
[iconName]="kpi.iconName"
>
</app-kpi-card>
<div class="grid-col-span-4">
<app-form-group title="Table">
<app-form-group title="Data-display Components">
<app-orders-table
[data]="ordersData"
[itemsPerPage]="5"
@@ -32,7 +27,7 @@
<div class="grid-col-span-2">
<app-form-group
title="Persönliche Daten"
title="Form Components 1"
description="Diese Informationen sind öffentlich sichtbar."
>
<app-form-select
@@ -55,7 +50,7 @@
<div class="grid-col-span-2">
<app-form-group
title="Anwendungs-Einstellungen"
title="Form Components 2"
description="Diese Informationen sind öffentlich sichtbar."
>
<app-slide-toggle
@@ -80,4 +75,106 @@
></app-slide-toggle>
</app-form-group>
</div>
<div class="grid-col-span-2">
<app-form-group
title="Layout Components"
description="Diese Informationen sind öffentlich sichtbar."
>
<app-expansion-panel title="Weitere Details anzeigen...">
Dieser Inhalt wird jetzt von einer wiederverwendbaren Komponente
gesteuert. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</app-expansion-panel>
</app-form-group>
</div>
<div class="grid-col-span-2">
<app-form-group title="Button Components" description="UI Components">
<!-- Sektion 1: Standard-Buttons -->
<div class="button-group">
<app-button buttonType="primary" tooltip="Primäre Aktion"
>Primary</app-button
>
<app-button buttonType="secondary" tooltip="Sekundäre Aktion"
>Secondary</app-button
>
<app-button buttonType="stroked" tooltip="Hervorgehoben"
>Stroked</app-button
>
<app-button buttonType="flat" tooltip="Weniger wichtige Aktion"
>Flat</app-button
>
</div>
<!-- Sektion 2: Buttons mit Icon und Text -->
<div class="button-group">
<app-button buttonType="primary" iconName="edit">Bearbeiten</app-button>
<app-button buttonType="secondary" iconName="shopping_bag"
>Zum Warenkorb</app-button
>
</div>
<!-- Sektion 3: Reine Icon-Buttons -->
<div class="button-group">
<app-button
buttonType="icon"
tooltip="Favorit hinzufügen"
iconName="favorite"
svgColor="red"
></app-button>
<app-button
buttonType="icon"
tooltip="Details anzeigen"
iconName="eye"
></app-button>
<app-button
buttonType="icon"
tooltip="Benutzer"
iconName="group"
></app-button>
<app-button
buttonType="icon"
tooltip="Performance"
iconName="bolt"
></app-button>
<app-button
buttonType="icon-danger"
tooltip="Löschen"
iconName="delete"
></app-button>
</div>
<!-- Sektion 4: Paginator Icon-Buttons (Beispiel) -->
<div class="button-group">
<app-button
buttonType="icon"
tooltip="Zurück"
iconName="chevron_backward"
></app-button>
<app-button
buttonType="icon"
tooltip="Weiter"
iconName="chevron_forward"
></app-button>
</div>
<!-- Sektion 5: Deaktivierte Zustände -->
<div class="button-group">
<app-button buttonType="primary" [disabled]="true"
>Deaktiviert</app-button
>
<app-button
buttonType="icon"
iconName="money"
[disabled]="true"
tooltip="Nicht verfügbar"
></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>
</app-form-group>
</div>
</main>

13
src/app/features/demo/components/demo2/demo2.component.ts
View File

@@ -32,6 +32,14 @@ import { SlideToggleComponent } from '../../../../shared/components/form/slide-t
import { isPlatformBrowser } from '@angular/common';
import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';
import { PageHeaderComponent } from '../../../../shared/components/layout/page-header/page-header.component';
import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';
// Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
interface Kpi {
value: string;
@@ -54,6 +62,10 @@ interface Kpi {
FormsModule,
FormTextareaComponent,
SlideToggleComponent,
ExpansionPanelComponent,
PageHeaderComponent,
ButtonComponent,
ChipComponent
],
templateUrl: './demo2.component.html',
})
@@ -257,6 +269,7 @@ export class Demo2Component {
this.renderer.removeClass(this.document.body, 'dark-theme');
}
}
handleDeleteOrder(orderId: string): void {
console.log('Lösche Bestellung mit ID:', orderId);
// Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen

2
src/app/shared/components/data-display/orders-table/orders-table.component.css
View File

@@ -93,7 +93,7 @@
.actions-cell {
display: flex;
justify-content: center;
justify-content: right;
gap: 0.5rem;
}

4
src/app/shared/components/data-display/orders-table/orders-table.component.html
View File

@@ -6,7 +6,7 @@
<th>Bestell-ID</th>
<th>Status</th>
<th class="text-right">Betrag</th>
<th class="text-center">Aktionen</th>
<th class="text-right">Aktionen</th>
</tr>
</thead>
<tbody>
@@ -33,7 +33,7 @@
}}</app-status-pill>
</td>
<td class="amount">{{ order.amount }}</td>
<td class="actions-cell">
<td class="actions-cell text-right">
<app-button
buttonType="icon"
tooltip="Details anzeigen"

73
src/app/shared/components/form/form.css
View File

@@ -1,73 +0,0 @@
/* =================================================================================
* GEMEINSAME BASIS-STILE FÜR ALLE FORMULAR-KOMPONENTEN
* ================================================================================= */
/* Stellt sicher, dass die Host-Komponente als Block-Element gerendert wird */
:host {
display: block;
}
/* Der Wrapper für das Label und das Eingabefeld */
.form-field {
position: relative;
}
/* Das "schwebende" Label */
.form-label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: var(--color-text-light);
background-color: var(--color-surface);
padding: 0 0.25rem;
transition: all 0.2s ease-out;
pointer-events: none;
border-radius: var(--border-radius-sm);
}
/* Passt die Hintergrundfarbe des Labels für das Dark Theme an */
:host-context(body.dark-theme) .form-label {
background-color: var(--color-surface);
}
/* Gemeinsame Stile für <input>, <select> und <textarea> */
.form-input {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
background-color: var(--color-surface);
color: var(--color-text);
font-size: 1rem;
font-family: inherit; /* Stellt eine einheitliche Schriftart sicher */
transition: border-color var(--transition-speed);
}
/* Fokus-Zustand für alle Eingabefelder */
.form-input:focus {
outline: none;
border-color: var(--color-primary);
}
/* Logik, die das Label nach oben bewegt */
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
top: 0;
font-size: 0.8rem;
color: var(--color-primary);
}
/* Spezieller Fix für den Autofill-Hintergrund in Webkit-Browsern (Chrome, Edge) */
.form-input:-webkit-autofill ~ .form-label {
top: 0;
font-size: 0.8rem;
color: var(--color-primary);
}
/* Layout-Helfer für Formulargruppen */
.form-group-inline {
display: flex;
justify-content: space-between;
align-items: center;
}

10
src/app/shared/components/layout/page-header/page-header.component.css
View File

@@ -1,4 +1,3 @@
/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
:host {
display: block;
}
@@ -7,20 +6,23 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
/* .header-left {
Platzhalter für zukünftige Elemente wie Seitentitel oder Breadcrumbs
} */
.header-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
/* Responsivität für den Header */
/* Responsivität NUR für den Header */
@media (max-width: 768px) {
.main-header {
flex-direction: column;
gap: 1rem;
gap: 1.5rem; /* Etwas mehr Abstand für mobile Ansicht */
align-items: stretch;
}
}

13
src/app/shared/components/layout/page-header/page-header.component.html
View File

@@ -1,14 +1,15 @@
<header class="main-header">
<!-- Linker Bereich: Hier könnte später ein Titel oder Breadcrumbs via ng-content platziert werden -->
<div class="header-left">
<app-search-bar></app-search-bar>
</div>
<!-- Rechter Bereich mit den Aktionen -->
<div class="header-actions">
<app-theme-switcher></app-theme-switcher>
<app-slide-toggle
label="Dark Mode"
[ngModel]="darkModeAktiv"
(ngModelChange)="onDarkModeChange($event)"
name="mainDarkModeToggle"
></app-slide-toggle>
<app-user-profile></app-user-profile>
</div>
</header>

79
src/app/shared/components/layout/page-header/page-header.component.ts
View File

@@ -1,8 +1,16 @@
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
Component,
Inject,
PLATFORM_ID,
Renderer2,
OnInit,
AfterViewInit,
} from '@angular/core';
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
import { SearchBarComponent } from '../search-bar/search-bar.component';
import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
import { UserProfileComponent } from '../user-profile/user-profile.component';
import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-page-header',
@@ -10,12 +18,67 @@ import { UserProfileComponent } from '../user-profile/user-profile.component';
imports: [
CommonModule,
SearchBarComponent,
ThemeSwitcherComponent,
UserProfileComponent
UserProfileComponent,
SlideToggleComponent,
FormsModule,
],
templateUrl: './page-header.component.html',
styleUrl: './page-header.component.css'
styleUrl: './page-header.component.css',
})
export class PageHeaderComponent {
// Hier könnten später z.B. der Seitentitel oder Breadcrumbs übergeben werden
export class PageHeaderComponent implements OnInit, AfterViewInit {
private readonly darkModeKey = 'app-dark-mode-setting';
darkModeAktiv: boolean = false;
constructor(
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
@Inject(PLATFORM_ID) private platformId: Object
) {}
ngOnInit(): void {
this.loadThemeSetting();
}
ngAfterViewInit(): void {
this.updateTheme(this.darkModeAktiv);
}
private loadThemeSetting(): void {
if (isPlatformBrowser(this.platformId)) {
try {
const storedValue = localStorage.getItem(this.darkModeKey);
// Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
this.darkModeAktiv = storedValue === 'true';
} catch (e) {
console.error('Could not access localStorage:', e);
}
}
// Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
this.updateTheme(this.darkModeAktiv);
}
onDarkModeChange(isEnabled: boolean): void {
this.darkModeAktiv = isEnabled;
// --- KORREKTUR 2: Speichere die neue Einstellung ---
if (isPlatformBrowser(this.platformId)) {
try {
localStorage.setItem(this.darkModeKey, String(isEnabled));
} catch (e) {
console.error('Could not write to localStorage:', e);
}
}
// Wende die visuelle Änderung an.
this.updateTheme(isEnabled);
}
// This method is CORRECT. It just needs to be called.
private updateTheme(isEnabled: boolean): void {
if (isEnabled) {
this.renderer.addClass(this.document.body, 'dark-theme');
} else {
this.renderer.removeClass(this.document.body, 'dark-theme');
}
}
}

12
src/app/shared/components/layout/theme-switcher/theme-switcher.component.css
View File

@@ -1,12 +0,0 @@
:host {
display: block;
}
.theme-switcher {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--color-text-light);
font-weight: 500;
font-size: 0.9rem;
}

5
src/app/shared/components/layout/theme-switcher/theme-switcher.component.html
View File

@@ -1,5 +0,0 @@
<div class="theme-switcher">
<label>Dark Mode</label>
<app-slide-toggle [(ngModel)]="isDarkMode" (ngModelChange)="toggleTheme($event)"></app-slide-toggle>
</div>

35
src/app/shared/components/layout/theme-switcher/theme-switcher.component.ts
View File

@@ -1,35 +0,0 @@
import { Component, Renderer2, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // FormsModule importieren
import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
@Component({
selector: 'app-theme-switcher',
standalone: true,
imports: [
CommonModule,
SlideToggleComponent,
FormsModule // <-- HIER IST DIE KORREKTUR
],
templateUrl: './theme-switcher.component.html',
styleUrl: './theme-switcher.component.css'
})
export class ThemeSwitcherComponent implements OnInit {
isDarkMode = false;
constructor(private renderer: Renderer2) {}
ngOnInit(): void {
// Hier könnte man den Zustand aus dem localStorage laden
}
// Die Methode akzeptiert jetzt direkt den neuen boolean-Wert
toggleTheme(isDarkMode: boolean): void {
this.isDarkMode = isDarkMode;
if (this.isDarkMode) {
this.renderer.addClass(document.body, 'dark-theme');
} else {
this.renderer.removeClass(document.body, 'dark-theme');
}
}
}

18
src/styles.css
View File

@@ -84,14 +84,15 @@ body.no-scroll {
text-align: center !important;
}
.dashboard-grid {
/* .dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
} */
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1rem;
gap: 1rem;
}
@@ -152,3 +153,16 @@ main {
/* ========================================================================================== */
/* ========================================================================================== */
.button-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.chip-set {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

2
src/styles_OLD.css
View File

@@ -278,12 +278,14 @@ body.dark-theme .nav-item:hover {
.text-center {
text-align: center;
}
.button-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.btn {
border: none;
border-radius: var(--border-radius-md);