Darkmode

[tueddy]

Habe den aktuellen Stand von @CaCO3 getestet & finde es schon richtig gut, auch im Hellmodus wirkt die Oberfläche moderner durch den Umstieg von Bootstrap 4 auf 5! Das Layout scheint jetzt auch zu passen.

Ein paar Kleinigkeiten sind mir noch aufgefallen:
Der Dateiexplorer bringt eigenes Theming mit welches man recht leicht umschalten kann. Die Dateinamen sind dann besser lesbar und die Icons angepasst.
Dazu wird das „default-dark“ Theme zusätzlich eingebunden über:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default-dark/style.min.css" />

und kann dann mittels

...
'plugins': [
          "themes"
      ],
     'core': {
          "themes": {
            "name": 'default-dark',
...

zur Laufzeit umgeschaltet werden:

Weitere Kleinigkeiten:

• Die Edit-Felder sind mit weißem Hintergrund noch zu hell, evt. hier dunkler Hintergrund mit weißer Schrift?
• Die dynamisch aufgebauten NVS-Zuweisungen werden noch im Hellmodus angezeigt:

Ansonsten tolle Arbeit

[CaCO3]

@tueddy

Habe den aktuellen Stand von @CaCO3 getestet

Ich vermute, du hast dir den alten PR ([obsolete] Upgrade to Bootstrap 5, added dark mode switch by caco3 · Pull Request #321 · biologist79/ESPuino · GitHub) angeschaut.
Da waren ja noch alle Änderungen Kraut und Rüben. Einiges haben wir ja bereits separat gemerged. Mein neuer Ansatz ist in Next attempt for Bootstrap5 by caco3 · Pull Request #328 · biologist79/ESPuino · GitHub.
Da ist z.b. auch schon der Header im Dark modus.

[quote=„tueddy, post:21, topic:2893“]
Der Dateiexplorer bringt eigenes Theming
[/quote]…
Danke für den Tipp, werde das so übernehmen.

Auch die Inputfelder sollten dunkel werden, habe ich aber noch nicht hingekriegt.

[biologist]

Habe mir das nochmal angeschaut.

Hier sollten die Buttons in die nächste Zeile:

Ich habe mal einen FW-Upload getestet. Das endet in einem Fehler:

Hier würde ich noch ein Leerzeichen einfügen jeweils zwischen Checkbox und der Option:

Ich persönlich finde die Bar oben mit Kontrast zwischen schwarz und blau bisschen kontrastarm zum Lesen im Lightmode. Aber da hängt jetzt mein Herz nicht dran.

Im Darkmode sieht man den Pfeil nach unten kaum. Also in der Vergrößerung hier ist es ok, aber auf dem Laptop-Bildschirm in klein eher nicht.

Ansonsten gefallen mir aber vor allem die Farbkontraste im Dateibrowser gut
Cool!

[tueddy]

Die verbleibenden „Glitches“ sehe ich auch, den Fehler bei Firmware-Aktualisierung kann ich aber nicht bestätigen:

Das lief hier mehrfach durch ohne Probleme durch (Normaler Upload, kein OTA), auch der automatische Neustart/Reload klappte einwandfrei. Keine Ahnung was da falsch lief, die Fehlermeldung „undefined“ ist da jetzt auch nicht so hilfreich außer das sie aus dem JavaScript kam…

[biologist]

@tueddy

Das lief hier mehrfach durch ohne Probleme durch (Normaler Upload, kein OTA), auch der automatische Neustart/Reload klappte einwandfrei. Keine Ahnung was da falsch lief, die Fehlermeldung „undefined“ ist da jetzt auch nicht so hilfreich außer das sie aus dem JavaScript kam…

Ok, weiß ich auch nicht, was da falsch lief.
Eben hat’s geklappt.

[biologist]

Ich habe noch einen neuen Punkt: Das Umstellen der Sprache funktioniert nur manchmal. Oft stellt man damit den Farbmodus um.

[CaCO3]

Danke für euer Feedback!

Die Zeilenumbrüche sollten gefixt sein. Ev. hat es noch mehr. Da hat sich offenbar etwas am CSS geändert, so, dass es nun zusätzliche <br>s braucht.

Firmware Update: Ich denke nicht, dass das an diesem PR liegt. Kannst Du mal testen, ob das im dev auch so ist? Ev. hat das minifizieren da etwas kaputt gemacht.

Die fehlenden Abstände nach den Checkboxen sind komischerweise nur ein Problem in gewissen Webbrowsern (Android). Dennoch habe ich jetzt da einen zusätzlichen Abstand eingefügt.

@biologist

Ich persönlich finde die Bar oben mit Kontrast zwischen schwarz und blau bisschen kontrastarm zum Lesen im Lightmode.

Ja, da hat sich noch ein Fehler eingeschlichen, jetzt sollte es wieder passen.

Leider ist mit Bootstrap 5 auch verloren gegangen, dass die Links im Header orange werden beim drüber fahren. Da muss ich noch herausfinden, wie man das wieder hinkriegt.

@biologist

Im Darkmode sieht man den Pfeil nach unten kaum

Das verstehe ich auch nicht, wenn man unten auf der Seite schaut, macht er stattdessen ein hässliches weisses Rechteck dahinter:

Mal schauen, ob man das irgendwie verbessern kann.

Ansonsten ist der PR aus meiner Sicht nun bereit fürs exzessive Testen
„Leider“ konnte ich mich nicht zurückhalten und habe euch 2…3 kleine Änderungen eingeführt (Siehe PR).

Next attempt for Bootstrap5

P.S: Bei mir geht das Anzeigen des Cover Images nicht mehr. Das ist aber auch im dev so, daher nicht auf diesen PR zurückzuführen:

[CaCO3]

@biologist

Ich habe noch einen neuen Punkt: Das Umstellen der Sprache funktioniert nur manchmal. Oft stellt man damit den Farbmodus um.

Habe ich gerade gefixt

[tueddy]

Es passt schon ganz gut!, @CaCO3 Danke das Du dran bleibst!

Auf dem Steuerungs-Tab (und der ist wichtig wenn Papa den nächsten Song auswählt) sind die Schalter teils noch unsichtbar. Hell-Modus bisher:

Neu Dunkel-Modus:

Hier sind einige Buttons noch unsichtbar, wie die ostfriesische Nationalflagge, schwarzer Adler auf schwarzem Grund

Coverbild wird wie bisher richtig dargestellt, hier sehe ich keine Regression.

[CaCO3]

@tueddy

Auf dem Steuerungs-Tab […] sind die Schalter teils noch unsichtbar.

Fixed.

Hast Du eine Idee, wieso bei mir die Cover nicht mehr gehen? Es sind normale JPEG. Wenn ich sie via Datei-Explorer im RFID-Tab herunterladen, sind sie einwandfrei.

[CaCO3]

Ich habe die CSS styles für clickForRefresh, clickForRefresh:hover, refreshAction und refreshAction:hover rausgeworfen, die scheinen nirgends verwendet zu werden.
Und auch indexing-progress scheint nirgends verwendet zu werden? Weis da jemand etwas dazu?

[CaCO3]

@biologist

Im Darkmode sieht man den Pfeil nach unten kaum

Sollte nun gefixt sein.

@biologist , im 2021 hast Du in Enabled flac and updated english webgui · biologist79/ESPuino@58cecb4 · GitHub folgendes CSS hinzugefügt:

/* IOS display fix */
		select {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAAAAADhgtq/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAR0lEQVR4nGP5z4ADsOCSGOoyC+NRabjMQqjQQrgUTCYeIrQQyEI3DSyFJIHkApAUkgSy21B0oLo6fiGSBKp/kCUGU4hSRQYAYg0Rw+gGlUQAAAAASUVORK5CYII=') no-repeat;
			background-position: center right;
		}

Kannst Du dich noch erinnern wieso das nötig war?
Brauchen wir das noch? → Ansonsten würde ich es entfernen.
Ich habe kein IOS zum testen, aber unter Linux und Android scheint es nicht nötig zu sein.

[biologist]

Da habe ich wohl Feedback bekommen, dass irgendwas auf nem iPhone nicht gescheit funktioniert. Ich selbst habe keines.
Kann ich leider nix zu sagen.

[tueddy]

@CaCO3

/* IOS display fix */

Das war wohl ein Browser-Hack.
Habe es gerade mit/ohne Hack auf iPhone getestet & kann keinen Unterschied erkennen. Aus meiner Sicht ist es jetzt überflüssig & kann raus.

So sieht es auf dem iPhone jetzt aus:

• Die Titelleiste ist schon recht rumpelig. Das war vorher auch schon so ist aber jetzt etwas schlimmer durch den neuen Schalter „Dunkelmodus“. Bin kein Freund der zusätzlichen Farbe Orange

• Der Erweitern-Schalter sollte neben dem Suchfeld bleiben & nicht umbrechen

• Gleiches gilt für die Lautstärke-Regler:

• Dynamische WLAN Auflistung sollte dunklen Hintergrund haben, ist jetzt noch weiß (Bei NVS-Auflistung passt es). Sieht man nur bei mehreren gespeicherten WLAN’s:

Ansonsten sind alle gemeldeten Dinge gefixt

[CaCO3]

@tueddy

Habe es gerade mit/ohne Hack auf iPhone getestet & kann keinen Unterschied erkennen. Aus meiner Sicht ist es jetzt überflüssig & kann raus

Super

@tueddy

Die Titelleiste ist schon recht rumpelig. Das war vorher auch schon so ist aber jetzt etwas schlimmer durch den neuen Schalter „Dunkelmodus“. Bin kein Freund der zusätzlichen Farbe Orange

Das mit dem orange war schon vorher so. Aber auf einem Touch screen scheint es noch fehlerhaft zu sein, da es nur beim hover orange werden sollte.

Ich find ees auch überladen. Man könnte sich überlegen, den reboot und die Sprachauswahl ins Tools-Register zu verschieben. Ein normaler ANwender braucht das ja nie/selten.

@tueddy

• Der Erweitern-Schalter sollte neben dem Suchfeld bleiben & nicht umbrechen
• Gleiches gilt für die Lautstärke-Regler:

Das war aber schon vorher so!
Ich kann schauen, ob ich das irgendwie verhindern kann.

@tueddy

Dynamische WLAN Auflistung sollte dunklen Hintergrund haben, ist jetzt noch weiß (Bei NVS-Auflistung passt es).

Schaue ich mir noch an.

[maxxe]

Vielen dank für die ganze Arbeit die ihr euch macht. Kann man den mit helfen bei der „Fehler/Bug“ suche? Ich nutze die DEV Branch, aber da scheint es nicht drin zu sein.

[biologist]

@maxxe

Ich nutze die DEV Branch, aber da scheint es nicht drin zu sein.

Du musst seinen Feature-Branch nehmen, um das testen zu können. In dev kommt das erst rein, wenn’s fertig ist.

[joker]

@tueddy

Gleiches gilt für die Lautstärke-Regler:

Das das vorher schon so war, kann ich bestätigen. Ich hatte das damals durch verkleinern der Button unter den Symbolen wieder auf eine Zeile bekommen

[CaCO3]

Das ist aber abhängig von deiner Bildschirm-Auflösung!

[joker]

Das kann sein, für mich hat das damals funktioniert. Wahrscheinlich müsste man das webinterface Responsive machen.
Wenn ich aber sehe, welcher Aufwand ein Dark-Mode ist, dann steht der Nutzen scheinbar in keinem Verhältnis