Zum Hauptinhalt springen

Styling und Theming auf dem Dashboard

Einleitung​

Bevor man loslegt sollte man sich mit der Struktur eines Dashboards vertraut machen (siehe Kapitel Bauelemente eines Dashboards). Beim Styling gibt es daher verschiedene Zielkomponenten, auf die Einstellungen angewendet werden könnten:

  • Elementarbausteine
  • Vorlagen
  • Steuerlemente (Kopien von Vorlagen)
  • Bereiche
  • Seiten (auch die Seitenauswahl)
  • Dashboard

Dazu kommt noch eine entsprechende Vererbung etwa der im Dashboard eingestellten Hintergrundfarbe auf alle Seiten, bei denen diese nicht explizit angegeben ist und von da aus dann auf alle Bereiche usw.

Darüber hinaus gibt es verschiedene Arten von Einstellungen, die sich durchaus unterschiedlich bezüglich der Vererbung verhalten sollten. Schauen wir uns einmal eine einfache Vorlage an, die nur den Elementarbaustein zur Anzeige eines Textes ohne Interaktion enthält.

Screenshot Einfache Vorlage mit nur einem Label als Elementarbaustein

Ohne weitere Konfiguration hat dieser einen transparenten Hintergrund, da der Baustein zur Kombination mit anderen Elementarbausteinen zu einer Vorlage gedacht ist. Die Textfarbe selbst ist in der Voreinstellung schwarz und kann über die CSS Eigenschaften angepasst werden.

Screenshot Textfarbe via CSS konfigurieren

Anstelle der direkten Änderung der CSS Eigenschaft color ist auch die Verwendung der CSS Styling Variable --dashboard-text-control-text-foreground möglich.

Screenshot Textfarbe via CSS-Styling-Variable konfigurieren

Soll nur ein einziger Text Baustein angepasst werden, macht es keinen Unterschied, welche CSS Eigenschaft verwendet wird. --dashboard-text-control-text-foreground ließe sich allerdings auch auf einem Bereich, einer Seite oder dem Dashboard selbst setzen und würde dann automatisch für alle Text Bausteine gültig sein.

Und das ist auch schon das Grundkonzept des Stylings und Themings von Dashboards in neuroomNet! Aber bevor es in die Details geht noch ein paar weitere grundsätzliche Gedanken an einem etwas erweiterten Beispiel.

Screenshot Erweitertes Beispiel eines Labels

Die offensichtlichen Eigenschaften (es gibt zumindest aus CSS Sicht natürlich eine Vielzahl mehr) sind:

  • Kein Rahmen, aber die Ecken sind gerundet
  • Zeichensatz, -größe, -farbe und -stil
  • Text zentriert
  • Padding um den Text

Für ein allgemeines Styling muss entschieden werden, welche Parameter an welcher Form einstellbar und überschreibar sind. Das dann über alle Elementarbausteine hinweg und vielleicht sogar sinnvoll gruppiert. Für das Styling selbst ist vorgesehen, über die Vererbung von festen CSS Parameter mit CSS Variablen (Custom Properties, -- Präfix) zu arbeiten. Einige Einstellungen sind zurzeit auch noch über die Konfiguration zum Beispiel der Vorlage erreichbar - damit sehr schwer dynamisch zu überschreiben.

Am einfachen Beispiel des nicht-interaktiven Tests soll der aktuelle Stand (27.10.2020) vorgestellt werden.

Rahmen und Rundung​

Nach einem anfänglich anderen Ansatz wird die Art des Rahmens und die Rundung der Ecken nun von dem Steuerelement auf dem Dashboard festgelegt. Insbesondere gibt es kein Konzept diesbezüglich bei den Elementarbausteinen oder der Vorlage selbst: hier ist grundsätzlich alles ohne Rahmen und rechteckig, was den Aufbau von Vorlagen auf Basis der Bausteine erleichtern soll. Natürlich kann jederzeit eine entsprechende CSS Konfiguration vorgenommen werden, aber es gibt kein Konzept ein Styling oder gar Theming von außen (Steuerelement, Bereich, Seite, Dashboard) zu erlauben.

Rahmen und Rundung werden über CSS Variablen eingestellt und können dementsprechend auch aus einem Theme heraus vererbt werden:

  • --dashboard-control-border, Voreinstellung none
  • --dashboard-control-border-radius, Voreinstellung 10px

Analoge Einstellung gibt es auch für die Bereiche:

  • --dashboard-panel-border, Voreinstellung none
  • --dashboard-panel-border-radius, Voreinstellung 10px

Zeichensatz​

Für die Auswahl des Zeichensatzes (font-family) ist erst einmal kein besonderer Mechanismus vorgesehen, sondern die üblichen Vererbungsmechanismen von CSS verwendet. Im Allgemeinen sollte es ausreichen, diesen über ein Theme auszuwählen oder fest bereits auf dem Dashboard vorzugeben - der Einsatz mehrerer verschiedener Zeichensätze auf einem Dashboard kann das Aussehen durchaus recht unruhig machen.

Textstil​

Für den Stil der Zeichen (font-style und font-weight) macht eine grundsätzliche Vererbung wenig Sinn und es gibt keinerlei explizite Einstellung. Ähnlich wie bei dem Zeichensatz müssen Einstellungen direkt im CSS vorgenommen werden. Theoretisch sind natürlich Anforderungen wie "alle nicht-interaktiven Texte sind fett" denkbar. Sollte dies keine seltene Ausnahme darstellen, kann man entsprechende Einstellungen immer noch nachreichen.

Textfarbe​

Für die Textfarbe (CSS color) und der Vollständigkeit auch der Farbe des Hintergrunds (CSS background) eines Textes wird mit CSS Variablen gearbeitet, die dann mit den verschiedensten Mechanismen überlagert werden können.

  • --dashboard-control-text-foreground, Voreinstellung #000000
  • --dashboard-control-text-background, Voreinstellung transparent

Für die optionale Überschrift eines Bereichs gibt es zusätzliche Einstellungen:

  • --dashboard-panel-title-foreground, Voreinstellung #000000
  • --dashboard-panel-title-background, Voreinstellung transparent
  • --dashboard-panel-title-separator, Voreinstellung #ffffff

Zeichengröße​

Mit der Größe der Zeichen (CSS font-size) ist es etwas kniffeliger. Aktuell wird diese für jedes Steuerelement (entnommen aus der Vorlage) explizit in Pixel festgelegt. Alle Elementarbausteine verwenden diese Größe oder eine individuell explizit in Pixel definierte Größe für sich selbst.

Eine Skalierung eines Steuerelementes über die Zeichengröße ist somit fast unmöglich. Im ursprünglichen Ansatz wurde lediglich die Zeichengröße für die Vorlage absolut in Pixel definiert und alle anderen Angaben relativ dazu (sprich in em) angegeben. Dies schloss sowohl die Zeichengrößen der Elementarbausteine (e.g. als 0.5em) als auch alle Dimensionen und Positionen mit ein. Die Angabe einer Breite von 10em für 240 Pixel bei einer Zeichengröße von 24 Pixel wurde allerdings als zu verwirrend angesehen, so dass aktuell sämtliche Angaben in einer Vorlage absolut in Pixel sind.

Eine Vorlage kann daher im Allgemeinen nur in einem Kontext eingesetzt werden, für den sie auch erstellt wurde - sprich eine auf FullHD optimierte Vorlage kann nicht einfach ohne Veränderung in einer mobilen Umgebung verwendet werden. Es ist allerdings keineswegs sicher, dass bei Verwendung relativer Angaben (em) die damit verbundene automatische Skalierung bei Veränderung der Zeichengröße ein ordentliches Ergebnis ergeben würde.

Ein Styling oder Theming der Zeichengröße ist aktuell daher nicht vorgesehen.

Paddings​

Für das Padding wird keine übergreifende CSS Variable verwendet, da diese von Elementarbaustein zu Elementarbaustein sehr verschieden sein kann. Für die nicht interaktiven Texte ist das etwa:

  • --dashboard-text-control-padding, Voreinstellung 0.5em

Styling einer Art von Elementarbaustein​

Eine Herausforderung ist es, alle Arten von Elementarbausteinen gleichartig zu verändert. Zwar verwenden alle Elementarbausteine bestimmte CSS Klassen in ihrere Darstellung, allerdings basiert das Styling / Theming der Dashboards auf einer einfachen Zuordnung von CSS Eigenschaften - eine Klassenhierarchie über Selektoren ist nicht vorgesehen.

Im aktuellen Konzept ist zumindest für bereits im Styling / Theming vorgesehene über CSS Variablen verfügbare Einstellungen vorgesehen, diese durch eine ähnliche Variable zu überschreiben. Dazu folgendes Beispiel:

  • ist --dashboard-control-text-foreground nicht gesetzt, so wird für alle Texte als Voreinstellung (CSS color) #000000 verwendet
  • hat --dashboard-control-text-foreground einen Farbwert, so wird dieser für alle Texte verwendet
  • Um nun zum Beispiel nur für nicht interaktive Texte die selbe Farbe zu verwenden wird einfach --dashboard-text-control-text-foreground verwendet
  • Natürlich kann für einen Elementarbaustein die CSS color über die CSS Eigenschaften des Bausteins unabhängig von diesen allgemeinen Einstellungen fixiert werden

Farben aus dem Theme​

Aktuell enthält ein Theme neben CSS Styling Informationen vor allem auch eine Liste von Farben, die über CSS Variablen der Art --dashboard-theme-color-1, --dashboard-theme-color-2 und so weiter abgerufen werden können. Eine automatische Farbvergabe etwa auf Basis der Reihenfolge von Steuerelementen oder auf Basis eine zufälligen Zuordnung ist aktuell nicht implementiert.

Elementarbausteine​

Jeder Elementarbaustein ist in einem gesonderten Dokument mit seinen Einstellungen beschrieben. Die Beschreibung beschränkt sich dabei auf die für Styling und Theming relevanten Werte.

Bereiche​

Für Bereiche werden zum Styling und Theming noch folgende CSS Variablen angeboten, die bisher nicht erwähnt wurden:

  • --dashboard-panel-title-foreground, Voreinstellung #000000: Farbe (CSS color) des Titels.
  • --dashboard-panel-title-background, Voreinstellung transparent: Hintergrund (CSS background) des Titels.
  • --dashboard-panel-title-separator, Voreinstellung #ffffff: Farbe (CSS border-bottom-color) der Unterstreichung des Titels.

Hintergrundfarben​

Die Hintergrundfarbe von Dashboard, Seite und Bereich können explizit eingestellt werden. Über die direkte Auswahl können Farben optional mit Transparenz verwendet werden, für Farbverläufe müssen die CSS Eigenschaften direkt gepflegt werden.

Screenshot Hintergrundfarbe einstellen 1

Screenshot Hintergrundfarbe einstellen 2

Grundsätzlich sind alle Hintergründe transparent, es empfiehlt sich daher mindestens für das Dashboard selbst eine Hintergrundfarbe festzulegen - lediglich in der produktiven Anzeige ist ein Dashboard weiß hinterlegt.

Was ist ein Theme?​

Ein Theme stellt wie erwähnt erst einmal eine beliebige Anzahl von Farben zur Verfügung, die bei korrekter Konfiguration als umschaltbare Palette für ein Dashboard oder eine Seite dienen können - Bereiche und Steuerelemente verwenden aktuell keine eigenen Themes.

Zusätzlich kann in einem Theme ein beliebige Liste von CSS Eigenschaften definiert werden, die dann auf der entsprechenden Ebene (Dashboard und Seite) als Vorgabewerte eingeblendet werden. Den Konzepten in diesem Dokument folgend macht es allerdings eigentlich nur Sinn, hier die CSS Variablen zu definieren, die auch ausgewertet werden - vielleicht noch der Zeichensatz font-family und andere sehr allgemeine CSS Eigenschaften, die an allen Stellen Sinn machen.