Theming
Die optische Ausprägung (das "Theme") einer Portalinstanz kann durch Verwendung einer eigenen Konfigurationsdatei (theme.less) angepasst werden.
Dazu wurden zentrale Style-Definitionen (Farben, Schriftarten, etc.) in Less Variablen ausgelagert. Diese befinden sich in der Datei css/theme-vars.less. Um diese Variablen für eine spezielle Portalinstanz überschreiben zu können muss eine Datei theme.less im Portalordner angelegt werden (im Regelfall neben der index.html und neben der config.json). Die theme.less muss folgende Struktur aufweisen:
@import "../../css/theme-vars.less";
// Overwrite imported LESS variables from ../../css/theme-vars.less
@baseColor: white;
@headerColor: white;
@activeMenuItemColor: white;
@activeMenuListColor: #315E9F;
@toolButtonColor: #315E9F;
@footerColor: white;
@scaleLineColor: white;
@baseFontColor: rgb(58, 58, 58);
@baseFontColorDark: rgb(24, 24, 24);
@baseFontColorMedium2: rgb(110, 90, 90);
@baseFontColorMedium: #315E9F;
@baseFontColorBright: rgb(168, 168, 168);
@baseFontColorWhite: white;
@fontColorAlert: red;
@controlsFontColor: black;
@menuItemFontColor: #E20026;
@menuListItemHoverFontColor: white;
@menuItemHoverFontColor: #315E9F;
@controlsFontColor: white;
// Less-Handling: Import all less files in 'modules' folder
@import "modules/**/*.less";
// Less-Handling: Import all less files in 'addons' folder on addon root level
@import "addons/*/*.less";
Zwischen den beiden @import Anweisungen können die Less Variablen für die Portalinstanz überschrieben werden:
| Name | Bedeutung | Default |
|---|---|---|
| @activeMenuItemColor | Hintergrundfarbe für aktive Menüeinträge im Header | rgba(227, 227, 227, 0.5); |
| @activeMenuListColor | Hintergrundfarbe für das aktive Element in einer Menu-Dropdown-Liste (z.B. "Werkzeuge") | #fff |
| @baseColor | Basisfarbe für Hintergründe, wird an möglichst vielen Stellen im Theming verwendet, um eine einheitliche Optik zu erreichen | #f8f8f8 |
| @baseFontColorDark | Abgedunktelte Basisschriftfarbe | rgb(85, 85, 85) |
| @baseFontColorBright | Helle Basisschriftfarbe | #f3f3f3 |
| @baseFontColorMedium | Mittelhelle Basisschriftfarbe | rgb(151, 151, 151) |
| @baseFontColorMedium2 | 2. Mittelhelle Basisschriftfarbe (etwas dunkler als @baseFontColorMedium) | rgb(119, 119, 119) |
| @baseFontColorWhite | Weiße Basisfarbe | #fff |
| @baseFontColor | Basisschriftfarbe, wird an möglichst vielen Stellen im Theming verwendet, um eine einheitliche Optik zu erreichen | rgb(51, 51, 51) |
| @baseFontFamilyBold | Basis Schriftart fett | MasterPortalFont Bold","Arial Narrow",Arial,sans-serif |
| @baseFontFamily | Basis Schriftart | MasterPortalFont","Arial Narrow",Arial,sans-serif |
| @baseFontSize | Basisschriftgröße Portal | 12px |
| @buttonColor | Farbe für Buttons | @toolButtonColor |
| @buttonColorHover | Hover-Farbe für Buttons | darken(@buttonColor, 10) |
| @buttonColorActive | Active-Farbe für Buttons | darken(@buttonColor, 10) |
| @buttonBorderColorFocus | Border-Focus Farbe für Buttons | fade(@buttonColor, 50%) |
| @buttonBackgroundColor | Hintergrundfarbe für Buttons | @toolButtonColor |
| @buttonBackgroundColorHover | Hover-Hintergrundfarbe für Buttons | darken(@buttonColor, 10) |
| @buttonBackgroundColorActive | Active-Hintergrundfarbe für Buttons | darken(@buttonColor, 10) |
| @buttonLightBorderColor | Border-Farbe für Light-Buttons | #ddd |
| @buttonLightColor | Hintergrundfarbe für Light-Buttons | rgba(255, 255, 255, 1) |
| @buttonLightColorActive | Active-Hintergrundfarbe für Light-Buttons | darken(@buttonLightColor, 10) |
| @buttonLightColorHover | Hover-Hintergrundfarbe für Light-Buttons | darken(@buttonLightColor, 10) |
| @controlsFontColor | Schriftfarbe aller Kartenwerkzeuge (Controls) | |
| @fontColorAlert | Schriftfarbe für Warnungen | #E10019 |
| @footerColor | Hintergrundfarbe für den Footer | rgba(255, 255, 255, 0.7) |
| @headerColor | Hintergrundfarbe für den Header | @baseColor |
| @layerTreeColor | Hintergrundfarbe des Layer Trees | darken(@baseColor, 70%) |
| @menuItemColor | Hintergrundfarbe für Menüeinträge im Header | @baseColor |
| @menuItemFontColor | Schriftfarbe für Menüeinträge im Header | @baseFontColorMedium2 |
| @menuItemHoverFontColor | Schriftfarbe für mit der Maus überfahrene Menüeinträge im Header | @baseFontColor |
| @menuListHoverColor | Hintergrundfarbe für mit der Maus überfahrene Listeneinträge in einer Menu-Dropdown-Liste (z.B. "Werkzeuge") | rgb(8, 88, 158) |
| @menuListItemHoverFontColor | Schriftfarbe für mit der Maus überfahrene Listeneinträge in einer Menu-Dropdown-Liste (z.B. "Werkzeuge") | @baseFontColorWhite |
| @scaleLineColor | Hintergrundfarbe für die Maßstabsanzeige | rgba(255, 255, 255, 0.8) |
| @searchBackgroundColor | Hintergrundfarbe der Suchleiste | rgba(255, 255, 255, 0.8) |
| @selectButtonColor | Hintergrundfarbe für Select-Buttons | #d1d1d1 |
| @selectButtonColorActive | Active-Hintergrundfarbe für Select-Buttons | darken(@selectButtonColor, 10); |
| @selectButtonColorHover | Hover-Hintergrundfarbe für Select-Buttons | lighten(@selectButtonColor, 10) |
| @titleFontColor | Schriftfarbe des Titels im Header | @baseFontColor |
| @titleFontSize | Schriftgröße des Titels im Header | 23px |
| @toolButtonBorderColorFocus | Focus-Farbe des Rahmens für alle Kartenwerkzeuge (Controls) | fade(@toolButtonColor, 50%) |
| @toolButtonColor | Farbe für alle Kartenwerkzeuge (Controls) | #E10019 |
| @toolButtonBackgroundColor | Hintergrundfarbe für alle Kartenwerkzeuge | @baseColor |
| @toolButtonBackgroundColorActive | Active-Hintergrundfarbe für alle Kartenwerkzeuge (Controls) | darken(@toolButtonBackgroundColor, 10) |
| @toolButtonBackgroundColorHover | Hover-Hintergrundfarbe für alle Kartenwerkzeuge (Controls) | lighten(@toolButtonBackgroundColor, 10) |
| @windowTitleFontSize | Titelschriftgröße für alle Fenster (im Allgemeinen alle Tools) | 14px |
Anwenden eines Themes
Voraussetzung: Es wird eine Node.js Installation (inkl. npm) in der Version 12 oder höher auf dem ausführenden System benötigt.
Im Entwickler-Setup (gestartet mit npm start) werden die Anpassungen in der theme.less direkt angewandt (durch einen automatischen Reload des Kartenviewers im Browser).
Zur Anwendung der theme.less in einem Produktiv-Build muss diese erst in eine CSS-Datei übersetzt werden. Dies ist Teil des Build-Prozesses der Kartenviewer API. Dieser kann mittels npm gestartet werden:
# Wechseln zum Hauptordner dieses Repos
cd /pfad/zum/root/order/dieses/repos/
# Einmaliges Auflösen der Abhängigkeiten
npm install
# Starten des Build-Vorgangs
npm run builddemo
Anschließend befindet sich für jeden Kartenviewer (unter dist/), für den zuvor ein eigenes Theme angelegt wurde (s.o.), eine entsprechende CSS-Datei. Diese wird unter dist/mastercode/<build>/css/<portal>-theme-less.css (zum Beispiel dist/mastercode/2_5_0_DEV_2020-06-18__16-46-24/css/demo-theme-less.css) abgelegt und wird im soeben erzeugten Build für das entsprechende Portal direkt verwendet.
Falls diese CSS-Datei auch in einem bestehendem Produktivsystem verwendet werden soll muss diese entsprechend in das bestehende Produktivsystem kopiert werden unter Beibehaltungs des Dateinamens.
Theming von Addons
Das Theming von Addons funktioniert, vorausgesetzt die verwendeten Addons machen gebrauch von den Theming Variablen.
Des Weiteren gelten folgende Bedingungen für Addons, die Theming unterstützen wollen:
- Ausschließlich .less Dateien auf der Addon root-Ebene werden berücksichtigt
- Das Addon darf die entsprechenden .less Dateien nicht direkt importieren, dies geschieht automatisch
- .less Dateien, die die theming Variablen verwenden wollen, müssen die Datei
theme-vars.lessimportieren