Seitenhistorie
Icons: https://gitlab.transformationsstadt.de/GeoPortal/frontend/tree/dev/src/assets/img/bli
01. Filterfunktion auf
...
Startseite
Filter horizontal unten am Screenrand (funktionieren ähnlich wie in der Oberfläche ähnlich in dem Beispiel hier)
02. Auswahl Filterelemente/Icons
Auswahl / Klick auf Icon "Gemeinschaft" → Orte, die der Dimension Gemeinschaft zugeordnet sind, werden farblich hervorgehoben
Auswahl / Klick auf Icon "Wohnen" → Orte, die der Dimension Gemeinschaft zugeordnet sind, werden farblich hervorgehoben
03. Aktivierung Suche deaktiviert Filter
Auswahl/Klick auf "Alle Orten anzeigen" → Orte, die nicht der Dimension Wohnen zugeordnet wurden, werden ausgeblendet
Wird ein Suchbegriff eingegeben und die Suche ausgelöst, collapsen die Icons in der Bildschirmmitte und der Button "<< Dimensionen >>" erscheint
Nun wird beispielsweise auch die Detailanzeige eines Punktes aktiviert.
Wurde dann auf den Button "<<Dimensionen>>" geklickt, bewegen sich Suche und Detailanzeige aus der Bildschirmanzeige und die Filter werden wieder expandiert, der Button "<<Dimensionen>>" verschwindet.
04. Aktivierung Filter nach Suche
Offene Fragen:
01a. Definition Filterfunktion
- Es kann immer nur ein Filter ausgewählt werden, nicht mehrere gleichzeitig. (keine UND/ODER Verschneidung)
- Es werden immer alle Orte, die dieser Dimensionen zugewiesen sind hervorgehoben.
- Es wird also immer global gefiltert unabhängig von der Suchfunktion.
02. Aus-/Einblenden Filter....
Über folgende Inputs werden die Filtericons aus-/eingeblendet:
- Klick auf den Button "Dimensionen des Guten Lebens" togglet Filter ein- und ausblenden.
- Klick auf einen Punkt in der Karte, Detailansicht blendet ein → Filter werden ausgeblendet.
- Auslösen der Suche → blendet Filter aus. (s. Screenbild)
- Aufheben der Suche → blendet Filter ein
02ba. ... wenn eine Auswahl getroffen ist.
Ist ein Filtericon ausgewählt wurden und dann der collapse (Ausblenden der Icons) initiiert wurden bleibt dieses Icon auf der Seite auf der es vorher stand (links oder rechts) neben dem Button stehen.
Die zu dieser Dimension zugeordneten Punkte sind weiterhin hervorgehoben.
In diesem Beispiel wurde das Filtericon "Umwelt" ausgewählt, dann ein Pointer auf der Karte angeklickt, die Detailansicht hat sich rechts geöffnet, und die Filtericons sind collapsed, bis auf das ausgewählte Icon:
Das gleiche gilt für die Suche, ein ausgewählte Filter bleibt bestehen:
02b. ... in Abhängigkeit zu Such- und Detailfenster
Wenn Filter eingeblendet werden:
Bewegen sich Detailanzeige und Suchergebnisse aus dem Bild. Das gilt für das Suchfenster nur, wenn bereits eine Suche ausgelöst wurde und Ergebnisse angezeigt werden. Die leere Suchanzeige bleibt stehen.
Hier z. B. werden die Filter vom User eingeblendet (klick auf "Dimensionen des Guten Lebens) und beide Fenster (Suche und Detailanzeige bewegen sich aus dem Kartenausschnitt):
02c. ... Animation/Darstellung (nice to have)
- Collapse: Icons "huschen" unter den Button "Dimensionen des Guten Lebens"
- Expand: Icons bewegen sich von unter dem Button "Dimensionen des Guten Lebens" wieder an ihre Position.
03. Hover über Filtericon
HOVER: Die Bezeichnung der Dimension wird über dem Icon eingeblendet. (Hier ist die Liste: Zuordnung: Icons/Bezeichnung BLI-Dimensionen)
NICE TO HAVE HOVER: Die Punkte, die der Dimension zugeordnet sind werden bereits beim hover hervorgehoben (hier als weiße Pointer mit grüner Outline). So kann der User erkennen wie viele Punkte überhaupt dieser Dimension zugeordnet sind, bevor er eine Auswahl trifft.
04. Klick auf Filtericon
Klick auf ein Icon togglet Filter an/aus.
An: Icon wird grün hervorgehoben und Bezeichnung bleibt stehen. Punkte, die dieser Dimension zugeordnet sind, werden hervorgehoben.
05. Hover über ein weiteres Filtericon nach Auswahl
Die Darstellung der Bezeichnung beim Hover überlagert die des aktiven Elements (hier "Sicherheit" über "Zufriedenheit")
ALTERNATIV: Sicherheit springt eine Zeile höher.
wieder NICE TO HAVE HOVER (s. 03) : Die Punkte, die der Dimension (Hier "Sicherheit") zugeordnet sind werden bereits beim hover hervorgehoben.
06. Auswahl neues Filtericon
Wird eine neues Filtericon ausgewählt (hier "Sicherheit" nachdem im Screen vorher "Zufriedenheit" ausgewählt war) werden die Punkte hervorgehoben, die dieser Dimension zugeordnet sind. Die vorherige Auswahl wird aufgehoben.
07. Filter & "Alle Orte sehen" Button
Werden alle anderen Orte ausgeblendet, bleiben die Orte, die der aktuell ausgewählten Dimension (hier "Umwelt") zugeordnet sind stehen.
Ebenso werden, auch wenn alle anderen Orte ausgeblendet sind, immer alle Orte, die zu einer Dimension zugeordnet sind angezeigt, wenn ein Filtericon ausgewählt wird.
...
