Rust

6035 readers

6 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

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

submitted 3 weeks ago* (last edited 3 weeks ago) by [email protected] to c/rust

11 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 3 weeks ago* (last edited 3 weeks ago) (6 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 3 weeks ago (5 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.

[–] zlatko 3 points 3 weeks ago (2 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.

[–] zlatko 1 points 1 week ago

(sorry for the late response, I have to get in the habit of checking my Lemmy account)

No, I get that - a stylesheet denotes a class by having a dot. A JavaScript API for adding a CSS class omits this redundancy.

I was saying that the author might not be wrong to want to avoid the redundancy in rust example as well (since it explicitly mentions CSS classes).

load more comments (1 replies)

load more comments (3 replies)