fix progress view overflow (#3324)

The position of the middle buttons is not fixed when the progress messages are too long. `flex-wrap` is used to wrap them outside the view.
lapce · Jun 12, 2024 · 67696bd · 67696bd
1 parent d4c562f
commit 67696bd
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/lapce-app/src/status.rs b/lapce-app/src/status.rs
@@ -6,7 +6,7 @@ use std::{
 use floem::{
     event::EventPropagation,
     reactive::{create_memo, Memo, ReadSignal, RwSignal},
-    style::{AlignItems, CursorStyle, Display},
+    style::{AlignItems, CursorStyle, Display, FlexWrap},
     views::{dyn_stack, label, stack, svg, Decorators},
     View,
 };
@@ -227,6 +227,7 @@ pub fn status(
         ))
         .style(|s| {
             s.height_pct(100.0)
+                .min_width(0.0)
                 .flex_basis(0.0)
                 .flex_grow(1.0)
                 .items_center()
@@ -397,8 +398,10 @@ pub fn status(
         s.border_top(1.0)
             .border_color(config.color(LapceColor::LAPCE_BORDER))
             .background(config.color(LapceColor::STATUS_BACKGROUND))
-            .height(config.ui.status_height() as f32)
-            .align_items(Some(AlignItems::Center))
+            .flex_basis(config.ui.status_height() as f32)
+            .flex_grow(0.0)
+            .flex_shrink(0.0)
+            .items_center()
     })
     .debug_name("Status/Bottom Bar")
 }
@@ -412,22 +415,24 @@ fn progress_view(
         move || progresses.get(),
         move |_| id.fetch_add(1, std::sync::atomic::Ordering::Relaxed),
         move |(_, p)| {
-            stack((label(move || p.title.clone()), {
-                let message = p.message.unwrap_or_default();
-                let is_empty = message.is_empty();
-                label(move || format!(": {message}")).style(move |s| {
-                    s.min_width(0.0)
-                        .text_ellipsis()
-                        .apply_if(is_empty, |s| s.hide())
-                        .selectable(false)
-                })
-            }))
-            .style(move |s| {
-                s.margin_left(10.0)
+            let progress = match p.message {
+                Some(message) if !message.is_empty() => {
+                    format!("{}: {}", p.title, message)
+                }
+                _ => p.title,
+            };
+            label(move || progress.clone()).style(move |s| {
+                s.height_pct(100.0)
+                    .min_width(0.0)
+                    .margin_left(10.0)
+                    .text_ellipsis()
+                    .selectable(false)
+                    .items_center()
                     .color(config.get().color(LapceColor::STATUS_FOREGROUND))
             })
         },
     )
+    .style(move |s| s.flex_wrap(FlexWrap::Wrap).height_pct(100.0).min_width(0.0))
 }
 
 fn status_text<S: std::fmt::Display + 'static>(