Allow theming mapstore with another css file #709

f-necas · 2024-04-02T14:58:38Z

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 · 2024-04-02T15:14:36Z

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

This methods needs to be documented somewhere.

f-necas · 2024-04-02T15:14:59Z

Can be backported to 2023.02.xx

landryb · 2024-04-02T15:29:19Z

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 👍 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 · 2024-04-02T15:38:16Z

georchestraStylesheet

@landryb this could be a new param to develop ?

tdipisa

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

Gaetanbrl · 2024-04-02T16:04:08Z

@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 · 2024-04-04T09:32:57Z

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 · 2024-04-04T09:53:21Z

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

Thanks for this PR.

Out of comment, if the context editor style selector (last step) keep working, this seems nice enhancement.

In addition, is this param (stylesheet) documented somewhere ? If not, is the README the best place ?

Gaetanbrl · 2024-04-16T15:07:18Z

js/plugins/Header.jsx

@@ -31,6 +31,13 @@ export const Header = ({url = "/header/", page = "mapstore", height = 90, ignore
                header.setAttribute("logo-url", logoUrl);
                header.setAttribute("stylesheet", stylesheet);
                headerScript.src = script;
+                if (stylesheet) {


Maybe it could be interesting to use / loop over an array of stylesheet (to separate header stylesheet and mapstore stylesheet) ?

Gaetanbrl · 2024-04-18T10:40:44Z

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

Gaetanbrl · 2024-04-18T11:07:43Z

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

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 · 2024-04-18T15:02:14Z

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 · 2024-04-22T07:17:39Z

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 · 2024-04-22T10:49:52Z

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 · 2024-04-24T12:47:39Z

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 · 2024-04-24T12:50:42Z

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 · 2024-05-16T11:00:23Z

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 · 2024-05-16T13:35:02Z

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 · 2024-05-16T13:59:26Z

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 · 2024-05-16T15:24:23Z

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

Gaetanbrl

Tested and works fine. Thanks.

Allow theming mapstore with another css file

Gaetanbrl · 2024-09-23T09:38:39Z

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

f-necas requested review from tkohr and Gaetanbrl April 2, 2024 14:58

f-necas force-pushed the theming-mapstore branch from d416c0f to 74cfa65 Compare April 2, 2024 15:00

tdipisa reviewed Apr 2, 2024

View reviewed changes

f-necas requested a review from tdipisa April 4, 2024 09:32

Gaetanbrl reviewed Apr 16, 2024

View reviewed changes

f-necas added 3 commits April 17, 2024 17:49

feat: allow theming mapstore with another css file

99c0943

feat: update header to set stylesheet for whole app

39c86f3

feat: add new plugin to theme mapstore with css file.

6ba8f3b

f-necas force-pushed the theming-mapstore branch from 3c1e3e6 to 6ba8f3b Compare April 17, 2024 15:49

f-necas requested a review from Gaetanbrl April 19, 2024 12:54

Gaetanbrl approved these changes May 21, 2024

View reviewed changes

f-necas merged commit 0e06b3a into master May 21, 2024
2 checks passed

f-necas deleted the theming-mapstore branch May 21, 2024 12:40

f-necas added a commit that referenced this pull request May 29, 2024

Merge pull request #709 from georchestra/theming-mapstore

afe3c76

Allow theming mapstore with another css file

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow theming mapstore with another css file #709

Allow theming mapstore with another css file #709

f-necas commented Apr 2, 2024

Gaetanbrl commented Apr 2, 2024 •

edited

Loading

f-necas commented Apr 2, 2024

landryb commented Apr 2, 2024

Gaetanbrl commented Apr 2, 2024

tdipisa left a comment •

edited

Loading

Gaetanbrl commented Apr 2, 2024

f-necas commented Apr 4, 2024

landryb commented Apr 4, 2024

Gaetanbrl left a comment •

edited

Loading

Gaetanbrl Apr 16, 2024

Gaetanbrl commented Apr 18, 2024

Gaetanbrl commented Apr 18, 2024 •

edited

Loading

Gaetanbrl commented Apr 18, 2024 •

edited

Loading

landryb commented Apr 22, 2024

f-necas commented Apr 22, 2024 •

edited

Loading

Gaetanbrl commented Apr 24, 2024

landryb commented Apr 24, 2024

f-necas commented May 16, 2024

landryb commented May 16, 2024

Gaetanbrl commented May 16, 2024

landryb commented May 16, 2024

Gaetanbrl left a comment •

edited

Loading

Gaetanbrl commented Sep 23, 2024 •

edited

Loading

Allow theming mapstore with another css file #709

Allow theming mapstore with another css file #709

Conversation

f-necas commented Apr 2, 2024

Gaetanbrl commented Apr 2, 2024 • edited Loading

f-necas commented Apr 2, 2024

landryb commented Apr 2, 2024

Gaetanbrl commented Apr 2, 2024

tdipisa left a comment • edited Loading

Choose a reason for hiding this comment

Gaetanbrl commented Apr 2, 2024

f-necas commented Apr 4, 2024

landryb commented Apr 4, 2024

Gaetanbrl left a comment • edited Loading

Choose a reason for hiding this comment

Gaetanbrl Apr 16, 2024

Choose a reason for hiding this comment

Gaetanbrl commented Apr 18, 2024

Gaetanbrl commented Apr 18, 2024 • edited Loading

Gaetanbrl commented Apr 18, 2024 • edited Loading

landryb commented Apr 22, 2024

f-necas commented Apr 22, 2024 • edited Loading

Gaetanbrl commented Apr 24, 2024

landryb commented Apr 24, 2024

f-necas commented May 16, 2024

landryb commented May 16, 2024

Gaetanbrl commented May 16, 2024

landryb commented May 16, 2024

Gaetanbrl left a comment • edited Loading

Choose a reason for hiding this comment

Gaetanbrl commented Sep 23, 2024 • edited Loading

Gaetanbrl commented Apr 2, 2024 •

edited

Loading

tdipisa left a comment •

edited

Loading

Gaetanbrl left a comment •

edited

Loading

Gaetanbrl commented Apr 18, 2024 •

edited

Loading

Gaetanbrl commented Apr 18, 2024 •

edited

Loading

f-necas commented Apr 22, 2024 •

edited

Loading

Gaetanbrl left a comment •

edited

Loading

Gaetanbrl commented Sep 23, 2024 •

edited

Loading