FTUI version 3

[LuGu]

Grid im Grid geht. Im nachgeladen Teil kann wieder ein neues Grid liegen. Aber immer grid und tiles zusammen.

@setstate erst mal möchte ich mich für die super Arbeit und den schnellen Support bedanken.
aber...
Das mit dem Grid im Grid bekomme ich nicht gebacken. Das "Master" Grid ist in der index.html definiert und das "Sub" Grid ist in einer content.html definiert. Dieses Grid wird aber ignoriert und der Inhalt wird irgendwo angezeigt, aber nicht dort, wo es hin soll. Durch Größenveränderung des Browser-Fenster kann man den Inhalt der content.html verschieben. Die nachgeladene html scheint ihren "Nullpunkt" irgendwo anders zu haben und nicht links oben, bzw. es gibt noch einen Offset / Multiplikator.
Wenn man in der content.html das Grid weg läßt, wird der Inhalt mittig in der vorgesehenen Fläche angezeigt.

Gibt es Ideen was ich falsch mache?

[setstate]

Moin,

Wie kann ich in meiner eigene user.css Eigenschaften der popup.component.css überschreiben?
Ich möchte das close X von der Position anpassen, da ich den Header breiter mache.
Des Weiteren möchte ich das die Popups runde ecken bekommen (border-radius).

Kann es sein das die Popups sich nicht zentrieren, zumindest haut das bei mir nicht hin?

VG

Elemente innerhalb einer Komponente sind geschützt per Shadow-Dom. Per user.css kann man da nichts anpassen. Ich müsste für allgemein interessante Styles extra Variablen bereitstellen oder für ganz Wichtiges auch als Attribute anbieten.

[OdfFhem]

Weiter oben hatte ich mich ja schon mal zum user-orientierten CSS-Thema geäußert, bislang allerdings ohne finale Reaktionen. Deshalb stelle ich hier mal etwas konkreter einen Anwendungsfall dar.


Generell möchte ich den "close"-Part vom Popup individuell beeinflussen.


Zunächst soll gelten - unabhängig von "--popup-header-color":

• das "x" allgemein in "lightblue" einfärben
• das "x" für das Popup mit der id "pop1" in "magenta" einfärben

Dies kann leicht realisiert werden, indem der Entwickler "--popup-close-color" einführt.
In der vom Anwender verwalteten css- oder html-Datei steht dann:

Code Auswählen Erweitern


  :root { --popup-close-color: lightblue; }
  #pop1 { --popup-close-color: magenta; }

Das Ergebnis entspricht den Erwartungen.

Weiterhin soll gelten:

• das "x" blinkt allgemein

Jetzt wird's etwas aufwendiger, da im Shadow-DOM die in ftui.css eingeführten Animationen gar nicht zur Verfügung stehen. Neben der Einführung einer Variablen muss der Entwickler also auch noch ein paar Zeilen duplizieren.
In der vom Anwender verwalteten css- oder html-Datei steht schließlich:

Code Auswählen Erweitern


  :root { --popup-close-color: lightblue; --popup-animation: blink 1s step-start 0s infinite; }
  #pop1 { --popup-close-color: magenta; }

Das Ergebnis entspricht den Erwartungen.
Problematisch wird es vermutlich, wenn man gar keine Animation haben möchte, denn der mögliche Fehlwert für die Variable ist zumindest mir unbekannt.

Abschließend soll gelten:

• das "x" beim Popup mit der id "pop1" dreht sich horizontal

Eigentlich gilt das weiter oben Gesagte; allerdings kommt man damit nicht zum Ziel, da der Entwickler die gewünschte Animation im Zweifel noch gar nicht kennt und dementsprechend auch nicht einfach in die allgemeine Popup-css kopieren kann. Unter Umständen reicht Rücksprache oder die fehlende Animation wird nachgereicht.
In der vom Anwender verwalteten css- oder html-Datei steht schließlich:

Code Auswählen Erweitern


  :root { --popup-close-color: lightblue; --popup-animation: blink 1s step-start 0s infinite; }
  #pop1 { --popup-close-color: magenta; --popup-animation: anim-flip-horizontal 4.0s infinite linear; }

Das Ergebnis entspricht den Erwartungen.


Klar, dass dies nur ein (kleiner) Auszug von möglichen Individualisierungen ist und das Ganze doch leicht ausarten kann. Der Entwickler ist auf jeden Fall immer mittendrin und "muss" quasi reagieren/zustimmen.


Um der Individualisierung mehr Raum zu geben, würde ich folgendes Vorgehen im Beispielfall "Popup" bevorzugen:

1) Neben "popup.component.css" sollte auch ein z.B. "popup.component.user.css" bereitgestellt werden.
2) Die "id" (und im Zweifel auch "class") sollte durchgereicht werden.

Aus meiner Sicht minimaler Aufwand und der Anwender kann im Grunde frei individualisieren.


Interessant ist wahrscheinlich, ob eine derartige oder ähnliche Lösung Gefallen findet. Daher hoffe ich, dass Reaktionen dafür oder dagegen folgen ...

[MiniBlister]

Hallo,

erst einmal danke für die super Arbeit an FTUI3.

Ich habe ein problem mit

Code Auswählen Erweitern


            <ftui-cell>
              <ftui-clock format="eeee, den D.M" class="size-4 top-narrow"></ftui-clock>
            </ftui-cell>


Leider wird ftui-cell irgendwie nicht identifiziert und bekommt folgendes zugewiesen:

Code Auswählen Erweitern


:not(:defined) {
    opacity: 0;
}

was mach ich falsch?

[setstate]

Hallo,

erst einmal danke für die super Arbeit an FTUI3.

Ich habe ein problem mit

Code Auswählen Erweitern


            <ftui-cell>
              <ftui-clock format="eeee, den D.M" class="size-4 top-narrow"></ftui-clock>
            </ftui-cell>


Leider wird ftui-cell irgendwie nicht identifiziert und bekommt folgendes zugewiesen:

Code Auswählen Erweitern


:not(:defined) {
    opacity: 0;
}

was mach ich falsch?

Aktueller Stand von GitHub geladen? Unter Components muss es Cell geben.

[setstate]

Interessant ist wahrscheinlich, ob eine derartige oder ähnliche Lösung Gefallen findet. Daher hoffe ich, dass Reaktionen dafür oder dagegen folgen ...

Lass mich ehrlich sein: Eher nicht. Das ist mir alles zu überfrachtet und zu individuell/speziell. Ich will auch nicht dahin, am Ende alle CSS-Rules als Variable nach außen reichen zu müssen und eine componente.user.css lehne ich auch eher ab. Schon das Einlesen als eigenständiges CSS-File frisst wertvolle ms. Eigentlich müsste man das direkt ins component.js-Template legen. Das mache ich auch schon bei kleinen Styles.

Bei diesem direkten Fall mit dem Popup-X tendiere ich eher zu einem eigenen Slot für das X mit default X, wie es jetzt ist. Die UserInnen (die Usenden    ) könnten dann den Slot von außen mit ihrem eigenen Element füllen. Das wäre dann wieder per user.css stylbar.

Code Auswählen Erweitern


<span slot="close">
  <div class="spin size-10" style="color: magenta">&times;</div>
</span>


[grossmaggul]

Lass mich ehrlich sein: Eher nicht.

Das würde auch Deinem Ansatz "Keep it simple", den ich sehr begrüße, widersprechen.

[octek0815]

Moin Setstate,

im Popup gibt es scheinbar noch ein Bug.
Ein Image aus einem FHEM Reading mit einer URL wird im Popup nicht angezeigt.

<ftui-image [src]="myDummy:state"></ftui-image>

Kannst Du das bestätigen oder ist das noch nicht fertig?

VG

[Eisix]

Hallo,

fhemSVG Icons zicken auch noch teilweise rum sind wohl alle nur schwarz.
Was mache ich mit path wenn ich ein multistate Icon habe das Icons aus verschiedenen Pfaden zieht?

Gruß
Eisix

[OdfFhem]

@setstate

Lass mich ehrlich sein

Da sollte definitiv kein Weg dran vorbeiführen ...


Eine Anmerkung zu einer xxxxx.component.user.css hätte ich noch: Diese Datei wäre ja im Normalfall vollständig leer und kann nur durch den Anwender verändert werden. Und sie würde natürlich in der template-Routine der zugehörigen Komponente "importiert" und das (vermutlich) genau einmal. Hattest Du das auch so verstanden oder hattest Du eine andere Interpretation?

Das mit dem Slot bzgl. X hatte ich mal ausprobiert. Damit kommt man schon ziemlich weit - Aufwand hängt aber stark davon ab, ob der zugehörige span um den Slot oder im Slot steht. Aufgefallen ist mir noch, dass z.B. die hover-Angabe aus dem Shadow-DOM nicht mehr vollständig greift - Cursorform ja, Farbe nein.

octek0815 war in seinem Beitrag u.a. an runden Ecken beim Popup interessiert. Slots (in geschachteler Form) wären hier vermutlich keine Lösung ...


Irgendwie bin ich noch unschlüssig ... scheinbar aber ein Einzelfall ...

[Eisix]

Kann mir noch jemand ein Beispiel zeigen wie ich die Größe eines popups festlege?

Gruß
Eisix

[octek0815]

Hallo,

fhemSVG Icons zicken auch noch teilweise rum sind wohl alle nur schwarz.
Was mache ich mit path wenn ich ein multistate Icon habe das Icons aus verschiedenen Pfaden zieht?

Gruß
Eisix

[octek0815]

Kann mir noch jemand ein Beispiel zeigen wie ich die Größe eines popups festlege?

Gruß
Eisix

Code Auswählen Erweitern


<ftui-popup id="popup-verpasste-anrufe" timeout="60" width="900px" height="500px">


[Eisix]

@octek0815

merci!, die px hatte ich nicht drin 


einen hab ich noch bevor ich heute aufhoere.
Beim chart wird das fill unter null abgeschnitten, vermute mal das soll nicht so sein.

Gruss
Eisix

[Eisix]

@octek0815

mit den Icons meine ich folgendes Konstrukt

Code Auswählen Erweitern


                <ftui-cell>
                        <ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
                                <ftui-icon class="size-1"
                                        path="../images/openautomation/"
                                        [name]="Heizung.Status_WZ:Heizung | map('manuell:sani_heating_manual, automatic:sani_heating_automatic, boost:sani_heating_boost, off:general_aus')"
                                        [color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"
                                ></ftui-icon>
                        </ftui-button>
                </ftui-cell>

Die Icons kommen aus openautomation und fhemSVG, ../image funtioniert nicht da anscheinend die Unterverzeichnisse nicht durchsucht werden.

Gruss
Eisix