StyleSheet: ToIntrinsicState should be selectors

[Nyan11]

Hello,

I was working with StyleSheet and i wanted to create a Theme for radio button:

• When the button is checked i want a green background and a light green background when hover.
• When the button is unchecked i want a red background and a light red background when hover.

I'm not sure how to do it.

I think we need a selector for the states of elements.

[Nyan11]

I manage to do it:

self
        select: (ToCheckbox asTypeSelector
                 exact: false;
                 yourself)
        style: [
            self when: ToCheckedLookEvent do: [ :e | e requestNewSkin ].
            self when: ToUncheckedLookEvent do: [ :e | e requestNewSkin ].
            self select: [ :e | e isChecked ] asActionSelector style: [
                self
                    when: ToHoveredLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color green muchLighter ]
                    animation: nil.
                self
                    when: ToInstallLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color green ]
                    animation: nil.
                self
                    when: ToLeavedLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color green ]
                    animation: nil ].
            self select: [ :e | e isChecked not ] asActionSelector style: [
                self
                    when: ToInstallLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color red ]
                    animation: nil.
                self
                    when: ToHoveredLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color red muchLighter ]
                    animation: nil.
                self
                    when: ToLeavedLookEvent
                    write: (self property: #'background-color')
                    with: [ :e | Color red ]
                    animation: nil ] ]

[Nyan11]

But i have to force the request of new skin:

            self when: ToCheckedLookEvent do: [ :e | e requestNewSkin ].
            self when: ToUncheckedLookEvent do: [ :e | e requestNewSkin ].

[Nyan11]

And also use action selector to determine the current state:

self select: [ :e | e isChecked ] asActionSelector style: [ "..." ].
self select: [ :e | e isChecked not ] asActionSelector style: [ "..." ]

[Nyan11]

I think it is too complicated.

[Nyan11]

I think something simplier would be better.

With State as selector:

self select: (ToCheckbox asTypeSelector exact: false; yourself) style: [
    self select: ((ToCheckState new checked: true; yourself) asStateSelector) style: [
        "rules for ToCheckbox and selected"
    ].
    self select: ((ToCheckState new checked: false; yourself) asStateSelector) style: [
        "rules for ToCheckbox and unselected"
    ].
]

[plantec]

good example. but finally what you want seems to be the checkbox skin that already exists. I try to do it.