From 7add730d03a34e67f54d0da25ad741ba1625790b Mon Sep 17 00:00:00 2001 From: Christian Mayer Date: Tue, 18 Jun 2024 08:15:44 +0200 Subject: [PATCH 1/2] Allow custom theme properties This allows to define custom theme properties in the app-config JSON. --- src/util/ColorTheme.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/util/ColorTheme.js b/src/util/ColorTheme.js index 8a2c4799..8b32a124 100644 --- a/src/util/ColorTheme.js +++ b/src/util/ColorTheme.js @@ -112,6 +112,14 @@ const ColorThemeUtil = { merged.light.warning = light.warning ? light.warning : LIGHT_WARNING; merged.light.error = light.error ? light.error : LIGHT_ERROR; + // apply unknown / custom theme properties to light theme + for (const themeProp in light) { + const hasProp = themeProp in merged.light; + if (!hasProp) { + merged.light[themeProp] = light[themeProp]; + } + } + // If light theme is configured with at least the secondary color if (!dark || !dark.secondary) { // fallback to default dark theme @@ -144,6 +152,14 @@ const ColorThemeUtil = { merged.dark.warning = dark.warning ? dark.warning : DARK_WARNING; merged.dark.error = dark.error ? dark.error : DARK_ERROR; + // apply unknown / custom theme properties to dark theme + for (const themeProp in dark) { + const hasProp = themeProp in merged.dark; + if (!hasProp) { + merged.dark[themeProp] = dark[themeProp]; + } + } + return merged; }, From 0289c09950ac7f861a9bdf856a241d0dca43c8a4 Mon Sep 17 00:00:00 2001 From: Christian Mayer Date: Thu, 20 Jun 2024 12:34:37 +0200 Subject: [PATCH 2/2] Update theming configuration documentation --- docs/wegue-configuration.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/wegue-configuration.md b/docs/wegue-configuration.md index a00fd531..1b57d419 100644 --- a/docs/wegue-configuration.md +++ b/docs/wegue-configuration.md @@ -32,7 +32,7 @@ This describes the Wegue application configuration, which is modelled as JSON do ### colorTheme -Wegue supports the Vuetify (light and dark) theme configuration out of the box. This property expects a json object with the same format described in the [vuetify documentation](https://vuetifyjs.com/en/features/theme/#customizing). +Wegue supports the Vuetify (light and dark) theme configuration out of the box. This property expects a json object with the same format described in the [vuetify documentation](https://v2.vuetifyjs.com/en/features/theme/#customizing). Example: ```json @@ -76,6 +76,8 @@ In addition, Wegue also supports the following "on" colors: | onprimary | color over primary color | typography/icons over primary color | | onsecondary | color over secondary color | typography/icons over secondary color | +Moreover, custom colors which are not listed in the Vuetify documentation can also be defined here. Lighten and darken variants will also be generated for them like for the default ones. + To simplify the theming configuration, if the "themes" property isn't configured, Wegue will fallback to the default colors in the example above. Otherwise, both the "light" and "dark" themes will be built based on the respective configured colors. The following tables specify which colors are mandatory and their respective default values. #### Light theme: @@ -273,14 +275,14 @@ Below is an example for such a configuration object: ### legend -Wegue supports rendering of layer legend images, which will be displayed in the [LayerList module](module-configuration?id=LayerList). The optional property `legend` in the main Wegue configuration provides sensible defaults to legend request parameters for all layers in the application. This can be useful e.g. for parameters like fonts, font-sizes and other common options, which you want to share between all legends. +Wegue supports rendering of layer legend images, which will be displayed in the [LayerList module](module-configuration?id=LayerList). The optional property `legend` in the main Wegue configuration provides sensible defaults to legend request parameters for all layers in the application. This can be useful e.g. for parameters like fonts, font-sizes and other common options, which you want to share between all legends. Supported options may be vendor specific, e.g. see [GeoServer Docs](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html) for the options supported for WMS layers in GeoServer. Example: ```json "legend": { - "transparent": true, + "transparent": true, "width": 14, "height": 16, } @@ -596,7 +598,7 @@ Example configurations can be found in the `app-starter/static` directory. Below "format": "MVT", "attribution": "Kindly provided by @ahocevar", "visible": false, - "opacityControl": true, + "opacityControl": true, "style": { "strokeColor": "gray", "strokeWidth": 1,