Label + Button layout/alignment fixes

Author: ecton

src/dialog.rs

@@ -128,7 +128,7 @@ enum MessageLevel {
     Info,
 }
 
-/// The behavior of a button in a [`Dialog`].
+/// The behavior of a button in a dialog.
 pub trait ButtonBehavior: Send + 'static {
     /// Invokes the behavior. Returns whether the dialog containing this button
     /// should close or remain open.

src/widgets/button.rs

@@ -17,10 +17,10 @@ use crate::styles::components::{
     AutoFocusableControls, CornerRadius, DefaultActiveBackgroundColor,
     DefaultActiveForegroundColor, DefaultBackgroundColor, DefaultDisabledBackgroundColor,
     DefaultDisabledForegroundColor, DefaultForegroundColor, DefaultHoveredBackgroundColor,
-    DefaultHoveredForegroundColor, Easing, HighlightColor, IntrinsicPadding, OpaqueWidgetColor,
-    OutlineColor, OutlineWidth, SurfaceColor, TextColor,
+    DefaultHoveredForegroundColor, Easing, HighlightColor, HorizontalAlignment, IntrinsicPadding,
+    OpaqueWidgetColor, OutlineColor, OutlineWidth, SurfaceColor, TextColor,
 };
-use crate::styles::{ColorExt, Styles};
+use crate::styles::{ColorExt, HorizontalAlign, Styles};
 use crate::widget::{
     EventHandling, MakeWidget, Notify, SharedCallback, Widget, WidgetLayout, WidgetRef, HANDLED,
 };
@@ -38,6 +38,7 @@ pub struct Button {
     pub kind: Value<ButtonKind>,
     focusable: bool,
     per_window: WindowLocal<PerWindow>,
+    label_align: Dynamic<HorizontalAlign>,
 }
 
 #[derive(Debug, Default)]
@@ -139,12 +140,14 @@ pub struct ButtonColors {
 impl Button {
     /// Returns a new button with the provided label.
     pub fn new(content: impl MakeWidget) -> Self {
+        let label_align = Dynamic::<HorizontalAlign>::default();
         Self {
-            content: content.into_ref(),
+            content: content.with(&HorizontalAlignment, &label_align).into_ref(),
             on_click: None,
             per_window: WindowLocal::default(),
             kind: Value::Constant(ButtonKind::default()),
             focusable: true,
+            label_align,
         }
     }
 
@@ -527,12 +530,19 @@ impl Widget for Button {
         let double_padding = padding * 2;
         let mounted = self.content.mounted(context);
         let available_space = available_space.map(|space| space - double_padding);
+        let align = context.get(&ButtonLabelAlignment);
+        self.label_align.set(align);
         let layout = context.for_other(&mounted).layout(available_space);
         let size = available_space.fit_measured(layout.size);
-        context.set_child_layout(
-            &mounted,
-            Rect::new(Point::squared(padding), size).into_signed(),
+        let mut position = Rect::new(Point::squared(padding), size).into_signed();
+        position.origin.x += align.alignment_offset(
+            layout.size.width.into_signed().min(position.size.width),
+            available_space
+                .width
+                .fill_or_fit(position.size.width)
+                .into_signed(),
         );
+        context.set_child_layout(&mounted, position);
         WidgetLayout {
             size: size + double_padding,
             baseline: layout.baseline.map(|baseline| baseline + padding),
@@ -616,6 +626,8 @@ define_components! {
         /// The outline color of the button when the mouse cursor is hovering over
         /// it.
         ButtonDisabledOutline(Color, "disabled_outline_color", Color::CLEAR_BLACK)
+        /// The horizontal alignment to apply to the label widget of the button.
+        ButtonLabelAlignment(HorizontalAlign, "align", HorizontalAlign::Center)
     }
 }
 

src/widgets/grid.rs

@@ -275,7 +275,7 @@ pub(crate) struct GridLayout {
     fit_to_content: Vec<LotId>,
     premeasured: Vec<LotId>,
     measured_scale: Fraction,
-    pub row_baselines: Vec<Baseline>,
+    pub row_baselines: Vec<BaselineInfo>,
     pub orientation: Orientation,
 }
 
@@ -285,6 +285,15 @@ pub(crate) struct BaselineInfo {
     pub height: UPx,
 }
 
+impl BaselineInfo {
+    fn max(self, other: Self) -> Self {
+        Self {
+            baseline: self.baseline.max(other.baseline),
+            height: self.height.max(other.height),
+        }
+    }
+}
+
 impl From<&WidgetLayout> for BaselineInfo {
     fn from(layout: &WidgetLayout) -> Self {
         Self {
@@ -575,7 +584,7 @@ impl GridLayout {
 
         WidgetLayout {
             size: self.orientation.make_size(measured, total_other),
-            baseline: self.row_baselines[0],
+            baseline: self.row_baselines[0].baseline,
         }
     }
 
@@ -647,17 +656,17 @@ impl GridLayout {
                 .extend((0..self.elements_per_child).map(|row| {
                     self.layouts
                         .iter()
-                        .fold(Baseline::NONE, |max_baseline, layout| {
-                            max_baseline.max(layout.baselines[row].baseline)
+                        .fold(BaselineInfo::NONE, |max_baseline, layout| {
+                            max_baseline.max(layout.baselines[row])
                         })
                 }));
         } else {
             self.row_baselines.extend(self.layouts.iter().map(|layout| {
                 layout
                     .baselines
                     .iter()
-                    .fold(Baseline::NONE, |max_baseline, info| {
-                        max_baseline.max(info.baseline)
+                    .fold(BaselineInfo::NONE, |max_baseline, info| {
+                        max_baseline.max(*info)
                     })
             }));
         };
@@ -685,17 +694,17 @@ impl GridLayout {
         match vertical_alignment {
             VerticalAlign::Top => {}
             VerticalAlign::Baseline => {
-                let row_baseline = if self.orientation == Orientation::Column {
+                let row_info = if self.orientation == Orientation::Column {
                     self.row_baselines[row_index]
                 } else {
                     self.row_baselines[cell_index]
                 };
 
                 if let (Some(cell_baseline), Some(row_baseline)) =
-                    (cell_info.baseline.0, *row_baseline)
+                    (cell_info.baseline.0, *row_info.baseline)
                 {
                     let alignment_needed = row_baseline - cell_baseline;
-                    let available_space = other_size - cell_info.height;
+                    let available_space = row_info.height - cell_info.height;
                     let adjustment = alignment_needed.min(available_space);
                     position.origin.y += adjustment.into_signed();
                 }

src/widgets/label.rs

@@ -17,7 +17,7 @@ use crate::styles::components::{HorizontalAlignment, TextColor, VerticalAlignmen
 use crate::styles::{HorizontalAlign, VerticalAlign};
 use crate::widget::{MakeWidgetWithTag, Widget, WidgetInstance, WidgetLayout, WidgetTag};
 use crate::window::WindowLocal;
-use crate::{ConstraintLimit, FitMeasuredSize};
+use crate::ConstraintLimit;
 
 /// A read-only text widget.
 #[derive(Debug)]
@@ -154,13 +154,8 @@ where
         let width = available_space.width.max().try_into().unwrap_or(Px::MAX);
         let prepared = self.prepared_text(context, color, width, align);
 
-        // TODO if vertical alignment isn't top and we are using Fill on the
-        // height constraint limit, we should calculate the actual baseline. On
-        // that topic, if the text is wrapped, is the baseline of bottom-aligned
-        // text the bottom line's baseline or the top line's baseline? Probably
-        // bottom...
         WidgetLayout {
-            size: available_space.fit_measured(prepared.size.into_unsigned().ceil()),
+            size: prepared.size.into_unsigned().ceil(),
             baseline: prepared.line_height.into(),
         }
     }

src/widgets/stack.rs

@@ -189,35 +189,6 @@ impl Widget for Stack {
                 0,
                 cell_align,
             );
-            // let mut position = Rect::new(
-            //     self.layout
-            //         .orientation
-            //         .make_point(layout.offset, )
-            //         .into_signed(),
-            //     self.layout
-            //         .orientation
-            //         .make_size(layout.size, )
-            //         .into_signed(),
-            // );
-
-            // let cell_info = layout.baselines[0];
-
-            // let (row_baseline, row_after_baseline) =
-            //     if self.layout.orientation == Orientation::Column {
-            //         self.layout.row_baselines[0]
-            //     } else {
-            //         self.layout.row_baselines[index]
-            //     };
-
-            // if let (Some(cell_baseline), Some(row_baseline)) =
-            //     (cell_info.baseline.0, row_baseline.0)
-            // {
-            //     let alignment_needed = row_baseline - cell_baseline;
-            //     let row_height = row_baseline + row_after_baseline.expect("has baseline");
-            //     let available_space = row_height - cell_info.height;
-            //     let adjustment = alignment_needed.min(available_space);
-            //     position.origin.y += adjustment.into_signed();
-            // }
 
             context.set_child_layout(child, position);
         }