mirror of
https://github.com/emilk/egui.git
synced 2026-09-01 06:10:06 -04:00
Dynamic sized strips, tables, and date picker (#963)
This commit is contained in:
@@ -29,6 +29,8 @@ impl Default for Demos {
|
||||
Box::new(super::plot_demo::PlotDemo::default()),
|
||||
Box::new(super::scrolling::Scrolling::default()),
|
||||
Box::new(super::sliders::Sliders::default()),
|
||||
Box::new(super::strip_demo::StripDemo::default()),
|
||||
Box::new(super::table_demo::TableDemo::default()),
|
||||
Box::new(super::text_edit::TextEdit::default()),
|
||||
Box::new(super::widget_gallery::WidgetGallery::default()),
|
||||
Box::new(super::window_options::WindowOptions::default()),
|
||||
|
||||
@@ -21,6 +21,8 @@ pub mod password;
|
||||
pub mod plot_demo;
|
||||
pub mod scrolling;
|
||||
pub mod sliders;
|
||||
pub mod strip_demo;
|
||||
pub mod table_demo;
|
||||
pub mod tests;
|
||||
pub mod text_edit;
|
||||
pub mod toggle_switch;
|
||||
|
||||
110
egui_demo_lib/src/apps/demo/strip_demo.rs
Normal file
110
egui_demo_lib/src/apps/demo/strip_demo.rs
Normal file
@@ -0,0 +1,110 @@
|
||||
use egui::Color32;
|
||||
use egui_extras::{Size, StripBuilder};
|
||||
|
||||
/// Shows off a table with dynamic layout
|
||||
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
||||
#[derive(Default)]
|
||||
pub struct StripDemo {}
|
||||
|
||||
impl super::Demo for StripDemo {
|
||||
fn name(&self) -> &'static str {
|
||||
"▣ Strip Demo"
|
||||
}
|
||||
|
||||
fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
|
||||
egui::Window::new(self.name())
|
||||
.open(open)
|
||||
.resizable(true)
|
||||
.default_width(400.0)
|
||||
.show(ctx, |ui| {
|
||||
use super::View as _;
|
||||
self.ui(ui);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
impl super::View for StripDemo {
|
||||
fn ui(&mut self, ui: &mut egui::Ui) {
|
||||
StripBuilder::new(ui)
|
||||
.size(Size::Absolute(50.0))
|
||||
.size(Size::Remainder)
|
||||
.size(Size::RelativeMinimum {
|
||||
relative: 0.5,
|
||||
minimum: 60.0,
|
||||
})
|
||||
.size(Size::Absolute(10.0))
|
||||
.vertical(|mut strip| {
|
||||
strip.cell_clip(|ui| {
|
||||
ui.painter()
|
||||
.rect_filled(ui.available_rect_before_wrap(), 0.0, Color32::BLUE);
|
||||
ui.label("Full width and 50px height");
|
||||
});
|
||||
strip.strip(|builder| {
|
||||
builder.sizes(Size::Remainder, 2).horizontal(|mut strip| {
|
||||
strip.cell_clip(|ui| {
|
||||
ui.painter().rect_filled(
|
||||
ui.available_rect_before_wrap(),
|
||||
0.0,
|
||||
Color32::RED,
|
||||
);
|
||||
ui.label("remaining height and 50% of the width");
|
||||
});
|
||||
strip.strip(|builder| {
|
||||
builder.sizes(Size::Remainder, 3).vertical(|mut strip| {
|
||||
strip.empty();
|
||||
strip.cell_clip(|ui| {
|
||||
ui.painter().rect_filled(
|
||||
ui.available_rect_before_wrap(),
|
||||
0.0,
|
||||
Color32::YELLOW,
|
||||
);
|
||||
ui.label("one third of the box left of me but same width");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
strip.strip(|builder| {
|
||||
builder
|
||||
.size(Size::Remainder)
|
||||
.size(Size::Absolute(60.0))
|
||||
.size(Size::Remainder)
|
||||
.size(Size::Absolute(70.0))
|
||||
.horizontal(|mut strip| {
|
||||
strip.empty();
|
||||
strip.strip(|builder| {
|
||||
builder
|
||||
.size(Size::Remainder)
|
||||
.size(Size::Absolute(60.0))
|
||||
.size(Size::Remainder)
|
||||
.vertical(|mut strip| {
|
||||
strip.empty();
|
||||
strip.cell_clip(|ui| {
|
||||
ui.painter().rect_filled(
|
||||
ui.available_rect_before_wrap(),
|
||||
0.0,
|
||||
Color32::GOLD,
|
||||
);
|
||||
ui.label("60x60");
|
||||
});
|
||||
});
|
||||
});
|
||||
strip.empty();
|
||||
strip.cell_clip(|ui| {
|
||||
ui.painter().rect_filled(
|
||||
ui.available_rect_before_wrap(),
|
||||
0.0,
|
||||
Color32::GREEN,
|
||||
);
|
||||
ui.label("height: half the available - at least 60px, width: 70px");
|
||||
});
|
||||
});
|
||||
});
|
||||
strip.cell_clip(|ui| {
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.add(crate::__egui_github_link_file!());
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
109
egui_demo_lib/src/apps/demo/table_demo.rs
Normal file
109
egui_demo_lib/src/apps/demo/table_demo.rs
Normal file
@@ -0,0 +1,109 @@
|
||||
use egui_extras::{Size, StripBuilder, TableBuilder};
|
||||
|
||||
/// Shows off a table with dynamic layout
|
||||
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
||||
#[derive(Default)]
|
||||
pub struct TableDemo {
|
||||
virtual_scroll: bool,
|
||||
}
|
||||
|
||||
impl super::Demo for TableDemo {
|
||||
fn name(&self) -> &'static str {
|
||||
"☰ Table Demo"
|
||||
}
|
||||
|
||||
fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
|
||||
egui::Window::new(self.name())
|
||||
.open(open)
|
||||
.resizable(true)
|
||||
.default_width(400.0)
|
||||
.show(ctx, |ui| {
|
||||
use super::View as _;
|
||||
self.ui(ui);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
impl super::View for TableDemo {
|
||||
fn ui(&mut self, ui: &mut egui::Ui) {
|
||||
ui.checkbox(&mut self.virtual_scroll, "Virtual scroll demo");
|
||||
|
||||
// Leave room for the source code link after the table demo:
|
||||
StripBuilder::new(ui)
|
||||
.size(Size::Remainder) // for the table
|
||||
.size(Size::Absolute(10.0)) // for the source code link
|
||||
.vertical(|mut strip| {
|
||||
strip.cell_clip(|ui| {
|
||||
self.table_ui(ui);
|
||||
});
|
||||
strip.cell(|ui| {
|
||||
ui.vertical_centered(|ui| {
|
||||
ui.add(crate::__egui_github_link_file!());
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
impl TableDemo {
|
||||
fn table_ui(&mut self, ui: &mut egui::Ui) {
|
||||
TableBuilder::new(ui)
|
||||
.striped(true)
|
||||
.column(Size::Absolute(120.0))
|
||||
.column(Size::RemainderMinimum(180.0))
|
||||
.column(Size::Absolute(100.0))
|
||||
.header(20.0, |mut header| {
|
||||
header.col(|ui| {
|
||||
ui.heading("Left");
|
||||
});
|
||||
header.col(|ui| {
|
||||
ui.heading("Middle");
|
||||
});
|
||||
header.col(|ui| {
|
||||
ui.heading("Right");
|
||||
});
|
||||
})
|
||||
.body(|mut body| {
|
||||
if self.virtual_scroll {
|
||||
body.rows(20.0, 100_000, |index, mut row| {
|
||||
row.col(|ui| {
|
||||
ui.label(index.to_string());
|
||||
});
|
||||
row.col_clip(|ui| {
|
||||
ui.add(
|
||||
egui::Label::new("virtual scroll, easily with thousands of rows!")
|
||||
.wrap(false),
|
||||
);
|
||||
});
|
||||
row.col(|ui| {
|
||||
ui.label(index.to_string());
|
||||
});
|
||||
});
|
||||
} else {
|
||||
for i in 0..100 {
|
||||
let height = match i % 8 {
|
||||
0 => 25.0,
|
||||
4 => 30.0,
|
||||
_ => 20.0,
|
||||
};
|
||||
body.row(height, |mut row| {
|
||||
row.col(|ui| {
|
||||
ui.label(i.to_string());
|
||||
});
|
||||
row.col_clip(|ui| {
|
||||
ui.add(
|
||||
egui::Label::new(
|
||||
format!("Normal scroll, each row can have a different height. Height: {}", height),
|
||||
)
|
||||
.wrap(false),
|
||||
);
|
||||
});
|
||||
row.col(|ui| {
|
||||
ui.label(i.to_string());
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
#[cfg(feature = "datetime")]
|
||||
mod serde_date_format;
|
||||
|
||||
#[derive(Debug, PartialEq)]
|
||||
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
||||
enum Enum {
|
||||
@@ -17,6 +20,9 @@ pub struct WidgetGallery {
|
||||
string: String,
|
||||
color: egui::Color32,
|
||||
animate_progress_bar: bool,
|
||||
#[cfg(feature = "datetime")]
|
||||
#[serde(with = "serde_date_format")]
|
||||
date: chrono::Date<chrono::Utc>,
|
||||
#[cfg_attr(feature = "serde", serde(skip))]
|
||||
texture: Option<egui::TextureHandle>,
|
||||
}
|
||||
@@ -32,6 +38,8 @@ impl Default for WidgetGallery {
|
||||
string: Default::default(),
|
||||
color: egui::Color32::LIGHT_BLUE.linear_multiply(0.5),
|
||||
animate_progress_bar: false,
|
||||
#[cfg(feature = "datetime")]
|
||||
date: chrono::offset::Utc::now().date(),
|
||||
texture: None,
|
||||
}
|
||||
}
|
||||
@@ -102,6 +110,7 @@ impl WidgetGallery {
|
||||
string,
|
||||
color,
|
||||
animate_progress_bar,
|
||||
date,
|
||||
texture,
|
||||
} = self;
|
||||
|
||||
@@ -201,6 +210,13 @@ impl WidgetGallery {
|
||||
}
|
||||
ui.end_row();
|
||||
|
||||
#[cfg(feature = "datetime")]
|
||||
{
|
||||
ui.add(doc_link_label("DatePickerButton", "DatePickerButton"));
|
||||
ui.add(egui_extras::DatePickerButton::new(date));
|
||||
ui.end_row();
|
||||
}
|
||||
|
||||
ui.add(doc_link_label("Separator", "separator"));
|
||||
ui.separator();
|
||||
ui.end_row();
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
use chrono::{Date, NaiveDate, Utc};
|
||||
use serde::{self, Deserialize, Deserializer, Serializer};
|
||||
|
||||
const FORMAT: &str = "%Y-%m-%d";
|
||||
|
||||
pub fn serialize<S>(date: &Date<Utc>, serializer: S) -> Result<S::Ok, S::Error>
|
||||
where
|
||||
S: Serializer,
|
||||
{
|
||||
let s = date.format(FORMAT).to_string();
|
||||
serializer.serialize_str(&s)
|
||||
}
|
||||
|
||||
pub fn deserialize<'de, D>(deserializer: D) -> Result<Date<Utc>, D::Error>
|
||||
where
|
||||
D: Deserializer<'de>,
|
||||
{
|
||||
let s = String::deserialize(deserializer)?;
|
||||
|
||||
NaiveDate::parse_from_str(&s, FORMAT)
|
||||
.map(|naive_date| Date::from_utc(naive_date, Utc))
|
||||
.map_err(serde::de::Error::custom)
|
||||
}
|
||||
@@ -100,7 +100,7 @@ fn test_egui_zero_window_size() {
|
||||
|
||||
/// Time of day as seconds since midnight. Used for clock in demo app.
|
||||
pub(crate) fn seconds_since_midnight() -> Option<f64> {
|
||||
#[cfg(feature = "chrono")]
|
||||
#[cfg(feature = "datetime")]
|
||||
{
|
||||
use chrono::Timelike;
|
||||
let time = chrono::Local::now().time();
|
||||
@@ -108,6 +108,6 @@ pub(crate) fn seconds_since_midnight() -> Option<f64> {
|
||||
time.num_seconds_from_midnight() as f64 + 1e-9 * (time.nanosecond() as f64);
|
||||
Some(seconds_since_midnight)
|
||||
}
|
||||
#[cfg(not(feature = "chrono"))]
|
||||
#[cfg(not(feature = "datetime"))]
|
||||
None
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user