Working on perspective and need some help, I would like to do this the right/best way via CSS.
I have a label that shows the status of a process, its either 1 and then I want to show the text as green, or 0 and then I want to show the text as red.
Next to it is a button, and I want to inverse these colors, if the status of the process is 1 (running) I want the button to be red to indicat pressing it will stop the proces, and when the process is 0 the button should be green to indicate it will start the process.
The way I have it now - I have 4 style classes - 2 for text one red one green, and an expression in the style classes property determine which one to use with an if statement on the process value,and 2 for background colors one red one green, doing similar to the buttons style where the expression comparison is reversed.
This works, but I don't think I am doing this the most optimal way, and I would like to be able to have one source of truth regard the colors I use for "running" and "stopped" instead of having them in multiple different style classes especially if more things need similar stylings. What is the "right"/most maintainable way to do this? @victordcq I am guessing you know
Personally, I would use theme variables. Then you can use that variable in a style class or directly in the style property. Pick your poison.
I can think of a few different ways to do this in expressions, but I’m not sure any of them is better than the other, and really they’re just variations on what you’ve already done.
Fwiw, for me, I try to never reference css variables from my Views, and always reference them inside p. Styles and use those in my Views instead, since these are selectable from the dropdown. I'd consider css variables somewhat magic of used directly in views, since they're difficult to find the definitions of and indeed to know what options you have available, particularly if you're not aware of themes and external css files.
Maybe I'm missing something, but I would be creating p styles for your on and off, whether you need multiple sets is determined by if you need different styles for different types of components, but these would reference the css theme variables. Then just bind to these styles in your views. Your status display would use the status directly to determine the style class, and the button would use its action. If you're using red for stopped though, I would be moving to grey from an ISA 101 standpoint. Green should go to white, but I'm a bit flexible on this one..
The problem with perspective styles vs variables is that styles require you to apply the color to something. So if I want to use the same color for a text, for a background, for a border, and whatever else, I'll need to make as many styles, instead of just using that variable. It's frustrating.
Instead, I use the method @bmusson described in the css thread a while ago, with variable indirection, in the stylesheet or theme files. Then I create empty perspective styles with the same names to make them easily selectable.
For one of a kind stuff, I still use the variable directly in the properties. It's somewhat buggy in the designer, as it doesn't update systematically, but I don't mind.