StyleKit, delayButton: draw the progress as a thin line at the bottom

The built-in Qt Quick Controls styles draw the DelayButton progress as
a thin line along the bottom edge of the button. The StyleKit fallback
style, and the example styles, instead let the progress fill the whole
background, which ends up looking out of place - especially for styles
such as Vitrum.

This patch changes the fallback style to give the indicator a fixed
height and bottom alignment, so that the progress is drawn as a thin
line, using the accent color as foreground. The example styles are
adjusted on top of that, and mostly only need to tweak the height,
margins and colors. Plain can drop its delayButton section altogether
and use the fallback appearance as-is.

Pick-to: 6.12
Change-Id: I5ccc984e2e55e778f8c8ac42019d69d5a1db02d4
Reviewed-by: Doris Verria <doris.verria@qt.io>
Reviewed-by: Dilek Akcay <dilek.akcay@qt.io>

5 files changed, 30 insertions, 35 deletions

diff --git a/examples/stylekit/stylekitcontrols/styles/Fusion.qml b/examples/stylekit/stylekitcontrols/styles/Fusion.qml
index f6464255b1..9b85bf0428 100644
--- a/examples/stylekit/stylekitcontrols/styles/Fusion.qml
+++ b/examples/stylekit/stylekitcontrols/styles/Fusion.qml
@@ -130,7 +130,12 @@ Style {
     }
 
     delayButton {
-        padding: 0
+        indicator {
+            height: 2
+            border.width: 0
+            bottomMargin: -2
+            foreground.margins: 0
+        }
     }
 
     dial {
@@ -309,7 +314,7 @@ Style {
         }
 
         delayButton {
-            indicator.color: "transparent"
+            indicator.color: "lightgray"
         }
 
         flatButton {
@@ -453,7 +458,7 @@ Style {
         }
 
         delayButton {
-            indicator.color: "transparent"
+            indicator.color: "#666666"
         }
 
         flatButton {
diff --git a/examples/stylekit/stylekitcontrols/styles/Haze.qml b/examples/stylekit/stylekitcontrols/styles/Haze.qml
index b9800a96a5..e7259b0170 100644
--- a/examples/stylekit/stylekitcontrols/styles/Haze.qml
+++ b/examples/stylekit/stylekitcontrols/styles/Haze.qml
@@ -96,13 +96,12 @@ Style {
     }
 
     delayButton {
-        padding: 0
         indicator {
-            radius: 8
-            foreground {
-                margins: 0
-                radius: 8
-            }
+            // Move the progress under the contents (hence a negative margin)
+            height: 2
+            bottomMargin: -5
+            foreground.margins: 0
+            border.width: 0
         }
     }
 
@@ -399,7 +398,6 @@ Style {
             }
 
             indicator {
-                color: "white"
                 foreground.image.color: palette.accent
             }
 
@@ -444,10 +442,6 @@ Style {
             }
         }
 
-        delayButton {
-            indicator.color: "transparent"
-        }
-
         comboBox {
             hovered.background {
                 color: palette.accent
@@ -604,10 +598,6 @@ Style {
             }
         }
 
-        delayButton {
-            indicator.color: "transparent"
-        }
-
         comboBox {
             hovered {
                 background {
@@ -756,10 +746,13 @@ Style {
 
             delayButton {
                 indicator {
-                    color: "transparent"
+                    height: 6
+                    border.width: 1
+                    color: "white"
+                    bottomMargin: -2
                     foreground.margins: 0
+                    foreground.color: "black"
                 }
-                checked.text.color: "white"
             }
 
             dial {
@@ -977,7 +970,7 @@ Style {
             }
 
             delayButton {
-                indicator.color: "transparent"
+                indicator.foreground.color: "#678367"
             }
 
             pane {
diff --git a/examples/stylekit/stylekitcontrols/styles/Plain.qml b/examples/stylekit/stylekitcontrols/styles/Plain.qml
index b9a1425114..9b0f2c2b0c 100644
--- a/examples/stylekit/stylekitcontrols/styles/Plain.qml
+++ b/examples/stylekit/stylekitcontrols/styles/Plain.qml
@@ -78,15 +78,9 @@ Style {
     }
 
     delayButton {
-        padding: 0
         indicator {
-            radius: 4
-            foreground {
-                radius: 4
-                color: palette.accent.lighter(1.2)
-            }
+            bottomMargin: -3
         }
-        checked.indicator.foreground.color: palette.accent.darker(1.2)
     }
 
     itemDelegate {
diff --git a/examples/stylekit/stylekitcontrols/styles/Vitrum.qml b/examples/stylekit/stylekitcontrols/styles/Vitrum.qml
index 58b816bf6c..f790d912a1 100644
--- a/examples/stylekit/stylekitcontrols/styles/Vitrum.qml
+++ b/examples/stylekit/stylekitcontrols/styles/Vitrum.qml
@@ -167,10 +167,12 @@ Style {
     }
 
     delayButton {
-        padding: 0
         indicator {
-            color: "transparent"
-            border.width: 0
+            height: 10
+            bottomMargin: -2
+            leftMargin: 5
+            rightMargin: 5
+            border.width: 1
         }
     }
 
diff --git a/src/labs/stylekit/impl/FallbackStyle.qml b/src/labs/stylekit/impl/FallbackStyle.qml
index 130a19e8ce..6f9aad4469 100644
--- a/src/labs/stylekit/impl/FallbackStyle.qml
+++ b/src/labs/stylekit/impl/FallbackStyle.qml
@@ -182,15 +182,16 @@ BaseStyle {
     }
 
     delayButton {
-        padding: 0
         indicator {
+            height: 6
             fillWidth: true
-            fillHeight: true
-            color: __transparent
-            border.width: 0
+            border.width: 1
+            alignment: Qt.AlignBottom
             foreground {
+                margins: 2
                 fillWidth: true
                 fillHeight: true
+                color: palette.accent
                 delegate: ProgressDelegate {}
             }
         }