Neuer Style: flex. Flexibel für alle Geräte

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

DeeSPe

Zitat von: xanker am 21 Juli 2019, 10:04:17
Habe doch noch eine Möglichkeit gefunden das leicht umzusetzen. Gibt jetzt eine Option "enableRoundedEdges"  :)

Top! Das gefällt!
Könntest Du bitte die gleiche Rundung noch auf .makeSelect und .detLink "loslassen"?
Und bitte noch Folgendes (wenn Rundung an):
.slider,.slider .handle,select,input[type=text],input[type=submit] { border-radius: 3px; }

Eventuell sollte das noch auf andere Widget angewendet werden, habe aber hier in meinem Testsystem i.M. keine anderen.

Und noch eine Kleinigkeit, die webCmdLabel könnten ein kleines "margin/padding right" gebrauchen (siehe Screen).

Vielen Dank für Deine Mühen.

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

xanker

Zitat von: Gisbert am 21 Juli 2019, 10:21:11
Wenn man ein Device mit nur einer Zeile hat, dann ist der Abstand zum nächsten, anklickbaren Device auch nicht sonderlich viel vergrößert. Dann müsste dies auch innerhalb einer "Zelle" bzw. innerhalb eines Devices möglich sein, oder nicht.
Die Abstände zwischen zwei Devices und Device zum umgebrochenen State sind exakt gleich groß (siehe Screenshot). Bei ersterem wirkt er optisch nur etwas kleiner, aufgrund der unterschiedlichen Färbung der Reihen.


Zitat von: Icinger am 21 Juli 2019, 11:30:02
Wenn man das Room-Attribut öffnet und dann mit dem "x" oben rechts schließt, bleibt das Bild ausgegraut und man kann nur durch Seite neu laden weiterarbeiten.
Das scheint wohl ein Problem von fhemweb.js oder jquery zu sein. Ich habe das "X" jetzt einfach mal ausgeblendet, da man ja auch mit dem Buttons schließen kann (und das funktioniert ja).

Zitat von: Icinger am 21 Juli 2019, 11:30:02
Ansonsten: Echt genial, ich verwende inzwischen nur mehr das Flex.
Danke, so soll das sein ;D


Zitat von: choetzu am 21 Juli 2019, 12:03:33
Werden die Menu Ecken nicht auch gerundet? Bei mir gings nicht (Safari, Chrome auf Mac)
Ich nehme an du meinst aufpoppende Menüs/Dialoge? Falls ja, das funktioniert jetzt (siehe unten).


Zitat von: DeeSPe am 22 Juli 2019, 09:08:23
Könntest Du bitte die gleiche Rundung noch auf .makeSelect und .detLink "loslassen"?
Und bitte noch Folgendes (wenn Rundung an):
.slider,.slider .handle,select,input[type=text],input[type=submit] { border-radius: 3px; }
Eventuell sollte das noch auf andere Widget angewendet werden, habe aber hier in meinem Testsystem i.M. keine anderen.

Und noch eine Kleinigkeit, die webCmdLabel könnten ein kleines "margin/padding right" gebrauchen (siehe Screen).
Glatt vergessen...Jetzt sollte so ziemlich alles abgerundet werden was möglich ist.
Den Margin habe ich zum webCmdLabel hinzugefügt, danke!
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

Du bist ja auf Zack!!! ;)

Hab da noch was:
select.select_widget { margin-top: -1px; }
button.ui-button { padding: 5px !important; }

Damit wandern die webCmd selects um einen Pixel nach oben und das Ganze sieht irgendwie konsistenter aus. Ebenso wird um die Modal-Buttons noch das Padding gelegt -> sieht auch besser aus.

Und hier noch ein kleiner Schatten der mir persönlich immer sehr gut gefällt (evtl. konfigurierbar machen?):
.makeSelect,.detLink,table.group { box-shadow: 0px 12px 10px -8px rgba(0,0,0,0.4); }
table.group.deviceGroup { margin-bottom: 15px !important; }


Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

xanker

Zitat von: DeeSPe am 22 Juli 2019, 11:28:22
select.select_widget { margin-top: -1px; }
button.ui-button { padding: 5px !important; }

Ersteres verstehe ich nicht, bei mir sind die Selects (wie angedacht) exakt mittig in einer Zelle, warum sollte man sie ein Pixel nach oben schieben? Hast du evtl. ein Screenshot was dich daran stört? Padding zu den Buttons habe ich hinzugefügt.

Zitat von: DeeSPe am 22 Juli 2019, 11:28:22
Und hier noch ein kleiner Schatten der mir persönlich immer sehr gut gefällt (evtl. konfigurierbar machen?):
.makeSelect,.detLink,table.group { box-shadow: 0px 12px 10px -8px rgba(0,0,0,0.4); }
table.group.deviceGroup { margin-bottom: 15px !important; }

Ist zwar nicht mein Geschmack, aber ich habe es als Option hinzugefügt :)

Grüße
Sebastian
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

Zitat von: xanker am 22 Juli 2019, 11:52:05
Ersteres verstehe ich nicht, bei mir sind die Selects (wie angedacht) exakt mittig in einer Zelle, warum sollte man sie ein Pixel nach oben schieben? Hast du evtl. ein Screenshot was dich daran stört? Padding zu den Buttons habe ich hinzugefügt.

Habe es eben mal selbst nachgeprüft weil ich auch unsicher war, aber mit dem Negativ-Margin sah es für mich optisch einfach besser aus.
Der Beweis anbei als Screen. Oben mit Negativ-Margin unten ohne.

Gruß
Dan

EDIT: Danke für den optionalen Schatten.
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

xanker

Zitat von: DeeSPe am 22 Juli 2019, 12:22:50
Habe es eben mal selbst nachgeprüft weil ich auch unsicher war, aber mit dem Negativ-Margin sah es für mich optisch einfach besser aus.
Der Beweis anbei als Screen. Oben mit Negativ-Margin unten ohne.
Das Problem war ein anderes: Ich hatte bei dem scrollable-Container ein margin von 1px gesetzt, weil Chrome den content-Border sonst dünner rendert sobald der content scrollbar wird, allerdings auch nur wenn die Tabellen nebeneinader angezeigt werden (warum auch immer) und das hat interessanter Weise auch irgendeinen Effekt auf das vertical-alignment (warum auch immer). Ich habe den Margin jetzt entfernt, somit passt das jetzt wieder und evtl. finde ich ja noch eine andere Lösung für das rendering Problem.

Zitat von: DeeSPe am 22 Juli 2019, 12:22:50
EDIT: Danke für den optionalen Schatten.
Gerne doch, wenn du weitere Vorschläge hast, nur her damit :)
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

Top! Sieht echt cool aus jetzt!
So langsam nähern wir uns doch einem modernen Style für FHEM. ;)
Könntest Du bitte noch die Anzeige des Icons für "reload 99_myUtils.pm" optional machen? Das benötige ich persönlich überhaupt nicht.

Danke im Voraus und für Deine vielen schnellen Bemühungen.

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

xanker

Zitat von: DeeSPe am 22 Juli 2019, 13:27:32
Top! Sieht echt cool aus jetzt!
So langsam nähern wir uns doch einem modernen Style für FHEM. ;)
Das sehe ich auch so  ;D

Zitat von: DeeSPe am 22 Juli 2019, 13:27:32
Könntest Du bitte noch die Anzeige des Icons für "reload 99_myUtils.pm" optional machen? Das benötige ich persönlich überhaupt nicht.
Das geht jetzt schon, einfach den Dateinamen in den Einstellungen löschen

Zitat von: DeeSPe am 22 Juli 2019, 13:27:32
Danke im Voraus und für Deine vielen schnellen Bemühungen.
Gerne doch.

Ps: Die Farbe des Schattens kann jetzt auch in den Einstellungen frei gesetzt werden
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

#188
Zitat von: xanker am 22 Juli 2019, 13:30:30
Das geht jetzt schon, einfach den Dateinamen in den Einstellungen löschen

Die Farbe des Schattens kann jetzt auch in den Einstellungen frei gesetzt werden

MEGA!

Ein paar Kleinigkeiten sind mir noch aufgefallen:
Event-Monitor:

  • Filter input - Ecken noch nicht gerundet
  • wenn man dann auf input klickt und sich das Modal öffnet fehlt bei den Buttons wieder das padding, selbes beim Modal für ? (letzte Änderungen) und auch beim Raw-Input

Könnte man die Hintergrundfarbe vom Menü oben noch anpassbar machen (da wo die update/update check/reboot Icons sind)?

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

DeeSPe

Beim Ändern der Farben kommt in der aktuellen Version ein JS-Error und die Farben werden nicht übernommen.
ZitatUncaught TypeError: Cannot read property 'length' of undefined
    at Object.flex.hexToRGB (flex.js:421)
    at Object.flex.createCSS (flex.js:308)
    at Object.flex.applyStyleData (flex.js:902)
    at Object.flex.changeSetting (flex.js:935)
    at flex.js:1044
    at HTMLDivElement.<anonymous> (fhemweb_colorpicker.js:307)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    at Object.fireEvent (jscolor.js:142)
    at HTMLDivElement.p.padM.onmouseup.p.padM.onmouseout (jscolor.js:648)

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

xanker

Zitat von: DeeSPe am 22 Juli 2019, 13:55:08
Ein paar Kleinigkeiten sind mir noch aufgefallen:
Event-Monitor:

  • Filter input - Ecken noch nicht gerundet
  • wenn man dann auf input klickt und sich das Modal öffnet fehlt bei den Buttons wieder das padding, selbes beim Modal für ? (letzte Änderungen) und auch beim Raw-Input
Könnte man die Hintergrundfarbe vom Menü oben noch anpassbar machen (da wo die update/update check/reboot Icons sind)?
Der Eventmonitor Filter wird jetzt auch abgerundet. Das Padding hatte ich wohl ausversehen durch zu häufiger STRG+Z wieder entfernt  :o
Hintergrundfarbe von den Menu Icons ist jetzt anpassbar.

Zitat von: DeeSPe am 22 Juli 2019, 14:10:21
Beim Ändern der Farben kommt in der aktuellen Version ein JS-Error und die Farben werden nicht übernommen.
Das Problem kann ich nicht nachstellen, bei mir funktioniert das einwandfrei, auch wenn ich ungültige Farbwerte eingebe. War evtl. noch was im Cache?!
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

Zitat von: xanker am 22 Juli 2019, 16:02:22
Der Eventmonitor Filter wird jetzt auch abgerundet. Das Padding hatte ich wohl ausversehen durch zu häufiger STRG+Z wieder entfernt  :o
Hintergrundfarbe von den Menu Icons ist jetzt anpassbar.

Tip Top!

Zitat von: xanker am 22 Juli 2019, 16:02:22
Das Problem kann ich nicht nachstellen, bei mir funktioniert das einwandfrei, auch wenn ich ungültige Farbwerte eingebe. War evtl. noch was im Cache?!

Am Cache lag es nicht! Egal, ist mit der aktuellen Version wieder voll funktionsfähig.

Danke.

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

nuccleon

Ich hab auch gerade ein Update gemacht und mir ist noch was beim Event monitor aufgefallen.

Man kann im flex Style nach oben, bzw zurück zu älteren Events scrollen. Sobald ein neues Event eintrifft, wird automatisch wieder an das Ende gescrollt.
Im F18 Style ist das nicht so. Sobald man in F18 einmal zurück scrollt, ist "autoscrollen" deaktiviert und man kann in aller Ruhe vergangene Events analysieren.

Das Verhalten von flex - also dass immer ans Ende gesprungen wird, sobald ein Event eintrifft - ist ziemlich hinderlich. Kann man das an das F18 Verhalten anpassen?

DeeSPe

Hab doch noch was im Event-Monitor gefunden.
Beim Start des Event-Monitor wird mir immer als ersten (unter der Filter reset/create Zeile) Folgendes angezeigt:
Zitat[""]

Aktiviere/deaktiviere ich die Checkbox "FHEM log" so kommen mit jedem Klick weitere:
Zitat[""]
hinzu.

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

choetzu

hallo xanker

Zitat
ZitatZitat von: choetzu am Gestern um 12:03:33
Werden die Menu Ecken nicht auch gerundet? Bei mir gings nicht (Safari, Chrome auf Mac)
Ich nehme an du meinst aufpoppende Menüs/Dialoge? Falls ja, das funktioniert jetzt (siehe unten).

Danke Meister. Nö, nicht ganz. Siehe Bild in der Anlage...

Zudem ist mir auf dem Mobile (iPhone) in einem Raum etwas aufgefallen (Safari), siehe Bild.
Bekanntes Problem?

Lg c
Raspi3, EnOcean, Zwave, Homematic