1
0
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:
Emil Ernerfeldt
2021-05-26 22:06:10 +02:00
committed by GitHub
parent 196ddff499
commit c9766f8a7b
16 changed files with 538 additions and 131 deletions

View File

@@ -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();

View File

@@ -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?

View File

@@ -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.");