From 38546637d1501d810c5a75c8b57e52e94aaaf32e Mon Sep 17 00:00:00 2001 From: Antoine Beyeler Date: Tue, 3 Sep 2024 15:29:27 +0200 Subject: [PATCH 1/4] Improve datastore browser column header ui Uses the new `egui::Sides` API. Note that the truncation behavior is not quite perfect yet. --- crates/viewer/re_chunk_store_ui/src/sort.rs | 48 +++++++++++---------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/crates/viewer/re_chunk_store_ui/src/sort.rs b/crates/viewer/re_chunk_store_ui/src/sort.rs index 77338955b92e..1aaeb1417eec 100644 --- a/crates/viewer/re_chunk_store_ui/src/sort.rs +++ b/crates/viewer/re_chunk_store_ui/src/sort.rs @@ -27,7 +27,6 @@ pub(crate) struct SortColumn { } /// UI for a column header that is sortable. -//TODO(ab): this UI could be much improved with https://github.com/emilk/egui/issues/5015 pub(crate) fn sortable_column_header_ui( column: &T, ui: &mut egui::Ui, @@ -35,28 +34,33 @@ pub(crate) fn sortable_column_header_ui( label: &'static str, ) { let is_sorted = &sort_column.column == column; + let direction = sort_column.direction; - ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate); + egui::Sides::new() + .height(re_ui::DesignTokens::table_line_height()) + .show( + ui, + |ui| { + ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate); - if ui - .add(egui::Button::new( - egui::WidgetText::from(format!( - "{label}{}", - match (is_sorted, sort_column.direction) { - (true, SortDirection::Ascending) => " ↓", - (true, SortDirection::Descending) => " ↑", - _ => "", + if ui + .add(egui::Button::new(egui::WidgetText::from(label).strong())) + .clicked() + { + if is_sorted { + sort_column.direction.toggle(); + } else { + sort_column.column = *column; + sort_column.direction = SortDirection::default(); + } } - )) - .strong(), - )) - .clicked() - { - if is_sorted { - sort_column.direction.toggle(); - } else { - sort_column.column = *column; - sort_column.direction = SortDirection::default(); - } - } + }, + |ui| { + ui.label(match (is_sorted, direction) { + (true, SortDirection::Ascending) => "↓", + (true, SortDirection::Descending) => "↑", + _ => "", + }); + }, + ); } From 0cdec03bf83df5dc9061618fee9429a58c4684f3 Mon Sep 17 00:00:00 2001 From: Antoine Beyeler <49431240+abey79@users.noreply.github.com> Date: Tue, 3 Sep 2024 16:04:34 +0200 Subject: [PATCH 2/4] Update crates/viewer/re_chunk_store_ui/src/sort.rs Co-authored-by: Emil Ernerfeldt --- crates/viewer/re_chunk_store_ui/src/sort.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/viewer/re_chunk_store_ui/src/sort.rs b/crates/viewer/re_chunk_store_ui/src/sort.rs index 1aaeb1417eec..2f53f5ee23e9 100644 --- a/crates/viewer/re_chunk_store_ui/src/sort.rs +++ b/crates/viewer/re_chunk_store_ui/src/sort.rs @@ -44,7 +44,7 @@ pub(crate) fn sortable_column_header_ui( ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate); if ui - .add(egui::Button::new(egui::WidgetText::from(label).strong())) + .button(egui::WidgetText::from(label).strong()) .clicked() { if is_sorted { From 16858d474a62802634f4e990919d87667e2007d4 Mon Sep 17 00:00:00 2001 From: Antoine Beyeler Date: Tue, 3 Sep 2024 16:12:21 +0200 Subject: [PATCH 3/4] Make arrow clickable --- crates/viewer/re_chunk_store_ui/src/sort.rs | 36 ++++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/crates/viewer/re_chunk_store_ui/src/sort.rs b/crates/viewer/re_chunk_store_ui/src/sort.rs index 2f53f5ee23e9..4a257148245a 100644 --- a/crates/viewer/re_chunk_store_ui/src/sort.rs +++ b/crates/viewer/re_chunk_store_ui/src/sort.rs @@ -36,6 +36,9 @@ pub(crate) fn sortable_column_header_ui( let is_sorted = &sort_column.column == column; let direction = sort_column.direction; + let mut toggle_left = false; + let mut toggle_right = false; + egui::Sides::new() .height(re_ui::DesignTokens::table_line_height()) .show( @@ -43,24 +46,25 @@ pub(crate) fn sortable_column_header_ui( |ui| { ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate); - if ui - .button(egui::WidgetText::from(label).strong()) - .clicked() - { - if is_sorted { - sort_column.direction.toggle(); - } else { - sort_column.column = *column; - sort_column.direction = SortDirection::default(); - } - } + toggle_left = ui.button(egui::WidgetText::from(label).strong()).clicked(); }, |ui| { - ui.label(match (is_sorted, direction) { - (true, SortDirection::Ascending) => "↓", - (true, SortDirection::Descending) => "↑", - _ => "", - }); + toggle_right = ui + .button(match (is_sorted, direction) { + (true, SortDirection::Ascending) => "↓", + (true, SortDirection::Descending) => "↑", + _ => "", + }) + .clicked(); }, ); + + if toggle_left || toggle_right { + if is_sorted { + sort_column.direction.toggle(); + } else { + sort_column.column = *column; + sort_column.direction = SortDirection::default(); + } + } } From 93f293084778230e59f4bac62c05107daf026c3d Mon Sep 17 00:00:00 2001 From: Antoine Beyeler Date: Tue, 3 Sep 2024 16:30:46 +0200 Subject: [PATCH 4/4] Update egui for cleaner `Sides` api --- Cargo.lock | 20 +++++++++---------- Cargo.toml | 12 +++++------ crates/viewer/re_chunk_store_ui/src/sort.rs | 22 +++++++++------------ 3 files changed, 25 insertions(+), 29 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index b32b26c30b1c..e112a011214f 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1777,7 +1777,7 @@ checksum = "68b0cf012f1230e43cd00ebb729c6bb58707ecfa8ad08b52ef3a4ccd2697fc30" [[package]] name = "ecolor" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "bytemuck", "emath", @@ -1787,7 +1787,7 @@ dependencies = [ [[package]] name = "eframe" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "ahash", "bytemuck", @@ -1824,7 +1824,7 @@ dependencies = [ [[package]] name = "egui" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "accesskit", "ahash", @@ -1841,7 +1841,7 @@ dependencies = [ [[package]] name = "egui-wgpu" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "ahash", "bytemuck", @@ -1860,7 +1860,7 @@ dependencies = [ [[package]] name = "egui-winit" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "accesskit_winit", "ahash", @@ -1902,7 +1902,7 @@ dependencies = [ [[package]] name = "egui_extras" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "ahash", "egui", @@ -1918,7 +1918,7 @@ dependencies = [ [[package]] name = "egui_glow" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "ahash", "bytemuck", @@ -1981,7 +1981,7 @@ checksum = "a26ae43d7bcc3b814de94796a5e736d4029efb0ee900c12e2d54c993ad1a1e07" [[package]] name = "emath" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "bytemuck", "serde", @@ -2082,7 +2082,7 @@ dependencies = [ [[package]] name = "epaint" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" dependencies = [ "ab_glyph", "ahash", @@ -2101,7 +2101,7 @@ dependencies = [ [[package]] name = "epaint_default_fonts" version = "0.28.1" -source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c" +source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906" [[package]] name = "equivalent" diff --git a/Cargo.toml b/Cargo.toml index dabbcaf67d9b..0bedf95f1795 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -507,12 +507,12 @@ missing_errors_doc = "allow" # As a last resport, patch with a commit to our own repository. # ALWAYS document what PR the commit hash is part of, or when it was merged into the upstream trunk. -ecolor = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 -eframe = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 -egui = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 -egui_extras = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 -egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 -emath = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03 +ecolor = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 +eframe = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 +egui = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 +egui_extras = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 +egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 +emath = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03 # Useful while developing: # ecolor = { path = "../../egui/crates/ecolor" } diff --git a/crates/viewer/re_chunk_store_ui/src/sort.rs b/crates/viewer/re_chunk_store_ui/src/sort.rs index 4a257148245a..dac1ecc359df 100644 --- a/crates/viewer/re_chunk_store_ui/src/sort.rs +++ b/crates/viewer/re_chunk_store_ui/src/sort.rs @@ -36,30 +36,26 @@ pub(crate) fn sortable_column_header_ui( let is_sorted = &sort_column.column == column; let direction = sort_column.direction; - let mut toggle_left = false; - let mut toggle_right = false; - - egui::Sides::new() + let (left_clicked, right_clicked) = egui::Sides::new() .height(re_ui::DesignTokens::table_line_height()) .show( ui, |ui| { ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate); - toggle_left = ui.button(egui::WidgetText::from(label).strong()).clicked(); + ui.button(egui::WidgetText::from(label).strong()).clicked() }, |ui| { - toggle_right = ui - .button(match (is_sorted, direction) { - (true, SortDirection::Ascending) => "↓", - (true, SortDirection::Descending) => "↑", - _ => "", - }) - .clicked(); + ui.button(match (is_sorted, direction) { + (true, SortDirection::Ascending) => "↓", + (true, SortDirection::Descending) => "↑", + _ => "", + }) + .clicked() }, ); - if toggle_left || toggle_right { + if left_clicked || right_clicked { if is_sorted { sort_column.direction.toggle(); } else {