userChrome.css: Aktivitäts-Oval für Ordnernamen

Moin.

Ich helfe gerade einem Freund, der lange Jahre bereits Thunderbird verwendet hat, jetzt aber aufgrund seiner kognitiven Einschränkungen mehr und mehr Mühe hat, klarzukommen.

Gerne möchte ich ihm die Handhabung - soweit es eben geht - erleichtern.

Ich bin bereits recht weit gekommen.

In der Ordnerliste wird der gerade aktive Ordner (current selected) visuell so darstellt wir eine Schaltfläche in der Symbolleiste. Mit einem grauen Rahmen.

Das halte ich nicht für günstig, weil es sich bei einem Ordnernamen um eine andere von Bedienelement handelt.

Zur Visualisierung eines selektierten Eintrages gibt es viele Optionen.

In der Nachrichtenliste wird die sehr laute Variante "dunkelblaue Hintergrundfarbe und invertierte Schrift" verwendet.

Das finde ich für Ordnernamen etwas zu "laut".

Ich möchte gerne mal ausprobieren, wie es wirkt, wenn vor "current selected" ein kleine blaues vertikales Oval zu sehen ist, wie in den Schaltflächen "Von", "Empfänger" von der Schnellfilterleiste.

Vor allen nicht selektierten Ordnern soll dann, konsistenterweise, ein kleines graues Oval stehen.

Die Webdevelopertools zeigen folgenden Code für die Schaltflächen der Schnellfilterleiste:

#folderTree .icon::before {
     content: ''!important;
     box-sizing: border-box;
     background-color: color-mix(in srgb, currentColor 10%, transparent)!important;
     border: 1px solid color-mix(in srgb, currentColor 20%, transparent)!important;
     border-radius: 4px!important;
     width: 4px!important;
     height: 12px!important;
     margin: auto 3px!important;
     position: absolute!important;
     inset-block: 0!important;
     inset-inline-start: 2px!important;
     } 

Mir ist es bisher noch nicht gelungen, dass auf Ordnernamen anzuwenden.

Würdet ihr für die Ordnernamen den generated content für das Elternelement "li" anwenden oder bei "div.icon" bleiben.

Hat jemand Lust mir dabei zu helfen.

Am Rande: Was bedeutet dieser merkwürdige Farbwert "color-mix(in srgb, currentColor 10%, transparent)!important;"

Danke!

Vielen Dank. Das hilft weiter.

Ich grüble zur besten Gestaltung der Ordnerliste und ihrer Schwester der Nachrichtenliste immer noch.

Vielleicht ist es doch besser, nicht alle Ordner als Schaltfläche darzustellen. Denn es gibt zwar Ähnlichkeiten ("beim Klicken passiert was"), aber zum gleichartigen Charakter der Ordner gibt es keine Entsprechungen in den Schaltflächen der Symbolleiste.

Im Original wird eine Zeile in der Nachrichtenliste dunkelblau mit invertierter Schrift dargestellt.
Das ist zwar eine "laute", also sehr starke Hervorhebung. Passt vom Gefühl aber gut zur Zielgruppe.

Nun könnte man hingehen und die Ordnerliste exakt so gestalten wie die Nachrichtenliste.

Aber dann stoßen zwei tabellarische Darstellungen aneinander. Dünne graue Linien als Abgrenzungen der Bereiche sind dann nicht mehr möglich. Da müsste was Stärkeres her. Ihr merkt es: knifflig.

Habt ihr noch gute Ideen, vielleicht sogar mit Beispielen besonders guter Lösungen, die euch aufgefallen sind?

Die großen Player Apple, Google und Microsoft machen es alle so wie in meinem aktuellen Stand:

Zitat von Mapenzi

Die Abgrenzung zwischen Ordnerliste und Nachrichtenliste ist hier nicht ausreichend sichtbar?

Das sind sehr feine ästhetische/gestalterische Fragen. Ja, die in deinem Screenshot zu sehenden direkt aneinander angrenzende Folderpane und Threadpane wäre "nicht so mein Ding" : )

Aber das war alles nur "laut gedacht von mir". Ich finde die Gestaltung der beiden Nachbarn "Folderpane" und "Threadpane" ziemlich anspruchsvoll. Da muss ich noch weiter nachdenken.

Wenn ich meine Folderpane und meine Threadpane fertig habe, poste ich sie hier natürlich und stelle sie zur Diskussion. Falls ihr dann Lust habt ...