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>

1 files changed, 5 insertions, 4 deletions

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 {}
             }
         }