Create a style class that i can bind to with non-dialog properties?

every class i create uses the dialog box, which is generally passable. but i need to create clasess that have CSS properties not found in the dialog box. i know can build classes in the stylesheet.css but i can't link to any of them in the component props which means my non-webdev team can't use them.

how do i get around this odd limitation?

Perspective allows you to create styles:

Those can be added to a component in the designer:
image

The stylesheet.css is used in case you need to override something (probably an IA style, but possibly you create a style in the list that is a stub and is actually defined here?)
image

Is that what you are looking for?

You can apply style classes you've written in your stylesheet.css by just entering the name of your class in the component's style classes.
image

image

1 Like

@aaronrai24 this is just what i was looking for. i did not know you could just add your custom classes that way. fantastic.

it would be nice if they'd show up in the dropdown too, wouldn't it?
3 Likes

Would require embedding a full CSS parser in the Java side of the application. Not impossible, but not a high priority.

You could make a 'stub' style class (with no actual effects) so that it shows up in the selector, and then do all of the actual CSS authoring in the stylesheet. The big downside there is maintenance burden. I'm personally in favor of the idea of allowing arbitrary CSS editing inside a style class (with a one-way operation to convert the builder into a plain text input), but I also don't make any decisions re: Perspective :smile:

2 Likes

@PGriffith totally understand. i'm just being a whiny :poop:. and it's only because some of the team won't hunt for stuff if it's not in their face. so it's purely a 'make Ian's life easier' thing. :smiley:

For @ian.sebryk note you can actually do this already, but it's only practical for adding basic props. Inside of an existing property in the dialogue, you can end the prop with ; and then continue on and add what you want to aka css injection.

Eg in the backgroundColor prop value, you can add:

; gap: 5px

This way you can add props that aren't in the dialogue which let's you still see them from the dialogue, rather than having some props in dialogue, some in css stylesheet

1 Like

After doing this for some time, I find it’s actually a much better workflow than using the dialog editor (even considering that the editor for the Advanced Stylesheet is a little janky).

1 Like

love it. like SQL injection from back in the day... nice. :100:

How do you make a stub style class that is in a folder structure work with the stylesheet? Is it possible? Using the root works great. For example, stub class is shared/style-test.

CSS doesn't really have folders, so the emitted style class uses an escaped slash as the locator. So it'd be something like .psc-shared\/style-test {

3 Likes

i'm revisiting this mostly for my own benefit.

the answer still stands. but some pointers: note the .psc-prefix when writing the class, and it's absence when using it in the box. also note that changes won't be seen until the project is saved. unfortunate, but apparently necessary.

that's all. ciao for now. :smiley: