Fluent style: uniformize the height of widgets

Make sure they all have the minimum height based on what is currently the hardcoded value of the button. Also inlclude the border top and bottom padding in the layout in case the font is really big
slint-ui · Jan 20, 2022 · 1e9e252 · 1e9e252
1 parent 3d5fbc7
commit 1e9e252
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/sixtyfps_compiler/widgets/fluent/sixtyfps_widgets.60 b/sixtyfps_compiler/widgets/fluent/sixtyfps_widgets.60
@@ -97,16 +97,18 @@ export SpinBox := FocusScope {
     property <image> icon;
     property <length> font-size <=> button.font-size;
 
-    min-height: 32px;
+    min-height: max(32px, l.min-height);
     horizontal-stretch: 1;
     vertical-stretch: 0;
 
     Rectangle {
         background: !enabled ? Palette.neutralLighter : Palette.white;
     }
 
-    GridLayout {
+    l := GridLayout {
         padding-left: 8px;
+        padding-top: 3px;
+        padding-bottom: 3px;
         text := Text {
             rowspan: 2;
             text: value;
@@ -339,6 +341,7 @@ export LineEdit := Rectangle {
 
     horizontal-stretch: 1;
     vertical-stretch: 0;
+    min-height: max(32px, l.min-height);
 
     background: !enabled ? Palette.neutralLighter : Palette.white;
     border-radius: 2px;
@@ -347,9 +350,11 @@ export LineEdit := Rectangle {
         : has-focus ? Palette.themeSecondary
         : Palette.neutralPrimary;
 
-    HorizontalLayout {
+    l := HorizontalLayout {
         padding-left: 8px;
         padding-right: 8px;
+        padding-top: 3px;
+        padding-bottom: 3px;
         inner := LineEditInner {
             placeholder-color: !enabled ? Palette.neutralTertiary : Palette.neutralSecondary;
         }
@@ -415,11 +420,13 @@ export ComboBox := FocusScope {
     horizontal-stretch: 1;
     vertical-stretch: 0;
     min-width: 170px;
-    min-height: 32px;
+    min-height: max(32px, l.min-height);
 
-    HorizontalLayout {
+    l := HorizontalLayout {
         padding-left: 8px;
         padding-right: 8px;
+        padding-bottom: 3px;
+        padding-top: 3px;
         spacing: 8px;
         t := Text {
             text <=> root.current-value;

diff --git a/sixtyfps_compiler/widgets/fluent/sixtyfps_widgets_impl.60 b/sixtyfps_compiler/widgets/fluent/sixtyfps_widgets_impl.60
@@ -85,11 +85,13 @@ export Button := Rectangle {
         : Palette.white;
     horizontal-stretch: 0;
     vertical-stretch: 0;
-    min-height: 32px;
-    HorizontalLayout {
+    min-height: max(32px, l.min-height);
+    l := HorizontalLayout {
         padding-left: 16px;
         padding-right: 16px;
         spacing: 8px;
+        padding-top: 3px;
+        padding-bottom: 3px;
 
         if (icon.width > 0 && icon.height > 0): Image {
             source <=> icon;