mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-11-07 03:22:33 +01:00
Refactor workshop:
Remove background blur in default state Replace laggy navigation snapping with fixed
This commit is contained in:
Elias Steurer
parent
80b6abc81d
commit
be32f15548
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
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
|
||||
duration: 1000
|
||||
easing.type: Easing.InOutQuart
|
||||
property: "opacity"
|
||||
}
|
||||
@ -153,7 +151,7 @@ Rectangle {
|
||||
reversible: true
|
||||
PropertyAnimation {
|
||||
targets: [bgImage, bgColor]
|
||||
duration: 1000
|
||||
duration: 2000
|
||||
easing.type: Easing.InOutQuart
|
||||
property: "opacity"
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,31 +96,16 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
transitions: Transition {
|
||||
PropertyAnimation {
|
||||
properties: "y"
|
||||
easing.type: Easing.InOutQuad
|
||||
duration: 300
|
||||
}
|
||||
}
|
||||
|
||||
// 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()
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
snapMode: ScrollBar.SnapOnRelease
|
||||
}
|
||||
|
||||
Item {
|
||||
id: header
|
||||
height: 440
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: nav.height
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
@ -116,7 +113,6 @@ Item {
|
||||
Item {
|
||||
id: banner
|
||||
height: 350
|
||||
z: 5
|
||||
property var bannerPublishedFileID
|
||||
anchors {
|
||||
top: parent.top
|
||||
@ -130,9 +126,6 @@ Item {
|
||||
left: parent.left
|
||||
bottom: parent.bottom
|
||||
}
|
||||
height: {
|
||||
|
||||
}
|
||||
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
@ -188,8 +181,8 @@ Item {
|
||||
icon.source: "qrc:/assets/icons/icon_info.svg"
|
||||
visible: false
|
||||
onClicked: {
|
||||
sidebar.setWorkshopItem(
|
||||
publishedFileID, imgUrl,
|
||||
sidebar.setWorkshopItem(publishedFileID,
|
||||
imgUrl,
|
||||
additionalPreviewUrl,
|
||||
subscriptionCount)
|
||||
}
|
||||
@ -325,7 +318,8 @@ Item {
|
||||
Layout.preferredHeight: searchWrapper.height
|
||||
font.family: ScreenPlay.settings.font
|
||||
onActivated: {
|
||||
Workshop.steamWorkshop.workshopListModel.searchWorkshop( cbQuerySort.currentValue, 1)
|
||||
Workshop.steamWorkshop.workshopListModel.searchWorkshop(
|
||||
cbQuerySort.currentValue, 1)
|
||||
}
|
||||
model: [{
|
||||
"value": SteamEnums.k_EUGCQuery_RankedByVote,
|
||||
@ -383,67 +377,11 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Sidebar {
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user