Improve Hajk client custom styling ability by adding CSS anchor classes

[sweco-semara]

Sharing an idea/proposition for improving core Hajk MUI-styling capability, using standard MUI JSON profiles. E.g. for adapting Hajk to a specific municipality's or corporate entity's graphical profile according to a communication department's guidelines.

✅ Hajk client already has native MUI5 theming support (using new-client/public/customTheme.json) according to the rules of Material UI v5 Theming
❌ Lack of documentation hints. Propose to add a brief summary e.g. first bullet / summary from this idea, if accepted, to main README
❌ Lack of component/plug-in specific CSS styling classes, making it difficult for a graphic designer to adapt some elements. E.g. a global theming of MUI grid with it's CSS classes MuiGrid-item under a MuiGrid-root will also affect the arrows in infoclick modals (with number of GetFeatureInfo hits >= 2). Propose to add non-intrusive CSS styling "theming hint classes" per component, e.g. hajk-modal-info to the infoclick plug-in. This new optional class enables a differentiating in theming/styling although the same MUI Grid component structure is used in multiple other places in Hajk client.

This last proposed simple change could potentially act as a starting point for gradually improving all client plug-ins (and core client) elements with similar theming hint classes. This proposal is fully backwards compatible since introducing new optional CSS-classes will not break existing CSS hierarchy or existing custom styles.

If idea is accepted, I would create an issue and contribute a small PR against develop for evaluating the implementation starting point. It does not have to be a global decision / i.e. made mandatory to enforce this idea to all Hajk plug-ins, there is no downside of leaving it at the starting point for future inspiration only and potentially gradually improving theming capability over time.

See example custom theme:

[sweco-semara]

@Hallbergs @jacobwod Hi core developers, I am ready to start an issue/small PR for this idea if you don't see an obvious downside or have another suggested approach? While beta-testing of Hajk theming for the Swedish Geotechnical Instititute we came across this pretty simple work-around for global theme styles "bleeding into" unrelated components like the infoclick plug-in.

[Hallbergs]

Sound like a great fix/addition! I cannot really see any downside. The "theming hint classes" sounds like a good way to solve the bleed issue.

Customizing Hajk to fit varying graphical profiles should be made as simple as possible!

[jacobwod]

Hi @sweco-semara, I absolutely agree.

You said that you've already found a simple fix. Is it perhaps setting this class in BaseWindowPlugin by reading the plugin's type property (which happens to be the plugins actual "name", e.g. "layerswitcher" or "sketch")? That's the first thing I can think of in this regard, but I'm sure there are other ways too. I look forward to hear about it and see your implementation! 👍

[sweco-semara]

@jacobwod Re-formulation; I already have an expected outcome from graphics designer/"fix" suggestion in terms of simple solution to the problem rather than fix as in code or PR ready. So your suggestion is very interesting in terms of a general method that seems to fulfil the goal of this idea. I will work on this within 1-2 calendar weeks and will start with examining BaseWindowPlugin, sounds very good with a generic implementation in core rather than having some method that each plug-in maintainer must remember to adhere to. 👍

[sweco-semara]

This has now been tested with custom styling for Statens geotekniska institut, SGI, with focus on layerswitcher and feature info. Since specific "class anchors" are sought, no generic Hajk classes have been added other than very general like "window". Rather the upcoming PR will be a small inspiration for future/similar work and should be backwards compatible and not break any existing styling. An example of CSS selector pre / post code change:

• Pre: selector .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation4.MuiAppBar-root.MuiAppBar-colorDefault.MuiAppBar-positionSticky + div > div > .MuiBox-root [aria-label] (note that this is one of the "shorter" ones...) :-)
• Post: selector .hajk-layerswitcher-layer-buttons > div