emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
22.13k stars 1.6k forks source link

Visual indication support for menu_image_button and ImageButton with no frame #3560

Open v-kat opened 11 months ago

v-kat commented 11 months ago

Describe the bug Currently tab doesn't show any indicator for both menu_image_button and ImageButton

To Reproduce Steps to reproduce the behavior:

  1. Make a new ImageButton e.g.
    ui.add(
    ImageButton::new(SizedTexture::new(
        texture_id,
        egui::Vec2::new(5.0, 5.0),
    ))
    .frame(false)
    )
  2. Hit tab and notice that the selected element is isn't shown.

Expected behavior Like other buttons an image button should show a selection indicator even without a frame

YgorSouza commented 11 months ago

Does it work if you remove the .frame(false)?

I tried this on the hello_world example:

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("My egui Application");
            ui.horizontal(|ui| {
                let name_label = ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name)
                    .labelled_by(name_label.id);
            });
            ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
            if ui
                .add(Button::new("Click each year").frame(false))
                .clicked()
            {
                self.age += 1;
            }
            let img = egui::include_image!("../../../crates/egui/assets/ferris.png");
            if ui
                .add_sized(
                    [50.0, 50.0],
                    egui::ImageButton::new(img.clone()).frame(false),
                )
                .clicked()
            {
                self.age += 5;
            }
            if ui
                .add_sized([50.0, 50.0], egui::Button::image(img.clone()).frame(false))
                .clicked()
            {
                self.age += 10;
            }

            ui.menu_image_button(img, |ui| {
                ui.menu_button("My sub-menu", |ui| {
                    if ui.button("Close the menu").clicked() {
                        ui.close_menu();
                        self.age += 15;
                    }
                });
            });
            ui.label(format!("Hello '{}', age {}", self.name, self.age));
        });
    }
}

With this, Tab goes through all the buttons, and they respond to Enter and Space when they have focus. But without the frame, there is no way to tell visually that the button has focus. So maybe there should be a frame that is added automatically when a frameless widget has focus, similar to how it works in web browsers:

image

v-kat commented 11 months ago

You're right that it's just an issue with the .frame(false) the keyboard support still seems to work but with no visual indicator.