skyler
/
egui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the code example demo narrow enough to fit on mobile (#4281) 

I think it is a good example, and so I want to open it by default, but
for that it needs to work on mobile.

Hopefully this doesn't make it too cryptic

<img width="415" alt="image"
src="https://github.com/emilk/egui/assets/1148717/83d881fa-675e-4659-bd21-14abcb79fe46">
This commit is contained in:
Emil Ernerfeldt 2024-03-30 17:51:44 +01:00 committed by GitHub
parent 33221bd4dd
commit 1354c3e19a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 77 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
crates/egui_demo_app/src/backend_panel.rs
View File

@ -305,6 +305,7 @@ fn integration_ui(ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
Some(egui::vec2(375.0, 667.0)),
"📱 iPhone SE 2nd Gen",
);
ui.selectable_value(&mut size, Some(egui::vec2(393.0, 852.0)), "📱 iPhone 15");
ui.selectable_value(
&mut size,
Some(egui::vec2(1280.0, 720.0)),

118
crates/egui_demo_lib/src/demo/code_example.rs
View File

@ -15,51 +15,92 @@ impl Default for CodeExample {
impl CodeExample {
fn samples_in_grid(&mut self, ui: &mut egui::Ui) {
show_code(ui, r#"ui.heading("Code samples");"#);
ui.heading("Code samples");
// Note: we keep the code narrow so that the example fits on a mobile screen.
let Self { name, age } = self; // for brevity later on
show_code(ui, r#"ui.heading("Example");"#);
ui.heading("Example");
ui.end_row();
show_code(
ui,
r#"
// Putting things on the same line using ui.horizontal:
ui.horizontal(|ui| {
ui.label("Your name: ");
ui.text_edit_singleline(&mut self.name);
ui.label("Name");
ui.text_edit_singleline(name);
});"#,
);
// Putting things on the same line using ui.horizontal:
ui.horizontal(|ui| {
ui.label("Your name: ");
ui.text_edit_singleline(&mut self.name);
ui.label("Name");
ui.text_edit_singleline(name);
});
ui.end_row();
show_code(
ui,
r#"ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));"#,
r#"
ui.add(
egui::DragValue::new(age)
.clamp_range(0..=120)
.suffix(" years"),
);"#,
);
ui.add(
egui::DragValue::new(age)
.clamp_range(0..=120)
.suffix(" years"),
);
ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
ui.end_row();
show_code(
ui,
r#"
if ui.button("Increment").clicked() {
self.age += 1;
*age += 1;
}"#,
);
if ui.button("Increment").clicked() {
self.age += 1;
*age += 1;
}
ui.end_row();
show_code(ui, r#"ui.label(format!("{name} is {age}"));"#);
ui.label(format!("{name} is {age}"));
ui.end_row();
}
fn code(&mut self, ui: &mut egui::Ui) {
show_code(
ui,
r#"ui.label(format!("Hello '{}', age {}", self.name, self.age));"#,
r"
pub struct CodeExample {
name: String,
age: u32,
}
impl CodeExample {
fn ui(&mut self, ui: &mut egui::Ui) {
// Saves us from writing `&mut self.name` etc
let Self { name, age } = self;",
);
ui.label(format!("Hello '{}', age {}", self.name, self.age));
ui.end_row();
ui.horizontal(|ui| {
let font_id = egui::TextStyle::Monospace.resolve(ui.style());
let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' '));
let item_spacing = ui.spacing_mut().item_spacing;
ui.add_space(indentation - item_spacing.x);
egui::Grid::new("code_samples")
.striped(true)
.num_columns(2)
.show(ui, |ui| {
self.samples_in_grid(ui);
});
});
crate::rust_view_ui(ui, " }\n}");
}
}
@ -72,9 +113,9 @@ impl super::Demo for CodeExample {
use super::View;
egui::Window::new(self.name())
.open(open)
.default_size([800.0, 400.0])
.vscroll(false)
.hscroll(true)
.min_width(375.0)
.default_size([390.0, 500.0])
.scroll2(false)
.resizable([true, false])
.show(ctx, |ui| self.ui(ui));
}
@ -82,42 +123,11 @@ impl super::Demo for CodeExample {
impl super::View for CodeExample {
fn ui(&mut self, ui: &mut egui::Ui) {
ui.vertical_centered(|ui| {
ui.add(crate::egui_github_link_file!());
ui.scope(|ui| {
ui.spacing_mut().item_spacing = egui::vec2(8.0, 8.0);
self.code(ui);
});
crate::rust_view_ui(
ui,
r"
pub struct CodeExample {
name: String,
age: u32,
}
impl CodeExample {
fn ui(&mut self, ui: &mut egui::Ui) {
"
.trim(),
);
ui.horizontal(|ui| {
let font_id = egui::TextStyle::Monospace.resolve(ui.style());
let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' '));
let item_spacing = ui.spacing_mut().item_spacing;
ui.add_space(indentation - item_spacing.x);
egui::Grid::new("code_samples")
.striped(true)
.num_columns(2)
.min_col_width(16.0)
.spacing([16.0, 8.0])
.show(ui, |ui| {
self.samples_in_grid(ui);
});
});
crate::rust_view_ui(ui, " }\n}");
ui.separator();
crate::rust_view_ui(ui, &format!("{self:#?}"));
@ -129,6 +139,12 @@ impl CodeExample {
theme.ui(ui);
theme.store_in_memory(ui.ctx());
});
ui.separator();
ui.vertical_centered(|ui| {
ui.add(crate::egui_github_link_file!());
});
}
}

9
crates/egui_demo_lib/src/demo/demo_app_windows.rs
View File

@ -52,6 +52,15 @@ impl Default for Demos {
impl Demos {
pub fn from_demos(demos: Vec<Box<dyn Demo>>) -> Self {
let mut open = BTreeSet::new();
// Explains egui very well
open.insert(
super::code_example::CodeExample::default()
.name()
.to_owned(),
);
// Shows off the features
open.insert(
super::widget_gallery::WidgetGallery::default()
.name()