From 77720c1122aed6525ab2c4902cadb8518435cbb8 Mon Sep 17 00:00:00 2001 From: Samuel Ghinet Date: Mon, 20 Mar 2023 18:47:19 +0200 Subject: [PATCH] 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 --- .../ContentLibraryMaterial.qml | 60 ++++++------ .../ContentLibraryTexture.qml | 93 ++++++++++--------- .../imports/HelperWidgets/IconButton.qml | 16 +++- 3 files changed, 93 insertions(+), 76 deletions(-) diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterial.qml index f5ed482e07c..5bafd1d0526 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 - onClicked: (mouse) => { - if (root.downloadState !== "" && root.downloadState !== "failed") - return + Rectangle { // arrow fill + anchors.centerIn: parent + z: -1 - downloadPane.beginDownload(Qt.binding(function() { return downloader.progress })) - - root.downloadState = "" - downloader.start() - } + width: parent.width / 2 + height: parent.height / 2 + color: "black" } - } + + onClicked: { + if (root.downloadState !== "" && root.downloadState !== "failed") + return + + downloadPane.beginDownload(Qt.binding(function() { return downloader.progress })) + + root.downloadState = "" + downloader.start() + } + } // IconButton } // Image TextInput { diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTexture.qml index b3b9aabd3ce..a556aad72ad 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 0a0c6e58883..08a560baa25 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)