Download textures and materials only by clicking the download icon

Previously, clicking the texture thumbnail itself would start the
download.

Also, improved the look of the download icon:
* added a margin to the right
* the inside "arrow" is now black, instead of transparent

Task-number: QDS-9398
Change-Id: I58f958493f1c6072a57402288ea155135909e117
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

3 files changed, 92 insertions, 75 deletions

diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml
index f5ed482e07..5bafd1d052 100644
--- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml
+++ b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml
@@ -110,43 +110,51 @@ Item {
                 }
             } // IconButton
 
-            Text { // download icon
-                color: root.downloadState === "unavailable" || root.downloadState === "failed"
-                       ? StudioTheme.Values.themeRedLight
-                       : StudioTheme.Values.themeTextColor
-
-                font.family: StudioTheme.Constants.iconFont.family
-                text: root.downloadState === "unavailable"
+            IconButton {
+                id: downloadIcon
+                icon: root.downloadState === "unavailable"
                       ? StudioTheme.Constants.downloadUnavailable
                       : StudioTheme.Constants.download
 
-                font.pixelSize: 22
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                anchors.bottomMargin: 0
+                iconColor: root.downloadState === "unavailable" || root.downloadState === "failed"
+                           ? StudioTheme.Values.themeRedLight
+                           : StudioTheme.Values.themeTextColor
+
+                iconSize: 22
+                iconScale: downloadIcon.containsMouse ? 1.2 : 1
+                iconStyle: Text.Outline
+                iconStyleColor: "black"
 
+                tooltip: qsTr("Click to download material")
+                buttonSize: 22
+
+                transparentBg: true
                 anchors.right: parent.right
                 anchors.bottom: parent.bottom
-                style: Text.Outline
-                styleColor: "black"
-
                 visible: root.downloadState !== "downloaded"
 
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.LeftButton
+                anchors.bottomMargin: 0
+                anchors.rightMargin: 4
+
+                Rectangle { // arrow fill
+                    anchors.centerIn: parent
+                    z: -1
+
+                    width: parent.width / 2
+                    height: parent.height / 2
+                    color: "black"
+                }
 
-                    onClicked: (mouse) => {
-                        if (root.downloadState !== "" && root.downloadState !== "failed")
-                            return
+                onClicked: {
+                    if (root.downloadState !== "" && root.downloadState !== "failed")
+                        return
 
-                        downloadPane.beginDownload(Qt.binding(function() { return downloader.progress }))
+                    downloadPane.beginDownload(Qt.binding(function() { return downloader.progress }))
 
-                        root.downloadState = ""
-                        downloader.start()
-                    }
+                    root.downloadState = ""
+                    downloader.start()
                 }
-            }
+            } // IconButton
         } // Image
 
         TextInput {
diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml
index b3b9aabd3c..a556aad72a 100644
--- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml
+++ b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml
@@ -106,29 +106,60 @@ Item {
 
         property string webUrl: modelData.textureWebUrl
 
-        Text {
+        IconButton {
             id: downloadIcon
-            color: root.downloadState === "unavailable" || root.downloadState === "failed"
-                   ? StudioTheme.Values.themeRedLight
-                   : StudioTheme.Values.themeTextColor
-
-            font.family: StudioTheme.Constants.iconFont.family
-            text: root.downloadState === "unavailable"
+            icon: root.downloadState === "unavailable"
                   ? StudioTheme.Constants.downloadUnavailable
                   : StudioTheme.Constants.download
 
-            font.pixelSize: 22
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            anchors.bottomMargin: 0
+            iconColor: root.downloadState === "unavailable" || root.downloadState === "failed"
+                       ? StudioTheme.Values.themeRedLight
+                       : StudioTheme.Values.themeTextColor
+
+            iconSize: 22
+            iconScale: downloadIcon.containsMouse ? 1.2 : 1
+            iconStyle: Text.Outline
+            iconStyleColor: "black"
 
+            tooltip: modelData.textureToolTip + (downloadIcon.visible
+                                                ? "\n\n" + root.statusText()
+                                                : "")
+            buttonSize: 22
+
+            transparentBg: true
             anchors.right: parent.right
             anchors.bottom: parent.bottom
-            style: Text.Outline
-            styleColor: "black"
-
             visible: root.downloadState !== "downloaded"
-        }
+
+            anchors.bottomMargin: 0
+            anchors.rightMargin: 4
+
+            Rectangle { // Arrow Fill
+                anchors.centerIn: parent
+                z: -1
+
+                width: parent.width / 2
+                height: parent.height / 2
+                color: "black"
+            }
+
+            onClicked: {
+                if (root.downloadState !== "" && root.downloadState !== "failed")
+                    return
+
+                if (!ContentLibraryBackend.rootView.markTextureDownloading())
+                    return
+
+                progressBar.visible = true
+                tooltip.visible = false
+                root.progressText = qsTr("Downloading...")
+                root.allowCancel = true
+                root.progressValue = Qt.binding(function() { return downloader.progress })
+
+                root.downloadState = ""
+                downloader.start()
+            }
+        } // IconButton
 
         ToolTip {
             id: tooltip
@@ -153,8 +184,9 @@ Item {
         id: mouseArea
 
         anchors.fill: parent
+        hoverEnabled: !downloadIcon.visible
+        propagateComposedEvents: downloadIcon.visible
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        hoverEnabled: true
 
         onEntered: tooltip.visible = image.visible
         onExited: tooltip.visible = false
@@ -167,28 +199,6 @@ Item {
                 root.showContextMenu()
             }
         }
-
-        onClicked: (mouse) => {
-            if (mouse.button !== Qt.LeftButton)
-                return
-
-            if (root.downloadState !== "" && root.downloadState !== "failed")
-                return
-
-            if (!ContentLibraryBackend.rootView.markTextureDownloading())
-                return
-
-            progressBar.visible = true
-            tooltip.visible = false
-            root.progressText = qsTr("Downloading...")
-            root.allowCancel = true
-            root.progressValue = Qt.binding(function() { return downloader.progress })
-
-            mouseArea.enabled = false
-            root.downloadState = ""
-            root.downloadStateChanged()
-            downloader.start()
-        }
     }
 
     FileDownloader {
@@ -198,7 +208,6 @@ Item {
         downloadEnabled: true
         onDownloadStarting: {
             root.downloadState = "downloading"
-            root.downloadStateChanged()
         }
 
         onFinishedChanged: {
@@ -214,16 +223,12 @@ Item {
             root.progressValue = 0
 
             root.downloadState = ""
-            root.downloadStateChanged()
-            mouseArea.enabled = true
 
             ContentLibraryBackend.rootView.markNoTextureDownloading()
         }
 
         onDownloadFailed: {
             root.downloadState = "failed"
-            root.downloadStateChanged()
-            mouseArea.enabled = true
 
             ContentLibraryBackend.rootView.markNoTextureDownloading()
         }
@@ -237,10 +242,8 @@ Item {
         alwaysCreateDir: false
         clearTargetPathContents: false
         onFinishedChanged: {
-            mouseArea.enabled = true
             modelData.setDownloaded()
             root.downloadState = modelData.isDownloaded() ? "downloaded" : "failed"
-            root.downloadStateChanged()
 
             ContentLibraryBackend.rootView.markNoTextureDownloading()
         }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml
index 0a0c6e5888..08a560baa2 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml
@@ -14,13 +14,19 @@ Rectangle {
     property alias icon: icon.text
     property alias tooltip: toolTip.text
     property alias iconSize: icon.font.pixelSize
+    property alias iconScale: icon.scale
+    property alias iconColor: icon.color
+    property alias iconStyle: icon.style
+    property alias iconStyleColor: icon.styleColor
+
     property alias containsMouse: mouseArea.containsMouse
 
     property bool enabled: true
+    property bool transparentBg: false
     property int buttonSize: StudioTheme.Values.height
-    property color normalColor: StudioTheme.Values.themeControlBackground
-    property color hoverColor: StudioTheme.Values.themeControlBackgroundHover
-    property color pressColor: StudioTheme.Values.themeControlBackgroundInteraction
+    property color normalColor: root.transparentBg ? "transparent" : StudioTheme.Values.themeControlBackground
+    property color hoverColor: root.transparentBg ? "transparent" : StudioTheme.Values.themeControlBackgroundHover
+    property color pressColor: root.transparentBg ? "transparent" : StudioTheme.Values.themeControlBackgroundInteraction
 
     width: buttonSize
     height: buttonSize
@@ -32,18 +38,18 @@ Rectangle {
 
     Text {
         id: icon
+        anchors.centerIn: root
 
         color: root.enabled ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeTextColorDisabled
         font.family: StudioTheme.Constants.iconFont.family
         font.pixelSize: StudioTheme.Values.baseIconFontSize
-        anchors.centerIn: root
     }
 
     MouseArea {
         id: mouseArea
 
         anchors.fill: parent
-        hoverEnabled: true
+        hoverEnabled: root.visible
         onClicked: {
             // We need to keep mouse area enabled even when button is disabled to make tooltip work
             if (root.enabled)