Move StartInfo delegate into StartInfoLinkImage

Fix headlines lines
Add drag and drop area

ScreenPlay/qml.qrc

@@ -89,5 +89,6 @@
         <file>qml/Common/Util.js</file>
         <file>qml/Common/Dialogs/CriticalError.qml</file>
         <file>qml/Common/ColorPicker.qml</file>
+        <file>qml/Create/StartInfoLinkImage.qml</file>
     </qresource>
 </RCC>

ScreenPlay/qml/Create/StartInfo.qml

@@ -194,132 +194,15 @@ Item {
             }
         }
 
-        delegate: Item {
+        delegate: StartInfoLinkImage {
-            id:delegate
+            id: delegate
+            image: model.image
+            category: model.category + ":"
+            description: model.description
+            text: model.text
+            link: model.link
             width: gridView.cellWidth
             height: gridView.cellHeight
-
-            Rectangle {
-                id: img
-                anchors.fill: parent
-                anchors.margins: 5
-                clip: true
-                layer.enabled: true
-                layer.effect: ElevationEffect {
-                    elevation: 4
-                }
-
-                Image {
-                    id:image
-                    anchors.fill: parent
-                    fillMode: Image.PreserveAspectCrop
-                    source: model.image
-                }
-
-                LinearGradient {
-                    anchors.fill: parent
-                    end: Qt.point(0, 0)
-                    start: Qt.point(0, parent.height * .66)
-                    gradient: Gradient {
-                        GradientStop {
-                            position: 0.0
-                            color: "#DD000000"
-                        }
-                        GradientStop {
-                            position: 1.0
-                            color: "#00000000"
-                        }
-                    }
-                }
-                Text {
-                    id: txtCategory
-                    text: model.category + ":"
-                    font.pointSize: 10
-                    font.family: ScreenPlay.settings.font
-                    color: "white"
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        bottom: txtText.top
-                        margins: 15
-                        bottomMargin: 5
-                    }
-                }
-                Text {
-                    id: txtText
-                    text: model.text
-                    font.pointSize: 16
-                    font.family: ScreenPlay.settings.font
-                    color: "white"
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        bottom: parent.bottom
-                        margins: 15
-                    }
-                }
-
-                Rectangle {
-                    color: Material.backgroundDimColor
-                    anchors {
-                        top: img.bottom
-                        right: parent.right
-                        left: parent.left
-                        bottom: parent.bottom
-                    }
-
-                    Text {
-                        id: description
-                        text: model.description
-                        font.pointSize: 14
-                        font.family: ScreenPlay.settings.font
-                        color: Material.primaryTextColor
-                        anchors {
-                            fill: parent
-                            margins: 5
-                        }
-                    }
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    hoverEnabled: true
-                    onClicked: Qt.openUrlExternally(model.link)
-                    onEntered: {
-                        delegate.state = "hover"
-                    }
-                    onExited: {
-                        delegate.state = ""
-                    }
-                }
-            }
-
-            transitions: [
-                Transition {
-                    from: ""
-                    to: "hover"
-
-                    ScaleAnimator {
-                        target: image
-                        duration: 80
-                        from: 1
-                        to: 1.05
-                    }
-                },
-                Transition {
-                    from: "hover"
-                    to: ""
-
-                    ScaleAnimator {
-                        target: image
-                        duration: 80
-                        from: 1.05
-                        to: 1
-                    }
-                }
-            ]
         }
     }
 }

ScreenPlay/qml/Create/StartInfoLinkImage.qml

@@ -0,0 +1,141 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
+import QtQuick.Controls.Material 2.12
+import QtQuick.Particles 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material.impl 2.12
+
+import ScreenPlay 1.0
+import ScreenPlay.Create 1.0
+import ScreenPlay.QMLUtilities 1.0
+
+import "../Common" as Common
+
+Item {
+    id: delegate
+
+    property alias image: image.source
+    property alias category: txtCategory.text
+    property alias text: txtText.text
+    property alias description: description.text
+    property url link
+
+    Rectangle {
+        id: img
+        anchors.fill: parent
+        anchors.margins: 5
+        clip: true
+        layer.enabled: true
+        layer.effect: ElevationEffect {
+            elevation: 4
+        }
+
+        Image {
+            id: image
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectCrop
+        }
+
+        LinearGradient {
+            anchors.fill: parent
+            end: Qt.point(0, 0)
+            start: Qt.point(0, parent.height * .66)
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.0
+                    color: "#DD000000"
+                }
+                GradientStop {
+                    position: 1.0
+                    color: "#00000000"
+                }
+            }
+        }
+        Text {
+            id: txtCategory
+            font.pointSize: 10
+            font.family: ScreenPlay.settings.font
+            color: "white"
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: txtText.top
+                margins: 15
+                bottomMargin: 5
+            }
+        }
+        Text {
+            id: txtText
+            font.pointSize: 16
+            font.family: ScreenPlay.settings.font
+            color: "white"
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                margins: 15
+            }
+        }
+
+        Rectangle {
+            color: Material.backgroundDimColor
+            anchors {
+                top: img.bottom
+                right: parent.right
+                left: parent.left
+                bottom: parent.bottom
+            }
+
+            Text {
+                id: description
+                font.pointSize: 14
+                font.family: ScreenPlay.settings.font
+                color: Material.primaryTextColor
+                anchors {
+                    fill: parent
+                    margins: 5
+                }
+            }
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            hoverEnabled: true
+            onClicked: Qt.openUrlExternally(delegate.link)
+            onEntered: {
+                delegate.state = "hover"
+            }
+            onExited: {
+                delegate.state = ""
+            }
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "hover"
+
+            ScaleAnimator {
+                target: image
+                duration: 80
+                from: 1
+                to: 1.05
+            }
+        },
+        Transition {
+            from: "hover"
+            to: ""
+
+            ScaleAnimator {
+                target: image
+                duration: 80
+                from: 1.05
+                to: 1
+            }
+        }
+    ]
+}

ScreenPlay/qml/Create/Wizards/GifWallpaper.qml

@@ -10,24 +10,23 @@ import "../../Common" as Common
 
 WizardPage {
     id: root
+
+    property url file
     sourceComponent: ColumnLayout {
 
         function create() {
-            ScreenPlay.wizards.createGifWallpaper(tfTitle.text,
+            ScreenPlay.wizards.createGifWallpaper(tfTitle.text, cbLicense.name,
-                                                  cbLicense.name,
                                                   cbLicense.licenseFile,
-                                                  tfCreatedBy.text,
+                                                  tfCreatedBy.text, root.file,
-                                                  fileSelector.file,
                                                   tagSelector.getTags())
         }
 
-        property bool ready: tfTitle.text.length >= 1
+        property bool ready: tfTitle.text.length >= 1 && root.file.length !== ""
-                             && fileSelector.file.length > 1
         onReadyChanged: root.ready = ready
 
         Common.Headline {
             id: txtHeadline
-            text: qsTr("Create a Gif Wallpaper")
+            text: qsTr("Import a Gif Wallpaper")
             Layout.fillWidth: true
         }
 
@@ -47,15 +46,44 @@ WizardPage {
 
                 Rectangle {
                     id: leftWrapper
-                    color: "#333333"
+                    color: Qt.darker(Material.backgroundColor)
                     radius: 3
                     Layout.fillHeight: true
                     Layout.fillWidth: true
+                    DropArea {
+                        id: dropArea
+                        anchors.fill: parent
+                        onDropped: {
+                            root.file = drop.urls[0]
+                            leftWrapper.color = Qt.darker(
+                                        Qt.darker(Material.backgroundColor))
+                        }
+
+                        onExited: {
+                            leftWrapper.color = Qt.darker(
+                                        Material.backgroundColor)
+                        }
+
+                        onEntered: {
+                            leftWrapper.color = Qt.darker(
+                                        Qt.darker(Material.backgroundColor))
+                            drag.accept(Qt.LinkAction)
+                        }
+                    }
+
+                    Image {
+                        id: bgPattern
+                        anchors.fill: parent
+                        fillMode: Image.Tile
+                        opacity: .2
+                        source: "qrc:/assets/images/noisy-texture-3.png"
+                    }
 
                     Text {
-                        color: Material.secondaryTextColor
+                        color: Material.primaryTextColor
                         font.family: ScreenPlay.settings.font
-                        text: qsTr("Select a gif below.")
+                        font.pointSize: 13
+                        text: qsTr("Drop a *.gif file here or use 'Select file' below.")
                         anchors.centerIn: parent
                     }
 
@@ -63,7 +91,7 @@ WizardPage {
                         id: imgPreview
                         anchors.fill: parent
                         fillMode: Image.PreserveAspectCrop
-                        source: fileSelector.fileDialog.fileUrl
+                        source: root.file
                     }
                 }
 
@@ -77,6 +105,7 @@ WizardPage {
                     Layout.fillWidth: true
                     placeHolderText: qsTr("Select your gif")
                     fileDialog.nameFilters: ["Gif (*.gif)"]
+                    onFileChanged: root.file = file
                 }
             }
 

ScreenPlay/qml/Create/Wizards/HTMLWallpaper.qml

@@ -32,6 +32,7 @@ WizardPage {
 
         Common.Headline {
             text: qsTr("Create a HTML Wallpaper")
+            Layout.fillWidth: true
         }
 
         Common.HeadlineSection {

ScreenPlay/qml/Create/Wizards/ImportVideoAndConvert/CreateWallpaperInit.qml

@@ -28,7 +28,7 @@ Item {
         Common.Headline {
             Layout.alignment: Qt.AlignTop
             Layout.fillWidth: true
-            text: qsTr("Import a video")
+            text: qsTr("Import any video type")
         }
 
         Text {

ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmConvert.qml

@@ -9,6 +9,7 @@ import ScreenPlay.Create 1.0
 
 import "../../../Common" as Common
 
+
 Item {
     id: root
 

ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmInit.qml

@@ -9,40 +9,122 @@ import ScreenPlay 1.0
 import ScreenPlay.Create 1.0
 
 import "../../../Common" as Common
+import "../../"
 
 Item {
     id: root
     signal next(var filePath)
 
     ColumnLayout {
+        id: wrapper
         spacing: 40
 
         anchors {
             top: parent.top
+            bottom: btnOpenDocs.top
             left: parent.left
             right: parent.right
             margins: 20
         }
 
         Common.Headline {
-            Layout.alignment: Qt.AlignTop
             Layout.fillWidth: true
-            text: qsTr("Import a video")
+            text: qsTr("Import a .webm video")
         }
 
-        Text {
+        RowLayout {
-            id: txtDescription
+            Layout.fillHeight: true
-            text: qsTr("When importing webm we can skip the long conversion.")
-            color: Material.primaryTextColor
             Layout.fillWidth: true
-            font.pointSize: 13
+            spacing: 40
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            ColumnLayout {
-            font.family: ScreenPlay.settings.font
+                Layout.fillWidth: true
-        }
+                Layout.fillHeight: true
+                spacing: 40
+                Text {
+                    id: txtDescription
+                    text: qsTr("When importing webm we can skip the long conversion. When you get unsatisfying results with the ScreenPlay importer from 'ideo import and convert (all types)' you can also convert via the free and open source HandBrake!")
+                    color: Material.primaryTextColor
+                    Layout.fillWidth: true
+                    font.pointSize: 13
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                    font.family: ScreenPlay.settings.font
+                }
 
+                DropArea {
+                    id: dropArea
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    Rectangle {
+                        id: bg
+                        anchors.fill: parent
+                        radius: 3
+                        color: Qt.darker(Material.backgroundColor)
+                    }
+
+                    Image {
+                        id: bgPattern
+                        anchors.fill: parent
+                        fillMode: Image.Tile
+                        opacity: .2
+                        source: "qrc:/assets/images/noisy-texture-3.png"
+                    }
+                    onExited: {
+                        bg.color = Qt.darker(Material.backgroundColor)
+                    }
+
+                    onEntered: {
+                        bg.color = Qt.darker(Qt.darker(
+                                                 Material.backgroundColor))
+                        drag.accept(Qt.LinkAction)
+                    }
+                    onDropped: {
+                        let file = ScreenPlay.util.toLocal(drop.urls[0])
+                        bg.color = Qt.darker(Qt.darker(
+                                                 Material.backgroundColor))
+                        if (file.endsWith(".webm")) {
+                            root.next(drop.urls[0])
+                        } else {
+                            txtFile.text = qsTr(
+                                        "Invalid file type. Must be valid VP8 or VP9 (*.webm)!")
+                        }
+                    }
+                    Text {
+                        id: txtFile
+                        text: qsTr("Drop a *.webm file here or use 'Select file' below.")
+                        anchors {
+                            fill: parent
+                            margins: 40
+                        }
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        color: Material.primaryTextColor
+                        font.pointSize: 13
+                        horizontalAlignment: Qt.AlignHCenter
+                        verticalAlignment: Qt.AlignVCenter
+                        font.family: ScreenPlay.settings.font
+                    }
+                }
+            }
+            Item {
+                Layout.fillHeight: true
+                Layout.preferredWidth: wrapper.width * .33
+
+                StartInfoLinkImage {
+                    text: "Handbreak"
+                    image: "qrc:/assets/startinfo/handbreak.png"
+                    link: "https://handbrake.fr/"
+                    description: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes,"
+                    category: "Tools"
+                    width: 300
+                    height: parent.height
+                    anchors.centerIn: parent
+                }
+            }
+        }
     }
 
     Button {
+        id: btnOpenDocs
         text: qsTr("Open Documentation")
         Material.background: Material.LightGreen
         Material.foreground: "white"
@@ -55,6 +137,7 @@ Item {
                        "https://kelteseth.gitlab.io/ScreenPlayDocs/wallpaper/wallpaper/#performance")
         anchors {
             bottom: parent.bottom
+            left: parent.left
             margins: 20
         }
     }

ScreenPlay/qml/Create/Wizards/QMLWallpaper.qml

@@ -32,6 +32,7 @@ WizardPage {
 
         Common.Headline {
             text: qsTr("Create a QML Wallpaper")
+            Layout.fillWidth: true
         }
 
         Common.HeadlineSection {

ScreenPlay/qml/Create/Wizards/WebsiteWallpaper.qml

@@ -31,6 +31,7 @@ WizardPage {
 
         Common.Headline {
             text: qsTr("Create a Website Wallpaper")
+            Layout.fillWidth: true
         }
 
         Common.HeadlineSection {

ScreenPlay/qml/Create/Wizards/WizardPage.qml

@@ -17,6 +17,7 @@ FocusScope {
     signal saveFinished
     signal cancelClicked
 
+
     property Component sourceComponent
     property alias savePopup: savePopup
     property bool ready: false