std-widgets: added horizontal-alignment to SpinBox (#6778)

docs/src/content/docs/std-widgets/spinbox.md

@@ -12,6 +12,7 @@ description: SpinBox api.
 -   **`minimum`** (_in_ _int_): The minimum value (default: 0).
 -   **`maximum`** (_in_ _int_): The maximum value (default: 100).
 -   **`step-size`** (_in_ _int_): The size that is used on increment or decrement of `value` (default: 1).
+-   **`horizontal-alignment`** (_in_ _enum [`TextHorizontalAlignment`](../builtins/enums.md#texthorizontalalignment)_): The horizontal alignment of the text.
 
 ### Callbacks
 

internal/backends/qt/qt_widgets/spinbox.rs

@@ -1,8 +1,10 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
+use crate::key_generated;
 use i_slint_core::{
     input::{FocusEventResult, KeyEventType},
+    items::TextHorizontalAlignment,
     platform::PointerEventButton,
 };
 
@@ -27,6 +29,7 @@ pub struct NativeSpinBox {
     pub minimum: Property<i32>,
     pub maximum: Property<i32>,
     pub step_size: Property<i32>,
+    pub horizontal_alignment: Property<TextHorizontalAlignment>,
     pub cached_rendering_data: CachedRenderingData,
     pub edited: Callback<IntArg>,
     data: Property<NativeSpinBoxData>,
@@ -290,6 +293,12 @@ impl Item for NativeSpinBox {
         let active_controls = data.active_controls;
         let pressed = data.pressed;
 
+        let horizontal_alignment = match this.horizontal_alignment() {
+            TextHorizontalAlignment::Left => key_generated::Qt_AlignmentFlag_AlignLeft,
+            TextHorizontalAlignment::Center => key_generated::Qt_AlignmentFlag_AlignHCenter,
+            TextHorizontalAlignment::Right => key_generated::Qt_AlignmentFlag_AlignRight,
+        };
+
         cpp!(unsafe [
             painter as "QPainterPtr*",
             widget as "QWidget*",
@@ -300,7 +309,8 @@ impl Item for NativeSpinBox {
             active_controls as "int",
             pressed as "bool",
             dpr as "float",
-            initial_state as "int"
+            initial_state as "int",
+            horizontal_alignment as "int"
         ] {
             auto style = qApp->style();
             QStyleOptionSpinBox option;
@@ -313,6 +323,7 @@ impl Item for NativeSpinBox {
             initQSpinBoxOptions(option, pressed, enabled, active_controls);
             style->drawComplexControl(QStyle::CC_SpinBox, &option, painter->get(), widget);
 
+            static_cast<QAbstractSpinBox*>(widget)->setAlignment(Qt::AlignRight);
             QStyleOptionFrame frame;
             frame.state = option.state;
             frame.palette = option.palette;
@@ -324,7 +335,7 @@ impl Item for NativeSpinBox {
             QRect text_rect = qApp->style()->subElementRect(QStyle::SE_LineEditContents, &frame, widget);
             text_rect.adjust(1, 2, 1, 2);
             (*painter)->setPen(option.palette.color(QPalette::Text));
-            (*painter)->drawText(text_rect, QString::number(value));
+            (*painter)->drawText(text_rect, QString::number(value), QTextOption(static_cast<Qt::AlignmentFlag>(horizontal_alignment)));
         });
     }
 }

internal/compiler/builtins.slint

@@ -481,6 +481,7 @@ export component NativeSpinBox {
     in property <int> minimum;
     in property <int> maximum: 100;
     in property <int> step-size: 1;
+    in property <TextHorizontalAlignment> horizontal-alignment;
     callback edited(int /* value */);
     //-is_internal
     //-accepts_focus

internal/compiler/widgets/cosmic/spinbox.slint

@@ -41,13 +41,14 @@ export component SpinBox {
     in property <int> maximum <=> base.maximum;
     in property <bool> enabled <=> base.enabled;
     in property <int> step-size <=> base.step-size;
+    in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
     out property <bool> has-focus <=> base.has-focus;
     in-out property <int> value <=> base.value;
 
     callback edited <=> base.edited;
 
-    min-width: 112px;
-    min-height: 32px;
+    min-width: max(112px, layout.min-width);
+    min-height: max(32px, layout.min-height);
     vertical-stretch: 0;
     horizontal-stretch: 1;
     forward-focus: base;
@@ -87,6 +88,7 @@ export component SpinBox {
             border-width: 1px;
 
             base := SpinBoxBase {
+                width: 100px;
                 color: CosmicPalette.control-foreground;
                 font-size: CosmicFontSettings.body.font-size;
                 font-weight: CosmicFontSettings.body.font-weight;

internal/compiler/widgets/cupertino/spinbox.slint

@@ -84,6 +84,7 @@ export component SpinBox {
     in property <int> maximum <=> base.maximum;
     in property <bool> enabled <=> base.enabled;
     in property <int> step-size <=> base.step-size;
+    in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
     out property <bool> has-focus <=> base.has-focus;
     in-out property <int> value <=> base.value;
 
@@ -91,7 +92,7 @@ export component SpinBox {
 
     private property <brush> background: CupertinoPalette.control-background;
 
-    min-width: 128px;
+    min-width: max(128px, layout.min-width);
     min-height: max(22px, layout.min-height);
     vertical-stretch: 0;
     horizontal-stretch: 1;

internal/compiler/widgets/fluent/spinbox.slint

@@ -38,13 +38,14 @@ export component SpinBox {
     in property <int> maximum <=> base.maximum;
     in property <bool> enabled <=> base.enabled;
     in property <int> step-size <=> base.step-size;
+    in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
     out property <bool> has-focus <=> base.has-focus;
     in-out property <int> value <=> base.value;
 
     callback edited <=> base.edited;
 
-    min-width: 128px;
-    min-height: 30px;
+    min-width: max(128px, layout.min-width);
+    min-height: max(30px, layout.min-height);
     vertical-stretch: 0;
     horizontal-stretch: 1;
     forward-focus: base;

internal/compiler/widgets/material/spinbox.slint

@@ -64,6 +64,7 @@ export component SpinBox {
     in property <int> maximum <=> base.maximum;
     in property <bool> enabled <=> base.enabled;
     in property <int> step-size <=> base.step-size;
+    in property <TextHorizontalAlignment> horizontal-alignment <=> base.horizontal-alignment;
     out property <bool> has-focus <=> base.has-focus;
     in-out property <int> value <=> base.value;