From be32f1554892302ae4c76ac30cdff9b8ddf40123 Mon Sep 17 00:00:00 2001 From: Elias Steurer Date: Fri, 5 Feb 2021 11:48:06 +0100 Subject: [PATCH] Refactor workshop: Remove background blur in default state Replace laggy navigation snapping with fixed --- ScreenPlay/qml/Common/Background.qml | 48 --- ScreenPlay/qml/Workshop/Background.qml | 40 +- ScreenPlay/qml/Workshop/Navigation.qml | 36 +- ScreenPlay/qml/Workshop/Workshop.qml | 556 +++++++++++-------------- 4 files changed, 275 insertions(+), 405 deletions(-) diff --git a/ScreenPlay/qml/Common/Background.qml b/ScreenPlay/qml/Common/Background.qml index bb34f2c2..1b8e5a2a 100644 --- a/ScreenPlay/qml/Common/Background.qml +++ b/ScreenPlay/qml/Common/Background.qml @@ -9,13 +9,6 @@ Rectangle { color: Material.theme === Material.Light ? "white" : Qt.darker( Material.background) state: "init" - onStateChanged: { - if (state === "init") { - colorShaderCreateTimer.stop() - } else { - colorShaderCreateTimer.start() - } - } Rectangle { id: bgCommunity @@ -27,33 +20,9 @@ Rectangle { anchors.fill: parent } - property var myDate: new Date() - - Timer { - id: colorShaderCreateTimer - interval: 16 - repeat: true - onTriggered: colorShaderCreate.time = myDate.getMilliseconds() - } - - ShaderEffect { - id: colorShaderCreate - anchors.fill: parent - blending: true - property real shaderOpacity: 0 - property real time: 45 - property vector2d resolution: Qt.vector2d(parent.width, - parent.height * 2) - fragmentShader: "qrc:/assets/shader/movingcolorramp.fsh" - } - states: [ State { name: "init" - PropertyChanges { - target: colorShaderCreate - shaderOpacity: 0 - } PropertyChanges { target: bgCommunity opacity: 0 @@ -65,10 +34,6 @@ Rectangle { }, State { name: "create" - PropertyChanges { - target: colorShaderCreate - shaderOpacity: 1 - } PropertyChanges { target: bgCommunity opacity: 0 @@ -80,10 +45,6 @@ Rectangle { }, State { name: "community" - PropertyChanges { - target: colorShaderCreate - shaderOpacity: 0 - } PropertyChanges { target: bgCommunity opacity: 1 @@ -95,10 +56,6 @@ Rectangle { }, State { name: "workshop" - PropertyChanges { - target: colorShaderCreate - shaderOpacity: 0 - } PropertyChanges { target: bgCommunity opacity: 0 @@ -122,11 +79,6 @@ Rectangle { duration: 400 easing.type: Easing.InOutQuart } - PropertyAnimation { - target: colorShaderCreate - property: "shaderOpacity" - duration: 0 - } } ] } diff --git a/ScreenPlay/qml/Workshop/Background.qml b/ScreenPlay/qml/Workshop/Background.qml index 4dc95632..1060c215 100644 --- a/ScreenPlay/qml/Workshop/Background.qml +++ b/ScreenPlay/qml/Workshop/Background.qml @@ -4,12 +4,11 @@ import ScreenPlay.Workshop 1.0 Rectangle { id: root - state: "base" color: "#161C1D" property string backgroundImage: "" property int imageOffsetTop: 0 - onImageOffsetTopChanged: { - if ((imageOffsetTop * -1) >= 300) { + onImageOffsetTopChanged: { + if ((imageOffsetTop * -1) >= 400) { root.state = "backgroundColor" } else { if (root.state !== "backgroundImage") { @@ -19,7 +18,7 @@ Rectangle { } onBackgroundImageChanged: { if (backgroundImage === "") { - root.state = "base" + root.state = "" } else { root.state = "backgroundImage" } @@ -31,9 +30,6 @@ Rectangle { source: "qrc:/assets/images/mask_workshop.png" } - - - Image { id: bgImage height: bgImage.sourceSize.height @@ -58,7 +54,11 @@ Rectangle { color: "#00ffffff" } GradientStop { - position: .9 + position: 0.6 + color: "#00ffffff" + } + GradientStop { + position: 1 color: "#161C1D" } } @@ -66,17 +66,16 @@ Rectangle { } MaskedBlur { - id:blur + id: blur anchors.fill: bgImage source: bgImage maskSource: maskSource radius: 16 cached: true samples: 24 + opacity: 0 } - - Rectangle { id: bgColor color: "#161C1D" @@ -84,10 +83,9 @@ Rectangle { anchors.fill: parent } - states: [ State { - name: "base" + name: "" PropertyChanges { target: bgImage opacity: 0 @@ -115,19 +113,19 @@ Rectangle { } PropertyChanges { target: blur - opacity: 1 + opacity: 0 } }, State { name: "backgroundColor" PropertyChanges { target: bgImage - opacity: 0 + opacity: 1 } PropertyChanges { target: bgColor - opacity: 1 + opacity: 0.5 } PropertyChanges { target: blur @@ -137,12 +135,12 @@ Rectangle { ] transitions: [ Transition { - from: "base" + from: "" to: "backgroundImage" reversible: true PropertyAnimation { - targets: [bgImage, bgColor, blur] - duration: 2000 + targets: [bgImage, bgColor, blur] + duration: 1000 easing.type: Easing.InOutQuart property: "opacity" } @@ -152,8 +150,8 @@ Rectangle { to: "backgroundColor" reversible: true PropertyAnimation { - targets: [bgImage, bgColor] - duration: 1000 + targets: [bgImage, bgColor] + duration: 2000 easing.type: Easing.InOutQuart property: "opacity" } diff --git a/ScreenPlay/qml/Workshop/Navigation.qml b/ScreenPlay/qml/Workshop/Navigation.qml index 85fb2f5d..5bb112dc 100644 --- a/ScreenPlay/qml/Workshop/Navigation.qml +++ b/ScreenPlay/qml/Workshop/Navigation.qml @@ -10,34 +10,21 @@ import ScreenPlay.Workshop.SteamEnums 1.0 import SteamQMLImageProvider 1.0 import ScreenPlay 1.0 -Item { +Rectangle { id: root - width: 800 - height: 60 + implicitWidth: 800 + height: 50 signal uploadPressed - - Rectangle { - id: bg - color: Material.theme === Material.Light ? "white" : Qt.darker(Material.background) - opacity: .9 - radius: 3 - anchors.fill: wrapper - layer.enabled: true - layer.effect: ElevationEffect { - elevation: 4 - } - } + color: Material.theme === Material.Light ? "white" : Material.background Item { id: wrapper - + height: 50 anchors { - top: parent.top + verticalCenter: parent.verticalCenter right: parent.right left: parent.left - bottom: parent.bottom - bottomMargin: 5 } Text { @@ -66,8 +53,8 @@ Item { SteamImage { id: avatar - width: 40 - height: 40 + width: 30 + height: 30 anchors { left: parent.left leftMargin: 10 @@ -85,20 +72,15 @@ Item { Button { id: btnUplaod text: qsTr("Upload to the Steam Workshop") - Material.background: Material.accent - Material.foreground: "white" icon.source: "qrc:/assets/icons/icon_plus.svg" icon.color: "white" icon.width: 16 icon.height: 16 - highlighted: true - onClicked: uploadPressed() anchors { - top: parent.top + verticalCenter: parent.verticalCenter right: parent.right rightMargin: 10 - bottom: parent.bottom } } } diff --git a/ScreenPlay/qml/Workshop/Workshop.qml b/ScreenPlay/qml/Workshop/Workshop.qml index bdd397fa..32b6bf94 100644 --- a/ScreenPlay/qml/Workshop/Workshop.qml +++ b/ScreenPlay/qml/Workshop/Workshop.qml @@ -64,6 +64,18 @@ Item { } } + Navigation { + id: nav + z: 3 + anchors { + top: parent.top + right: parent.right + left: parent.left + } + + onUploadPressed: popupUploadProject.open() + } + Flickable { id: scrollView anchors.fill: parent @@ -84,304 +96,285 @@ Item { } } - transitions: Transition { - PropertyAnimation { - properties: "y" - easing.type: Easing.InOutQuad - duration: 300 - } + ScrollBar.vertical: ScrollBar { + snapMode: ScrollBar.SnapOnRelease } - // This wrapper is needed for the parent change - // of the nav. Otherwhise it wont work. Dunno why Item { - id: wrapper - width: parent.width - height: nav.height + header.height + gridView.height - - Navigation { - id: nav - anchors.horizontalCenter: parent.horizontalCenter - onUploadPressed: popupUploadProject.open() + id: header + height: 440 + anchors { + top: parent.top + topMargin: nav.height + right: parent.right + left: parent.left } Item { - id: header - height: 440 + id: banner + height: 350 + property var bannerPublishedFileID anchors { + top: parent.top right: parent.right left: parent.left } - - Item { - id: banner - height: 350 - z: 5 - property var bannerPublishedFileID + Image { + id: bannerImg2 anchors { - top: parent.top right: parent.right left: parent.left - } - Image { - id: bannerImg2 - anchors { - right: parent.right - left: parent.left - bottom: parent.bottom - } - height: { - - } - - asynchronous: true - fillMode: Image.PreserveAspectCrop + bottom: parent.bottom } - ColumnLayout { - anchors { - top: parent.top - topMargin: 100 - right: parent.right - left: parent.left - leftMargin: 100 - } + asynchronous: true + fillMode: Image.PreserveAspectCrop + } + ColumnLayout { + anchors { + top: parent.top + topMargin: 100 + right: parent.right + left: parent.left + leftMargin: 100 + } + + Text { + id: bannerTxtUnderline + property int numberSubscriber: 0 + text: numberSubscriber + " SUBSCRIBED TO:" + font.pointSize: 12 + color: "white" + font.family: ScreenPlay.settings.font + font.weight: Font.Thin + } + + Text { + id: bannerTxt + text: qsTr("Loading") + font.pointSize: 42 + color: "white" + font.family: ScreenPlay.settings.font + font.weight: Font.Thin + width: 400 + } + + RowLayout { + spacing: 10 + Button { + text: qsTr("Download now!") + Material.background: Material.accent + Material.foreground: "white" + icon.source: "qrc:/assets/icons/icon_download.svg" + onClicked: { + text = qsTr("Downloading...") + Workshop.steamWorkshop.subscribeItem( + Workshop.steamWorkshop.workshopListModel.getBannerID( + )) + } + } + Button { + text: qsTr("Details") + Material.background: Material.accent + Material.foreground: "white" + icon.source: "qrc:/assets/icons/icon_info.svg" + visible: false + onClicked: { + sidebar.setWorkshopItem(publishedFileID, + imgUrl, + additionalPreviewUrl, + subscriptionCount) + } + } + } + + MouseArea { + onClicked: Qt.openUrlExternally( + "steam://url/CommunityFilePage/" + + banner.bannerPublishedFileID) + height: 30 + width: bannerTxtOpenInSteam.paintedWidth + cursorShape: Qt.PointingHandCursor Text { - id: bannerTxtUnderline - property int numberSubscriber: 0 - text: numberSubscriber + " SUBSCRIBED TO:" - font.pointSize: 12 + id: bannerTxtOpenInSteam + opacity: .7 + text: qsTr("Open In Steam") + font.pointSize: 10 color: "white" + font.underline: true font.family: ScreenPlay.settings.font font.weight: Font.Thin } - - Text { - id: bannerTxt - text: qsTr("Loading") - font.pointSize: 42 - color: "white" - font.family: ScreenPlay.settings.font - font.weight: Font.Thin - width: 400 - } - - RowLayout { - spacing: 10 - Button { - text: qsTr("Download now!") - Material.background: Material.accent - Material.foreground: "white" - icon.source: "qrc:/assets/icons/icon_download.svg" - onClicked: { - text = qsTr("Downloading...") - Workshop.steamWorkshop.subscribeItem( - Workshop.steamWorkshop.workshopListModel.getBannerID( - )) - } - } - Button { - text: qsTr("Details") - Material.background: Material.accent - Material.foreground: "white" - icon.source: "qrc:/assets/icons/icon_info.svg" - visible: false - onClicked: { - sidebar.setWorkshopItem( - publishedFileID, imgUrl, - additionalPreviewUrl, - subscriptionCount) - } - } - } - - MouseArea { - onClicked: Qt.openUrlExternally( - "steam://url/CommunityFilePage/" - + banner.bannerPublishedFileID) - height: 30 - width: bannerTxtOpenInSteam.paintedWidth - cursorShape: Qt.PointingHandCursor - Text { - id: bannerTxtOpenInSteam - opacity: .7 - text: qsTr("Open In Steam") - font.pointSize: 10 - color: "white" - font.underline: true - font.family: ScreenPlay.settings.font - font.weight: Font.Thin - } - } } } } + } - GridView { - id: gridView - maximumFlickVelocity: 7000 - flickDeceleration: 5000 - cellWidth: 330 - cellHeight: 190 - height: contentHeight - interactive: false - model: Workshop.steamWorkshop.workshopListModel - anchors { - top: header.bottom - topMargin: 100 - left: parent.left - right: parent.right - leftMargin: 50 - } + GridView { + id: gridView + maximumFlickVelocity: 7000 + flickDeceleration: 5000 + cellWidth: 330 + cellHeight: 190 + height: contentHeight + interactive: false + model: Workshop.steamWorkshop.workshopListModel + anchors { + top: header.bottom + topMargin: 100 + left: parent.left + right: parent.right + leftMargin: 50 + } - header: Item { - height: 70 - width: parent.width + header: Item { + height: 70 + width: parent.width - Item { - id: searchWrapper + Item { + id: searchWrapper - width: 400 - height: 50 - anchors { - verticalCenter: parent.verticalCenter - left: parent.left - } - - Rectangle { - anchors.fill: parent - color: Material.theme === Material.Light ? "white" : Qt.darker( - Material.background) - opacity: .95 - radius: 3 - } - - TextField { - id: tiSearch - anchors { - top: parent.top - right: parent.right - rightMargin: 10 - bottom: parent.bottom - left: parent.left - leftMargin: 10 - } - placeholderText: qsTr("Search for Wallpaper and Widgets...") - onTextChanged: timerSearch.restart() - Timer { - id: timerSearch - interval: 300 - onTriggered: Workshop.steamWorkshop.workshopListModel.searchWorkshopByText( - tiSearch.text) - } - } + width: 400 + height: 50 + anchors { + verticalCenter: parent.verticalCenter + left: parent.left } - Row { - spacing: 20 - anchors { - left: searchWrapper.right - leftMargin: 20 - right: cbQuerySort.left - rightMargin: 20 - verticalCenter: parent.verticalCenter - } - Button { - text: qsTr("Open Workshop in Steam") - font.capitalization: Font.Capitalize - font.family: ScreenPlay.settings.font - onClicked: Qt.openUrlExternally( - "steam://url/SteamWorkshopPage/672870") - icon.source: "qrc:/assets/icons/icon_steam.svg" - icon.width: 18 - icon.height: 18 - } - Button { - text: qsTr("Open GameHub in Steam") - font.capitalization: Font.Capitalize - font.family: ScreenPlay.settings.font - onClicked: Qt.openUrlExternally( - "steam://url/GameHub/672870") - icon.source: "qrc:/assets/icons/icon_steam.svg" - icon.width: 18 - icon.height: 18 - } + Rectangle { + anchors.fill: parent + color: Material.theme === Material.Light ? "white" : Qt.darker( + Material.background) + opacity: .95 + radius: 3 } - ComboBox { - id: cbQuerySort - width: 250 - height: searchWrapper.height + TextField { + id: tiSearch anchors { - verticalCenter: parent.verticalCenter + top: parent.top right: parent.right - rightMargin: 50 + rightMargin: 10 + bottom: parent.bottom + left: parent.left + leftMargin: 10 } + placeholderText: qsTr("Search for Wallpaper and Widgets...") + onTextChanged: timerSearch.restart() + Timer { + id: timerSearch + interval: 300 + onTriggered: Workshop.steamWorkshop.workshopListModel.searchWorkshopByText( + tiSearch.text) + } + } + } - textRole: "text" - valueRole: "value" - currentIndex: 2 - Layout.preferredHeight: searchWrapper.height + Row { + spacing: 20 + anchors { + left: searchWrapper.right + leftMargin: 20 + right: cbQuerySort.left + rightMargin: 20 + verticalCenter: parent.verticalCenter + } + Button { + text: qsTr("Open Workshop in Steam") + font.capitalization: Font.Capitalize font.family: ScreenPlay.settings.font - onActivated: { - Workshop.steamWorkshop.workshopListModel.searchWorkshop( cbQuerySort.currentValue, 1) - } - model: [{ - "value": SteamEnums.k_EUGCQuery_RankedByVote, - "text": qsTr("Ranked By Vote") - }, { - "value": SteamEnums.K_EUGCQuery_RankedByPublicationDate, - "text": qsTr("Publication Date") - }, { - "value": SteamEnums.K_EUGCQuery_RankedByTrend, - "text": qsTr("Ranked By Trend") - }, { - "value": SteamEnums.K_EUGCQuery_FavoritedByFriendsRankedByPublicationDate, - "text": qsTr("Favorited By Friends") - }, { - "value": SteamEnums.K_EUGCQuery_CreatedByFriendsRankedByPublicationDate, - "text": qsTr("Created By Friends") - }, { - "value": SteamEnums.K_EUGCQuery_CreatedByFollowedUsersRankedByPublicationDate, - "text": qsTr("Created By Followed Users") - }, { - "value": SteamEnums.K_EUGCQuery_NotYetRated, - "text": qsTr("Not Yet Rated") - }, { - "value": SteamEnums.K_EUGCQuery_RankedByTotalVotesAsc, - "text": qsTr("Total VotesAsc") - }, { - "value": SteamEnums.K_EUGCQuery_RankedByVotesUp, - "text": qsTr("Votes Up") - }, { - "value": SteamEnums.K_EUGCQuery_RankedByTotalUniqueSubscriptions, - "text": qsTr("Total Unique Subscriptions") - }] + onClicked: Qt.openUrlExternally( + "steam://url/SteamWorkshopPage/672870") + icon.source: "qrc:/assets/icons/icon_steam.svg" + icon.width: 18 + icon.height: 18 + } + Button { + text: qsTr("Open GameHub in Steam") + font.capitalization: Font.Capitalize + font.family: ScreenPlay.settings.font + onClicked: Qt.openUrlExternally( + "steam://url/GameHub/672870") + icon.source: "qrc:/assets/icons/icon_steam.svg" + icon.width: 18 + icon.height: 18 } } - boundsBehavior: Flickable.StopAtBounds - - delegate: WorkshopItem { - imgUrl: m_workshopPreview - name: m_workshopTitle - publishedFileID: m_publishedFileID - additionalPreviewUrl: m_additionalPreviewUrl - subscriptionCount: m_subscriptionCount - itemIndex: index - onClicked: { - sidebar.setWorkshopItem(publishedFileID, imgUrl, - additionalPreviewUrl, - subscriptionCount) + ComboBox { + id: cbQuerySort + width: 250 + height: searchWrapper.height + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 50 } - } - ScrollBar.vertical: ScrollBar { - id: workshopScrollBar - snapMode: ScrollBar.SnapOnRelease + textRole: "text" + valueRole: "value" + currentIndex: 2 + Layout.preferredHeight: searchWrapper.height + font.family: ScreenPlay.settings.font + onActivated: { + Workshop.steamWorkshop.workshopListModel.searchWorkshop( + cbQuerySort.currentValue, 1) + } + model: [{ + "value": SteamEnums.k_EUGCQuery_RankedByVote, + "text": qsTr("Ranked By Vote") + }, { + "value": SteamEnums.K_EUGCQuery_RankedByPublicationDate, + "text": qsTr("Publication Date") + }, { + "value": SteamEnums.K_EUGCQuery_RankedByTrend, + "text": qsTr("Ranked By Trend") + }, { + "value": SteamEnums.K_EUGCQuery_FavoritedByFriendsRankedByPublicationDate, + "text": qsTr("Favorited By Friends") + }, { + "value": SteamEnums.K_EUGCQuery_CreatedByFriendsRankedByPublicationDate, + "text": qsTr("Created By Friends") + }, { + "value": SteamEnums.K_EUGCQuery_CreatedByFollowedUsersRankedByPublicationDate, + "text": qsTr("Created By Followed Users") + }, { + "value": SteamEnums.K_EUGCQuery_NotYetRated, + "text": qsTr("Not Yet Rated") + }, { + "value": SteamEnums.K_EUGCQuery_RankedByTotalVotesAsc, + "text": qsTr("Total VotesAsc") + }, { + "value": SteamEnums.K_EUGCQuery_RankedByVotesUp, + "text": qsTr("Votes Up") + }, { + "value": SteamEnums.K_EUGCQuery_RankedByTotalUniqueSubscriptions, + "text": qsTr("Total Unique Subscriptions") + }] } } + + boundsBehavior: Flickable.StopAtBounds + + delegate: WorkshopItem { + imgUrl: m_workshopPreview + name: m_workshopTitle + publishedFileID: m_publishedFileID + additionalPreviewUrl: m_additionalPreviewUrl + subscriptionCount: m_subscriptionCount + itemIndex: index + onClicked: { + sidebar.setWorkshopItem(publishedFileID, imgUrl, + additionalPreviewUrl, + subscriptionCount) + } + } + + ScrollBar.vertical: ScrollBar { + id: workshopScrollBar + snapMode: ScrollBar.SnapOnRelease + } } } @@ -389,61 +382,6 @@ Item { id: sidebar topMargin: 60 } - - states: [ - State { - name: "base" - - ParentChange { - target: nav - parent: wrapper - } - - PropertyChanges { - target: nav - anchors.top: wrapper.top - anchors.topMargin: header.height - width: 800 - state: "base" - } - }, - State { - name: "scrolling" - ParentChange { - target: nav - parent: workshop - } - PropertyChanges { - target: nav - anchors.topMargin: 0 - anchors.top: workshop.top - width: wrapper.width - state: "scrolling" - } - } - ] - - transitions: [ - Transition { - from: "base" - to: "scrolling" - PropertyAnimation { - target: nav - properties: "width" - duration: 100 - } - }, - Transition { - from: "scrolling" - to: "base" - - PropertyAnimation { - target: nav - properties: "width,x,y" - duration: 300 - } - } - ] } /*##^## Designer {