Mirrors/ScreenPlay
Mirrors/ScreenPlay
1
0
Fork 0
mirror of https://gitlab.com/kelteseth/ScreenPlay.git synced 2024-11-07 03:22:33 +01:00
Code Issues Projects Releases Activity

Add nicer insert animation

Browse Source
This commit is contained in:
kelteseth 2017-11-15 15:24:34 +01:00
parent e2f3587bb6
commit 619cdf57f9
2 changed files with 130 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qml/Components/Installed.qml
View File

@ -55,6 +55,7 @@ CustomPage {
}
GridView {
id: gridView
boundsBehavior: Flickable.DragOverBounds
@ -74,9 +75,6 @@ CustomPage {
width: parent.width
}
model: installedListModel
delegate: ScreenPlayItem {
id: delegate
focus: true

221
qml/Components/ScreenPlayItem.qml
View File

@ -5,115 +5,152 @@ Item {
id: screenPlayItem
width: 320
height: 180
state: "invisible"
Component.onCompleted: screenPlayItem.state = "visible"
property string customTitle: "name here"
property url absoluteStoragePath
property string screenId: ""
signal itemClicked(var screenId)
Image {
id: mask
source: "qrc:/assets/images/Window.svg"
sourceSize: Qt.size(rectangle1.width, rectangle1.height)
visible: false
fillMode: Image.PreserveAspectFit
antialiasing: true
}
RectangularGlow {
id: effect
anchors.fill: itemWrapper
glowRadius: 2
spread: 0.5
color: "black"
opacity: .2
cornerRadius: itemWrapper.radius + glowRadius
}
Rectangle {
id: itemWrapper
color: "white"
radius: 2
anchors {
fill: parent
margins: 5
Item {
id:screenPlayItemWrapper
height: parent.height
width: parent.width
Image {
id: mask
source: "qrc:/assets/images/Window.svg"
sourceSize: Qt.size(rectangle1.width, rectangle1.height)
visible: false
fillMode: Image.PreserveAspectFit
antialiasing: true
}
RectangularGlow {
id: effect
anchors.fill: itemWrapper
cached: true
glowRadius: 2
spread: 0.5
color: "black"
opacity: .2
cornerRadius: itemWrapper.radius + glowRadius
}
Rectangle {
id: rectangle1
height: 121
color: "#8b8b8b"
visible: false
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
ScreenPlayItemImage {
id: screenPlayItemImage
sourceImage: Qt.resolvedUrl( "file:///" + screenPlayItem.absoluteStoragePath + "/" + screenPreview)
id: itemWrapper
color: "white"
radius: 2
anchors {
fill: parent
margins: 5
}
}
OpacityMask {
anchors.fill: rectangle1
antialiasing: true
source: rectangle1
maskSource: mask
}
MouseArea {
anchors.fill: parent
onClicked: {
itemClicked(screenId)
Rectangle {
id: rectangle1
height: 121
color: "#8b8b8b"
visible: false
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
ScreenPlayItemImage {
id: screenPlayItemImage
sourceImage: Qt.resolvedUrl( "file:///" + screenPlayItem.absoluteStoragePath + "/" + screenPreview)
}
}
}
Text {
id: text1
y: 136
height: 29
text: screenTitle
anchors.rightMargin: 108
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
anchors.top: rectangle1.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: 10
wrapMode: Text.WordWrap
color: "#2F2F2F"
font.pointSize: 9
renderType: Text.NativeRendering
font.family: font_Roboto_Regular.name
FontLoader {
id: font_Roboto_Regular
source: "qrc:/assets/fonts/Roboto-Regular.ttf"
OpacityMask {
anchors.fill: rectangle1
antialiasing: true
source: rectangle1
maskSource: mask
}
}
Item {
id: item1
x: 105
y: 127
width: 200
height: 38
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.right: parent.right
anchors.rightMargin: 5
MouseArea {
anchors.fill: parent
onClicked: {
itemClicked(screenId)
}
}
Text {
id: text1
y: 136
height: 29
text: screenTitle
anchors.rightMargin: 108
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
anchors.top: rectangle1.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: 10
wrapMode: Text.WordWrap
color: "#2F2F2F"
font.pointSize: 9
renderType: Text.NativeRendering
font.family: font_Roboto_Regular.name
FontLoader {
id: font_Roboto_Regular
source: "qrc:/assets/fonts/Roboto-Regular.ttf"
}
}
Item {
id: item1
x: 105
y: 127
width: 200
height: 38
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.right: parent.right
anchors.rightMargin: 5
}
}
}
states: [
State {
name: "invisible"
PropertyChanges {
target: screenPlayItemWrapper
y: -10
opacity: 0
}
},
State {
name: "visible"
}
]
transitions: [
Transition {
from: "invisible"
to: "visible"
PropertyAnimation{
target: screenPlayItemWrapper
properties: "y,opacity"
duration: 300 * (Math.random() * (1 - .5) + .5)
easing.type: Easing.InOutQuad
}
}
]
}