Style Class Direct Editing
K
Keith Gamble
I have noticed that more and more frequently, when you want to do any kind of intermediate-level css without using theming than you have to escape the style class with what feels like SQL injection with something like }.psc-MyStyleClass svg { background-color: blue;}{ in the backgroundImage prop.
The question is, is there a plan to improve this experience? I feel like style classes are a bit watered down to help people that aren’t very familiar with CSS, but in order to leverage them in the designer in any kind of capability past beginner it requires this trickery, or leaving the designer completely to go into theming. Maybe an “advanced” mode in the style class builder that just shows the css for the actual style class that will be created, that you can edit directly would be nice.
I look forward to ideas or improvements that are already planned!
An idea what it could look like with some level of syntax checking, similar to in script transforms:
Log In
D
Donncha Butler
https://forum.inductiveautomation.com/t/feature-perspective-style-class-enhancements/60810/11 discussion on this feature request explains some of the problems with this approach. Injecting our CSS hacks into the background image is a bit too hacky. As an intermediate could we have a property to inject the CSS without the
} ... {
braces?K
Keith Gamble
Donncha Butler: I feel like the aforementioned problems with the CSS not working if not added correctly, is something that would be okay and a great learning opportunity for those not familiar. Similarly to mentioned on that thread, the concept of "Turn an action into script, but it may not work if you break it" already exists in Vision in a few places and is (as someone else pointed out) a really good way to learn how your configured functionality turns into real code.
# This script was generated automatically by the navigation
# script builder. You may modify this script, but if you do,
# you will not be able to use the navigation builder to update
# this script without overwriting your changes.
Having a style properties like
backgroundColor: #FFFFFF
and borderWidth: 1px solid red
turn into.thisStyleName {
background-color: #FFFFFF;
border-width: 1px solid red;
}
Would really help someone better understand how CSS works and not just how Perspectives representation of it works.