Allow using CSS in or outside view about relm HOT 7 OPEN

Is there any way to use this in the current version, even if it's an ugly hack? Just trying to change button background colors.

from relm.

Yes, you can always use GTK directly.
Please look here to see an example from the mg crate.

from relm.

That seems to be working. For whatever reason it would only work if the style_context was for the specific Widget (a gtk::Button) and the name was used to identify the style:

impl Widget for BusButton {
    fn init_view(&self, model: &mut BusButtonModel) {
        let style_context = self.bus_button.get_style_context().unwrap();
        let style = include_str!("../style/bus_button.css");
        let provider = CssProvider::new();
        provider.load_from_data(style).unwrap();
        style_context.add_provider(&provider, STYLE_PROVIDER_PRIORITY_APPLICATION);

        if model.active {
            self.add_class("active")
        }
    }
...
    view! {
        gtk::Box {
            orientation: Vertical,
            gtk::ToggleButton {
                active: model.active,
                sensitive: false,
            }
            #[name="bus_button"]
            gtk::Button {
                clicked => Request,
                label: &(&model.channel_id + 1).to_string(),
                visible: true,
                sensitive: model.enabled,
                name: "bus-button",
            }
        }
    }

And css:

#bus-button.active {
  background-color: #ffa0a0;
}

If I tried using just button for the CSS selector it didn't work. Is that to be expected?

It would be cool if attribute addition/removal could be bound directly to model attributes. Maybe something like:

view! {
  gtk::Button {
    class-active: model.active
  }
}

So if the boolean is true, the class is added.

from relm.

It is expected that button does not work: it should be button > label.
Run with the environment variable GTK_DEBUG=interactive set to be able to inspect the widgets.
In the Objects tab, click of "Show details" (the bulb icon), choose CSS node and you'll see a tree of nodes that you can use in your selectors.

Also, the idea of conditional class is interesting, even thought I'll probably use another syntax.

from relm.

Oy. I completely forgot that GTK buttons have a label as their child.

The conditional class bindings was heavily based on how Ember.js handles classes in components. I'm not particular to the syntax, just hoping to cut down on some boiler-plate.

from relm.

Noob here

Yes, you can always use GTK directly.
Please look here to see an example from the mg crate.

I tried following that. However, I couldn't get it to compile with the get_style_context() method in the init_view method (I'm pretty sure the api has changed?) so I haven't found out how to finish this aspect

Any tips?

Also, when I use the same entries under the gtk::Entry{<entries>} I get an error on each of them

I'm using the latest version of rust gtk, and going back a few versions might be difficult

from relm.

@syntapy: The gtk-rs API indeed changed: when that's the case, please ask the questions to gtk-rs people (here's the place for relm questions only).
Anyway, that should work:

    fn init_view(&mut self) {
        use gtk::{CssProviderExt, StyleContextExt};
        let style_context = self.button.get_style_context();
        let style = include_bytes!("../style.css");
        let provider = gtk::CssProvider::new();
        provider.load_from_data(style).unwrap();
        style_context.add_provider(&provider, gtk::STYLE_PROVIDER_PRIORITY_APPLICATION);
    }

from relm.