diff --git a/ScreenPlay/qml/Create/Create.qml b/ScreenPlay/qml/Create/Create.qml index 67f7f0cb..65d70e87 100644 --- a/ScreenPlay/qml/Create/Create.qml +++ b/ScreenPlay/qml/Create/Create.qml @@ -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 + PauseAnimation { + 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 } } ] diff --git a/ScreenPlay/qml/Create/CreateWallpaper.qml b/ScreenPlay/qml/Create/CreateWallpaper.qml index 96cdca53..5dee3021 100644 --- a/ScreenPlay/qml/Create/CreateWallpaper.qml +++ b/ScreenPlay/qml/Create/CreateWallpaper.qml @@ -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 - // nameFilters: ["Video files (*.mp4)"] + 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} +} + ##^##*/ diff --git a/ScreenPlay/qml/Create/CreateWidget.qml b/ScreenPlay/qml/Create/CreateWidget.qml index 1e82e1b9..06d909c9 100644 --- a/ScreenPlay/qml/Create/CreateWidget.qml +++ b/ScreenPlay/qml/Create/CreateWidget.qml @@ -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 } - PropertyAnimation { - target: txtExamples - property: "opacity" - duration: 80 - easing.type: Easing.InOutCubic - } - PropertyAnimation { - target: btnEmpty1 - property: "opacity" - duration: 80 - easing.type: Easing.InOutCubic - } + SequentialAnimation { - PropertyAnimation { - target: btnEmpty2 - property: "opacity" - duration: 80 - easing.type: Easing.InOutCubic - } - - PropertyAnimation { - target: btnEmpty3 - property: "opacity" - duration: 80 - easing.type: Easing.InOutCubic + PauseAnimation { + duration: 50 + } + PropertyAnimation { + target: txtExamples + properties: "opacity,anchors.topMargin" + duration: 400 + easing.type: Easing.InOutQuart + } } } } @@ -223,6 +163,7 @@ Item { + /*##^## Designer { D{i:0;autoSize:true;height:480;width:640} } diff --git a/ScreenPlay/qml/Create/CreateWidgetButton.qml b/ScreenPlay/qml/Create/CreateWidgetButton.qml index 205c15e7..2627b644 100644 --- a/ScreenPlay/qml/Create/CreateWidgetButton.qml +++ b/ScreenPlay/qml/Create/CreateWidgetButton.qml @@ -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 + } + } + } + } + } + ] } diff --git a/ScreenPlay/qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml b/ScreenPlay/qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml index b0fc37f0..4e36fbb7 100644 --- a/ScreenPlay/qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml +++ b/ScreenPlay/qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml @@ -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} +} + ##^##*/