StudioWelcome: Use theming for extraction dialog

Task-number: QDS-5984
Change-Id: I2e5d067e47208214c81d126ebbc78fd7e560b7a0
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

2 files changed, 143 insertions, 13 deletions

diff --git a/src/plugins/studiowelcome/qml/downloaddialog/PushButton.ui.qml b/src/plugins/studiowelcome/qml/downloaddialog/PushButton.ui.qml
new file mode 100644
index 0000000000..db64b5751d
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/PushButton.ui.qml
@@ -0,0 +1,119 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+import QtQuick 2.15
+import QtQuick.Templates 2.15
+import ExampleCheckout 1.0
+import StudioTheme 1.0
+
+Button {
+    id: control
+
+    implicitWidth: Math.max(
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
+                       textItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
+                        textItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    text: "My Button"
+    property alias fontpixelSize: textItem.font.pixelSize
+    //property bool decorated: false
+    state: "normal"
+
+    background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        color: "#00000000"
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 2
+        border.color: "#047eff"
+        anchors.fill: parent
+    }
+
+    contentItem: textItem
+
+    Text {
+        id: textItem
+        text: control.text
+        font.pixelSize: 18
+
+        opacity: enabled ? 1.0 : 0.3
+        color: Values.themeTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down && !control.hovered
+
+            PropertyChanges {
+                target: buttonBackground
+                color: Values.themeControlBackground
+                border.color: Values.themeControlOutline
+            }
+
+            PropertyChanges {
+                target: textItem
+                color: Values.themeTextColor
+            }
+        },
+        State {
+            name: "hover"
+            when: control.hovered && !control.down
+            PropertyChanges {
+                target: textItem
+                color: Values.themeTextColor
+            }
+
+            PropertyChanges {
+                target: buttonBackground
+                color: Values.themeControlBackgroundHover
+                border.color: Values.themeControlOutline
+            }
+        },
+        State {
+            name: "activeQds"
+            when: control.down
+            PropertyChanges {
+                target: textItem
+                color: "#ffffff"
+            }
+
+            PropertyChanges {
+                target: buttonBackground
+                color: "#2e769e"
+                border.color: "#00000000"
+            }
+        }
+    ]
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/main.qml b/src/plugins/studiowelcome/qml/downloaddialog/main.qml
index 33acd7e3e4..0f3bc5f46f 100644
--- a/src/plugins/studiowelcome/qml/downloaddialog/main.qml
+++ b/src/plugins/studiowelcome/qml/downloaddialog/main.qml
@@ -30,17 +30,23 @@ import ExampleCheckout 1.0
 import QtQuick.Layouts 1.11
 
 import StudioFonts 1.0
+import StudioTheme 1.0
+
 
 Rectangle {
+
+    property color currentThemeBackground: Values.welcomeScreenBackground
+    property color themeTextColor: Values.themeTextColor
+
     id: root
     property alias url: downloader.url
     property string path: fileExtractor.targetPath
     width: 620
     height: 300
 
-    color: "#2d2e30"
+    color: root.currentThemeBackground
 
-    property color textColor: "#b9b9ba"
+    property color textColor: Values.themeTextColor
 
     signal canceled
     signal accepted
@@ -51,7 +57,7 @@ Rectangle {
     StackLayout {
         id: stackLayout
         anchors.fill: parent
-        currentIndex: root.tempFile.length === 0 ? 0 : 1
+        currentIndex: root.tempFile.length === 0 ? 1 : 1
 
         FileExtractor {
             id: fileExtractor
@@ -76,7 +82,7 @@ Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-            DialogButton {
+            PushButton {
                 id: button
                 x: 532
                 y: 432
@@ -87,6 +93,7 @@ Rectangle {
                 anchors.rightMargin: 20
                 enabled: false
                 onClicked: stackLayout.currentIndex = 1
+
             }
 
             CoolProgressBar {
@@ -106,7 +113,7 @@ Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
             }
 
-            DialogButton {
+            PushButton{
                 id: downloadbutton
                 y: 420
                 enabled: !button.enabled
@@ -119,6 +126,7 @@ Rectangle {
                     downloadbutton.enabled = false
                     downloader.start()
                 }
+
             }
 
             CircularIndicator {
@@ -138,7 +146,7 @@ Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-            DialogButton {
+            PushButton {
                 id: nextPageDestination
                 x: 532
                 y: 432
@@ -152,6 +160,7 @@ Rectangle {
                     stackLayout.currentIndex = 2
                     fileExtractor.extract()
                 }
+
             }
 
             RowLayout {
@@ -171,7 +180,7 @@ Rectangle {
                     readOnly: true
                 }
 
-                DialogButton {
+                PushButton{
                     id: browse
                     text: qsTr("Browse")
                     onClicked: fileExtractor.browse()
@@ -189,7 +198,7 @@ Rectangle {
                 visible: !nextPageDestination.enabled
             }
 
-            DialogButton {
+            PushButton{
                 id: button5
                 x: 400
                 y: 420
@@ -199,6 +208,7 @@ Rectangle {
                 anchors.bottomMargin: 20
                 anchors.rightMargin: 20
                 onClicked: root.canceled()
+
             }
 
             DialogLabel {
@@ -215,8 +225,7 @@ Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-
-            DialogButton {
+            PushButton{
                 id: done
                 x: 532
                 y: 432
@@ -227,6 +236,7 @@ Rectangle {
                 anchors.rightMargin: 20
                 enabled: fileExtractor.finished
                 onClicked: root.accepted()
+
             }
 
 
@@ -241,8 +251,7 @@ Rectangle {
                 anchors.bottomMargin: 20
             }
 
-
-            DialogButton {
+            PushButton{
                 id: details
                 x: 8
                 text: qsTr("Details")
@@ -250,6 +259,7 @@ Rectangle {
                 anchors.topMargin: 66
                 anchors.horizontalCenter: parent.horizontalCenter
                 checkable: true
+
             }
 
 
@@ -291,7 +301,7 @@ Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-            DialogButton {
+            PushButton{
                 id: finish
                 x: 532
                 y: 432
@@ -301,6 +311,7 @@ Rectangle {
                 anchors.bottomMargin: 20
                 anchors.rightMargin: 20
                 onClicked: root.canceled()
+
             }
 
             DialogLabel {