FTUI version 3

[grossmaggul]

Ich oute mich mal, leider verstehe ich von den letzten Ausführungen nur Bahnhof.

Was hat man als normalsterblicher Anwender davon?
Bitte in einfachen Worten, ich bin blond.

[Thyraz]

Da gehts um die Entwicklung von Komponenten.
Wie man Reading-Updates aus FHEM abonniert wenn das Reading nicht in der Komponenten-Konfig (also den HTML-Attributen) angegeben werden soll.

Also z.B. eine Komponente für ein bestimmtes FHEM-Modul mit vielen zu überwachenden Readings.
Die soll der User aber natürlich nicht alle in sein HTML-Konstrukt reinkloppen müssen.
Stattdessen reicht da ja ein device="DeviceWithManyReadyings" und die Komponente kann die Readings selber abonnieren, da sie ja weiß wie die in diesem FHEM-Modul heißen.

[Thyraz]

Achso, noch ein Hinweis zur Chart Komponente:

Nachdem setstate neulich meinen PullRequest übernommen hat:
In der neusten Version heißt das Attribut border-color nun color.

Vorteil ist, dass hier wieder der Mechanismus greift, der color="primary" oder color="brown" durch die Farbwerte ersetzt.
Analog zu den anderen Modulen bei denen das bereits ging wie Button, Icon etc.

Man kann so die Farben der Signale einfacher konfigurieren und es verleitet dazu die Theme Farben zu verwenden womit das Seitendesign einheitlicher wird.

Ein Beispiel für ein entsprechendes Chart-Data ist im Example zu Chart bereits drin:
https://github.com/knowthelist/ftui/blob/master/examples/chart.html

[Eisix]

Hallo,

frage zur Einbindung von OA Icons. Wenn ich sie in den Icons Ordner packe werden sie angezeigt aber die Farbe kann ich nicht ändern. Was ist da noch anzupassen?

Gruss
Eisix

[setstate]

Hallo,

frage zur Einbindung von OA Icons. Wenn ich sie in den Icons Ordner packe werden sie angezeigt aber die Farbe kann ich nicht ändern. Was ist da noch anzupassen?

Gruss
Eisix

Du musst die OA Icons nicht unbedingt kopieren. Mit dem path Attribute kannst du dahin zeigen

Code Auswählen Erweitern


      <ftui-icon class="size-5" path="../images/openautomation" name="audio_audio" color="green"></ftui-icon>
      <ftui-icon class="size-5" path="../images/openautomation" name="it_wifi" color="red"></ftui-icon>


Per default zeigt path auf "icons".

Wegen der Farbe: leider haben diese Icons unterhalb von svg Tag ein g Tag mit fill="#000000". Mit einer kleinen Änderung im css konnte ich das überschreiben.

[Eisix]

path funktioniert, fehlt mir nur noch der CSS Eintrag.

[setstate]

ist schon hochgeladen: https://github.com/knowthelist/ftui/blob/master/components/icon/icon.component.css

[setstate]

Gibt es eine Möglichkeit das badge weiter rechts oben darzustellen, da es mir in der Standardeinstellung zuviel vom Icon verdeckt?

Das habe ich für Safari optimiert, im Chrome sieht das aber ganz anders aus (siehe Screenshot unten)
Mit einer margin Optimierung verhalten sich jetzt beide Browser gleich

Nur wenn man Margin für alle vier Seiten angibt, rechnen bei gleich. Bei nur zwei Seiten rechnen sie unterschiedlich. Wusste ich auch noch nicht.

vorher                           nachher
margin-top: -1.1em;                  margin: -1.5em -1.5em 1em 1em;
margin-left: 1em;

[grossmaggul]

Unter Brave sieht das jetzt so aus, soll das so?

[setstate]

 

Mein Beispiel sieht im Brave nicht anders aus. Mmmm.

Zeig mal bitte dein Beispiel (am besten das ganze ftui-grid-tile)

[grossmaggul]

Sieht bei mir jetzt auch so aus, sorry, ich hatte den Abfallkalender mit content ausgelagert, aber Du schriebst ja bereits, daß Du das noch nicht implementiert hast. Ich hatte das aber vergessen, tut mir leid für die Wallung.

[Thyraz]

@grossmaggul die Titelschriftgröße vom Kalender lässt sich jetzt über die CSS Variable --calendar-title-font-size beeinflussen.

[grossmaggul]

Super, danke!

Wollte ich jetzt gerade mal ausprobieren, ich bekomme es aber irgendwie nicht hin, ist das so falsch?

Code Auswählen Erweitern

<ftui-grid-tile row="3" col="6" height="2" width="4" shape="round">
        <header>Termine/Geburtstage</header>
        <ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
            <ftui-calendar-data calendar="termine" color="primary"></ftui-calendar-data>
            <ftui-calendar-data calendar="birthdays" color="brown"></ftui-calendar-data>
            <ftui-calendar-data calendar="motorradtreffen" color="green"></ftui-calendar-data>
            <ftui-calendar-data calendar="arbeit" color="yellow"></ftui-calendar-data>
        </ftui-calendar> 
      </ftui-grid-tile>

[OdfFhem]

@grossmaggul

Es geht um eine CSS-Variable, die in einer eigenen css-Datei definiert werden kann. Wird kein eigener Wert definiert, fällt die CSS-Variable auf einen Standardwert zurück.

@Thyraz

Bin mir nicht sicher, ob das meine Lösung wäre. Da ich sowieso in der eigenen css-Datei eingreifen muss, würde ich dort einfach die Klasse .fc-toolbar-title redefinieren ("the most basic technique") und damit das Aussehen/Verhalten beeinflussen - z.B. font-weight oder animation, also auch Dinge, die bislang u.U. noch gar nicht via fullcalendar-css berücksichtigt wurden.

Allgemein kann man festhalten, dass fullcalendar für praktisch jedes Darstellungselement eine eigene Klasse - teilweise sogar CSS-Variablen - definiert hat und damit schon eine extreme Beeinflussbarkeit anbietet.

Übrigens bin ich mir auch nicht sicher, ob die component in einer eigenen css-Datei überhaupt die fc-Vorgaben überschreiben sollte, denn fullcalendar bietet ja bereits ein komplettes "Standard"-Design, das jeder Nutzer selbst beeinflussen kann. Nur mal angenommen, man wollte auf das Standard-Design zurück, dann wird es schwierig ...

Ist aber - wie immer - nur eine Meinung, kein "Gesetz" ...

[OdfFhem]

@setstate

Vielen Dank für die Übernahme des Vorschlags und den angeregten Feinschliff - das Vier-Augen-Prinzip ist da wirklich praktisch.