Konfiguration #

Theming in der Kartenviewer API #

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:

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:

1. Ausschließlich .less Dateien auf der Addon root-Ebene werden berücksichtigt
2. Das Addon darf die entsprechenden .less Dateien nicht direkt importieren, dies geschieht automatisch
3. .less Dateien, die die theming Variablen verwenden wollen, müssen die Datei theme-vars.less importieren