Skip to content

feat(a15): Einheitliches Tabellen-/Listen-Designsystem - #75

Merged
TBum1404 merged 6 commits into
feature/wizard-redesignfrom
feat/a15-table-system
Jul 18, 2026
Merged

feat(a15): Einheitliches Tabellen-/Listen-Designsystem#75
TBum1404 merged 6 commits into
feature/wizard-redesignfrom
feat/a15-table-system

Conversation

@TBum1404

@TBum1404 TBum1404 commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

A15 – Einheitliches Tabellen-/Listen-Designsystem

Was: Die wiederkehrenden Tabellen/Listen im Wizard wurden auf ein gemeinsames Auswahl-Designsystem vereinheitlicht (geteilte Mixins in _wizard-shared.scss, angewendet in Schritt 2/3/4): Auswahl-Checkbox links, eine Tri-State-„Select all"-Checkbox im Kopf (kein separater Button, kein doppelter Zähler), Suchfeld bleibt, eine einzige Akzentfarbe, keine Typ-Farbcodierung der Zeilen. Akzent ist die bestehende $active-color (#00bcd4 Cyan) aus _variables.scss, dunkleres Teal $status-info (#00838f) für den Auswahl-Zähler — kein neues Farb-Token eingeführt. Header- und Zeilen-Checkbox teilen dieselbe Zellen-Geometrie (44px Breite / 12px links, 15px Box) und stehen so auf einer vertikalen Linie.

Manuell testen:

  • Schritt 2 (Column Selection): Header-Checkbox sitzt exakt auf der senkrechten Linie über den Zeilen-Checkboxen; Umschalten wählt alle/keine (Zwischenzustand bei Teilauswahl). Statt der alten „Select All / Deselect All"-Buttons + Pills nur noch ein Zähler „N of M selected" in Cyan/Teal.
  • Schritt 3 (Configure Data Features): Zeilen-Checkbox links; Auswahl-Hervorhebung und „in projection"-Zähler in Cyan; die Duplikat-Vorschau nutzt die gemeinsame Tabellenkomponente.
  • Schritt 4 (Visualization Settings): Projektions-Checkboxen 15px/Cyan; aktivierte Methoden-Cards mit Cyan-Tönung; Reihenfolge-Badges der Features in Cyan.
  • Schritt-übergreifend: Checkbox-Größe, Cyan-Akzent und linke Platzierung sehen in Schritt 2/3/4 identisch aus; keine Zeile ist nach Datentyp eingefärbt.

Hinweise:

  • Die Typ-Badges (data-type-badge) behalten ihre Farben — die beiden Design-Dateien widersprechen sich hier; bewusst offen gelassen für eine separate Entscheidung.
  • Fehlend/Warnung-Badges bleiben farbig (Info-Träger); die exakte ≥20%-Rot/Amber-Abstufung aus der Vorlage wurde nicht nachgebaut (Hex nicht in _variables.scss) — bei Bedarf nachziehbar.
  • Erwarteter Merge-Konflikt mit A13 und A5 (alle drei bearbeiten Schritt 4); Merge-Reihenfolge A13 → A15 → A5.

Gemeinsame Auswahl-Mixins in _wizard-shared.scss; Auswahl links, Tri-State-
Select-all im Kopf, keine Typ-Farbcodierung. Akzent nutzt bestehende
$active-color (#00bcd4) statt eines neuen Tokens; Header- und Zeilen-Checkbox
vertikal ausgerichtet (15px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@TBum1404

Copy link
Copy Markdown
Collaborator Author
  • it is too colorful. the design specifically displays the types as "labels". Colors for distribution should be cyan for all distributions (no colorvariations).
image - for the list on step add a functional searchbar and filter (by type) - make sure to implement the anatomy of the searchbars and filters like in the design All in all less color, if color is needed, use the cyan accentcolor.

TBum1404 and others added 2 commits July 17, 2026 15:35
Typ als farbloses Label (data-type-badge entfaerbt); Distribution durchgehend
Cyan; funktionale Suche + Typ-Filter in Schritt 3. Schritt 3 als Master-Rail +
eingelassenes Imprint-Well mit Breadcrumb, Warning-Counts und Settings-Card.
Keine Projektions-Auswahl mehr in Schritt 3 (liegt in Schritt 4 / A13).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…Drop-in, Scroll

Suche + Typ-Filter ueber der Available-Liste; Drag-and-drop-Reihenfolge der
gewaehlten Features (Reihenfolge persistiert); Drag-in aus Available an Position
und Drag-out zum Entfernen (Klick-Add/Remove bleibt); max-height + Scroll auf
beiden Listen, damit das Layout bei vielen Spalten haelt. Natives HTML5-DnD.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@TBum1404

Copy link
Copy Markdown
Collaborator Author
  • Step 4: Glyph Preview has a display issue, long names are cut off although they could still be displayed.
image
  • The Smart Suggestions Button from Glyph Features does not fit the current design, apply the design of the "continue buttons" to it
  • when hovering over the available features options, the cursor should also change to grab when "holding" the left click button and draging the option

…, Drag-Cursor

Lange Feature-Namen in der Glyph-Preview nicht mehr abgeschnitten (overflow
visible, keine 14-Zeichen-Kuerzung); Smart-Suggestions-Button auf den
Continue-Button-Stil (btn-primary, cyan); grab/grabbing-Cursor auf Available-Rows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@TBum1404

Copy link
Copy Markdown
Collaborator Author

ready to merge

TBum1404 and others added 2 commits July 18, 2026 18:27
step3.html-Konflikt zugunsten des A15 Option-1d-Redesigns aufgeloest;
step3.ts/step4.* auto-gemerged, Build gruen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
$wizard-header-row-height + list-header-row Mixin in _wizard-shared.scss;
angewandt auf Schritt-2-Tabellenkopf und alle Schritt-4-Listenkoepfe inkl.
A13 Projection-Columns-Header/Select-all-Zeile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@TBum1404
TBum1404 merged commit a31070f into feature/wizard-redesign Jul 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant