migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-08-31 22:00:03 -04:00
Code Activity

Improve web demo for mobile (#1556)

Browse Source 
`egui_demo_app/lib`: add "About egui" window, and improve mobile layout

This makes the app responsive, removing the side bars on mobile and turning them into drop-down menus instead.
This commit is contained in:
Emil Ernerfeldt
2022-05-02 13:13:35 +02:00
committed by GitHub
parent 078be52ff8
commit 32b4781da2
11 changed files with 371 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
egui_demo_app/src/backend_panel.rs
View File

@@ -78,11 +78,6 @@ impl BackendPanel {
pub fn ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
egui::trace!(ui);
ui.vertical_centered(|ui| {
ui.heading("💻 Backend");
});
ui.separator();
self.integration_ui(ui, frame);
@@ -132,20 +127,11 @@ impl BackendPanel {
}
fn integration_ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
if frame.is_web() {
ui.label("egui is an immediate mode GUI written in Rust, compiled to WebAssembly, rendered with WebGL.");
ui.label(
"Everything you see is rendered as textured triangles. There is no DOM and no HTML elements. \
This is the web page, reinvented with game tech.");
ui.hyperlink("https://github.com/emilk/egui");
ui.separator();
}
ui.horizontal(|ui| {
ui.spacing_mut().item_spacing.x = 0.0;
ui.label("egui running inside ");
ui.hyperlink_to("eframe", "https://github.com/emilk/egui/tree/master/eframe");
ui.label(".");
});
if let Some(web_info) = &frame.info().web_info {
@@ -169,7 +155,9 @@ impl BackendPanel {
.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
// frame.set_window_size(egui::Vec2::new(375.0, 812.0)); // iPhone 12 mini
frame.set_window_size(egui::Vec2::new(375.0, 667.0)); // iPhone SE 2nd gen
ui.close_menu();
}
}

12
egui_demo_app/src/frame_history.rs
View File

@@ -49,11 +49,13 @@ impl FrameHistory {
);
egui::warn_if_debug_build(ui);
egui::CollapsingHeader::new("📊 CPU usage history")
.default_open(false)
.show(ui, |ui| {
self.graph(ui);
});
if !cfg!(target_arch = "wasm32") {
egui::CollapsingHeader::new("📊 CPU usage history")
.default_open(false)
.show(ui, |ui| {
self.graph(ui);
});
}
}
fn graph(&mut self, ui: &mut egui::Ui) -> egui::Response {

149
egui_demo_app/src/wrap_app.rs
View File

@@ -1,3 +1,4 @@
use egui_demo_lib::is_mobile;
use egui_glow::glow;
#[derive(Default)]
@@ -181,47 +182,30 @@ impl eframe::App for WrapApp {
egui::TopBottomPanel::top("wrap_app_top_bar").show(ctx, |ui| {
egui::trace!(ui);
self.bar_contents(ui, frame);
ui.horizontal_wrapped(|ui| {
ui.visuals_mut().button_frame = false;
self.bar_contents(ui, frame);
});
});
self.state.backend_panel.update(ctx, frame);
if self.state.backend_panel.open || ctx.memory().everything_is_visible() {
egui::SidePanel::left("backend_panel").show(ctx, |ui| {
self.state.backend_panel.ui(ui, frame);
if !is_mobile(ctx)
&& (self.state.backend_panel.open || ctx.memory().everything_is_visible())
{
egui::SidePanel::left("backend_panel")
.resizable(false)
.show(ctx, |ui| {
ui.vertical_centered(|ui| {
ui.heading("💻 Backend");
});
ui.separator();
ui.horizontal(|ui| {
if ui
.button("Reset egui")
.on_hover_text("Forget scroll, positions, sizes etc")
.clicked()
{
*ui.ctx().memory() = Default::default();
}
if ui.button("Reset everything").clicked() {
self.state = Default::default();
*ui.ctx().memory() = Default::default();
}
ui.separator();
self.backend_panel_contents(ui, frame);
});
});
}
let mut found_anchor = false;
let selected_anchor = self.state.selected_anchor.clone();
for (_name, anchor, app) in self.apps_iter_mut() {
if anchor == selected_anchor || ctx.memory().everything_is_visible() {
app.update(ctx, frame);
found_anchor = true;
}
}
if !found_anchor {
self.state.selected_anchor = "demo".into();
}
self.show_selected_app(ctx, frame);
self.state.backend_panel.end_of_frame(ctx);
@@ -234,44 +218,87 @@ impl eframe::App for WrapApp {
}
impl WrapApp {
fn backend_panel_contents(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
self.state.backend_panel.ui(ui, frame);
ui.separator();
ui.horizontal(|ui| {
if ui
.button("Reset egui")
.on_hover_text("Forget scroll, positions, sizes etc")
.clicked()
{
*ui.ctx().memory() = Default::default();
ui.close_menu();
}
if ui.button("Reset everything").clicked() {
self.state = Default::default();
*ui.ctx().memory() = Default::default();
ui.close_menu();
}
});
}
fn show_selected_app(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
let mut found_anchor = false;
let selected_anchor = self.state.selected_anchor.clone();
for (_name, anchor, app) in self.apps_iter_mut() {
if anchor == selected_anchor || ctx.memory().everything_is_visible() {
app.update(ctx, frame);
found_anchor = true;
}
}
if !found_anchor {
self.state.selected_anchor = "demo".into();
}
}
fn bar_contents(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
// A menu-bar is a horizontal layout with some special styles applied.
// egui::menu::bar(ui, |ui| {
ui.horizontal_wrapped(|ui| {
egui::widgets::global_dark_light_mode_switch(ui);
egui::widgets::global_dark_light_mode_switch(ui);
ui.checkbox(&mut self.state.backend_panel.open, "💻 Backend");
ui.separator();
ui.separator();
let mut selected_anchor = self.state.selected_anchor.clone();
for (name, anchor, _app) in self.apps_iter_mut() {
if ui
.selectable_label(selected_anchor == anchor, name)
.clicked()
{
selected_anchor = anchor.to_owned();
if frame.is_web() {
ui.output().open_url(format!("#{}", anchor));
}
if is_mobile(ui.ctx()) {
ui.menu_button("💻 Backend", |ui| {
ui.set_style(ui.ctx().style()); // ignore the "menu" style set by `menu_button`.
self.backend_panel_contents(ui, frame);
});
} else {
ui.toggle_value(&mut self.state.backend_panel.open, "💻 Backend");
}
ui.separator();
let mut selected_anchor = self.state.selected_anchor.clone();
for (name, anchor, _app) in self.apps_iter_mut() {
if ui
.selectable_label(selected_anchor == anchor, name)
.clicked()
{
selected_anchor = anchor.to_owned();
if frame.is_web() {
ui.output().open_url(format!("#{}", anchor));
}
}
self.state.selected_anchor = selected_anchor;
}
self.state.selected_anchor = selected_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) = crate::seconds_since_midnight() {
if clock_button(ui, seconds_since_midnight).clicked() {
self.state.selected_anchor = "clock".to_owned();
if frame.is_web() {
ui.output().open_url("#clock");
}
ui.with_layout(egui::Layout::right_to_left(), |ui| {
if false {
// TODO: fix the overlap on small screens
if let Some(seconds_since_midnight) = crate::seconds_since_midnight() {
if clock_button(ui, seconds_since_midnight).clicked() {
self.state.selected_anchor = "clock".to_owned();
if frame.is_web() {
ui.output().open_url("#clock");
}
}
}
}
egui::warn_if_debug_build(ui);
});
egui::warn_if_debug_build(ui);
});
}