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:
Elias
parent
c5f609d0d2
commit
82ede5bbbb
@ -236,7 +236,7 @@ Item {
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
onClicked: Qt.openUrlExternally(
|
||||
"https://qmlbook.github.io/index.html")
|
||||
"https://aimber.gitlab.io/ScreenPlayDocs/")
|
||||
}
|
||||
Button {
|
||||
text: qsTr("Forums")
|
||||
@ -338,19 +338,28 @@ Item {
|
||||
NumberAnimation {
|
||||
target: txtDescriptionBottom
|
||||
property: "opacity"
|
||||
duration: 200
|
||||
easing.type: Easing.OutQuart
|
||||
duration: 400
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
SequentialAnimation {
|
||||
|
||||
PauseAnimation {
|
||||
duration: 200
|
||||
duration: 300
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
target: spaceBar
|
||||
property: "opacity"
|
||||
duration: 250
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
target: footer
|
||||
property: "anchors.bottomMargin"
|
||||
duration: 300
|
||||
easing.type: Easing.OutQuart
|
||||
duration: 400
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -6,7 +6,9 @@ import QtQuick.Controls.Material 2.2
|
||||
|
||||
Item {
|
||||
id: createWallpaper
|
||||
state: "in"
|
||||
state: "out"
|
||||
|
||||
Component.onCompleted: createWallpaper.state = "in"
|
||||
|
||||
signal videoFileSelected(var videoFile)
|
||||
signal projectFileSelected(var projectFile)
|
||||
@ -28,29 +30,27 @@ Item {
|
||||
}
|
||||
|
||||
Item {
|
||||
id: item1
|
||||
width: parent.width
|
||||
height: 250
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 50
|
||||
id: wrapperImportVideo
|
||||
width: parent.width * .48
|
||||
height: 275
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: 50
|
||||
left:parent.left
|
||||
}
|
||||
|
||||
|
||||
Rectangle {
|
||||
id: bg
|
||||
x: 0
|
||||
y: 50
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
id: importVideoBg
|
||||
radius: 3
|
||||
z: 10
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: 0
|
||||
left: parent.left
|
||||
leftMargin: 0
|
||||
fill: parent
|
||||
margins: 10
|
||||
}
|
||||
|
||||
Image {
|
||||
id: imgUpload
|
||||
id: imgUploadImportVideo
|
||||
source: "qrc:/assets/icons/icon_movie.svg"
|
||||
height: 120
|
||||
width: 120
|
||||
@ -62,8 +62,8 @@ Item {
|
||||
sourceSize: Qt.size(width, height)
|
||||
}
|
||||
ColorOverlay {
|
||||
anchors.fill: imgUpload
|
||||
source: imgUpload
|
||||
anchors.fill: imgUploadImportVideo
|
||||
source: imgUploadImportVideo
|
||||
color: "#C6C6C6"
|
||||
}
|
||||
|
||||
@ -80,14 +80,14 @@ Item {
|
||||
icon.color: "white"
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
onClicked: fileDialogOpenFile.open()
|
||||
onClicked: fileDialogImportVideo.open()
|
||||
}
|
||||
|
||||
FileDialog {
|
||||
id: fileDialogOpenFile
|
||||
id: fileDialogImportVideo
|
||||
// nameFilters: ["Video files (*.mp4)"]
|
||||
onAccepted: {
|
||||
videoFileSelected(fileDialogOpenFile.currentFile)
|
||||
videoFileSelected(fileDialogImportVideo.currentFile)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -95,56 +95,135 @@ Item {
|
||||
RectangularGlow {
|
||||
id: effect
|
||||
anchors {
|
||||
top: bg.top
|
||||
top: importVideoBg.top
|
||||
topMargin: 3
|
||||
left: bg.left
|
||||
right: bg.right
|
||||
left: importVideoBg.left
|
||||
right: importVideoBg.right
|
||||
}
|
||||
height: bg.height
|
||||
width: bg.width
|
||||
height: importVideoBg.height
|
||||
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
|
||||
spread: 0.2
|
||||
color: "black"
|
||||
opacity: 0
|
||||
visible: false
|
||||
cornerRadius: 15
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: item2
|
||||
id: wrapperUploadProject
|
||||
width: parent.width
|
||||
height: 80
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 0
|
||||
height: 120
|
||||
|
||||
anchors {
|
||||
top: wrapperConvertVideo.bottom
|
||||
left:parent.left
|
||||
}
|
||||
|
||||
RectangularGlow {
|
||||
id: effect1
|
||||
width: bg1.width
|
||||
height: bg1.height
|
||||
id: effect3
|
||||
width: importVideoBg3.width
|
||||
height: importVideoBg3.height
|
||||
anchors {
|
||||
top: bg1.top
|
||||
top: importVideoBg3.top
|
||||
topMargin: 3
|
||||
left: bg1.left
|
||||
right: bg1.right
|
||||
left: importVideoBg3.left
|
||||
right: importVideoBg3.right
|
||||
}
|
||||
color: "#000000"
|
||||
glowRadius: 3
|
||||
spread: 0.2
|
||||
cornerRadius: 15
|
||||
opacity: 0
|
||||
visible: false
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bg1
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
id: importVideoBg3
|
||||
radius: 3
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.topMargin: 0
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 10
|
||||
}
|
||||
z: 10
|
||||
Button {
|
||||
text: qsTr("Upload Exsisting Project to Steam")
|
||||
@ -160,7 +239,7 @@ Item {
|
||||
}
|
||||
}
|
||||
FileDialog {
|
||||
id: fileDialogOpenProject
|
||||
id: fileDialogOpenProject3
|
||||
nameFilters: ["Project files (project.json)"]
|
||||
onAccepted: {
|
||||
projectFileSelected(fileDialogOpenProject.currentFile)
|
||||
@ -168,74 +247,142 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "out"
|
||||
PropertyChanges {
|
||||
target: bg
|
||||
target: wrapperUploadProject
|
||||
opacity: 0
|
||||
anchors.leftMargin: 300
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect
|
||||
target: wrapperConvertVideo
|
||||
anchors.leftMargin: 800
|
||||
opacity: 0
|
||||
visible: false
|
||||
color: "transparent"
|
||||
}
|
||||
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
|
||||
visible: false
|
||||
color: "transparent"
|
||||
}
|
||||
PropertyChanges {
|
||||
target: txtHeadline
|
||||
opacity: 0
|
||||
anchors.topMargin: -100
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: bg1
|
||||
anchors.leftMargin: 800
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "in"
|
||||
PropertyChanges {
|
||||
target: bg
|
||||
target: wrapperUploadProject
|
||||
opacity: 1
|
||||
anchors.leftMargin: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect
|
||||
opacity: .3
|
||||
color: "black"
|
||||
visible: true
|
||||
target: wrapperConvertVideo
|
||||
anchors.leftMargin: 20
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect1
|
||||
opacity: .3
|
||||
color: "black"
|
||||
visible: true
|
||||
target: wrapperImportVideo
|
||||
anchors.leftMargin: 0
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect
|
||||
opacity: .4
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect2
|
||||
opacity: .4
|
||||
}
|
||||
PropertyChanges {
|
||||
target: effect3
|
||||
opacity: .4
|
||||
}
|
||||
PropertyChanges {
|
||||
target: txtHeadline
|
||||
opacity: 1
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "in"
|
||||
to: "out"
|
||||
from: "out"
|
||||
to: "in"
|
||||
reversible: true
|
||||
SequentialAnimation {
|
||||
|
||||
ParallelAnimation {
|
||||
PropertyAnimation {
|
||||
targets: [bg, bg1]
|
||||
duration: 300
|
||||
targets: [wrapperImportVideo, wrapperConvertVideo, wrapperUploadProject]
|
||||
duration: 500
|
||||
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")
|
||||
anchors.top: txtCreate.bottom
|
||||
anchors.topMargin: 10
|
||||
animOffset: 50
|
||||
imgSource: "qrc:/assets/icons/icon_emptyWidget.svg"
|
||||
onClicked: {
|
||||
|
||||
buttonPressed("empty", btnCreateEmptyWidget.text , btnCreateEmptyWidget.imgSource)
|
||||
buttonPressed("empty", btnCreateEmptyWidget.text,
|
||||
btnCreateEmptyWidget.imgSource)
|
||||
//folderDialog.open()
|
||||
}
|
||||
FolderDialog {
|
||||
id: folderDialog
|
||||
onAccepted: {
|
||||
screenPlayCreate.copyProject("/examples/scenes/empty", folderDialog.currentFolder)
|
||||
screenPlayCreate.copyProject("/examples/scenes/empty",
|
||||
folderDialog.currentFolder)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Text {
|
||||
@ -61,27 +63,28 @@ Item {
|
||||
width: parent.width
|
||||
spacing: 5
|
||||
anchors {
|
||||
top: txtExamples.bottom
|
||||
topMargin: 10
|
||||
top: parent.top
|
||||
topMargin: 200
|
||||
bottom: parent.bottom
|
||||
}
|
||||
CreateWidgetButton {
|
||||
id: btnEmpty1
|
||||
text: qsTr("Simple clock widget")
|
||||
buttonActive: true
|
||||
animOffset: 150
|
||||
imgSource: "qrc:/assets/icons/icon_time.svg"
|
||||
onClicked: {
|
||||
buttonPressed("clock", btnEmpty1.text, btnEmpty1.imgSource)
|
||||
|
||||
}
|
||||
}
|
||||
CreateWidgetButton {
|
||||
id: btnEmpty2
|
||||
text: qsTr("Musik scene wallpaper visualizer")
|
||||
buttonActive: true
|
||||
animOffset: 200
|
||||
imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
||||
onClicked: {
|
||||
buttonPressed("music",btnEmpty2.text, btnEmpty2.imgSource)
|
||||
buttonPressed("music", btnEmpty2.text, btnEmpty2.imgSource)
|
||||
}
|
||||
}
|
||||
CreateWidgetButton {
|
||||
@ -89,9 +92,9 @@ Item {
|
||||
text: qsTr("Changing scene wallpaper via unsplash.com")
|
||||
imgSource: "qrc:/assets/icons/icon_scene.svg"
|
||||
buttonActive: true
|
||||
animOffset: 250
|
||||
onClicked: {
|
||||
buttonPressed("slideshow",btnEmpty3.text, btnEmpty3.imgSource)
|
||||
|
||||
buttonPressed("slideshow", btnEmpty3.text, btnEmpty3.imgSource)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -99,74 +102,31 @@ Item {
|
||||
State {
|
||||
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 {
|
||||
target: txtExamples
|
||||
opacity: 0
|
||||
anchors.topMargin: -50
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: txtCreate
|
||||
opacity: 0
|
||||
anchors.topMargin: -50
|
||||
}
|
||||
},
|
||||
State {
|
||||
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 {
|
||||
target: txtExamples
|
||||
opacity: 1
|
||||
anchors.topMargin: 30
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: txtCreate
|
||||
opacity: 1
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -176,45 +136,25 @@ Item {
|
||||
to: "in"
|
||||
reversible: true
|
||||
|
||||
SequentialAnimation {
|
||||
ParallelAnimation {
|
||||
PropertyAnimation {
|
||||
target: txtCreate
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
PropertyAnimation {
|
||||
target: btnCreateEmptyWidget
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
properties: "opacity,anchors.topMargin"
|
||||
duration: 400
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
|
||||
PauseAnimation {
|
||||
duration: 50
|
||||
}
|
||||
PropertyAnimation {
|
||||
target: txtExamples
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
properties: "opacity,anchors.topMargin"
|
||||
duration: 400
|
||||
easing.type: Easing.InOutQuart
|
||||
}
|
||||
PropertyAnimation {
|
||||
target: btnEmpty1
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
|
||||
PropertyAnimation {
|
||||
target: btnEmpty2
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
|
||||
PropertyAnimation {
|
||||
target: btnEmpty3
|
||||
property: "opacity"
|
||||
duration: 80
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,6 +163,7 @@ Item {
|
||||
|
||||
|
||||
|
||||
|
||||
/*##^## Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
|
||||
@ -4,17 +4,20 @@ import QtGraphicalEffects 1.0
|
||||
Item {
|
||||
id: btnEmpty
|
||||
height: 75
|
||||
state: "out"
|
||||
anchors {
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
Component.onCompleted: btnEmpty.state = "in"
|
||||
property int animOffset: 0
|
||||
|
||||
property string text
|
||||
signal clicked
|
||||
property bool buttonActive: true
|
||||
property string imgSource: "qrc:/assets/icons/icon_library_music.svg"
|
||||
|
||||
|
||||
RectangularGlow {
|
||||
id: effect
|
||||
anchors {
|
||||
@ -28,27 +31,26 @@ Item {
|
||||
glowRadius: 3
|
||||
spread: 0.2
|
||||
color: "black"
|
||||
opacity: .4
|
||||
opacity: 0
|
||||
cornerRadius: 15
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id:bg
|
||||
width: parent.width
|
||||
id: bg
|
||||
height: parent.height - 10
|
||||
anchors {
|
||||
top:parent.top
|
||||
right:parent.right
|
||||
bottom:parent.bottom
|
||||
left:parent.left
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
margins: 10
|
||||
}
|
||||
|
||||
radius: 3
|
||||
Image {
|
||||
id:imgIcon
|
||||
id: imgIcon
|
||||
width: 30
|
||||
height: 30
|
||||
sourceSize: Qt.size(30,30)
|
||||
sourceSize: Qt.size(30, 30)
|
||||
source: imgSource
|
||||
anchors {
|
||||
left: parent.left
|
||||
@ -56,7 +58,7 @@ Item {
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
ColorOverlay{
|
||||
ColorOverlay {
|
||||
color: "gray"
|
||||
source: 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 {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
top: parent.top
|
||||
topMargin: 0
|
||||
}
|
||||
|
||||
width: 910
|
||||
radius: 4
|
||||
height: 560
|
||||
height: 460
|
||||
|
||||
Item {
|
||||
id: wrapperContent
|
||||
@ -120,7 +121,7 @@ Item {
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
color: "gray"
|
||||
color: Material.color(Material.Grey)
|
||||
|
||||
AnimatedImage {
|
||||
id: imgPreview
|
||||
@ -198,8 +199,6 @@ Item {
|
||||
if (state === Create.State.Finished) {
|
||||
imgSuccess.source = "file:///"
|
||||
+ screenPlayCreate.workingDir + "/preview.gif"
|
||||
imgPreview.visible = true
|
||||
imgPreview.playing = true
|
||||
}
|
||||
}
|
||||
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 {
|
||||
id: wrapperRight
|
||||
@ -221,18 +272,25 @@ Item {
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
Column {
|
||||
ColumnLayout {
|
||||
id: column
|
||||
spacing: 20
|
||||
anchors.fill: parent
|
||||
anchors.margins: 30
|
||||
anchors.topMargin: 0
|
||||
spacing: 0
|
||||
anchors {
|
||||
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
margins: 30
|
||||
top:parent.top
|
||||
topMargin: 0
|
||||
bottom: column1.top
|
||||
bottomMargin: 50
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: textField
|
||||
placeholderText: qsTr("Name")
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
width:parent.width
|
||||
Layout.fillWidth: true
|
||||
onTextChanged: {
|
||||
if (textField.text.length >= 3) {
|
||||
canNext = true
|
||||
@ -245,28 +303,28 @@ Item {
|
||||
TextField {
|
||||
id: textField1
|
||||
placeholderText: qsTr("Description")
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
width:parent.width
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: textField2
|
||||
placeholderText: qsTr("Youtube URL")
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
width:parent.width
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: textField3
|
||||
width:parent.width
|
||||
placeholderText: qsTr("Tags")
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: column1
|
||||
height: 100
|
||||
height: 80
|
||||
width: childrenRect.width
|
||||
spacing: 10
|
||||
anchors {
|
||||
@ -310,133 +368,14 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
CreateWallpaperError {
|
||||
id: wrapperError
|
||||
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
|
||||
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 {
|
||||
@ -500,7 +439,7 @@ Item {
|
||||
name: "in"
|
||||
PropertyChanges {
|
||||
target: wrapper
|
||||
anchors.topMargin: 40
|
||||
anchors.topMargin: 100
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
@ -516,7 +455,7 @@ Item {
|
||||
name: "error"
|
||||
PropertyChanges {
|
||||
target: wrapper
|
||||
anchors.topMargin: 40
|
||||
anchors.topMargin: 100
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
@ -537,7 +476,7 @@ Item {
|
||||
name: "success"
|
||||
PropertyChanges {
|
||||
target: wrapper
|
||||
anchors.topMargin: 40
|
||||
anchors.topMargin: 100
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
@ -669,3 +608,19 @@ Item {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*##^## Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user