improved block ui

Author: hexqnt

src/app.rs

@@ -1418,29 +1418,29 @@ impl eframe::App for CurveFitApp {
                     let language = self.ui_language;
                     ui.spacing_mut().item_spacing = egui::vec2(10.0, 8.0);
                     ui.set_width(ui.available_width());
-                    Self::panel_card_collapsible(
+                    Self::panel_card_collapsible_with_collapsed_trailing(
+                        self,
                         ui,
                         "right_section_model",
                         tr(language, "Model", "Модель"),
-                        |ui| {
-                            self.ui_family_and_params(ui);
-                        },
+                        CurveFitApp::ui_family_and_params,
+                        CurveFitApp::ui_model_selector_compact,
                     );
-                    Self::panel_card_collapsible(
+                    Self::panel_card_collapsible_with_collapsed_trailing(
+                        self,
                         ui,
                         "right_section_metric",
                         tr(language, "Optimization metric", "Метрика оптимизации"),
-                        |ui| {
-                            self.ui_optimization_metric(ui);
-                        },
+                        CurveFitApp::ui_optimization_metric,
+                        CurveFitApp::ui_optimization_metric_selector_compact,
                     );
-                    Self::panel_card_collapsible(
+                    Self::panel_card_collapsible_with_collapsed_trailing(
+                        self,
                         ui,
                         "right_section_optimizer",
                         tr(language, "Optimizer", "Оптимизатор"),
-                        |ui| {
-                            self.ui_optimizer(ui);
-                        },
+                        CurveFitApp::ui_optimizer,
+                        CurveFitApp::ui_optimizer_action_button_compact,
                     );
                     Self::panel_card_collapsible(
                         ui,

src/app/ui.rs

@@ -53,33 +53,80 @@ impl CurveFitApp {
         title: impl Into<egui::WidgetText>,
         add_body: impl FnOnce(&mut egui::Ui),
     ) {
+        Self::panel_card_collapsible_with_collapsed_trailing(
+            &mut (),
+            ui,
+            id_salt,
+            title,
+            |_, ui| {
+                add_body(ui);
+            },
+            |_, _| {},
+        );
+    }
+
+    pub(super) fn panel_card_collapsible_with_collapsed_trailing<State>(
+        state: &mut State,
+        ui: &mut egui::Ui,
+        id_salt: impl std::hash::Hash,
+        title: impl Into<egui::WidgetText>,
+        add_body: impl FnOnce(&mut State, &mut egui::Ui),
+        add_collapsed_trailing: impl FnOnce(&mut State, &mut egui::Ui),
+    ) {
+        let title = title.into().heading();
         Self::panel_card_frame(ui).show(ui, |ui| {
             ui.set_min_width(ui.available_width());
             ui.scope(|ui| {
                 ui.spacing_mut().indent += COLLAPSING_HEADER_TEXT_OFFSET_X;
-                egui::CollapsingHeader::new(title.into().heading())
-                    .id_salt(id_salt)
-                    .default_open(true)
-                    .icon(|ui, openness, response| {
-                        let enlarged_rect = egui::Rect::from_center_size(
-                            response.rect.center(),
-                            response.rect.size() * COLLAPSING_ICON_SCALE,
-                        )
-                        .translate(egui::vec2(-0.5 * COLLAPSING_HEADER_TEXT_OFFSET_X, 0.0));
-                        let enlarged_response = response.clone().with_new_rect(enlarged_rect);
-                        egui::containers::collapsing_header::paint_default_icon(
-                            ui,
-                            openness,
-                            &enlarged_response,
-                        );
-                    })
-                    .show_unindented(ui, |ui| {
-                        add_body(ui);
-                    });
+
+                let collapsing_id = ui.make_persistent_id(id_salt);
+                let mut collapsing_state =
+                    egui::containers::collapsing_header::CollapsingState::load_with_default_open(
+                        ui.ctx(),
+                        collapsing_id,
+                        true,
+                    );
+                let is_collapsed = !collapsing_state.is_open();
+
+                ui.horizontal(|ui| {
+                    let previous_item_spacing = ui.spacing().item_spacing;
+                    ui.spacing_mut().item_spacing.x = 0.0;
+                    collapsing_state.show_toggle_button(ui, paint_enlarged_collapsing_icon);
+                    ui.spacing_mut().item_spacing = previous_item_spacing;
+
+                    let mut title_response =
+                        ui.add(egui::Label::new(title.clone()).sense(egui::Sense::click()));
+                    if title_response.clicked() {
+                        collapsing_state.toggle(ui);
+                        title_response.mark_changed();
+                    }
+
+                    if is_collapsed {
+                        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+                            add_collapsed_trailing(state, ui);
+                        });
+                    }
+                });
+
+                let _ = collapsing_state.show_body_unindented(ui, |ui| {
+                    add_body(state, ui);
+                });
             });
         });
     }
 
+    pub(super) fn ui_model_selector_compact(&mut self, ui: &mut egui::Ui) {
+        family_params::ui_model_selector_compact(self, ui);
+    }
+
+    pub(super) fn ui_optimizer_action_button_compact(&mut self, ui: &mut egui::Ui) {
+        optimizer_panel::ui_optimizer_action_button_compact(self, ui);
+    }
+
+    pub(super) fn ui_optimization_metric_selector_compact(&mut self, ui: &mut egui::Ui) {
+        status_panel::ui_optimization_metric_selector_compact(self, ui);
+    }
+
     pub(super) fn action_button_style(
         ui: &egui::Ui,
         is_stop: bool,
@@ -302,6 +349,16 @@ impl CurveFitApp {
     }
 }
 
+fn paint_enlarged_collapsing_icon(ui: &mut egui::Ui, openness: f32, response: &egui::Response) {
+    let enlarged_rect = egui::Rect::from_center_size(
+        response.rect.center(),
+        response.rect.size() * COLLAPSING_ICON_SCALE,
+    )
+    .translate(egui::vec2(-0.5 * COLLAPSING_HEADER_TEXT_OFFSET_X, 0.0));
+    let enlarged_response = response.clone().with_new_rect(enlarged_rect);
+    egui::containers::collapsing_header::paint_default_icon(ui, openness, &enlarged_response);
+}
+
 fn formula_preview_text(formula: &str, max_chars: usize) -> Cow<'_, str> {
     if max_chars <= 3 {
         return Cow::Borrowed("...");

src/app/ui/family_params.rs

@@ -1,42 +1,20 @@
 use super::*;
 
+const COLLAPSED_MODEL_SELECTOR_WIDTH: f32 = 170.0;
+const COLLAPSED_MODEL_SELECTOR_MENU_MIN_WIDTH: f32 = 260.0;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum ModelSelectorMode {
+    Full,
+    Compact,
+}
+
 pub(super) fn ui_family_and_params(app: &mut CurveFitApp, ui: &mut egui::Ui) {
     let language = app.ui_language;
     let can_edit_params = !app.fit_in_progress;
     let icon_tint = ui.visuals().text_color();
 
-    let previous_model = app.selected_model;
-    ui.add_enabled_ui(can_edit_params, |ui| {
-        egui::ComboBox::from_label(tr(language, "Model type", "Тип модели"))
-            .selected_text(model_choice_label(language, app.selected_model))
-            .show_ui(ui, |ui| {
-                ui.set_min_width(280.0);
-                let mut is_first_group = true;
-                for group in ModelGroup::ALL {
-                    if !is_first_group {
-                        ui.separator();
-                    }
-                    is_first_group = false;
-                    ui.label(egui::RichText::new(model_group_label(language, group)).strong());
-                    for model in ModelChoice::ALL {
-                        if model_group(model) != group {
-                            continue;
-                        }
-                        let model_label = model_choice_label(language, model);
-                        let response =
-                            ui.selectable_label(app.selected_model == model, model_label);
-                        if response.clicked() {
-                            app.selected_model = model;
-                        }
-                    }
-                }
-            });
-    });
-
-    let mut params_need_sync = false;
-    if previous_model != app.selected_model {
-        params_need_sync = true;
-    }
+    let mut params_need_sync = ui_model_selector(app, ui, can_edit_params, ModelSelectorMode::Full);
 
     if app.selected_model.is_polynomial() {
         let previous_degree = app.polynomial_degree;
@@ -312,6 +290,68 @@ pub(super) fn ui_family_and_params(app: &mut CurveFitApp, ui: &mut egui::Ui) {
     }
 }
 
+pub(super) fn ui_model_selector_compact(app: &mut CurveFitApp, ui: &mut egui::Ui) {
+    let can_edit_params = !app.fit_in_progress;
+    if ui_model_selector(app, ui, can_edit_params, ModelSelectorMode::Compact) {
+        app.sync_parameter_inputs();
+        app.clear_fit_outputs();
+    }
+}
+
+fn ui_model_selector(
+    app: &mut CurveFitApp,
+    ui: &mut egui::Ui,
+    can_edit_params: bool,
+    mode: ModelSelectorMode,
+) -> bool {
+    let language = app.ui_language;
+    let previous_model = app.selected_model;
+    ui.add_enabled_ui(can_edit_params, |ui| {
+        let selected_text = model_choice_label(language, app.selected_model);
+        match mode {
+            ModelSelectorMode::Full => {
+                egui::ComboBox::from_label(tr(language, "Model type", "Тип модели"))
+                    .selected_text(selected_text)
+                    .show_ui(ui, |ui| {
+                        ui.set_min_width(280.0);
+                        ui_model_selector_menu(app, ui, language);
+                    });
+            }
+            ModelSelectorMode::Compact => {
+                egui::ComboBox::from_id_salt("collapsed_header_model_selector")
+                    .selected_text(selected_text)
+                    .width(COLLAPSED_MODEL_SELECTOR_WIDTH)
+                    .show_ui(ui, |ui| {
+                        ui.set_min_width(COLLAPSED_MODEL_SELECTOR_MENU_MIN_WIDTH);
+                        ui_model_selector_menu(app, ui, language);
+                    });
+            }
+        }
+    });
+    app.selected_model != previous_model
+}
+
+fn ui_model_selector_menu(app: &mut CurveFitApp, ui: &mut egui::Ui, language: UiLanguage) {
+    let mut is_first_group = true;
+    for group in ModelGroup::ALL {
+        if !is_first_group {
+            ui.separator();
+        }
+        is_first_group = false;
+        ui.label(egui::RichText::new(model_group_label(language, group)).strong());
+        for model in ModelChoice::ALL {
+            if model_group(model) != group {
+                continue;
+            }
+            let model_label = model_choice_label(language, model);
+            let response = ui.selectable_label(app.selected_model == model, model_label);
+            if response.clicked() {
+                app.selected_model = model;
+            }
+        }
+    }
+}
+
 fn parametric_init_hint(language: UiLanguage) -> &'static str {
     tr(
         language,

src/app/ui/optimizer_panel.rs

@@ -1,5 +1,9 @@
 use super::*;
 
+const COMPACT_FIT_BUTTON_WIDTH: f32 = 118.0;
+const COMPACT_FIT_BUTTON_HEIGHT: f32 = 30.0;
+const FULL_FIT_BUTTON_HEIGHT: f32 = 34.0;
+
 pub(super) fn ui_optimizer(app: &mut CurveFitApp, ui: &mut egui::Ui) {
     let language = app.ui_language;
     let icon_tint = ui.visuals().text_color();
@@ -365,6 +369,22 @@ pub(super) fn ui_optimizer(app: &mut CurveFitApp, ui: &mut egui::Ui) {
     }
 
     ui.separator();
+    ui_fit_action_button(app, ui, false);
+    if app.fit_in_progress
+        && let Some(iteration) = app.fit_preview_iteration
+    {
+        ui.label(format!(
+            "{}: {iteration}",
+            tr(app.ui_language, "Iteration", "Итерация")
+        ));
+    }
+}
+
+pub(super) fn ui_optimizer_action_button_compact(app: &mut CurveFitApp, ui: &mut egui::Ui) {
+    ui_fit_action_button(app, ui, true);
+}
+
+fn ui_fit_action_button(app: &mut CurveFitApp, ui: &mut egui::Ui, compact: bool) {
     let (fill, stroke, text_color) = CurveFitApp::action_button_style(ui, app.fit_in_progress);
     let (icon, text) = if app.fit_in_progress {
         (
@@ -377,9 +397,15 @@ pub(super) fn ui_optimizer(app: &mut CurveFitApp, ui: &mut egui::Ui) {
             tr(app.ui_language, "Fit", "Фитинг"),
         )
     };
+
+    let min_size = if compact {
+        egui::vec2(COMPACT_FIT_BUTTON_WIDTH, COMPACT_FIT_BUTTON_HEIGHT)
+    } else {
+        egui::vec2(ui.available_width(), FULL_FIT_BUTTON_HEIGHT)
+    };
     let action_button =
         egui::Button::image_and_text(icon, egui::RichText::new(text).strong().color(text_color))
-            .min_size(egui::vec2(ui.available_width(), 34.0))
+            .min_size(min_size)
             .fill(fill)
             .stroke(stroke)
             .corner_radius(egui::CornerRadius::same(UI_CORNER_RADIUS + 1));
@@ -390,14 +416,6 @@ pub(super) fn ui_optimizer(app: &mut CurveFitApp, ui: &mut egui::Ui) {
             app.run_fit();
         }
     }
-    if app.fit_in_progress
-        && let Some(iteration) = app.fit_preview_iteration
-    {
-        ui.label(format!(
-            "{}: {iteration}",
-            tr(app.ui_language, "Iteration", "Итерация")
-        ));
-    }
 }
 
 fn optimizer_mode_hint(language: UiLanguage, mode: OptimizerUiMode) -> &'static str {