Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve datastore browser column header UI #7344

Merged
merged 4 commits into from
Sep 3, 2024
Merged

Improve datastore browser column header UI #7344

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3854663
Improve datastore browser column header ui
abey79 Sep 3, 2024
0cdec03
Update crates/viewer/re_chunk_store_ui/src/sort.rs
abey79 Sep 3, 2024
16858d4
Make arrow clickable
abey79 Sep 3, 2024
93f2930
Update egui for cleaner `Sides` api
abey79 Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 26 additions & 22 deletions crates/viewer/re_chunk_store_ui/src/sort.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,36 +27,40 @@ pub(crate) struct SortColumn<T> {
}

/// 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<T: Default + Copy + PartialEq>(
column: &T,
ui: &mut egui::Ui,
sort_column: &mut SortColumn<T>,
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()))
abey79 marked this conversation as resolved.
Show resolved Hide resolved
.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) => "↑",
_ => "",
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect this arrow to be clickable

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense.

Interestingly, this brings up a small paper cut with the current Sides api: I can't mutably borrow anything in both closure, so I'm forced to do something like this:

    let mut toggle_left = false;
    let mut toggle_right = false;

    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| {
                toggle_right = ui
                    .button(match (is_sorted, direction) {
                        (true, SortDirection::Ascending) => "↓",
                        (true, SortDirection::Descending) => "↑",
                        _ => "",
                    })
                    .clicked();
            },
        );

At a minimum, Sides::show() should return a tuple of (R1, R2) generic types corresponding to the return value of each closure.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

emilk/egui#5065

},
);
}
Loading