How to emphasise the difference between types of controls of the same class (UI) with the use of palettes or styles but these controls have different roles?

Questions
1

Hi,

How to emphasise the difference between types of controls of the same class (UI) with the use of palettes or styles but these controls have different roles? (similar like using bootstrap with webapps)

For example. Some buttons should stand out more (primary, secondary, warning etc).

Kind of similar like: https://github.com/supercollider/supercollider/issues/3598

I found that SuperCollider has some style support. Some example code based on the current documentation:
‘’’
(
p = QPalette().button_(Color.yellow);
v = View(bounds: 400@400).layout_(VLayout()).front;
v.layout.add(TextView());
v.layout.add(PopUpMenu().items_({1.0.rand}!10));
v.layout.add(Button().string_(“hi”));
v.layout.add(Button().string_(“hi hi”).palette_(QPalette.dark));
v.layout.add(Button().palette_(p).states_([[“Color on”], [“Color off”]]));
v.layout.add(Button().palette_(p).states_([[“Color 2”], [“Color 1”]])); // fourth button
)

p.button_(Color.red); // set the style or override the colors of the fourt buton

QPalette.cheatsheet
QtGUI.palette = QPalette.dark
QtGUI.palette = QPalette.light
QtGUI.palette = QPalette.new

QtGUI.availableStyles
QtGUI.style = “fusion”
QtGUI.style = “windows”
QtGUI.style = “macintosh”

GUI skins however that seems not supported with combination with styles and palettes.
‘’’

Is it possible to refine button style based on a current available when it’s a warning or primary button?

With kind regards,

Marinus

2

Assuming I understand your intention, you could make a kind of style factory, e.g.

(

f = (
	\warningButton : {
		|self, label|
		Button().states_([[label, Color.black, Color.red]]);
	},
	\normalButton : {
		|self, label|
		Button().states_([[label, Color.black, nil]]);
	}
);
	
v = View(bounds: 400@400).layout_(VLayout()).front;
v.layout.add(TextView());
v.layout.add(PopUpMenu().items_({1.0.rand}!10));
v.layout.add(f.warningButton("Warning")); 
v.layout.add(f.normalButton("Normal")); 
)
3

Thanks for your answer.

My intention is to separate the styling specific code from the view logic. So I can maintain it in one place for all my views.

Using a factory is actually a good option to bundle styling specific code. However I wondering if a more stylesheet approach is possible.

Button().type(‘primaryButton’).front;

Or

Inheritance
PrimaryButton : Button { }

PrimaryButton(400@100).front;

And separate from view specific code set the the colors:

d = QPalette.dark;
d.setColor(Color.green, ‘PrimaryButton’, ‘active’); // for example
QtGUI.palette = d;

Maybe this is possible with QtGUI styles or palette? Or is there maybe another to achieve this in SuperCollider?

With kind regards,