Improve custom_window_frame
This commit is contained in:
Emil Ernerfeldt
parent
853d492724
commit
d5dcc87ace
1 changed files with 111 additions and 98 deletions
|
|
@ -31,7 +31,7 @@ impl eframe::App for MyApp {
|
|||
|
||||
fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
|
||||
custom_window_frame(ctx, frame, "egui with custom frame", |ui| {
|
||||
ui.label("This is just the contents of the window");
|
||||
ui.label("This is just the contents of the window.");
|
||||
ui.horizontal(|ui| {
|
||||
ui.label("egui theme:");
|
||||
egui::widgets::global_dark_light_mode_buttons(ui);
|
||||
|
|
@ -47,54 +47,69 @@ fn custom_window_frame(
|
|||
add_contents: impl FnOnce(&mut egui::Ui),
|
||||
) {
|
||||
use egui::*;
|
||||
let text_color = ctx.style().visuals.text_color();
|
||||
|
||||
// Height of the title bar
|
||||
let height = 28.0;
|
||||
let panel_frame = egui::Frame {
|
||||
fill: ctx.style().visuals.window_fill(),
|
||||
rounding: 10.0.into(),
|
||||
stroke: ctx.style().visuals.widgets.noninteractive.fg_stroke,
|
||||
outer_margin: 0.5.into(), // so the stroke is within the bounds
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
let button_height = 16.0;
|
||||
CentralPanel::default().frame(panel_frame).show(ctx, |ui| {
|
||||
let app_rect = ui.max_rect();
|
||||
|
||||
let title_bar_height = 32.0;
|
||||
let title_bar_rect = {
|
||||
let mut rect = app_rect;
|
||||
rect.max.y = rect.min.y + title_bar_height;
|
||||
rect
|
||||
};
|
||||
title_bar_ui(ui, frame, title_bar_rect, title);
|
||||
|
||||
// Add the contents:
|
||||
let content_rect = {
|
||||
let mut rect = app_rect;
|
||||
rect.min.y = title_bar_rect.max.y;
|
||||
rect
|
||||
}
|
||||
.shrink(4.0);
|
||||
let mut content_ui = ui.child_ui(content_rect, *ui.layout());
|
||||
add_contents(&mut content_ui);
|
||||
});
|
||||
}
|
||||
|
||||
fn title_bar_ui(
|
||||
ui: &mut egui::Ui,
|
||||
frame: &mut eframe::Frame,
|
||||
title_bar_rect: eframe::epaint::Rect,
|
||||
title: &str,
|
||||
) {
|
||||
use egui::*;
|
||||
|
||||
CentralPanel::default()
|
||||
.frame(Frame::none())
|
||||
.show(ctx, |ui| {
|
||||
let rect = ui.max_rect();
|
||||
let painter = ui.painter();
|
||||
|
||||
// Paint the frame:
|
||||
painter.rect(
|
||||
rect.shrink(1.0),
|
||||
10.0,
|
||||
ctx.style().visuals.window_fill(),
|
||||
Stroke::new(1.0, text_color),
|
||||
);
|
||||
let title_bar_response = ui.interact(title_bar_rect, Id::new("title_bar"), Sense::click());
|
||||
|
||||
// Paint the title:
|
||||
painter.text(
|
||||
rect.center_top() + vec2(0.0, height / 2.0),
|
||||
title_bar_rect.center(),
|
||||
Align2::CENTER_CENTER,
|
||||
title,
|
||||
FontId::proportional(height * 0.8),
|
||||
text_color,
|
||||
FontId::proportional(20.0),
|
||||
ui.style().visuals.text_color(),
|
||||
);
|
||||
|
||||
// Paint the line under the title:
|
||||
painter.line_segment(
|
||||
[
|
||||
rect.left_top() + vec2(2.0, height),
|
||||
rect.right_top() + vec2(-2.0, height),
|
||||
title_bar_rect.left_bottom() + vec2(1.0, 0.0),
|
||||
title_bar_rect.right_bottom() + vec2(-1.0, 0.0),
|
||||
],
|
||||
Stroke::new(1.0, text_color),
|
||||
ui.visuals().widgets.noninteractive.bg_stroke,
|
||||
);
|
||||
|
||||
// Interact with the title bar (drag to move window):
|
||||
let title_bar_rect = {
|
||||
let mut rect = rect;
|
||||
rect.max.y = rect.min.y + height;
|
||||
rect
|
||||
};
|
||||
let title_bar_response =
|
||||
ui.interact(title_bar_rect, Id::new("title_bar"), Sense::click());
|
||||
|
||||
if title_bar_response.double_clicked() {
|
||||
frame.set_maximized(!frame.info().window_info.maximized);
|
||||
} else if title_bar_response.is_pointer_button_down_on() {
|
||||
|
|
@ -102,9 +117,20 @@ fn custom_window_frame(
|
|||
}
|
||||
|
||||
ui.allocate_ui_at_rect(title_bar_rect, |ui| {
|
||||
ui.horizontal_centered(|ui| {
|
||||
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
|
||||
ui.spacing_mut().item_spacing.x = 0.0;
|
||||
ui.visuals_mut().button_frame = false;
|
||||
ui.add_space(8.0);
|
||||
close_maximize_minimize(ui, frame);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/// Show some close/maximize/minimize buttons for the native window.
|
||||
fn close_maximize_minimize(ui: &mut egui::Ui, frame: &mut eframe::Frame) {
|
||||
use egui::{Button, RichText};
|
||||
|
||||
let button_height = 12.0;
|
||||
|
||||
let close_response = ui
|
||||
.add(Button::new(RichText::new("❌").size(button_height)))
|
||||
|
|
@ -113,16 +139,9 @@ fn custom_window_frame(
|
|||
frame.close();
|
||||
}
|
||||
|
||||
let minimized_response = ui
|
||||
.add(Button::new(RichText::new("🗕").size(button_height)))
|
||||
.on_hover_text("Minimize the window");
|
||||
if minimized_response.clicked() {
|
||||
frame.set_minimized(true);
|
||||
}
|
||||
|
||||
if frame.info().window_info.maximized {
|
||||
let maximized_response = ui
|
||||
.add(Button::new(RichText::new("🗖").size(button_height)))
|
||||
.add(Button::new(RichText::new("🗗").size(button_height)))
|
||||
.on_hover_text("Restore window");
|
||||
if maximized_response.clicked() {
|
||||
frame.set_maximized(false);
|
||||
|
|
@ -135,17 +154,11 @@ fn custom_window_frame(
|
|||
frame.set_maximized(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add the contents:
|
||||
let content_rect = {
|
||||
let mut rect = rect;
|
||||
rect.min.y = title_bar_rect.max.y;
|
||||
rect
|
||||
let minimized_response = ui
|
||||
.add(Button::new(RichText::new("🗕").size(button_height)))
|
||||
.on_hover_text("Minimize the window");
|
||||
if minimized_response.clicked() {
|
||||
frame.set_minimized(true);
|
||||
}
|
||||
.shrink(4.0);
|
||||
let mut content_ui = ui.child_ui(content_rect, *ui.layout());
|
||||
add_contents(&mut content_ui);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue