Add basic wallpaper Wizard

Fix gradient
Fix arrow svg

ScreenPlay/Resources.qrc

@@ -1,123 +1,124 @@
 <RCC>
     <qresource prefix="/">
-        <file>assets/licenses/Apache2.txt</file>
-        <file>assets/licenses/OFL.txt</file>
         <file>assets/fonts/LibreBaskerville-Italic.ttf</file>
         <file>assets/fonts/Roboto-Light.ttf</file>
         <file>assets/fonts/Roboto-Regular.ttf</file>
         <file>assets/fonts/Roboto-Thin.ttf</file>
+        <file>assets/fonts/RobotoMono-Light.ttf</file>
+        <file>assets/fonts/RobotoMono-Thin.ttf</file>
+        <file>assets/icons/favicon.ico</file>
+        <file>assets/icons/font-awsome/close.svg</file>
+        <file>assets/icons/font-awsome/frown-o.svg</file>
+        <file>assets/icons/icon_arrow_left.svg</file>
+        <file>assets/icons/icon_arrow_right.svg</file>
+        <file>assets/icons/icon_build.svg</file>
+        <file>assets/icons/icon_cake.svg</file>
+        <file>assets/icons/icon_code.svg</file>
+        <file>assets/icons/icon_community.svg</file>
+        <file>assets/icons/icon_document.svg</file>
+        <file>assets/icons/icon_download.svg</file>
+        <file>assets/icons/icon_emptyWidget.svg</file>
+        <file>assets/icons/icon_folder_open.svg</file>
+        <file>assets/icons/icon_hand_left.svg</file>
+        <file>assets/icons/icon_hand_right.svg</file>
+        <file>assets/icons/icon_heavy_metal.svg</file>
+        <file>assets/icons/icon_indicator_down.svg</file>
+        <file>assets/icons/icon_info.svg</file>
+        <file>assets/icons/icon_installed.svg</file>
+        <file>assets/icons/icon_library_music.svg</file>
+        <file>assets/icons/icon_local_movies.svg</file>
+        <file>assets/icons/icon_logo_head.svg</file>
+        <file>assets/icons/icon_monitor.svg</file>
+        <file>assets/icons/icon_movie.svg</file>
+        <file>assets/icons/icon_multiple_images.svg</file>
+        <file>assets/icons/icon_open_in_new.svg</file>
+        <file>assets/icons/icon_pause.svg</file>
+        <file>assets/icons/icon_people.svg</file>
+        <file>assets/icons/icon_play.svg</file>
+        <file>assets/icons/icon_plus.svg</file>
+        <file>assets/icons/icon_scene.svg</file>
         <file>assets/icons/icon_search.svg</file>
         <file>assets/icons/icon_settings.svg</file>
         <file>assets/icons/icon_share.svg</file>
-        <file>assets/icons/icon_volume.svg</file>
-        <file>assets/images/Window.svg</file>
-        <file>assets/icons/icon_arrow_left.svg</file>
-        <file>assets/icons/icon_arrow_right.svg</file>
-        <file>assets/icons/icon_indicator_down.svg</file>
-        <file>assets/icons/icon_monitor.svg</file>
-        <file>assets/icons/icon_download.svg</file>
-        <file>assets/icons/favicon.ico</file>
-        <file>qtquickcontrols2.conf</file>
-        <file>settings.json</file>
-        <file>assets/icons/icon_plus.svg</file>
-        <file>assets/icons/icon_multiple_images.svg</file>
         <file>assets/icons/icon_single_image.svg</file>
-        <file>assets/icons/icon_tv.svg</file>
+        <file>assets/icons/icon_steam.svg</file>
         <file>assets/icons/icon_stomt.svg</file>
-        <file>assets/icons/icon_heavy_metal.svg</file>
+        <file>assets/icons/icon_time.svg</file>
-        <file>assets/icons/icon_hand_left.svg</file>
+        <file>assets/icons/icon_tv.svg</file>
-        <file>assets/icons/icon_hand_right.svg</file>
+        <file>assets/icons/icon_upload.svg</file>
+        <file>assets/icons/icon_volume.svg</file>
+        <file>assets/icons/icon_volume_mute.svg</file>
+        <file>assets/icons/icon_volume_up.svg</file>
+        <file>assets/icons/icon_widgets.svg</file>
+        <file>assets/images/Intro.png</file>
+        <file>assets/images/Intro_PC.png</file>
+        <file>assets/images/Intro_PC.svg</file>
+        <file>assets/images/Intro_shine.png</file>
+        <file>assets/images/ScreenPlayIconStomt.png</file>
+        <file>assets/images/Stomt_Logo+Wordmark_Mono_BLK.svg</file>
+        <file>assets/images/Window.svg</file>
         <file>assets/images/hand_give.png</file>
-        <file>assets/icons/icon_community.svg</file>
+        <file>assets/images/missingPreview.png</file>
-        <file>assets/images/noisy-texture.png</file>
         <file>assets/images/noisy-texture-2.png</file>
         <file>assets/images/noisy-texture-3.png</file>
-        <file>assets/icons/icon_upload.svg</file>
+        <file>assets/images/noisy-texture.png</file>
-        <file>assets/icons/font-awsome/close.svg</file>
+        <file>assets/licenses/Apache2.txt</file>
-        <file>assets/icons/font-awsome/frown-o.svg</file>
+        <file>assets/licenses/OFL.txt</file>
-        <file>assets/icons/icon_movie.svg</file>
+        <file>assets/particle/backgroundGlow.png</file>
-        <file>assets/icons/icon_steam.svg</file>
+        <file>assets/particle/dot.png</file>
-        <file>assets/icons/icon_installed.svg</file>
+        <file>assets/shader/movingcolorramp.fsh</file>
-        <file>qml/FileDropper.qml</file>
+        <file>legal/DataProtection.txt</file>
-        <file>qml/FileDropperSingleFile.qml</file>
+        <file>legal/Font Awesome Free License.txt</file>
-        <file>qml/Monitors.qml</file>
+        <file>legal/OFL.txt</file>
-        <file>qml/MonitorSelection.qml</file>
+        <file>legal/OpenSSL.txt</file>
-        <file>qml/MonitorSelectionItem.qml</file>
+        <file>legal/Qt LGPLv3.txt</file>
-        <file>qml/Navigation.qml</file>
+        <file>legal/gpl-3.0.txt</file>
-        <file>qml/NavigationItem.qml</file>
+        <file>legal/lgpl-2.1.txt</file>
-        <file>qml/StartupErrorWindow.qml</file>
+        <file>main.qml</file>
         <file>qml/Community/Community.qml</file>
         <file>qml/Community/Feedback.qml</file>
+        <file>qml/Controls/Slider.qml</file>
         <file>qml/Create/Create.qml</file>
         <file>qml/Create/CreateImport.qml</file>
         <file>qml/Create/CreateImportStatus.qml</file>
+        <file>qml/Create/CreateNew.qml</file>
         <file>qml/Create/CreateUpload.qml</file>
         <file>qml/Create/CreateWallpaper.qml</file>
         <file>qml/Create/CreateWidget.qml</file>
         <file>qml/Create/CreateWidgetButton.qml</file>
-        <file>main.qml</file>
+        <file>qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml</file>
+        <file>qml/FileDropper.qml</file>
+        <file>qml/FileDropperSingleFile.qml</file>
         <file>qml/Installed/Installed.qml</file>
+        <file>qml/Installed/InstalledNavigation.qml</file>
         <file>qml/Installed/InstalledUserHelper.qml</file>
         <file>qml/Installed/ScreenPlayItem.qml</file>
         <file>qml/Installed/ScreenPlayItemImage.qml</file>
         <file>qml/Installed/Sidebar.qml</file>
+        <file>qml/MonitorSelection.qml</file>
+        <file>qml/MonitorSelectionItem.qml</file>
+        <file>qml/Monitors.qml</file>
+        <file>qml/MonitorsProjectSettingItem.qml</file>
+        <file>qml/Navigation.qml</file>
+        <file>qml/NavigationItem.qml</file>
+        <file>qml/NavigationWallpaperConfiguration.qml</file>
         <file>qml/Settings/SettingBool.qml</file>
         <file>qml/Settings/Settings.qml</file>
+        <file>qml/Settings/SettingsButton.qml</file>
         <file>qml/Settings/SettingsComboBox.qml</file>
+        <file>qml/Settings/SettingsExpander.qml</file>
         <file>qml/Settings/SettingsHeader.qml</file>
         <file>qml/Settings/SettingsHorizontalSeperator.qml</file>
+        <file>qml/StartupErrorWindow.qml</file>
         <file>qml/Widgets/Window.qml</file>
+        <file>qml/Wizard/Wizard.qml</file>
         <file>qml/Workshop/Workshop.qml</file>
         <file>qml/Workshop/WorkshopAlertBanner.qml</file>
         <file>qml/Workshop/WorkshopBanner.qml</file>
         <file>qml/Workshop/WorkshopItem.qml</file>
-        <file>assets/images/missingPreview.png</file>
+        <file>qtquickcontrols2.conf</file>
-        <file>qml/Settings/SettingsButton.qml</file>
+        <file>settings.json</file>
-        <file>assets/icons/icon_cake.svg</file>
-        <file>assets/icons/icon_local_movies.svg</file>
-        <file>assets/icons/icon_build.svg</file>
-        <file>assets/icons/icon_logo_head.svg</file>
-        <file>assets/icons/icon_widgets.svg</file>
-        <file>qml/Installed/InstalledNavigation.qml</file>
-        <file>assets/icons/icon_pause.svg</file>
-        <file>assets/icons/icon_volume_up.svg</file>
-        <file>assets/icons/icon_volume_mute.svg</file>
-        <file>assets/icons/icon_play.svg</file>
-        <file>assets/images/ScreenPlayIconStomt.png</file>
-        <file>assets/images/Stomt_Logo+Wordmark_Mono_BLK.svg</file>
-        <file>assets/icons/icon_code.svg</file>
-        <file>assets/images/Intro.png</file>
-        <file>assets/images/Intro_shine.png</file>
-        <file>assets/images/Intro_PC.svg</file>
-        <file>assets/images/Intro_PC.png</file>
-        <file>assets/fonts/RobotoMono-Light.ttf</file>
-        <file>assets/fonts/RobotoMono-Thin.ttf</file>
-        <file>assets/particle/backgroundGlow.png</file>
-        <file>assets/particle/dot.png</file>
-        <file>assets/icons/icon_scene.svg</file>
-        <file>qml/NavigationWallpaperConfiguration.qml</file>
-        <file>qml/MonitorsProjectSettingItem.qml</file>
-        <file>assets/icons/icon_people.svg</file>
-        <file>assets/icons/icon_info.svg</file>
-        <file>assets/icons/icon_document.svg</file>
-        <file>assets/icons/icon_folder_open.svg</file>
-        <file>assets/icons/icon_library_music.svg</file>
-        <file>assets/icons/icon_time.svg</file>
-        <file>assets/icons/icon_emptyWidget.svg</file>
-        <file>qml/Create/CreateNew.qml</file>
-        <file>assets/icons/icon_open_in_new.svg</file>
         <file>translations/ScreenPlay_de.qm</file>
         <file>translations/ScreenPlay_en.qm</file>
-        <file>qml/Settings/SettingsExpander.qml</file>
-        <file>legal/Font Awesome Free License.txt</file>
-        <file>legal/gpl-3.0.txt</file>
-        <file>legal/lgpl-2.1.txt</file>
-        <file>legal/OFL.txt</file>
-        <file>legal/OpenSSL.txt</file>
-        <file>legal/Qt LGPLv3.txt</file>
-        <file>qml/Wizard/Wizard.qml</file>
-        <file>assets/shader/movingcolorramp.fsh</file>
-        <file>qml/Controls/Slider.qml</file>
-        <file>legal/DataProtection.txt</file>
     </qresource>
 </RCC>

ScreenPlay/ScreenPlay.pro

@@ -117,5 +117,4 @@ unix {
 }
 
 DISTFILES += \
-    favicon.ico \
+    favicon.ico
-    assets/shader/movingcolorramp.fsh

ScreenPlay/assets/icons/icon_arrow_left.svg

@@ -1,5 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="ic_keyboard_arrow_right_24px" d="M18.703,20.798l-8.779,-8.798l8.779,-8.797l-2.703,-2.703l-11.5,11.5l11.5,11.5l2.703,-2.702Z" style="fill:#fff;fill-rule:nonzero;"/></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 15 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <path id="ic_keyboard_arrow_right_24px" d="M14.203,20.298L5.424,11.5L14.203,2.703L11.5,0L0,11.5L11.5,23L14.203,20.298L14.203,20.298Z" style="fill:white;fill-rule:nonzero;"/>
-</svg>

ScreenPlay/assets/icons/icon_arrow_right.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 15 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="ic_keyboard_arrow_right_24px" d="M0,20.298l8.778,-8.798l-8.778,-8.797l2.703,-2.703l11.5,11.5l-11.5,11.5l-2.703,-2.702Z" style="fill:#fff;fill-rule:nonzero;"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="ic_keyboard_arrow_right_24px" d="M4.5,20.798l8.778,-8.798l-8.778,-8.797l2.703,-2.703l11.5,11.5l-11.5,11.5l-2.703,-2.702Z" style="fill:#fff;fill-rule:nonzero;"/></svg>

ScreenPlay/assets/shader/movingcolorramp.fsh

@@ -8,11 +8,11 @@ void main( void ) {
 
         vec2 position = ( gl_FragCoord.xy / resolution.xy );
 
-        vec3 color1 = vec3(1.0, 0.0, 0.0);
+        vec3 color1 = vec3(1.0, 0.6, 0.01);
         vec3 color2 = vec3(0.97, 0.24, 0.24);
         float mixValue = distance(position,vec2(0,1));
 
-        vec3 color = mix( color1, color2,mixValue);
+        vec3 color = mix( color1, color2, mixValue);
 
         gl_FragColor = vec4(color,mixValue);
 

ScreenPlay/qml/Create/Create.qml

@@ -8,6 +8,7 @@ import QtQuick.Particles 2.0
 //Enums
 import LocalWorkshopCreationStatus 1.0
 
+
 Rectangle {
     id: create
     anchors.fill: parent
@@ -22,16 +23,14 @@ Rectangle {
             create.state = "import"
 
             activeVideoFile = videoFile
-            loader.setSource("CreateImport.qml", {
+            loader.setSource("Wizards/CreateWallpaper/CreateWallpaperWizard.qml")
-                                 "file": videoFile
-                             })
         }
         onProjectFileSelected: {
             create.state = "import"
 
             activeFolder = projectFile
-            loader.setSource("CreateUpload.qml", {
+            loader.setSource("CreateNew.qml", {
-                                 "projectFile": projectFile
+
                              })
         }
     }
@@ -73,7 +72,7 @@ Rectangle {
         id: colorShader
         anchors.fill: parent
         property real time: 45
-        property vector2d resolution: Qt.vector2d(parent.width, parent.height)
+        property vector2d resolution: Qt.vector2d(parent.width, parent.height* 2)
         fragmentShader: "qrc:/assets/shader/movingcolorramp.fsh"
     }
 
@@ -289,6 +288,7 @@ Rectangle {
         }
     }
 
+
     states: [
         State {
             name: "out"

ScreenPlay/qml/Create/Wizards/CreateWallpaper/CreateWallpaperWizard.qml

@@ -0,0 +1,304 @@
+import QtQuick 2.9
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import Qt.labs.platform 1.0
+import QtQuick.Layouts 1.3
+
+Item {
+    id: createNew
+    anchors.fill: parent
+    Component.onCompleted: state = "in"
+    state: "out"
+
+    RectangularGlow {
+        id: effect
+        anchors {
+            top: wrapper.top
+            left: wrapper.left
+            right: wrapper.right
+            topMargin: 3
+        }
+
+        height: wrapper.height
+        width: wrapper.width
+        cached: true
+        glowRadius: 3
+        spread: 0.2
+        color: "black"
+        opacity: 0.4
+        cornerRadius: 15
+    }
+
+    Rectangle {
+        id: wrapper
+
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+        }
+
+        width: 910
+        radius: 4
+        height: 560
+
+        Text {
+            id: txtHeadline
+            text: qsTr("Headline")
+            height: 40
+            renderType: Text.NativeRendering
+            font.pixelSize: 23
+            anchors {
+                top: parent.top
+                left: parent.left
+                margins: 40
+                bottomMargin: 0
+            }
+        }
+
+        SwipeView {
+            id: view
+            clip: true
+            currentIndex: 0
+            onCurrentIndexChanged: print(view.currentIndex, view.count)
+            anchors {
+                top: txtHeadline.bottom
+                right: parent.right
+                bottom: indicator.top
+                left: parent.left
+                margins: 40
+                bottomMargin: 20
+                topMargin: 0
+            }
+
+            interactive: false
+
+            Rectangle {
+                id: firstPage
+                color: "orange"
+            }
+            Rectangle {
+                id: secondPage
+                color: "grey"
+            }
+            Rectangle {
+                id: thirdPage
+                color: "steelblue"
+            }
+        }
+
+        PageIndicator {
+            id: indicator
+            count: view.count
+            currentIndex: view.currentIndex
+            anchors {
+                bottom: parent.bottom
+                bottomMargin: 20
+                left: parent.left
+                leftMargin: 40
+            }
+
+            delegate: Item {
+                width: 100
+                height: 30
+                Text {
+                    id: name
+                    text: {
+                        switch (index) {
+                        case 0:
+                            return "1. sdfwerf"
+                            break
+                        case 1:
+                            return "2. 34t3 345t w4"
+                            break
+                        case 2:
+                            return "3. 45zde erg3q45t"
+                            break
+                        default:
+                            return "Undefiend"
+                        }
+                    }
+                    color: view.currentIndex == index ? "orange" : "gray"
+
+                    anchors {
+                        left: parent.left
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+            }
+        }
+
+        Row {
+            width: 160
+            height: 50
+            spacing: 20
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+                margins: 20
+                rightMargin: 40
+            }
+            Button {
+                text: qsTr("Back")
+                Material.background: Material.Gray
+                Material.foreground: "white"
+
+                icon.source: "qrc:/assets/icons/icon_arrow_left.svg"
+                icon.color: "white"
+                icon.width: 16
+                icon.height: 16
+                onClicked: {
+                    if (view.currentIndex > 0)
+                        view.setCurrentIndex(view.currentIndex - 1)
+                }
+            }
+            Button {
+                text: qsTr("Next")
+                Material.background: Material.Orange
+                Material.foreground: "white"
+
+                icon.source: "qrc:/assets/icons/icon_arrow_right.svg"
+                icon.color: "white"
+                icon.width: 16
+                icon.height: 16
+                onClicked: {
+                    if (view.currentIndex < view.count - 1)
+                        view.setCurrentIndex(view.currentIndex + 1)
+                }
+            }
+        }
+
+        MouseArea {
+            anchors {
+                top: parent.top
+                right: parent.right
+                margins: 5
+            }
+            width: 32
+            height: width
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                createNew.state = "out"
+                timerBack.start()
+            }
+
+            Image {
+                id: imgClose
+                source: "qrc:/assets/icons/font-awsome/close.svg"
+                width: 16
+                height: 16
+                anchors.centerIn: parent
+                sourceSize: Qt.size(width, width)
+            }
+            ColorOverlay {
+                id: iconColorOverlay
+                anchors.fill: imgClose
+                source: imgClose
+                color: "gray"
+            }
+            Timer {
+                id: timerBack
+                interval: 800
+                onTriggered: utility.setNavigation("Create")
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "out"
+            PropertyChanges {
+                target: wrapper
+                anchors.topMargin: 800
+                opacity: 0
+            }
+            PropertyChanges {
+                target: effect
+                opacity: 0
+            }
+        },
+        State {
+            name: "in"
+            PropertyChanges {
+                target: wrapper
+                anchors.topMargin: 40
+                opacity: 1
+            }
+            PropertyChanges {
+                target: effect
+                opacity: .4
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "out"
+            to: "in"
+            SequentialAnimation {
+
+                PauseAnimation {
+                    duration: 400
+                }
+                ParallelAnimation {
+
+                    PropertyAnimation {
+                        target: wrapper
+                        duration: 600
+                        property: "anchors.topMargin"
+                        easing.type: Easing.InOutQuad
+                    }
+                    PropertyAnimation {
+                        target: wrapper
+                        duration: 600
+                        property: "opacity"
+                        easing.type: Easing.InOutQuad
+                    }
+                    SequentialAnimation {
+
+                        PauseAnimation {
+                            duration: 1000
+                        }
+                        PropertyAnimation {
+                            target: effect
+                            duration: 300
+                            property: "opacity"
+                            easing.type: Easing.InOutQuad
+                        }
+                    }
+                }
+            }
+        },
+        Transition {
+            from: "in"
+            to: "out"
+
+            ParallelAnimation {
+
+                PropertyAnimation {
+                    target: wrapper
+                    duration: 600
+                    property: "anchors.topMargin"
+                    easing.type: Easing.InOutQuad
+                }
+                PropertyAnimation {
+                    target: wrapper
+                    duration: 600
+                    property: "opacity"
+                    easing.type: Easing.InOutQuad
+                }
+                SequentialAnimation {
+
+                    PauseAnimation {
+                        duration: 500
+                    }
+                    PropertyAnimation {
+                        target: effect
+                        duration: 300
+                        property: "opacity"
+                        easing.type: Easing.InOutQuad
+                    }
+                }
+            }
+        }
+    ]
+}