mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-11-07 03:22:33 +01:00
Add more consisten animation
This commit is contained in:
parent
c5f609d0d2
commit
82ede5bbbb
@ -236,7 +236,7 @@ Item {
|
|||||||
icon.width: 16
|
icon.width: 16
|
||||||
icon.height: 16
|
icon.height: 16
|
||||||
onClicked: Qt.openUrlExternally(
|
onClicked: Qt.openUrlExternally(
|
||||||
"https://qmlbook.github.io/index.html")
|
"https://aimber.gitlab.io/ScreenPlayDocs/")
|
||||||
}
|
}
|
||||||
Button {
|
Button {
|
||||||
text: qsTr("Forums")
|
text: qsTr("Forums")
|
||||||
@ -338,19 +338,28 @@ Item {
|
|||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
target: txtDescriptionBottom
|
target: txtDescriptionBottom
|
||||||
property: "opacity"
|
property: "opacity"
|
||||||
duration: 200
|
duration: 400
|
||||||
easing.type: Easing.OutQuart
|
easing.type: Easing.InOutQuart
|
||||||
}
|
}
|
||||||
|
SequentialAnimation {
|
||||||
|
|
||||||
PauseAnimation {
|
PauseAnimation {
|
||||||
duration: 200
|
duration: 300
|
||||||
|
}
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
target: spaceBar
|
||||||
|
property: "opacity"
|
||||||
|
duration: 250
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
target: footer
|
target: footer
|
||||||
property: "anchors.bottomMargin"
|
property: "anchors.bottomMargin"
|
||||||
duration: 300
|
duration: 400
|
||||||
easing.type: Easing.OutQuart
|
easing.type: Easing.InOutQuart
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -6,7 +6,9 @@ import QtQuick.Controls.Material 2.2
|
|||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: createWallpaper
|
id: createWallpaper
|
||||||
state: "in"
|
state: "out"
|
||||||
|
|
||||||
|
Component.onCompleted: createWallpaper.state = "in"
|
||||||
|
|
||||||
signal videoFileSelected(var videoFile)
|
signal videoFileSelected(var videoFile)
|
||||||
signal projectFileSelected(var projectFile)
|
signal projectFileSelected(var projectFile)
|
||||||
@ -28,29 +30,27 @@ Item {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: item1
|
id: wrapperImportVideo
|
||||||
width: parent.width
|
width: parent.width * .48
|
||||||
height: 250
|
height: 275
|
||||||
anchors.top: parent.top
|
anchors {
|
||||||
anchors.topMargin: 50
|
top: parent.top
|
||||||
|
topMargin: 50
|
||||||
|
left:parent.left
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: bg
|
id: importVideoBg
|
||||||
x: 0
|
|
||||||
y: 50
|
|
||||||
height: parent.height
|
|
||||||
width: parent.width
|
|
||||||
radius: 3
|
radius: 3
|
||||||
z: 10
|
z: 10
|
||||||
anchors {
|
anchors {
|
||||||
top: parent.top
|
fill: parent
|
||||||
topMargin: 0
|
margins: 10
|
||||||
left: parent.left
|
|
||||||
leftMargin: 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: imgUpload
|
id: imgUploadImportVideo
|
||||||
source: "qrc:/assets/icons/icon_movie.svg"
|
source: "qrc:/assets/icons/icon_movie.svg"
|
||||||
height: 120
|
height: 120
|
||||||
width: 120
|
width: 120
|
||||||
@ -62,8 +62,8 @@ Item {
|
|||||||
sourceSize: Qt.size(width, height)
|
sourceSize: Qt.size(width, height)
|
||||||
}
|
}
|
||||||
ColorOverlay {
|
ColorOverlay {
|
||||||
anchors.fill: imgUpload
|
anchors.fill: imgUploadImportVideo
|
||||||
source: imgUpload
|
source: imgUploadImportVideo
|
||||||
color: "#C6C6C6"
|
color: "#C6C6C6"
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -80,14 +80,14 @@ Item {
|
|||||||
icon.color: "white"
|
icon.color: "white"
|
||||||
icon.width: 16
|
icon.width: 16
|
||||||
icon.height: 16
|
icon.height: 16
|
||||||
onClicked: fileDialogOpenFile.open()
|
onClicked: fileDialogImportVideo.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
FileDialog {
|
FileDialog {
|
||||||
id: fileDialogOpenFile
|
id: fileDialogImportVideo
|
||||||
// nameFilters: ["Video files (*.mp4)"]
|
// nameFilters: ["Video files (*.mp4)"]
|
||||||
onAccepted: {
|
onAccepted: {
|
||||||
videoFileSelected(fileDialogOpenFile.currentFile)
|
videoFileSelected(fileDialogImportVideo.currentFile)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -95,56 +95,135 @@ Item {
|
|||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors {
|
anchors {
|
||||||
top: bg.top
|
top: importVideoBg.top
|
||||||
topMargin: 3
|
topMargin: 3
|
||||||
left: bg.left
|
left: importVideoBg.left
|
||||||
right: bg.right
|
right: importVideoBg.right
|
||||||
}
|
}
|
||||||
height: bg.height
|
height: importVideoBg.height
|
||||||
width: bg.width
|
width: importVideoBg.width
|
||||||
|
glowRadius: 3
|
||||||
|
spread: 0.2
|
||||||
|
color: "black"
|
||||||
|
opacity: 0
|
||||||
|
cornerRadius: 15
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Item {
|
||||||
|
id: wrapperConvertVideo
|
||||||
|
width: parent.width * .48
|
||||||
|
height: 275
|
||||||
|
anchors {
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 50
|
||||||
|
left:wrapperImportVideo.right
|
||||||
|
leftMargin: 20
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: convertVideoBg
|
||||||
|
radius: 3
|
||||||
|
z: 10
|
||||||
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 10
|
||||||
|
}
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: imgUploadImportVideo2
|
||||||
|
source: "qrc:/assets/icons/icon_movie.svg"
|
||||||
|
height: 120
|
||||||
|
width: 120
|
||||||
|
anchors {
|
||||||
|
horizontalCenter: parent.horizontalCenter
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 50
|
||||||
|
}
|
||||||
|
sourceSize: Qt.size(width, height)
|
||||||
|
}
|
||||||
|
ColorOverlay {
|
||||||
|
anchors.fill: imgUploadImportVideo2
|
||||||
|
source: imgUploadImportVideo2
|
||||||
|
color: "#C6C6C6"
|
||||||
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
text: qsTr("Select File")
|
||||||
|
anchors {
|
||||||
|
horizontalCenter: parent.horizontalCenter
|
||||||
|
bottom: parent.bottom
|
||||||
|
bottomMargin: 20
|
||||||
|
}
|
||||||
|
Material.background: Material.Orange
|
||||||
|
Material.foreground: "white"
|
||||||
|
icon.source: "qrc:/assets/icons/icon_upload.svg"
|
||||||
|
icon.color: "white"
|
||||||
|
icon.width: 16
|
||||||
|
icon.height: 16
|
||||||
|
onClicked: fileDialogImportVideo.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
FileDialog {
|
||||||
|
id: fileDialogImportVideo2
|
||||||
|
// nameFilters: ["Video files (*.mp4)"]
|
||||||
|
onAccepted: {
|
||||||
|
videoFileSelected(fileDialogImportVideo.currentFile)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RectangularGlow {
|
||||||
|
id: effect2
|
||||||
|
anchors {
|
||||||
|
top: convertVideoBg.top
|
||||||
|
topMargin: 3
|
||||||
|
left: convertVideoBg.left
|
||||||
|
right: convertVideoBg.right
|
||||||
|
}
|
||||||
|
height: convertVideoBg.height
|
||||||
|
width: convertVideoBg.width
|
||||||
glowRadius: 3
|
glowRadius: 3
|
||||||
spread: 0.2
|
spread: 0.2
|
||||||
color: "black"
|
color: "black"
|
||||||
opacity: 0
|
opacity: 0
|
||||||
visible: false
|
|
||||||
cornerRadius: 15
|
cornerRadius: 15
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: item2
|
id: wrapperUploadProject
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 80
|
height: 120
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: 0
|
anchors {
|
||||||
|
top: wrapperConvertVideo.bottom
|
||||||
|
left:parent.left
|
||||||
|
}
|
||||||
|
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect1
|
id: effect3
|
||||||
width: bg1.width
|
width: importVideoBg3.width
|
||||||
height: bg1.height
|
height: importVideoBg3.height
|
||||||
anchors {
|
anchors {
|
||||||
top: bg1.top
|
top: importVideoBg3.top
|
||||||
topMargin: 3
|
topMargin: 3
|
||||||
left: bg1.left
|
left: importVideoBg3.left
|
||||||
right: bg1.right
|
right: importVideoBg3.right
|
||||||
}
|
}
|
||||||
color: "#000000"
|
color: "#000000"
|
||||||
glowRadius: 3
|
glowRadius: 3
|
||||||
spread: 0.2
|
spread: 0.2
|
||||||
cornerRadius: 15
|
cornerRadius: 15
|
||||||
opacity: 0
|
opacity: 0
|
||||||
visible: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: bg1
|
id: importVideoBg3
|
||||||
width: parent.width
|
|
||||||
height: parent.height
|
|
||||||
radius: 3
|
radius: 3
|
||||||
anchors.top: parent.top
|
anchors {
|
||||||
anchors.left: parent.left
|
fill: parent
|
||||||
anchors.leftMargin: 0
|
margins: 10
|
||||||
anchors.topMargin: 0
|
}
|
||||||
z: 10
|
z: 10
|
||||||
Button {
|
Button {
|
||||||
text: qsTr("Upload Exsisting Project to Steam")
|
text: qsTr("Upload Exsisting Project to Steam")
|
||||||
@ -160,7 +239,7 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
FileDialog {
|
FileDialog {
|
||||||
id: fileDialogOpenProject
|
id: fileDialogOpenProject3
|
||||||
nameFilters: ["Project files (project.json)"]
|
nameFilters: ["Project files (project.json)"]
|
||||||
onAccepted: {
|
onAccepted: {
|
||||||
projectFileSelected(fileDialogOpenProject.currentFile)
|
projectFileSelected(fileDialogOpenProject.currentFile)
|
||||||
@ -168,74 +247,142 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
states: [
|
states: [
|
||||||
State {
|
State {
|
||||||
name: "out"
|
name: "out"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: bg
|
target: wrapperUploadProject
|
||||||
opacity: 0
|
opacity: 0
|
||||||
anchors.leftMargin: 300
|
anchors.leftMargin: 300
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: effect
|
target: wrapperConvertVideo
|
||||||
|
anchors.leftMargin: 800
|
||||||
opacity: 0
|
opacity: 0
|
||||||
visible: false
|
|
||||||
color: "transparent"
|
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: effect1
|
target: wrapperImportVideo
|
||||||
|
anchors.leftMargin: 800
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect3
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect2
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect
|
||||||
opacity: 0
|
opacity: 0
|
||||||
visible: false
|
|
||||||
color: "transparent"
|
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtHeadline
|
target: txtHeadline
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
anchors.topMargin: -100
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: bg1
|
|
||||||
anchors.leftMargin: 800
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
State {
|
State {
|
||||||
name: "in"
|
name: "in"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: bg
|
target: wrapperUploadProject
|
||||||
opacity: 1
|
opacity: 1
|
||||||
anchors.leftMargin: 0
|
anchors.leftMargin: 0
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: effect
|
target: wrapperConvertVideo
|
||||||
opacity: .3
|
anchors.leftMargin: 20
|
||||||
color: "black"
|
opacity: 1
|
||||||
visible: true
|
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: effect1
|
target: wrapperImportVideo
|
||||||
opacity: .3
|
anchors.leftMargin: 0
|
||||||
color: "black"
|
opacity: 1
|
||||||
visible: true
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect
|
||||||
|
opacity: .4
|
||||||
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect2
|
||||||
|
opacity: .4
|
||||||
|
}
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect3
|
||||||
|
opacity: .4
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtHeadline
|
target: txtHeadline
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
anchors.topMargin: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
transitions: [
|
transitions: [
|
||||||
Transition {
|
Transition {
|
||||||
from: "in"
|
from: "out"
|
||||||
to: "out"
|
to: "in"
|
||||||
reversible: true
|
reversible: true
|
||||||
SequentialAnimation {
|
|
||||||
|
ParallelAnimation {
|
||||||
PropertyAnimation {
|
PropertyAnimation {
|
||||||
targets: [bg, bg1]
|
targets: [wrapperImportVideo, wrapperConvertVideo, wrapperUploadProject]
|
||||||
duration: 300
|
duration: 500
|
||||||
properties: "opacity, anchors.leftMargin"
|
properties: "opacity, anchors.leftMargin"
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
}
|
}
|
||||||
|
SequentialAnimation {
|
||||||
|
|
||||||
|
PauseAnimation {
|
||||||
|
duration: 200
|
||||||
|
}
|
||||||
|
PropertyAnimation {
|
||||||
|
targets: [effect, effect2, effect3]
|
||||||
|
duration: 500
|
||||||
|
property: "opacity"
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
PropertyAnimation {
|
||||||
|
targets: [txtHeadline]
|
||||||
|
duration: 400
|
||||||
|
properties: "opacity, anchors.topMargin"
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*##^## Designer {
|
||||||
|
D{i:0;autoSize:true;height:480;width:640}
|
||||||
|
}
|
||||||
|
##^##*/
|
||||||
|
@ -28,19 +28,21 @@ Item {
|
|||||||
text: qsTr("Create Emtpy Widget")
|
text: qsTr("Create Emtpy Widget")
|
||||||
anchors.top: txtCreate.bottom
|
anchors.top: txtCreate.bottom
|
||||||
anchors.topMargin: 10
|
anchors.topMargin: 10
|
||||||
|
animOffset: 50
|
||||||
imgSource: "qrc:/assets/icons/icon_emptyWidget.svg"
|
imgSource: "qrc:/assets/icons/icon_emptyWidget.svg"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
|
|
||||||
buttonPressed("empty", btnCreateEmptyWidget.text , btnCreateEmptyWidget.imgSource)
|
buttonPressed("empty", btnCreateEmptyWidget.text,
|
||||||
|
btnCreateEmptyWidget.imgSource)
|
||||||
//folderDialog.open()
|
//folderDialog.open()
|
||||||
}
|
}
|
||||||
FolderDialog {
|
FolderDialog {
|
||||||
id: folderDialog
|
id: folderDialog
|
||||||
onAccepted: {
|
onAccepted: {
|
||||||
screenPlayCreate.copyProject("/examples/scenes/empty", folderDialog.currentFolder)
|
screenPlayCreate.copyProject("/examples/scenes/empty",
|
||||||
|
folderDialog.currentFolder)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
@ -61,27 +63,28 @@ Item {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: 5
|
spacing: 5
|
||||||
anchors {
|
anchors {
|
||||||
top: txtExamples.bottom
|
top: parent.top
|
||||||
topMargin: 10
|
topMargin: 200
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
}
|
}
|
||||||
CreateWidgetButton {
|
CreateWidgetButton {
|
||||||
id: btnEmpty1
|
id: btnEmpty1
|
||||||
text: qsTr("Simple clock widget")
|
text: qsTr("Simple clock widget")
|
||||||
buttonActive: true
|
buttonActive: true
|
||||||
|
animOffset: 150
|
||||||
imgSource: "qrc:/assets/icons/icon_time.svg"
|
imgSource: "qrc:/assets/icons/icon_time.svg"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
buttonPressed("clock", btnEmpty1.text, btnEmpty1.imgSource)
|
buttonPressed("clock", btnEmpty1.text, btnEmpty1.imgSource)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CreateWidgetButton {
|
CreateWidgetButton {
|
||||||
id: btnEmpty2
|
id: btnEmpty2
|
||||||
text: qsTr("Musik scene wallpaper visualizer")
|
text: qsTr("Musik scene wallpaper visualizer")
|
||||||
buttonActive: true
|
buttonActive: true
|
||||||
|
animOffset: 200
|
||||||
imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
buttonPressed("music",btnEmpty2.text, btnEmpty2.imgSource)
|
buttonPressed("music", btnEmpty2.text, btnEmpty2.imgSource)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CreateWidgetButton {
|
CreateWidgetButton {
|
||||||
@ -89,9 +92,9 @@ Item {
|
|||||||
text: qsTr("Changing scene wallpaper via unsplash.com")
|
text: qsTr("Changing scene wallpaper via unsplash.com")
|
||||||
imgSource: "qrc:/assets/icons/icon_scene.svg"
|
imgSource: "qrc:/assets/icons/icon_scene.svg"
|
||||||
buttonActive: true
|
buttonActive: true
|
||||||
|
animOffset: 250
|
||||||
onClicked: {
|
onClicked: {
|
||||||
buttonPressed("slideshow",btnEmpty3.text, btnEmpty3.imgSource)
|
buttonPressed("slideshow", btnEmpty3.text, btnEmpty3.imgSource)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -99,74 +102,31 @@ Item {
|
|||||||
State {
|
State {
|
||||||
name: "out"
|
name: "out"
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty3
|
|
||||||
opacity: 0
|
|
||||||
buttonActive: false
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty2
|
|
||||||
opacity: 0
|
|
||||||
buttonActive: false
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty1
|
|
||||||
opacity: 0
|
|
||||||
buttonActive: false
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnCreateEmptyWidget
|
|
||||||
opacity: 0
|
|
||||||
buttonActive: false
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtExamples
|
target: txtExamples
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
anchors.topMargin: -50
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtCreate
|
target: txtCreate
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
anchors.topMargin: -50
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
State {
|
State {
|
||||||
name: "in"
|
name: "in"
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty3
|
|
||||||
opacity: 1
|
|
||||||
buttonActive: true
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty2
|
|
||||||
opacity: 1
|
|
||||||
buttonActive: true
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnEmpty1
|
|
||||||
opacity: 1
|
|
||||||
buttonActive: true
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
target: btnCreateEmptyWidget
|
|
||||||
opacity: 1
|
|
||||||
buttonActive: true
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtExamples
|
target: txtExamples
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
anchors.topMargin: 30
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: txtCreate
|
target: txtCreate
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
anchors.topMargin: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -176,45 +136,25 @@ Item {
|
|||||||
to: "in"
|
to: "in"
|
||||||
reversible: true
|
reversible: true
|
||||||
|
|
||||||
SequentialAnimation {
|
ParallelAnimation {
|
||||||
PropertyAnimation {
|
PropertyAnimation {
|
||||||
target: txtCreate
|
target: txtCreate
|
||||||
property: "opacity"
|
properties: "opacity,anchors.topMargin"
|
||||||
duration: 80
|
duration: 400
|
||||||
easing.type: Easing.InOutCubic
|
easing.type: Easing.InOutQuart
|
||||||
}
|
|
||||||
PropertyAnimation {
|
|
||||||
target: btnCreateEmptyWidget
|
|
||||||
property: "opacity"
|
|
||||||
duration: 80
|
|
||||||
easing.type: Easing.InOutCubic
|
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyAnimation {
|
SequentialAnimation {
|
||||||
target: txtExamples
|
|
||||||
property: "opacity"
|
|
||||||
duration: 80
|
|
||||||
easing.type: Easing.InOutCubic
|
|
||||||
}
|
|
||||||
PropertyAnimation {
|
|
||||||
target: btnEmpty1
|
|
||||||
property: "opacity"
|
|
||||||
duration: 80
|
|
||||||
easing.type: Easing.InOutCubic
|
|
||||||
}
|
|
||||||
|
|
||||||
PropertyAnimation {
|
PauseAnimation {
|
||||||
target: btnEmpty2
|
duration: 50
|
||||||
property: "opacity"
|
}
|
||||||
duration: 80
|
PropertyAnimation {
|
||||||
easing.type: Easing.InOutCubic
|
target: txtExamples
|
||||||
}
|
properties: "opacity,anchors.topMargin"
|
||||||
|
duration: 400
|
||||||
PropertyAnimation {
|
easing.type: Easing.InOutQuart
|
||||||
target: btnEmpty3
|
}
|
||||||
property: "opacity"
|
|
||||||
duration: 80
|
|
||||||
easing.type: Easing.InOutCubic
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -223,6 +163,7 @@ Item {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*##^## Designer {
|
/*##^## Designer {
|
||||||
D{i:0;autoSize:true;height:480;width:640}
|
D{i:0;autoSize:true;height:480;width:640}
|
||||||
}
|
}
|
||||||
|
@ -4,17 +4,20 @@ import QtGraphicalEffects 1.0
|
|||||||
Item {
|
Item {
|
||||||
id: btnEmpty
|
id: btnEmpty
|
||||||
height: 75
|
height: 75
|
||||||
|
state: "out"
|
||||||
anchors {
|
anchors {
|
||||||
right: parent.right
|
right: parent.right
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component.onCompleted: btnEmpty.state = "in"
|
||||||
|
property int animOffset: 0
|
||||||
|
|
||||||
property string text
|
property string text
|
||||||
signal clicked
|
signal clicked
|
||||||
property bool buttonActive: true
|
property bool buttonActive: true
|
||||||
property string imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
property string imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
||||||
|
|
||||||
|
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors {
|
anchors {
|
||||||
@ -28,27 +31,26 @@ Item {
|
|||||||
glowRadius: 3
|
glowRadius: 3
|
||||||
spread: 0.2
|
spread: 0.2
|
||||||
color: "black"
|
color: "black"
|
||||||
opacity: .4
|
opacity: 0
|
||||||
cornerRadius: 15
|
cornerRadius: 15
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id:bg
|
id: bg
|
||||||
width: parent.width
|
height: parent.height - 10
|
||||||
anchors {
|
anchors {
|
||||||
top:parent.top
|
top: parent.top
|
||||||
right:parent.right
|
right: parent.right
|
||||||
bottom:parent.bottom
|
left: parent.left
|
||||||
left:parent.left
|
|
||||||
margins: 10
|
margins: 10
|
||||||
}
|
}
|
||||||
|
|
||||||
radius: 3
|
radius: 3
|
||||||
Image {
|
Image {
|
||||||
id:imgIcon
|
id: imgIcon
|
||||||
width: 30
|
width: 30
|
||||||
height: 30
|
height: 30
|
||||||
sourceSize: Qt.size(30,30)
|
sourceSize: Qt.size(30, 30)
|
||||||
source: imgSource
|
source: imgSource
|
||||||
anchors {
|
anchors {
|
||||||
left: parent.left
|
left: parent.left
|
||||||
@ -56,7 +58,7 @@ Item {
|
|||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ColorOverlay{
|
ColorOverlay {
|
||||||
color: "gray"
|
color: "gray"
|
||||||
source: imgIcon
|
source: imgIcon
|
||||||
anchors.fill: imgIcon
|
anchors.fill: imgIcon
|
||||||
@ -98,4 +100,77 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
states: [
|
||||||
|
State {
|
||||||
|
name: "out"
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: bg
|
||||||
|
anchors.topMargin: -30
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
name: "in"
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: bg
|
||||||
|
anchors.topMargin: 10
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: effect
|
||||||
|
opacity: .4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
transitions: [
|
||||||
|
Transition {
|
||||||
|
from: "out"
|
||||||
|
to: "in"
|
||||||
|
reversible: true
|
||||||
|
|
||||||
|
SequentialAnimation {
|
||||||
|
PauseAnimation {
|
||||||
|
duration: btnEmpty.animOffset
|
||||||
|
}
|
||||||
|
ParallelAnimation {
|
||||||
|
ParallelAnimation {
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
target: bg
|
||||||
|
property: "opacity"
|
||||||
|
duration: 400
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
|
}
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
target: bg
|
||||||
|
property: "anchors.topMargin"
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
|
duration: 400
|
||||||
|
}
|
||||||
|
}
|
||||||
|
SequentialAnimation {
|
||||||
|
PauseAnimation {
|
||||||
|
duration: 200
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: effect
|
||||||
|
property: "opacity"
|
||||||
|
duration: 400
|
||||||
|
easing.type: Easing.InOutQuart
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
@ -73,11 +73,12 @@ Item {
|
|||||||
anchors {
|
anchors {
|
||||||
horizontalCenter: parent.horizontalCenter
|
horizontalCenter: parent.horizontalCenter
|
||||||
top: parent.top
|
top: parent.top
|
||||||
|
topMargin: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
width: 910
|
width: 910
|
||||||
radius: 4
|
radius: 4
|
||||||
height: 560
|
height: 460
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: wrapperContent
|
id: wrapperContent
|
||||||
@ -120,7 +121,7 @@ Item {
|
|||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
|
|
||||||
color: "gray"
|
color: Material.color(Material.Grey)
|
||||||
|
|
||||||
AnimatedImage {
|
AnimatedImage {
|
||||||
id: imgPreview
|
id: imgPreview
|
||||||
@ -198,8 +199,6 @@ Item {
|
|||||||
if (state === Create.State.Finished) {
|
if (state === Create.State.Finished) {
|
||||||
imgSuccess.source = "file:///"
|
imgSuccess.source = "file:///"
|
||||||
+ screenPlayCreate.workingDir + "/preview.gif"
|
+ screenPlayCreate.workingDir + "/preview.gif"
|
||||||
imgPreview.visible = true
|
|
||||||
imgPreview.playing = true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onProgressChanged: {
|
onProgressChanged: {
|
||||||
@ -210,6 +209,58 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
RowLayout {
|
||||||
|
id: row
|
||||||
|
height: 50
|
||||||
|
anchors {
|
||||||
|
top: imgWrapper.bottom
|
||||||
|
topMargin: 20
|
||||||
|
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: 30
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
height: 50
|
||||||
|
color: "#eeeeee"
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
Text {
|
||||||
|
id: txtCustomPreviewPath
|
||||||
|
color: "#333333"
|
||||||
|
text: qsTr("Add custom preview image")
|
||||||
|
anchors {
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
id: button
|
||||||
|
Material.background: Material.Orange
|
||||||
|
Material.foreground: "white"
|
||||||
|
text: qsTr("Choose Image")
|
||||||
|
anchors {
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: 10
|
||||||
|
}
|
||||||
|
onClicked: fileDialogOpenFile.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
FileDialog {
|
||||||
|
id: fileDialogOpenFile
|
||||||
|
nameFilters: ["*.png *.jpg"]
|
||||||
|
onAccepted: {
|
||||||
|
var file = fileDialogOpenFile.file.toString()
|
||||||
|
|
||||||
|
txtCustomPreviewPath.text = fileDialogOpenFile.file
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Item {
|
Item {
|
||||||
id: wrapperRight
|
id: wrapperRight
|
||||||
@ -221,18 +272,25 @@ Item {
|
|||||||
right: parent.right
|
right: parent.right
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
ColumnLayout {
|
||||||
id: column
|
id: column
|
||||||
spacing: 20
|
spacing: 0
|
||||||
anchors.fill: parent
|
anchors {
|
||||||
anchors.margins: 30
|
|
||||||
anchors.topMargin: 0
|
right: parent.right
|
||||||
|
left: parent.left
|
||||||
|
margins: 30
|
||||||
|
top:parent.top
|
||||||
|
topMargin: 0
|
||||||
|
bottom: column1.top
|
||||||
|
bottomMargin: 50
|
||||||
|
}
|
||||||
|
|
||||||
TextField {
|
TextField {
|
||||||
id: textField
|
id: textField
|
||||||
placeholderText: qsTr("Name")
|
placeholderText: qsTr("Name")
|
||||||
anchors.right: parent.right
|
width:parent.width
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
onTextChanged: {
|
onTextChanged: {
|
||||||
if (textField.text.length >= 3) {
|
if (textField.text.length >= 3) {
|
||||||
canNext = true
|
canNext = true
|
||||||
@ -245,28 +303,28 @@ Item {
|
|||||||
TextField {
|
TextField {
|
||||||
id: textField1
|
id: textField1
|
||||||
placeholderText: qsTr("Description")
|
placeholderText: qsTr("Description")
|
||||||
anchors.right: parent.right
|
width:parent.width
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
|
|
||||||
TextField {
|
TextField {
|
||||||
id: textField2
|
id: textField2
|
||||||
placeholderText: qsTr("Youtube URL")
|
placeholderText: qsTr("Youtube URL")
|
||||||
anchors.right: parent.right
|
width:parent.width
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
|
|
||||||
TextField {
|
TextField {
|
||||||
id: textField3
|
id: textField3
|
||||||
|
width:parent.width
|
||||||
placeholderText: qsTr("Tags")
|
placeholderText: qsTr("Tags")
|
||||||
anchors.right: parent.right
|
Layout.fillWidth: true
|
||||||
anchors.left: parent.left
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Row {
|
Row {
|
||||||
id: column1
|
id: column1
|
||||||
height: 100
|
height: 80
|
||||||
width: childrenRect.width
|
width: childrenRect.width
|
||||||
spacing: 10
|
spacing: 10
|
||||||
anchors {
|
anchors {
|
||||||
@ -310,133 +368,14 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
CreateWallpaperError {
|
||||||
id: wrapperError
|
id: wrapperError
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
Text {
|
|
||||||
id: txtErrorHeadline
|
|
||||||
text: qsTr("An error occurred!")
|
|
||||||
anchors {
|
|
||||||
top: parent.top
|
|
||||||
topMargin: 30
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
height: 40
|
|
||||||
font.family: "Segoe UI, Roboto"
|
|
||||||
font.weight: Font.Light
|
|
||||||
color: Material.color(Material.Red)
|
|
||||||
renderType: Text.NativeRendering
|
|
||||||
font.pixelSize: 32
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: rectangle1
|
|
||||||
color: "#eeeeee"
|
|
||||||
radius: 3
|
|
||||||
anchors {
|
|
||||||
top: txtErrorHeadline.bottom
|
|
||||||
right: parent.right
|
|
||||||
bottom: btnBack.top
|
|
||||||
left: parent.left
|
|
||||||
margins: 30
|
|
||||||
bottomMargin: 10
|
|
||||||
}
|
|
||||||
|
|
||||||
Flickable {
|
|
||||||
anchors.fill: parent
|
|
||||||
clip: true
|
|
||||||
contentHeight: txtFFMPEGDebug.paintedHeight
|
|
||||||
ScrollBar.vertical: ScrollBar {
|
|
||||||
snapMode: ScrollBar.SnapOnRelease
|
|
||||||
policy: ScrollBar.AlwaysOn
|
|
||||||
}
|
|
||||||
Text {
|
|
||||||
id: txtFFMPEGDebug
|
|
||||||
anchors {
|
|
||||||
top: parent.top
|
|
||||||
right: parent.right
|
|
||||||
left: parent.left
|
|
||||||
margins: 20
|
|
||||||
}
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
color: "#626262"
|
|
||||||
renderType: Text.NativeRendering
|
|
||||||
height: txtFFMPEGDebug.paintedHeight
|
|
||||||
}
|
|
||||||
Connections {
|
|
||||||
target: screenPlayCreate
|
|
||||||
onProcessOutput: {
|
|
||||||
txtFFMPEGDebug.text = text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Button {
|
|
||||||
id: btnBack
|
|
||||||
text: qsTr("Back to create and send an error report!")
|
|
||||||
Material.background: Material.Orange
|
|
||||||
Material.foreground: "white"
|
|
||||||
anchors {
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: 10
|
|
||||||
}
|
|
||||||
onClicked: {
|
|
||||||
utility.setNavigationActive(true)
|
|
||||||
utility.setNavigation("Create")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
CreateWallpaperSuccess {
|
||||||
id: wrapperSuccess
|
id: wrapperSuccess
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
Text {
|
|
||||||
id: txtSuccessHeadline
|
|
||||||
text: qsTr("Video creation success!")
|
|
||||||
anchors {
|
|
||||||
top: parent.top
|
|
||||||
topMargin: 30
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
height: 40
|
|
||||||
font.family: "Segoe UI, Roboto"
|
|
||||||
font.weight: Font.Light
|
|
||||||
color: Material.color(Material.Green)
|
|
||||||
renderType: Text.NativeRendering
|
|
||||||
font.pixelSize: 32
|
|
||||||
}
|
|
||||||
|
|
||||||
AnimatedImage {
|
|
||||||
id: imgSuccess
|
|
||||||
asynchronous: true
|
|
||||||
playing: true
|
|
||||||
visible: false
|
|
||||||
anchors.centerIn: parent
|
|
||||||
width: 800
|
|
||||||
height: 600
|
|
||||||
}
|
|
||||||
|
|
||||||
Button {
|
|
||||||
id: btnSuccessBack
|
|
||||||
text: qsTr("Back to create!")
|
|
||||||
Material.background: Material.Orange
|
|
||||||
Material.foreground: "white"
|
|
||||||
anchors {
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: 10
|
|
||||||
}
|
|
||||||
onClicked: {
|
|
||||||
utility.setNavigationActive(true)
|
|
||||||
utility.setNavigation("Create")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
@ -500,7 +439,7 @@ Item {
|
|||||||
name: "in"
|
name: "in"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: wrapper
|
target: wrapper
|
||||||
anchors.topMargin: 40
|
anchors.topMargin: 100
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
@ -516,7 +455,7 @@ Item {
|
|||||||
name: "error"
|
name: "error"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: wrapper
|
target: wrapper
|
||||||
anchors.topMargin: 40
|
anchors.topMargin: 100
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
@ -537,7 +476,7 @@ Item {
|
|||||||
name: "success"
|
name: "success"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: wrapper
|
target: wrapper
|
||||||
anchors.topMargin: 40
|
anchors.topMargin: 100
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}
|
}
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
@ -669,3 +608,19 @@ Item {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*##^## Designer {
|
||||||
|
D{i:0;autoSize:true;height:480;width:640}
|
||||||
|
}
|
||||||
|
##^##*/
|
||||||
|
Loading…
Reference in New Issue
Block a user