mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-11-07 03:22:33 +01:00
Add new Workshop design and transitions
This commit is contained in:
kelteseth
parent
b6bedbb5bb
commit
f98df6572a
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 271 KiB |
@ -1,11 +1,10 @@
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
Item {
|
||||
id: workshop
|
||||
anchors.fill: parent
|
||||
|
||||
//property alias bannerImgProxy: bannerImg2
|
||||
signal openCreate
|
||||
|
||||
Component.onCompleted: {
|
||||
@ -44,7 +43,7 @@ Item {
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
header: Item {
|
||||
height: 530
|
||||
height: 440
|
||||
anchors {
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
@ -91,28 +90,33 @@ Item {
|
||||
Text {
|
||||
id: bannerTxt
|
||||
text: "loading"
|
||||
font.pixelSize: 36
|
||||
font.pixelSize: 42
|
||||
color: "white"
|
||||
width: 400
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: 100
|
||||
left: parent.left
|
||||
leftMargin: 30
|
||||
leftMargin: 50
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Download"
|
||||
text: qsTr("Download now!")
|
||||
Material.background: Material.Orange
|
||||
Material.foreground: "white"
|
||||
icon.source: "qrc:/assets/icons/icon_download.svg"
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
anchors {
|
||||
top: bannerTxt.bottom
|
||||
topMargin: 100
|
||||
topMargin: 50
|
||||
left: parent.left
|
||||
leftMargin: 30
|
||||
leftMargin: 50
|
||||
}
|
||||
z: 99
|
||||
onClicked: {
|
||||
|
||||
text = qsTr("Downloading...")
|
||||
steamWorkshop.subscribeItem(
|
||||
workshopListModel.getBannerID())
|
||||
}
|
||||
@ -121,29 +125,24 @@ Item {
|
||||
|
||||
Item {
|
||||
id: searchBar
|
||||
height: 100
|
||||
visible: false
|
||||
height: 50
|
||||
anchors {
|
||||
top: banner.bottom
|
||||
topMargin: 20
|
||||
right: parent.right
|
||||
rightMargin: 60
|
||||
left: parent.left
|
||||
margins: 30
|
||||
leftMargin: 20
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 60
|
||||
width: 400
|
||||
radius: 3
|
||||
Text {
|
||||
id: txtCategory
|
||||
text: qsTr("Trendig Today")
|
||||
color: "#818181"
|
||||
font.pointSize: 18
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
margins: 10
|
||||
}
|
||||
TextField {
|
||||
placeholderText: qsTr("Enter name")
|
||||
anchors.fill: parent
|
||||
anchors.margins: 5
|
||||
bottom: parent.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,14 +156,6 @@ Item {
|
||||
steamID: workshopID
|
||||
}
|
||||
|
||||
add: Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from: 0
|
||||
to: 1.0
|
||||
duration: 400
|
||||
}
|
||||
}
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
id: workshopScrollBar
|
||||
snapMode: ScrollBar.SnapOnRelease
|
||||
|
||||
@ -12,7 +12,7 @@ Item {
|
||||
|
||||
Rectangle {
|
||||
id: banner
|
||||
color: "#131313"
|
||||
color: "#44131313"
|
||||
height: 350
|
||||
anchors {
|
||||
top: parent.top
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import QtQuick 2.9
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import Qt.labs.platform 1.0
|
||||
|
||||
import "../Installed"
|
||||
|
||||
Item {
|
||||
id: workshopItem
|
||||
@ -19,73 +22,144 @@ Item {
|
||||
|
||||
RectangularGlow {
|
||||
id: effect
|
||||
anchors.fill: itemWrapper
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: 3
|
||||
}
|
||||
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
cached: true
|
||||
glowRadius: 2
|
||||
spread: 0.5
|
||||
glowRadius: 3
|
||||
spread: 0.2
|
||||
color: "black"
|
||||
opacity: .2
|
||||
cornerRadius: itemWrapper.radius + glowRadius
|
||||
opacity: 0.4
|
||||
cornerRadius: 15
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: itemWrapper
|
||||
color: "white"
|
||||
radius: 2
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 5
|
||||
}
|
||||
|
||||
|
||||
Item {
|
||||
id: screenPlayItemWrapper
|
||||
anchors.centerIn: parent
|
||||
height: 180
|
||||
width: 320
|
||||
|
||||
Image {
|
||||
id: img
|
||||
anchors.fill: parent
|
||||
id: mask
|
||||
source: "qrc:/assets/images/Window.svg"
|
||||
sourceSize: Qt.size(screenPlayItemWrapper.width,
|
||||
screenPlayItemWrapper.height)
|
||||
visible: false
|
||||
smooth: true
|
||||
asynchronous: true
|
||||
clip: true
|
||||
cache: true
|
||||
source: workshopItem.imgUrl
|
||||
smooth: false
|
||||
fillMode: Image.PreserveAspectFit
|
||||
antialiasing: true
|
||||
}
|
||||
Text {
|
||||
id: txtTitle
|
||||
text: workshopItem.name
|
||||
opacity: 0
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: -50
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "white"
|
||||
|
||||
Item {
|
||||
id: itemWrapper
|
||||
visible: false
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 5
|
||||
}
|
||||
|
||||
ScreenPlayItemImage {
|
||||
id: screenPlayItemImage
|
||||
anchors.fill: parent
|
||||
sourceImage: workshopItem.imgUrl
|
||||
}
|
||||
|
||||
LinearGradient {
|
||||
id: shadow
|
||||
height: 50
|
||||
opacity: 0
|
||||
|
||||
cached: true
|
||||
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
start: Qt.point(0, 50)
|
||||
end: Qt.point(0, 0)
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
color: "#CC000000"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: "#00000000"
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
id: txtTitle
|
||||
text: workshopItem.name
|
||||
renderType: Text.NativeRendering
|
||||
wrapMode: Text.WrapAnywhere
|
||||
opacity: 0
|
||||
height: 30
|
||||
width: 180
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: "white"
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
right: button.left
|
||||
rightMargin: 10
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
bottomMargin: -50
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: button
|
||||
text: qsTr("Subscribe")
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 20
|
||||
opacity: 0
|
||||
Material.background: Material.Orange
|
||||
Material.foreground: "white"
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: -50
|
||||
icon.source: "qrc:/assets/icons/icon_download.svg"
|
||||
icon.width: 12
|
||||
icon.height: 12
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
onContainsMouseChanged: {
|
||||
if(containsMouse){
|
||||
workshopItem.state = "hover"
|
||||
} else {
|
||||
workshopItem.state = ""
|
||||
|
||||
OpacityMask {
|
||||
anchors.fill: itemWrapper
|
||||
antialiasing: true
|
||||
source: itemWrapper
|
||||
maskSource: mask
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
|
||||
}
|
||||
onExited: {
|
||||
|
||||
}
|
||||
onContainsMouseChanged: {
|
||||
if (containsMouse) {
|
||||
workshopItem.state = "hover"
|
||||
} else {
|
||||
workshopItem.state = ""
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
button.icon.color = "orange"
|
||||
button.display = AbstractButton.IconOnly
|
||||
steamWorkshop.subscribeItem(workshopItem.steamID)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: button
|
||||
text: qsTr("Subscribe")
|
||||
opacity: 0
|
||||
Material.background: Material.Orange
|
||||
Material.foreground: "white"
|
||||
anchors.horizontalCenterOffset: 1
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: -50
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
onClicked: {
|
||||
button.enabled = false
|
||||
steamWorkshop.subscribeItem(workshopItem.steamID)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
states: [
|
||||
@ -101,7 +175,12 @@ Item {
|
||||
PropertyChanges {
|
||||
target: txtTitle
|
||||
opacity: 1
|
||||
anchors.bottomMargin: 70
|
||||
anchors.bottomMargin: 20
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: shadow
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -111,16 +190,21 @@ Item {
|
||||
to: "hover"
|
||||
reversible: true
|
||||
|
||||
PropertyAnimation{
|
||||
target:button
|
||||
PropertyAnimation {
|
||||
target: button
|
||||
duration: 200
|
||||
properties: "opacity, anchors.bottomMargin"
|
||||
}
|
||||
PropertyAnimation{
|
||||
target:txtTitle
|
||||
PropertyAnimation {
|
||||
target: txtTitle
|
||||
duration: 200
|
||||
properties: "opacity, anchors.bottomMargin"
|
||||
}
|
||||
PropertyAnimation {
|
||||
target: shadow
|
||||
duration: 200
|
||||
properties: "opacity"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
#include "workshopitem.h"
|
||||
|
||||
WorkshopItem::WorkshopItem(){
|
||||
|
||||
}
|
||||
WorkshopItem::WorkshopItem(unsigned int id, QString title, QUrl previewImageUrl)
|
||||
{
|
||||
m_id = id;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
class WorkshopItem {
|
||||
public:
|
||||
WorkshopItem();
|
||||
WorkshopItem(unsigned int id, QString title, QUrl previewImageUrl);
|
||||
~WorkshopItem();
|
||||
QUrl m_previewImageUrl;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user