Designing the disabled state of a composited widget

[pieterdd]

I'm developing a simple UI component library for Floem. Quick demo:

One of my current roadblocks is handling of disabled state. My labeled checkbox is, much like floem's labeled checkbox, a composite. But while the disabled state seems to propagate properly to the child components in the floem implementation, it doesn't in mine.

What should I do to have the disabled state propagate down to child components?

[dzhou121]

First of all, this looks really cool!

The disabled state isn't passed to child components though in Floem. Maybe it should?

[Zoxc]

The default style sheet has a separate style for CheckboxClass inside a disabled LabeledCheckboxClass. No inheritance is needed.

[pieterdd]

Very interesting you bring that up - I might have misunderstood how the class system works. But it looks promising. Are my assumptions correct now?

1. Child components that should be restyled upon disable should listen to a class, e.g. child_component.class(ChildComponentClass)
2. The parent component's style should overwrite the child's style upon disable:

parent_component.style(|s| {
  s.disabled(|s| {
    s.class(ChildComponentClass, |s| /* set disabled style for the child component here */)
  })
})

I tried applying this in a minimal example but unfortunately it doesn't respond how I expected:

use floem::peniko::Color;
use floem::reactive::{create_signal, ReadSignal, WriteSignal};
use floem::style::{AlignItems, Style};
use floem::view::View;
use floem::views::{h_stack, label, v_stack, Decorators};
use floem::widgets::{button, checkbox};
use floem::{style_class, EventPropagation};

style_class!(pub ButtonStyle);

fn spinbox(counter: ReadSignal<i32>, set_counter: WriteSignal<i32>) -> impl View {
    h_stack((
        button(|| "-").class(ButtonStyle).on_click(move |_| {
            set_counter.update(|value| *value -= 1);
            EventPropagation::Stop
        }),
        label(move || counter.get()),
        button(|| "+").class(ButtonStyle).on_click(move |_| {
            set_counter.update(|value| *value += 1);
            EventPropagation::Stop
        }),
    ))
    .style(|s| {
        let button_style = Style::new()
            .background(Color::GREEN)
            .color(Color::WHITE)
            .font_size(18.0)
            .padding(5.0);

        s.class(ButtonStyle, move |_| button_style.clone())
            .align_items(AlignItems::Center)
            .disabled(|s| {
                s.background(Color::DIM_GRAY)
                    .class(ButtonStyle, |s| s.background(Color::DARK_GRAY))
            })
            .gap(10.0, 0.0)
    })
}

fn app_view() -> impl View {
    let (counter, set_counter) = create_signal(0);
    let (spinbox_enabled, set_spinbox_enabled) = create_signal(true);

    v_stack((
        checkbox(spinbox_enabled)
            .on_click_stop(move |_| set_spinbox_enabled.set(!spinbox_enabled.get())),
        spinbox(counter, set_counter).disabled(move || !spinbox_enabled.get()),
    ))
}

fn main() {
    floem::launch(app_view);
}

How come the buttons aren't changing their background to dark gray?

[Zoxc]

That code looks correct skimming over it. Try with #229.

[pieterdd]

Nice, that works!

[pieterdd]

(Edit: feel free to ignore the post below. Once #230 is resolved I will no longer rely on classes to achieve disabled state in descendants.)

I have another case regarding groups of widgets.

Individually, my widgets implement a disabled state. But under my current understanding of the system, if I create a group of these widgets, the group should re-implement the disabled state for every widget in the group.

In the example below, the top two widgets are ungrouped while the bottom two are grouped:

When the checkbox is unchecked, the ungrouped widgets correctly switch to the disabled state while the grouped ones don't. Am I using Floem correctly or is this perhaps a bug?

use floem::peniko::Color;
use floem::reactive::create_signal;
use floem::style::AlignItems;
use floem::style_class;
use floem::view::View;
use floem::views::{h_stack, label, svg, v_stack, Decorators};
use floem::widgets::checkbox;

style_class!(pub BulletStyle);

fn bullet_item(item_label: &'static str) -> impl View {
    h_stack((
        svg(|| String::from("")).class(BulletStyle),
        label(move || item_label),
    ))
    .style(|s| {
        s.align_items(AlignItems::Center)
            .class(BulletStyle, |s| {
                s.width(15.0)
                    .height(15.0)
                    .border_radius(100.0)
                    .background(Color::GREEN)
            })
            .disabled(|s| s.class(BulletStyle, |s| s.background(Color::GRAY)))
            .gap(10.0, 0.0)
    })
}

fn group_of_bullet_items() -> impl View {
    v_stack((
        bullet_item("Grouped bullet item 1"),
        bullet_item("Grouped bullet item 2"),
    ))
    .style(|s| {
        s.background(Color::rgb(0.8, 0.8, 0.8))
            .disabled(|s| s.class(BulletStyle, |s| s.background(Color::GRAY)))
    })
}

fn app_view() -> impl View {
    let (controls_enabled, set_controls_enabled) = create_signal(true);

    v_stack((
        checkbox(controls_enabled)
            .on_click_stop(move |_| set_controls_enabled.set(!controls_enabled.get())),
        bullet_item("Ungrouped bullet item 1").disabled(move || !controls_enabled.get()),
        bullet_item("Ungrouped bullet item 2").disabled(move || !controls_enabled.get()),
        group_of_bullet_items().disabled(move || !controls_enabled.get()),
    ))
}

fn main() {
    floem::launch(app_view);
}

[pieterdd]

Quick update to this thread in case someone finds it through a search engine later: as of e795021, Floem ensures that views pass their disabled state down to its descendants for styling purposes. If a parent is disabled, its descendants will apply disabled styling.