Allow theming mapstore with another css file

f-necas commented 7 months ago

This PR allows to use another css file (and keeping mapstore context themes) without the need to rebuild app.

CSS file must be provided with another web server and link must be added in index.html and indexTemplate.html

Example of sh file to update it :

#!/bin/sh

INDEX_DIR=${1:-/usr/local/tomcat/webapps/mapstore/}
SNIPPET="<link rel='stylesheet' href='/public/georchestra.css'>"

if grep -q "${SNIPPET}" "${INDEX_DIR}/indexTemplate.html"; then
  echo "[INFO] geOrchestra: stylesheet already present"
  exit 0
fi

echo "[INFO] geOrchestra: add geOrchestra stylesheet..."
sed -i "s#<body>#<body>${SNIPPET}#" ${INDEX_DIR}/index.html
sed -i "s#<body>#<body>${SNIPPET}#" ${INDEX_DIR}/indexTemplate.html

Example of css file :

/* This file is used to override the default geOrchestra theme colors */
body {
    --georchestra-primary: #e20714;
    --georchestra-secondary: rgb(0, 122, 128);
    --georchestra-primary-light: white;
    --georchestra-secondary-light: #eee;
}

/* Mapstore */
.geOrchestra[data-ms2-container="ms2"] {
    --georchestra-ms-primary: var(--georchestra-primary);
    --georchestra-ms-main-variant-color: rgb(0,58,59);

    --georchestra-ms-button-color: var(--georchestra-primary);
    --georchestra-ms-link-color:color-mix(in srgb,var(--georchestra-primary),#fff 30%);
    --georchestra-ms-link-hover-color:color-mix(in srgb,var(--georchestra-primary),#fff 50%);
    --georchestra-ms-loader-primary-color: var(--georchestra-primary);
    --georchestra-ms-loader-primary-fade-color: color-mix(in srgb,var(--georchestra-primary),#fff 75%);
    --georchestra-ms-focus-color: color-mix(in srgb,var(--georchestra-primary),#fff 90%);

    --georchestra-ms-button-bg: #fff;
    --georchestra-ms-button-border-color: #fff;
    --georchestra-ms-button-hover-color: color-mix(in srgb,var(--georchestra-primary),#fff 30%);
    --georchestra-ms-button-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-bg),#000 15%);
    --georchestra-ms-button-hover-border-color: color-mix(in srgb,var(--georchestra-ms-button-bg),#000 15%);
    --georchestra-ms-button-disabled-bg: color-mix(in srgb,var(--georchestra-ms-button-bg),#fff 30%);
    --georchestra-ms-button-disabled-border-color: color-mix(in srgb,var(--georchestra-ms-button-bg),#fff 30%);
    --georchestra-ms-button-active-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-bg),#000 30%);
    --georchestra-ms-button-active-border-color: color-mix(in srgb,var(--georchestra-primary),#000 30%);
    --georchestra-ms-button-active-color: color-mix(in srgb,var(--georchestra-primary),#fff 30%);
    --georchestra-ms-button-focus-border-color: color-mix(in srgb,var(--georchestra-primary),#000 30%);
    --georchestra-ms-button-active-hover-border-color: color-mix(in srgb,var(--georchestra-primary),#000 30%);
    --georchestra-ms-button-active-hover-color: color-mix(in srgb,var(--georchestra-primary),#000 30%);
    --georchestra-ms-button-focus-color: color-mix(in srgb,var(--georchestra-primary),#fff 30%);

    --georchestra-ms-button-primary-bg: var(--georchestra-primary);
    --georchestra-ms-button-primary-border-color: var(--georchestra-primary);
    --georchestra-ms-button-primary-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 15%);
    --georchestra-ms-button-primary-hover-border-color: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 15%);
    --georchestra-ms-button-primary-disabled-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#fff 30%);
    --georchestra-ms-button-primary-disabled-border-color: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#fff 30%);
    --georchestra-ms-button-primary-active-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);
    --georchestra-ms-button-primary-active-border-color: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);
    --georchestra-ms-button-primary-active-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);
    --georchestra-ms-button-primary-focus-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);
    --georchestra-ms-button-primary-focus-border-color: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);
    --georchestra-ms-button-primary-focus-bg: color-mix(in srgb,var(--georchestra-ms-button-primary-bg),#000 30%);

    --georchestra-ms-button-success-bg: var(--georchestra-secondary);
    --georchestra-ms-button-success-border-color: var(--georchestra-secondary);
    --georchestra-ms-button-success-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 15%);
    --georchestra-ms-button-success-hover-border-color: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 15%);
    --georchestra-ms-button-success-disabled-bg: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#fff 30%);
    --georchestra-ms-button-success-disabled-border-color: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#fff 30%);
    --georchestra-ms-button-success-active-bg: var(--georchestra-secondary);
    --georchestra-ms-button-success-active-border-color: var(--georchestra-secondary);
    --georchestra-ms-button-success-active-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 30%);
    --georchestra-ms-button-success-active-hover-border-color: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 30%);
    --georchestra-ms-button-success-focus-hover-bg: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 30%);
    --georchestra-ms-button-success-focus-border-color: color-mix(in srgb,var(--georchestra-ms-button-success-bg),#000 30%);
    --georchestra-ms-button-success-focus-bg: color-mix(in srgb,var(--georchestra-secondary),#000 30%);
}

Gaetanbrl commented 7 months ago

Seems better / good idea to get a default georchestra theme with the right colors.

This methods needs to be documented somewhere.

f-necas commented 7 months ago

Can be backported to 2023.02.xx

landryb commented 7 months ago

please, not a horrible script shell lost in a ticket somewhere :)

there are two things at stake here:

changing the default style for a georchestra one (:+1: for me, but personal taste etc..) - but it should be clearly stated in the relnotes for ppl deploying, otherwise they will get a surprise next time they upgrade
allowing to override the css without having to rebuild. I'm also :+1: on that, but by default (eg not 'please run that script'), and for everyone.

Thinking out loud idea, why not having some controller reading /etc/georchestra/mapstore/georchestra.css ? after all the datadir feature is integrated to read properties files, the new geor header is integrated and configurable via the datadir, so why not doing the same for ms2 ? or like georchestraStylesheet in default.properties ?

this way you commit the change to index.html & indexTemplate.html and the default css override is read for everyone from the datadir ?

Gaetanbrl commented 7 months ago

georchestraStylesheet

@landryb this could be a new param to develop ?

Gaetanbrl commented 7 months ago

@f-necas did you already check what documented here?

Thanks @tdipisa, We have already read this documentation but :

The build needs to be a technician - not really easy for a simple mapstore /SDI administrator to create a custom theme reusable from every mapstore context
Custom Theme for contexts is not easy to read if a user customize many variables / many themes from localConfig.json

So, this PR is a method that just change the default theme according to georchestra's color and insert new variables names to easily override this default theme without build again mapstore or create regression.

f-necas commented 7 months ago

Hi all !

Thanks for your comments and reviews. Indeed we checked the documentation but as Gaetan said, the purpose here is to allow customization without building the whole app.

To solve landry's question, georchestra's stylesheet can already be set in localConfig.json to style the header. We can also, if the variable is set, create an html link to style mapstore without having to edit index.html and indexTemplate.html. Makes sense for me .

landryb commented 7 months ago

Hi all !

To solve landry's question, georchestra's stylesheet can already be set in localConfig.json to style the header. We can also, if the variable is set, create an html link to style mapstore without having to edit index.html and indexTemplate.html. Makes sense for me .

so the same css would be applied to style the webcomponent header and mapstore ? sounds... interesting :) !

Gaetanbrl commented 7 months ago

@f-necas A well-integrated georchestra colour :D :

Gaetanbrl commented 7 months ago

Tested but not really sur to use the config correctly.

Here a stylesheet modification (loaded with stylesheetUri) result. My rules are not really reads as prior rules.

First - default georchestra theme is always loaded.
Next, I need to click on a map or create context to see my styleSheet rules

themecss

This gift show steps :

go to mapstore
see default CSS ( steelsheetUri rules was not used)
Open a context
come back to admin page
see steelsheetUri rules correctly loaded

Here the stylesheet used by localConfig.json file (in datadir) with stylesheetUri param :

body {
    --georchestra-primary: rgb(125, 160, 157);
    --georchestra-secondary: rgb(0, 122, 128);
    --georchestra-primary-light: white;
    --georchestra-secondary-light: #eee;
    --georchestra-ms-button-primary-bg: rgb(125, 160, 157);
    --georchestra-ms-button-primary-border-color: rgb(125, 160, 157);
    --georchestra-ms-button-primary-disabled-bg: rgb(125, 160, 157);
}

/* Mapstore */
.geOrchestra[data-ms2-container="ms2"] {
    --georchestra-ms-primary: var(--georchestra-primary);
    --georchestra-ms-main-variant-color: rgb(0,58,59);
    --georchestra-ms-button-primary-bg: rgb(125, 160, 157);
    --georchestra-ms-button-primary-border-color: rgb(125, 160, 157);
    --georchestra-ms-button-primary-disabled-bg: rgb(125, 160, 157);
}

Gaetanbrl commented 7 months ago

Tested but not really sur to use the config correctly.

Works well after correctly insert Easytheming plugin in Desktop/Mobile section (localConfig.json file).

See result here (buttons colors come from custom stylesheet):

https://gis.jdev.fr/mapstore/#/

landryb commented 7 months ago

so now that i've looked at the current PR code, my understanding is:

we add a new 'easytheming' plugin by default in all configs
the default stylesheet can be configured by using the stylesheet param for the easytheming plugin in localConfig.json
and one can configure the easytheming plugin in the context editor, pointing at another stylesheet that will override the one set in localConfig.json.

right ?

Also i think that 'extends' (not 'conflicts with ') what can be done with the existing ms2 theming panel in the context creator where the amount of options is limited, while with this easytheming plugin technically all css classes can be overriden.. is that right too ?

f-necas commented 7 months ago

Hi Landry,

That's right for the first two points. For the last one (maybe @Gaetanbrl could be more precise on it), The theme configured with easy should be override by the settings we set while creating the context.

So :

It takes context colors first
Then fallback on stylesheet defined in localConfig.json
Then fallback on default color (geOrchestra's ones here in this PR).

And you're right, css classes should be ovveridable.

Gaetanbrl commented 7 months ago

and one can configure the easytheming plugin in the context editor

Easytheming seems not configurable in context editor UI. To change it with this code, change localConfig.json file. Right @f-necas ?

landryb commented 7 months ago

Easytheming seems not configurable in context editor UI. To change it with this code, change localConfig.json file. Right @f-necas ?

well, then that'd be a major drawback, because from my understadning the point was to allow users not having access to the datadir to point to externally hosted css files.. using the context editor.

f-necas commented 6 months ago

and one can configure the easytheming plugin in the context editor

Easytheming seems not configurable in context editor UI. To change it with this code, change localConfig.json file. Right @f-necas ?

Right, the plugin is configurable only with localConfig.json. But context editor keep its logic when users defines variables for their context.

@landryb the context editor stay as it is :)

landryb commented 6 months ago

Right, the plugin is configurable only with localConfig.json. But context editor keep its logic when users defines variables for their context.

that's sad because in my opinion it will miss most targets, eg users who don't have access to customize localConfig.json

@landryb the context editor stay as it is :)

i wasnt saying the context editor should be modified at all, rather that if easytheming is a plugin like others, then it can be configured/should be configurable as other plugins in the context editor plugin configuration panel.... which is accessible to more users than users able to access the server/modify localConfig.json.

Gaetanbrl commented 6 months ago

if easytheming is a plugin like others, then it can be configured/should be configurable as other plugins in the context editor plugin configuration panel

Maybe there is some misunderstanding here ?

From what I understand, this plugin is not a classical plugin. Easytheming ease the way to change the default mapstore theme (as ADMIN can do generaly with build command + CSS). This plugin is about global MapStore theme and global CSS variables (e.g change default mapstore colors) and he is not a map plugin / functionallity (so not a plugin configurable from context editor).

landryb commented 6 months ago

ah, then i misunderstood the original intent, my bad :)

Gaetanbrl commented 2 months ago

This steps needs to be documented soon :

create a new stylesheet (e.g thememapstore.css) from attached .txt file (rename this file with .css extension)
Adapt colors variables
mapstore needs to load it from local or external path. So, you can publish a CSS file in a web server
Open /etc/georchestra/mapstore/configs/localConfig.json
Add stylesheetUri key with CSS file path as value
save localConfig.json file

This change don't need to restart any tomcat service because localConfig.json is loaded each time a card / context is opened.

Here example to change to CSS extension (github don't allow to attach .css file): thememapstore.txt

georchestra / mapstore2-georchestra

Allow theming mapstore with another css file #709