Styling model

[willrogers]

EPICS UI definitions tend to mix style and content: e.g. colour, position and PV name are all properties of a widget.

In cs-web-proto we will need to contribute styles from different contexts:

• hard-coded into the function of a widget
• default styles that may be overridden
• site-wide styles to change the look and feel of a screen

We will also need to handle positioning differently depending on context: are we rendering widgets by pixel or standard CSS layouts?

I will discuss this at more length in a wiki page.

[willrogers]

These are the properties of a simple widget (label). We will have a similar JSON representation. Which of these are CSS? Which are hard-coded for every widget of that kind, which are props, which are from the global theme?

Position

• Auto Size
• Height
• Width
• X
• Y
• Scale Options

Hard-coded

Most of the hard-coded CSS won't be an editable property of a widget.

• Widget Type

Props

• Name
• Actions
• Enabled
• Rules
• Scripts
• Visible
• Wrap words
• Text
• Tooltip
• Transparent

Props, defaulting to global theme

• Background Color
• Font
• Foreground Color
• Horizontal Alignment
• Border

[willrogers]

Note that this is tied into #42, but I think we should at least discuss them separately.

[willrogers]

The simplest way to do this, I think:

• hard-coded styles are set in (e.g.) Label.module.css
• global styles (e.g. class .Label can be set in App.css or another top-level file imported into App.tsx
• each component sets class .Label {classes.Label} (which gets priority? seems to be the module)

Further styles passed directly in props will take precedence over both of these.

What do you think? This seems simple enough to start with, but I very much suspect there are lots of corner cases that might trip us up.

Positioning is separate.

[willrogers]

Also, my understanding of styled-components is that it provides a nice way to do things but has broadly similar capabilities to the above.

There's a reasonable summary here: https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945/

[skyfrench]

We have googled the same page :)

I'm in the process of setting up a little demo, which is along similar lines to your thoughts - trying to see how simple and clear the styling can be.
I've also got a little demo of styled-components going to see what 'ease' that brings over working without.

Coming soon ...

[willrogers]

Great.

I have made a few tweaks which I will push shortly, they shouldn't conflict too badly I don't think.

[skyfrench]

The simplest way to do this, I think:

• hard-coded styles are set in (e.g.) Label.module.css

This I follow and agree with; seems to work nicely. All 'Label' objects will then default to the same styling.

• global styles (e.g. class .Label can be set in App.css or another top-level file imported into App.tsx
• each component sets class .Label {classes.Label} (which gets priority? seems to be the module)

This - I haven't managed to get to work. Example? What do you mean here by 'global'?

Further styles passed directly in props will take precedence over both of these.

That works nicely.

[TimGuiteDiamond]

Presume you have come across this page before but perhaps we could swap out the global CSS file for one of a number of provided themes (Light, Dark...) and this would allow the capability @skyfrench mentioned without drastically changing the module.css < global.css < JSX model?

https://stackoverflow.com/questions/41355371/dynamically-switching-css-files

[willrogers]

See #47.

React's page: https://reactjs.org/docs/faq-styling.html. It mentions https://www.npmjs.com/package/classnames, which might help if we ended up with lots of classes on each element.