Hauptmenü

Update 2.7.2.

Begonnen von setstate, 01 September 2018, 00:24:54

Vorheriges Thema - Nächstes Thema

setstate

- für schwache Geräte oder für flotteres Umschalten kann man jetzt die Fade-Time in der index.html im header per meta Tag ändern

<meta name='fade_time' content='0'>

- Umstellung auf Font Awesome 5 Free
  https://fontawesome.com/icons?d=gallery

Achtung: es kann durchaus sein, dass sich die Icons gegenüber Version 4 etwas unterscheiden. Ich habe versucht, den Kompatibilitätmodus zu aktivieren, damit die alten fa-NAMEN weiterhin funktionieren.

Einige Icons bieten jetzt invertierte Darstellung. Mit einem zusätzlichem "invert" im data-icon kann man diesen aktivieren.


<div class="vbox row-50">
  <div class="hbox">
   <div data-type="push" data-background-icon="fa-square-o"></div>
   <div data-type="push" data-background-icon="fa-circle-o"></div>
   <div data-type="symbol" data-icon="fa-clock"></div>
   <div data-type="symbol" data-icon="fa-clock invert"></div>
  </div>
  <div class="hbox bg-white">
    <div data-type="push" data-background-icon="fa-square-o"></div>
    <div data-type="push" data-background-icon="fa-circle-o"></div>
    <div data-type="symbol" data-icon="fa-clock"></div>
    <div data-type="symbol" data-icon="fa-clock invert"></div>
  </div>
</div>



moonsorrox

#1
Ich habe mal in meiner Testumgebung das Update gemacht, eigentlich alles super. Eine kleine Änderung gab es, wohl im Style.
Dazu meine Frage ich nutze im
data-background-icon="fa-square-o"
das Icon ist jetzt eckig geworden. Ist das jetzt einstellbar evtl. oder heißt es nun anders, ich hänge mal ein Screenshot ran.
Es sind die grün Umrandeten fa-square-o Icons

Die schalter sind:
data-type="push"
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

choenig

Hi,

Zitat von: moonsorrox am 01 September 2018, 14:43:46

data-background-icon="fa-square-o"
das Icon ist jetzt eckig geworden.

Welche Form hatte es denn vorher? fa-square-o klingt für mich ziemlich nach eckig  8). Vielleicht war es vorher ein Bug und wurde komplett ignoriert?

LG
Christian

Eisix

Hallo,

kann ich bestätigen beim Widget symbol werden FA Icons teilweise anders dargestellt.

z.B.

data-icons='["fa-unlink","fa-link"]'


War vorher 3 Kettenglieder jetzt nur noch 2. Macht aber nichts.
Beim Chart Widget werden die Navigationsbuttons nicht richtig dargestellt, sind jetzt kleine Boxen in denen z.B. FO R8 steht.

Habe mit Firefox probiert und wollte parallel diese Nachricht schreiben was fast nicht möglich war solange mein Demo System aktiv war. (habe fade_time an)

Gruß
Eisix

setstate

Wenn anstatt des Icons nur diese rechteckige Box erscheint, kann es daran liegen, dass ein font-weight="xyz" gesetzt ist.
Die meisten FA-5 Icons funktionieren nur mit font-weight=900. Einige haben auch eine invertierte Version, die dann über font-weight=100 angezeigt werden kann.

moonsorrox

Zitat von: choenig am 01 September 2018, 16:55:41
Welche Form hatte es denn vorher? fa-square-o klingt für mich ziemlich nach eckig  8). Vielleicht war es vorher ein Bug und wurde komplett ignoriert?
nein kein Bug, schau mal auf das Bild
Auf jeden Fall waren sie wesentlich abgerundeter was etwas schöner aus sah und die Pfeile und das minus Zeichen sind nach oben gerutscht, aber kein Problem dann ist das wohl so.
Ich habe mit den Größen schon herum gespielt, aber an der eckigen From ändert sich nichts
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Eisix

Hallo setstate,

das font-weight=900 wird wo gesetzt?

Die Icons sind alle minimal kleiner und werden leicht nach unten versetzt zum background Icon angezeigt. Gibt es eine Möglichkeit das wieder zu zentrieren?

Gruß
Eisix

setstate

Das wird wohl nicht etwa genau meine Korrektur verursachen?
Bei mir waren alle icons in einem Circle zu groß und versetzt. Deshalb habe ich etwas gedreht.

Wo passiert das bei dir? Hast du mal etwas Beispielscode und einen Screenshot (nur von dem einen Element in groß)

Eisix

Hallo,

da es bei allen ist vermute ich es liegt an deiner Korrektur.


                        <div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>


 
                      <div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>



Gruß
Eisix

setstate

Das ist klar: wenn es keine fa- Icons sind, darf die Kortektur nicht greifen.
Das muss ich noch korrigieren.

Eisix




                <div data-type="pagebutton" data-url="#main.html"     data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#main.html)" data-icon="fa-home" class="default prefetch top-space"></div>


pflock_y

Hallo setstate,
genau das würde mich auch interessieren.

Zitat von: Eisix am 03 September 2018, 07:47:29
Hallo setstate,

das font-weight=900 wird wo gesetzt?

...

Gruß
Eisix

grüße
pflock_y

StephanFHEM

Wurde das folgende Problem auch mit diesem Update gefixt?

https://forum.fhem.de/index.php/topic,84302.0.html

setstate

Das liegt am Mix von Multistate- und Dual-State-Definitionen. Bitte entweder oder benutzen.

setstate

Zitat von: Eisix am 03 September 2018, 07:47:29

das font-weight=900 wird wo gesetzt?


im CSS unter .famultibutton .fa-stack-1x {}

Aber, das muss man nicht machen. Das war nur als Hinweis gedacht, wenn man in einem eigene Widget fa-Icons benutzt und font-weight=normal gesetzt hat und sich wundert, warum anstatt des Icons nur ein Viereck angezeigt wird.

Im Html Code braucht man nur "invert" zum Icon hinzufügen

data-icon="fa-cloud invert"

oder weglassen
data-icon="fa-cloud"

Das mit dem Verschieben und der Größe korrigiere ich gerade.