Make sure that Dial is always circular

Task-number: QTBUG-49958
Change-Id: Ifbb14987e503aaa59651e65a2b8cfd99f2907154
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

3 files changed, 21 insertions, 17 deletions

diff --git a/src/imports/controls/Dial.qml b/src/imports/controls/Dial.qml
index 9068464f..b6752d55 100644
--- a/src/imports/controls/Dial.qml
+++ b/src/imports/controls/Dial.qml
@@ -45,31 +45,27 @@ T.Dial {
 
     //! [background]
     background: Rectangle {
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: Math.max(64, Math.min(control.width, control.height))
         radius: width / 2
         border.color: "#353637"
-
-        Text {
-            text: control.position.toFixed(1)
-            color: "#353637"
-            font.pixelSize: 60
-            x: parent.width / 2 - width / 2
-            y: parent.height / 2 - height / 2
-        }
     }
     //! [background]
 
     //! [handle]
     handle: Image {
         id: handleItem
-        x: background.width / 2 - handle.width / 2
-        y: background.height / 2 - handle.height / 2
+        x: background.x + background.width / 2 - handle.width / 2
+        y: background.y + background.height / 2 - handle.height / 2
         width: 14
         height: 10
         source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/dial-indicator.png"
         antialiasing: true
         transform: [
             Translate {
-                y: -background.height * 0.4
+                y: -background.height * 0.4 + handle.height / 2
             },
             Rotation {
                 angle: control.angle
diff --git a/src/imports/controls/material/Dial.qml b/src/imports/controls/material/Dial.qml
index d3f6bb65..a05982cc 100644
--- a/src/imports/controls/material/Dial.qml
+++ b/src/imports/controls/material/Dial.qml
@@ -46,6 +46,10 @@ T.Dial {
 
     //! [background]
     background: Rectangle {
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: Math.max(64, Math.min(control.width, control.height))
         color: "transparent"
         radius: width / 2
 
@@ -57,11 +61,11 @@ T.Dial {
     handle: Rectangle {
         id: handleItem
 
-        x: background.width / 2 - handle.width / 2
-        y: background.height / 2 - handle.height / 2
+        x: background.x + background.width / 2 - handle.width / 2
+        y: background.y + background.height / 2 - handle.height / 2
         transform: [
             Translate {
-                y: -background.height * 0.35
+                y: -background.height * 0.4 + handle.height / 2
             },
             Rotation {
                 angle: control.angle
diff --git a/src/imports/controls/universal/Dial.qml b/src/imports/controls/universal/Dial.qml
index f80ff18b..9db1f8a5 100644
--- a/src/imports/controls/universal/Dial.qml
+++ b/src/imports/controls/universal/Dial.qml
@@ -46,6 +46,10 @@ T.Dial {
 
     //! [background]
     background: Rectangle {
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: Math.max(64, Math.min(control.width, control.height))
         radius: width / 2
         color: "transparent"
         border.color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumColor
@@ -58,8 +62,8 @@ T.Dial {
         implicitWidth: 20
         implicitHeight: 20
 
-        x: background.width / 2 - handle.width / 2
-        y: background.height / 2 - handle.height / 2
+        x: background.x + background.width / 2 - handle.width / 2
+        y: background.y + background.height / 2 - handle.height / 2
 
         radius: width / 2
         color: !control.enabled ? control.Universal.baseLowColor :
@@ -67,7 +71,7 @@ T.Dial {
 
         transform: [
             Translate {
-                y: -control.height * 0.35
+                y: -background.height * 0.4 + handle.height / 2
             },
             Rotation {
                 angle: control.angle