Rust

5938 readers

1 users here now

Welcome to the Rust community! This is a place to discuss about the Rust programming language.

Wormhole

[email protected]

Credits

The icon is a modified version of the official rust logo (changing the colors to a gradient and black background)

founded 1 year ago

MODERATORS

[email protected]

gtk-rs change widget appearance at runtime. (infosec.pub)

submitted 4 days ago* (last edited 4 days ago) by [email protected] to c/[email protected]

10 comments fedilink hide all child comments

It might be lack of sleep, but I can't figure this out.

I have a Label, and I want its text to be red when it represents an error, and I want it be green when it represent "good to go".

I found search result for C and maybe a solution for Python, but nothing for Rust.

I tried manually setting the css-classes property and running queue_draw(); it didn't work.

I can have a gtk::Box or a Frame that I place where the Label should go, then declare two Labels, and use set_child() to switch between them, but that seems like an ugly solution.

Do you have a solution?

SOLVED:

I have to add a "." before declaring a CSS "thing" for it to be considered a class.

Ex:

.overlay {
        background: rgba(60, 60, 60, 1);
        font-size: 25px;
}

instead of:

overlay {
        background: rgba(60, 60, 60, 1);
        font-size: 25px;)
}

Just use label.add_css_class(), label.remove_css_class() or label.set_css_classes() and make sure to properly load your CSS style sheets,

Source: the comment of [email protected]

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 5 points 4 days ago* (last edited 4 days ago) (1 children)

Just use label.add_css_class(), label.remove_css_class() or label.set_css_classes() and make sure to properly load your CSS style sheets, this is usually done by including them as a resource alongside .ui files and icons. If you are using libadwaita, you can also use its predefined style classes.

full example (requires nightly toolchain)

#!/usr/bin/env -S cargo +nightly -Zscript
***
[dependencies]
gtk = { package = "gtk4", version = "0.9.3", features = ["v4_12"] }
***

use gtk::{glib, prelude::*};

const STYLESHEET: &str = r#"
.green {
    color: green;
}
.red {
    color: red;
}
"#;

fn main() -> glib::ExitCode {
    let app = gtk::Application::builder()
        .application_id("org.example.HelloWorld")
        .build();

    app.connect_activate(|app| {
        let window = gtk::ApplicationWindow::builder()
            .application(app)
            .title("Hello, World!")
            .build();

        // Stylesheets are usually bundled with application resources
        // and automatically loaded
        let css_provider = gtk::CssProvider::new();
        css_provider.load_from_string(STYLESHEET);
        gtk::style_context_add_provider_for_display(
            &RootExt::display(&window),
            &css_provider,
            0
        );

        let box_ = gtk::Box::new(gtk::Orientation::Vertical, 6);

        let label = gtk::Label::builder()
            .label("Hello, World")
            .css_classes(["green"].as_slice())
            .build();
        box_.append(&label);


        let button = gtk::Button::builder()
            .label("Toggle Color")
            .build();
        box_.append(&button);

        button.connect_clicked(glib::clone!(#[weak] label, move |_| {
            if label.has_css_class("red") {
                label.add_css_class("green");
                label.remove_css_class("red");
            } else {
                label.add_css_class("red");
                label.remove_css_class("green");
            }
        }));

        window.set_child(Some(&box_));
        window.present();
    });

    app.run()
}

[–] [email protected] 5 points 4 days ago (2 children)

This is embarrassing, but when was it not?

I have to add a "." before the name of a css class, I must learn my tools.

[–] [email protected] 3 points 4 days ago (1 children)

I mean, it is not embarrassing for you. In the browser, the CSS's "native platform", you add classes, via the JavaScript API, without the dot. It's not a stupid assumption.

To have to add the dot in the CSS class name seems a bit of an oversight in the gtkrs API.

[–] [email protected] 1 points 4 days ago

I think you understood their comment wrong. In your code (e.g. label.add_css_class("green");) you don't use a dot, but in the CSS stylesheet. It works the same as with HTML/JS/CSS.

[–] [email protected] 2 points 4 days ago (1 children)

Well, that's CSS :D

Note that if you create a custom Widget class, you can set a CSS name, wich isn't a CSS class and doesn't use a leading dot.

[–] [email protected] 1 points 4 days ago

you can set a CSS name, wich isn’t a CSS class and doesn’t use a leading dot.

Yeah that's what I've been using all along.