mirror of
https://github.com/emilk/egui.git
synced 2026-08-31 05:40:03 -04:00
Resizable panels + right and bottom panels (#438)
* Side panel resizing and add right panels * Add resizable top/bottom panels * Deprecate TopPanel * Final tweaks and update CHANGELOG.md
This commit is contained in:
@@ -152,47 +152,50 @@ impl DemoWindows {
|
||||
egui_windows,
|
||||
} = self;
|
||||
|
||||
egui::SidePanel::left("side_panel", 190.0).show(ctx, |ui| {
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.heading("✒ egui demos");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
|
||||
ScrollArea::auto_sized().show(ui, |ui| {
|
||||
use egui::special_emojis::{GITHUB, OS_APPLE, OS_LINUX, OS_WINDOWS};
|
||||
|
||||
ui.label("egui is an immediate mode GUI library written in Rust.");
|
||||
|
||||
ui.label(format!(
|
||||
"egui runs on the web, or natively on {}{}{}",
|
||||
OS_APPLE, OS_LINUX, OS_WINDOWS,
|
||||
));
|
||||
|
||||
egui::SidePanel::right("egui_demo_panel")
|
||||
.min_width(150.0)
|
||||
.default_width(190.0)
|
||||
.show(ctx, |ui| {
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.hyperlink_to(
|
||||
format!("{} egui home page", GITHUB),
|
||||
"https://github.com/emilk/egui",
|
||||
);
|
||||
ui.heading("✒ egui demos");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
demos.checkboxes(ui);
|
||||
ui.separator();
|
||||
tests.checkboxes(ui);
|
||||
ui.separator();
|
||||
egui_windows.checkboxes(ui);
|
||||
ui.separator();
|
||||
|
||||
ui.vertical_centered(|ui| {
|
||||
if ui.button("Organize windows").clicked() {
|
||||
ui.ctx().memory().reset_areas();
|
||||
}
|
||||
ScrollArea::auto_sized().show(ui, |ui| {
|
||||
use egui::special_emojis::{GITHUB, OS_APPLE, OS_LINUX, OS_WINDOWS};
|
||||
|
||||
ui.label("egui is an immediate mode GUI library written in Rust.");
|
||||
|
||||
ui.label(format!(
|
||||
"egui runs on the web, or natively on {}{}{}",
|
||||
OS_APPLE, OS_LINUX, OS_WINDOWS,
|
||||
));
|
||||
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.hyperlink_to(
|
||||
format!("{} egui home page", GITHUB),
|
||||
"https://github.com/emilk/egui",
|
||||
);
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
demos.checkboxes(ui);
|
||||
ui.separator();
|
||||
tests.checkboxes(ui);
|
||||
ui.separator();
|
||||
egui_windows.checkboxes(ui);
|
||||
ui.separator();
|
||||
|
||||
ui.vertical_centered(|ui| {
|
||||
if ui.button("Organize windows").clicked() {
|
||||
ui.ctx().memory().reset_areas();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
egui::TopPanel::top("menu_bar").show(ctx, |ui| {
|
||||
egui::TopBottomPanel::top("menu_bar").show(ctx, |ui| {
|
||||
show_menu_bar(ui);
|
||||
});
|
||||
|
||||
@@ -302,7 +305,7 @@ fn show_menu_bar(ui: &mut Ui) {
|
||||
}
|
||||
if ui
|
||||
.button("Clear egui memory")
|
||||
.on_hover_text("Forget scroll, collapsing headers etc")
|
||||
.on_hover_text("Forget scroll, positions, sizes etc")
|
||||
.clicked()
|
||||
{
|
||||
*ui.ctx().memory() = Default::default();
|
||||
|
||||
@@ -61,7 +61,7 @@ impl epi::App for HttpApp {
|
||||
}
|
||||
|
||||
/// Called each time the UI needs repainting, which may be many times per second.
|
||||
/// Put your widgets into a `SidePanel`, `TopPanel`, `CentralPanel`, `Window` or `Area`.
|
||||
/// Put your widgets into a `SidePanel`, `TopBottomPanel`, `CentralPanel`, `Window` or `Area`.
|
||||
fn update(&mut self, ctx: &egui::CtxRef, frame: &mut epi::Frame<'_>) {
|
||||
if let Some(receiver) = &mut self.in_progress {
|
||||
// Are we there yet?
|
||||
|
||||
@@ -74,49 +74,14 @@ impl epi::App for WrapApp {
|
||||
self.selected_anchor = self.apps.iter_mut().next().unwrap().0.to_owned();
|
||||
}
|
||||
|
||||
egui::TopPanel::top("wrap_app_top_bar").show(ctx, |ui| {
|
||||
// A menu-bar is a horizontal layout with some special styles applied.
|
||||
// egui::menu::bar(ui, |ui| {
|
||||
ui.horizontal_wrapped(|ui| {
|
||||
dark_light_mode_switch(ui);
|
||||
|
||||
ui.checkbox(&mut self.backend_panel.open, "💻 Backend");
|
||||
ui.separator();
|
||||
|
||||
for (anchor, app) in self.apps.iter_mut() {
|
||||
if ui
|
||||
.selectable_label(self.selected_anchor == anchor, app.name())
|
||||
.clicked()
|
||||
{
|
||||
self.selected_anchor = anchor.to_owned();
|
||||
if frame.is_web() {
|
||||
ui.output().open_url(format!("#{}", anchor));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ui.with_layout(egui::Layout::right_to_left(), |ui| {
|
||||
if false {
|
||||
// TODO: fix the overlap on small screens
|
||||
if let Some(seconds_since_midnight) = frame.info().seconds_since_midnight {
|
||||
if clock_button(ui, seconds_since_midnight).clicked() {
|
||||
self.selected_anchor = "clock".to_owned();
|
||||
if frame.is_web() {
|
||||
ui.output().open_url("#clock");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
egui::warn_if_debug_build(ui);
|
||||
});
|
||||
});
|
||||
egui::TopBottomPanel::top("wrap_app_top_bar").show(ctx, |ui| {
|
||||
self.bar_contents(ui, frame);
|
||||
});
|
||||
|
||||
self.backend_panel.update(ctx, frame);
|
||||
|
||||
if self.backend_panel.open || ctx.memory().everything_is_visible() {
|
||||
egui::SidePanel::left("backend_panel", 150.0).show(ctx, |ui| {
|
||||
egui::SidePanel::left("backend_panel").show(ctx, |ui| {
|
||||
self.backend_panel.ui(ui, frame);
|
||||
});
|
||||
}
|
||||
@@ -131,6 +96,47 @@ impl epi::App for WrapApp {
|
||||
}
|
||||
}
|
||||
|
||||
impl WrapApp {
|
||||
fn bar_contents(&mut self, ui: &mut egui::Ui, frame: &mut epi::Frame<'_>) {
|
||||
// A menu-bar is a horizontal layout with some special styles applied.
|
||||
// egui::menu::bar(ui, |ui| {
|
||||
ui.horizontal_wrapped(|ui| {
|
||||
dark_light_mode_switch(ui);
|
||||
|
||||
ui.checkbox(&mut self.backend_panel.open, "💻 Backend");
|
||||
ui.separator();
|
||||
|
||||
for (anchor, app) in self.apps.iter_mut() {
|
||||
if ui
|
||||
.selectable_label(self.selected_anchor == anchor, app.name())
|
||||
.clicked()
|
||||
{
|
||||
self.selected_anchor = anchor.to_owned();
|
||||
if frame.is_web() {
|
||||
ui.output().open_url(format!("#{}", anchor));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ui.with_layout(egui::Layout::right_to_left(), |ui| {
|
||||
if false {
|
||||
// TODO: fix the overlap on small screens
|
||||
if let Some(seconds_since_midnight) = frame.info().seconds_since_midnight {
|
||||
if clock_button(ui, seconds_since_midnight).clicked() {
|
||||
self.selected_anchor = "clock".to_owned();
|
||||
if frame.is_web() {
|
||||
ui.output().open_url("#clock");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
egui::warn_if_debug_build(ui);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fn clock_button(ui: &mut egui::Ui, seconds_since_midnight: f64) -> egui::Response {
|
||||
let time = seconds_since_midnight;
|
||||
let time = format!(
|
||||
@@ -256,10 +262,21 @@ impl BackendPanel {
|
||||
}
|
||||
|
||||
fn ui(&mut self, ui: &mut egui::Ui, frame: &mut epi::Frame<'_>) {
|
||||
ui.heading("💻 Backend");
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.heading("💻 Backend");
|
||||
});
|
||||
ui.separator();
|
||||
|
||||
self.run_mode_ui(ui);
|
||||
|
||||
if ui
|
||||
.button("Clear egui memory")
|
||||
.on_hover_text("Forget scroll, positions, sizes etc")
|
||||
.clicked()
|
||||
{
|
||||
*ui.ctx().memory() = Default::default();
|
||||
}
|
||||
|
||||
ui.separator();
|
||||
|
||||
self.frame_history.ui(ui);
|
||||
@@ -274,6 +291,15 @@ impl BackendPanel {
|
||||
}
|
||||
}
|
||||
|
||||
if !frame.is_web()
|
||||
&& ui
|
||||
.button("📱 Phone Size")
|
||||
.on_hover_text("Resize the window to be small like a phone.")
|
||||
.clicked()
|
||||
{
|
||||
frame.set_window_size(egui::Vec2::new(375.0, 812.0)); // iPhone 12 mini
|
||||
}
|
||||
|
||||
ui.separator();
|
||||
|
||||
if frame.is_web() {
|
||||
@@ -299,17 +325,6 @@ impl BackendPanel {
|
||||
if !ui.ctx().is_using_pointer() {
|
||||
self.max_size_points_active = self.max_size_points_ui;
|
||||
}
|
||||
} else {
|
||||
if ui
|
||||
.button("📱 Phone Size")
|
||||
.on_hover_text("Resize the window to be small like a phone.")
|
||||
.clicked()
|
||||
{
|
||||
frame.set_window_size(egui::Vec2::new(375.0, 812.0)); // iPhone 12 mini
|
||||
}
|
||||
if ui.button("Quit").clicked() {
|
||||
frame.quit();
|
||||
}
|
||||
}
|
||||
|
||||
let mut screen_reader = ui.ctx().memory().options.screen_reader;
|
||||
@@ -328,6 +343,13 @@ impl BackendPanel {
|
||||
ui.label(format!("{:?}", event));
|
||||
}
|
||||
});
|
||||
|
||||
if !frame.is_web() {
|
||||
ui.separator();
|
||||
if ui.button("Quit").clicked() {
|
||||
frame.quit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn pixels_per_point_ui(
|
||||
@@ -347,6 +369,7 @@ impl BackendPanel {
|
||||
ui.add(
|
||||
egui::Slider::new(pixels_per_point, 0.5..=5.0)
|
||||
.logarithmic(true)
|
||||
.clamp_to_range(true)
|
||||
.text("Scale"),
|
||||
)
|
||||
.on_hover_text("Physical pixels per point.");
|
||||
|
||||
Reference in New Issue
Block a user