[FTUI3] Ermöglichen von abgeleiteten Tags/Klassen von ftui-grid-tile

[joe42]

Hallo *,

Zunächst mal einen riesigen Dank an Mario Stefan und alle anderen Entwickler von FTUI3 und FHEM!

Da ich mir eigenen (speziellere) ftui-grid-tiles durch Ableiten eigener Klassen mit eigenen Tags bauen will, bin ich auf das Problem gestoßen, dass diese dann von Etui-grid nicht erkannt werden.

Mein Lösungsvorschlag: In www/ftui/components/grid/grid.component.js die folgende Änderung vornehmen:

Code Auswählen Erweitern

Zeile 33: this.tiles = this.querySelectorAll('ftui-grid-tile, .ftui-grid-tile');

Dann kann ich mein eigenes Tag mit einem class="ftui-grid-tile" versehen, und wird dann von ftui-grid auch gefunden und korrekt behandelt. Habs ausprobiert und funktioniert perfekt.

Vielleicht könntet Ihr das ja einbauen.
Danke im Voraus,
Harald

[mr_petz]

Hi. Wieso machst du das nicht mit einer user.css?
Bsp vom Thermostat:
https://forum.fhem.de/index.php/topic,123084.msg1197659.html#msg1197659
LG mr_petz

[joe42]

Hallo mr_petz,

Danke für Deinen Input.

Mir geht es nicht nur darum, die Optik zu verändern.
Ich möchte fertige (semantische) Kacheln bauen, der ich dann nur mit dem Attribut device="...devname..." sage, um weches Device es geht. Die eigene Klasse baut dann auch gleich das ganze "Innenleben" der Kachel mit auf, natürlich unter Nutzung der anderen FTUI3 Elemente. Inklusive auch etwas Logik bzgl Icon-Auswahl etc.

Afaik bekomme ich das mit nem stylesheet nicht hin. Oder habe ich Deinen Post nicht richtig verstanden?

Danke,
Harald

[mr_petz]

OK. Hier mal zum grid ein Bsp.:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="4" width="8" grid-id="1">

user.css:

Code Auswählen Erweitern


[grid-id="1"]{
  --grid-tile-border-radius: 2.5em;
  --color-base: green;
}

[grid-id="1"] header{
  background: black;
  color: red;
}


oder so:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="4" width="8" class="grid-id1">
und
user.css

Code Auswählen Erweitern


.grid-id1{
--grid-tile-border-radius: 2.5em;
--color-base: green;
}

Browsercache leeren nicht vergessen!
Das und andere Sachen gehen zu stylen...

LG mr_petz

ps. setstate hat das meiste schon ermöglicht um es benutzerdefiniert zu gestalten...

Edit: ich verstehe jetzt glaube was du möchtest. sowas in der art vom Aufbau? (content):

...
Dann pack ich den Zeilenaufruf in ein content file

Code Auswählen Erweitern

[text]="{{devicebdaynumber}}_weekdayname | function(x){return x.substr(0, 2)+ ', '}"
und rufe das über content auf

Code Auswählen Erweitern

<ftui-content file="[...]" devicebdaynumber="GeburtstagView:t_001"></ftui-content>
<ftui-content file="[...]" devicebdaynumber="GeburtstagView:t_002"></ftui-content>
<ftui-content file="[...]" devicebdaynumber="GeburtstagView:t_003"></ftui-content>
So kann man wiederkehrenden Code in eine Contentstruktur auslagern und hat die Wiederholungen nicht.

Das ist nur ein Beispiel wie man seine Struktur aufbauen kann...

[joe42]

Ja, das untere geht in die Richtung.
Aber gerade ftui-content kann eben genau kein tile enthalten, das müsste ich wieder getrennt haben.

Vorschlag: Ich arbeite das mal ein wenig aus. Da lerne ich dann für mich was dabei. Ich bin nämlich, was die Möglichkeiten von  WebComponents und JS angeht, nicht ganz up to date.
Sobald ich was halbwegs vorzeigbares habe, werde ichs hier posten.

Danke,
Harald