1
0
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:
René Rössler
2022-03-31 21:13:25 +02:00
committed by GitHub
parent 95ff7ec000
commit 1d32670cf3
19 changed files with 1658 additions and 36 deletions

View File

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

View File

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

View 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!());
});
});
});
}
}

View 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());
});
});
}
}
});
}
}

View File

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

View File

@@ -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)
}

View File

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