FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: mr_petz am 20 Oktober 2022, 11:29:56

Titel: [FTUI3] stylebares Dropdown
Beitrag von: mr_petz am 20 Oktober 2022, 11:29:56
Hi @all,
Ich habe dieses Thema nochmal aufgegriffen:
https://forum.fhem.de/index.php/topic,115259.msg1215870.html#msg1215870
Hier ging es um das Stylen des dropdown.
Ich habe jetzt die Erweiterung droplist nochmal überarbeitet.
Mit droplist ist das Stylen jetzt möglich und es funktioniert wie das dropdown.
Unter Android und IOS sieht es nicht mehr wie ein Dropdown aus und wird auch so nicht erkannt!
Getestet unter FF,Chrome und Safari.
Settings wie im wie im dropdown.
Bsp.:

    <ftui-droplist class="size-2" left="10%" height="120px" style="--droplist-text-color:var(--black);--droplist-background-color:var(--medium-color);"
      name="Sonoslist"
      [list]="Sonos_Kueche:FavouritesListAlias"
      [value]="Sonos_Kueche:FavouriteDropdown"
      (value)="encode() | Sonos_Kueche:StartFavourite $value"
      delimiter="|">
    </ftui-droplist>

Hinzugekommen ist name="". Der kann ein get sein oder Frei vergeben werden. Dieser setzt dann den ausgewählten Eintrag.
Der Platz passt sich an. Je nachdem wie weit es rechts oder unten ist, klappt es weiter nach links oder oben auf. Es ist begrenzt im tile, aber nicht im row oder ähnlichen. Jetzt nicht mehr mit Attribute overflow.
Wenn es zu lang von der Höhe ist und es nicht mehr ins tile passt, sollte man ein height mitgeben.
width standard ist max-content
height standard ist 80px
left ist nicht vorgegeben.
name standard ist Droplist
styles:
--droplist-text-color
--droplist-background-color
--droplist-line-color
Schließen kann man es durch seitlichen click im view oder direkt durch Auswahl.
Edit: timeout hinzugefügt für das automatische Schließen. Standard 60sec. Mit timeout="0" wird es deaktiviert.
Zu finden ist es hier:
https://github.com/mr-petz/ftui/tree/droplist/www/ftui/components/droplist

Für Verbesserungen bzw. Erweiterungen bin ich offen...
Viel Spaß :)

LG mr_petz

Edit: border und overflow als Attribute hinzugefügt.
Titel: Aw: [FTUI3] stylebares Dropdown
Beitrag von: tomster am 25 März 2026, 14:19:37
Prinzipiell schönes Ding, aaaaber...
Sollte es nicht so sein, dass man bei [ list ] das "human readable" Reading (z.B. ftuiFavoritesAlias) angibt (dessen Formatierung dann auch in der Droplist angezeigt wird) im Hintergrund aber dann die tatsächliche Formatierung der Favoriten aus [value] im set-Befehl landet?

Wenn ich das so mache, dann schickt der Code dummerweise die Alias-Formatierung als set-Befehl raus. Wird natürlich damit nicht umgeschaltet...
Vertausche ich die beiden Readings, dann wird zwar der richtige String übergeben, es stehen nur diese unschönen Underscores in der Droplist.

Ausserdem hab ich noch ein anderes Phänomen:
Wenn ich die FTUI-Seite aktualisiere, dann steht kurz der name der Liste (in obigem Beispiel "Sonoslist") im Display.
Sind dann alle Werte inititalisiert, steht dort plötztlich der komplette String aus dem [value]-Reading; also die Alias-Liste inlusive Delimitern. Optisch nicht grad schön...
Was mache ich falsch?

Wäre es zudem nicht von Vorteil, wenn in der Liste auch gleich bei der Initialisierung der aktuelle abgespielte/gewählte Favorit/Playlistname im an Stelle des name tags stünde?