Autor Thema: Neuer Style: flex. Flexibel für alle Geräte  (Gelesen 29095 mal)

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #180 am: 22 Juli 2019, 09:08:23 »
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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline xanker

  • Full Member
  • ***
  • Beiträge: 261
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #181 am: 22 Juli 2019, 10:56:15 »
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.


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).

Ansonsten: Echt genial, ich verwende inzwischen nur mehr das Flex.
Danke, so soll das sein ;D


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).


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 ...

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #182 am: 22 Juli 2019, 11:28:22 »
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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline xanker

  • Full Member
  • ***
  • Beiträge: 261
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #183 am: 22 Juli 2019, 11:52:05 »
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.

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 ...

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #184 am: 22 Juli 2019, 12:22:50 »
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.
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline xanker

  • Full Member
  • ***
  • Beiträge: 261
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #185 am: 22 Juli 2019, 12:55:08 »
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.

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 ...

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #186 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. ;)
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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline xanker

  • Full Member
  • ***
  • Beiträge: 261
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #187 am: 22 Juli 2019, 13:30:30 »
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

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

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 ...

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #188 am: 22 Juli 2019, 13:55:08 »
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
« Letzte Änderung: 22 Juli 2019, 14:03:17 von DeeSPe »
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #189 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.
Zitat
Uncaught 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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline xanker

  • Full Member
  • ***
  • Beiträge: 261
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #190 am: 22 Juli 2019, 16:02:22 »
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.

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 ...

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #191 am: 22 Juli 2019, 16:21:25 »
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!

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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline nuccleon

  • Full Member
  • ***
  • Beiträge: 101
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #192 am: 22 Juli 2019, 16:22:13 »
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?

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4102
  • Wer anderen eine Bratwurst brät...
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #193 am: 22 Juli 2019, 16:26:55 »
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
FHEM 5.9, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Offline choetzu

  • Hero Member
  • *****
  • Beiträge: 1067
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #194 am: 22 Juli 2019, 17:38:21 »
hallo xanker

Zitat
Zitat
Zitat 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
Interesse an Schweizer Usertreffen? https://forum.fhem.de/index.php/topic,88308.0.html

Raspi3, EnOcean, Zwave, Homematic