search

IHK-GfI / lux-components

Other
16 stars 5 forks source link

lux-popup: Austausch von Flex-Layout #399

Closed patrowe closed 8 months ago

patrowe commented 9 months ago

Aus den Komponenten lux-dialog (inkl. Subkomponenten) und lux-snackbar müssen die Befehle von angular/flex-layout ersetzt werden.

Akzeptanzkriterium: Die oben genannten Komponenten enthalten keien Befehle mehr von angular/flex-layout. Das Layout der Komponenten, bleibt weitestgehend erhalten.

patrowe commented 8 months ago

Die Anforderungen wurden umgesetzt. Bitte Testen.

patrowe commented 8 months ago

Test für LUX-Snackbar:

Testvorbedingungen:

  1. Die angehängten Zweige für die Lux-Components und das Lux-Components-Theme auschecken.
  2. Das Theme lokal bauen und lokal mit den Components verlinken.
  3. Die Demo starten und die Seite für die Lux-Snackbar öffnen.

Testdurchführung:

  1. Auf den Button "Snackbar einblenden" klicken. -> Die Standardansicht einer Snackbar wird für die Desktopansicht rechtsbündig, für Mobile linksbündig, unterhalb des App-Headers angezeigt. Desktop: Bildschirmfoto 2024-01-25 um 12 49 35 Mobil: Bildschirmfoto 2024-01-25 um 12 51 14

  2. Für die Properties "textColor", "iconColor" und "actionColor" jeweils eine andere Farbe auswählen und die Snackbar einblenden lassen. -> Die entsprechenden Farben werden für die einzelnen Elemente angezeigt. z.B. Bildschirmfoto 2024-01-25 um 12 54 47

  3. In das Feld Text folgenden Text einfügen. "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor." -> Der Text bricht um und in der Mobilen Variante wird der rechte Rand nicht abgenschitten. Desktop: Bildschirmfoto 2024-01-25 um 13 00 39 Mobil: Bildschirmfoto 2024-01-25 um 12 58 09

  4. Die Property iconSize schrittweise erhöhen. -> Die Größe des Icons verändert sich entsprechend und das Icon wird immer vollständig angezeigt. Zum Vergleich "1x": Bildschirmfoto 2024-01-25 um 13 03 35 "2x": Bildschirmfoto 2024-01-25 um 13 04 52 "3x": Bildschirmfoto 2024-01-25 um 13 05 07 "4x": Bildschirmfoto 2024-01-25 um 13 05 19 "5x": Bildschirmfoto 2024-01-25 um 13 05 31

patrowe commented 8 months ago

Test für LUX-Dialog:

Testvorbedingungen:

Die angehängten Zweige für die Lux-Components und das Lux-Components-Theme auschecken. Das Theme lokal bauen und lokal mit den Components verlinken. Die Demo starten und die Seite für Lux-Dialog öffnen.

Testdurchführung:

  1. Auf "Öffnen[Preset]" klicken. -> Standardansicht des Dialogs wird geöffnet. Bildschirmfoto 2024-01-25 um 13 13 13
  2. Für die Property "width" 400px und die Property "height" 800px eingeben. Auf "Öffnen[Preset]" klicken. -> Die Größe des Dialogs hat sich entsprechend verändert. Bildschirmfoto 2024-01-25 um 13 17 15
  3. Die Property "disableClose" auf "false" setzen. -> Der "x"-Button erscheint oben rechts im Dialog und mit einem Mausklick schließt sich der Dialog. Bildschirmfoto 2024-01-25 um 13 21 01
  4. Wie bei 3 "disableClose" auf "false" setzen. Mit dem Tab-Key den "x"-Button fokussieren und mit "Enter" den Dialog schließen. Bildschirmfoto 2024-01-25 um 13 24 01
DSeifer commented 8 months ago

Lokaler Test

Unter Windows 10 Enterprise 22H2 (19045.3930) und MacOS 14.2.1 mit den jeweils aktuellen Browserversionen nachgetestet:

LUX-Snackbar MacOS: Safari, Firefox, Chrome -> OK Windows: Edge, Firefox, Chrome -> OK

LUX-Dialog MacOS: Safari, Firefox, Chrome -> OK Windows: Edge, Firefox, Chrome -> OK