diff --git a/ScreenPlay/qml.qrc b/ScreenPlay/qml.qrc index c7509f96..57c73110 100644 --- a/ScreenPlay/qml.qrc +++ b/ScreenPlay/qml.qrc @@ -89,5 +89,6 @@ qml/Common/Util.js qml/Common/Dialogs/CriticalError.qml qml/Common/ColorPicker.qml + qml/Create/StartInfoLinkImage.qml diff --git a/ScreenPlay/qml/Create/StartInfo.qml b/ScreenPlay/qml/Create/StartInfo.qml index eada3409..0aa2173f 100644 --- a/ScreenPlay/qml/Create/StartInfo.qml +++ b/ScreenPlay/qml/Create/StartInfo.qml @@ -194,132 +194,15 @@ Item { } } - delegate: Item { - id:delegate + delegate: StartInfoLinkImage { + 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 - } - } - ] } } } diff --git a/ScreenPlay/qml/Create/StartInfoLinkImage.qml b/ScreenPlay/qml/Create/StartInfoLinkImage.qml new file mode 100644 index 00000000..5da37557 --- /dev/null +++ b/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 + } + } + ] +} diff --git a/ScreenPlay/qml/Create/Wizards/GifWallpaper.qml b/ScreenPlay/qml/Create/Wizards/GifWallpaper.qml index adfbb18a..cbf14946 100644 --- a/ScreenPlay/qml/Create/Wizards/GifWallpaper.qml +++ b/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, - cbLicense.name, + ScreenPlay.wizards.createGifWallpaper(tfTitle.text, cbLicense.name, cbLicense.licenseFile, - tfCreatedBy.text, - fileSelector.file, + tfCreatedBy.text, root.file, tagSelector.getTags()) } - property bool ready: tfTitle.text.length >= 1 - && fileSelector.file.length > 1 + property bool ready: tfTitle.text.length >= 1 && root.file.length !== "" 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 } } diff --git a/ScreenPlay/qml/Create/Wizards/HTMLWallpaper.qml b/ScreenPlay/qml/Create/Wizards/HTMLWallpaper.qml index eee5b936..3dd101e0 100644 --- a/ScreenPlay/qml/Create/Wizards/HTMLWallpaper.qml +++ b/ScreenPlay/qml/Create/Wizards/HTMLWallpaper.qml @@ -32,6 +32,7 @@ WizardPage { Common.Headline { text: qsTr("Create a HTML Wallpaper") + Layout.fillWidth: true } Common.HeadlineSection { diff --git a/ScreenPlay/qml/Create/Wizards/ImportVideoAndConvert/CreateWallpaperInit.qml b/ScreenPlay/qml/Create/Wizards/ImportVideoAndConvert/CreateWallpaperInit.qml index df5687d7..575f8bc8 100644 --- a/ScreenPlay/qml/Create/Wizards/ImportVideoAndConvert/CreateWallpaperInit.qml +++ b/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 { diff --git a/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmConvert.qml b/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmConvert.qml index a072aab8..06c8ebb3 100644 --- a/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmConvert.qml +++ b/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmConvert.qml @@ -9,6 +9,7 @@ import ScreenPlay.Create 1.0 import "../../../Common" as Common + Item { id: root diff --git a/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmInit.qml b/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmInit.qml index 1be2962c..799d1f34 100644 --- a/ScreenPlay/qml/Create/Wizards/ImportWebm/ImportWebmInit.qml +++ b/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 { - id: txtDescription - text: qsTr("When importing webm we can skip the long conversion.") - color: Material.primaryTextColor + RowLayout { + Layout.fillHeight: true Layout.fillWidth: true - font.pointSize: 13 - wrapMode: Text.WrapAtWordBoundaryOrAnywhere - font.family: ScreenPlay.settings.font - } + spacing: 40 + ColumnLayout { + 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 } } diff --git a/ScreenPlay/qml/Create/Wizards/QMLWallpaper.qml b/ScreenPlay/qml/Create/Wizards/QMLWallpaper.qml index 3a049e4a..a7322249 100644 --- a/ScreenPlay/qml/Create/Wizards/QMLWallpaper.qml +++ b/ScreenPlay/qml/Create/Wizards/QMLWallpaper.qml @@ -32,6 +32,7 @@ WizardPage { Common.Headline { text: qsTr("Create a QML Wallpaper") + Layout.fillWidth: true } Common.HeadlineSection { diff --git a/ScreenPlay/qml/Create/Wizards/WebsiteWallpaper.qml b/ScreenPlay/qml/Create/Wizards/WebsiteWallpaper.qml index 58cbb2f5..b6c05eda 100644 --- a/ScreenPlay/qml/Create/Wizards/WebsiteWallpaper.qml +++ b/ScreenPlay/qml/Create/Wizards/WebsiteWallpaper.qml @@ -31,6 +31,7 @@ WizardPage { Common.Headline { text: qsTr("Create a Website Wallpaper") + Layout.fillWidth: true } Common.HeadlineSection { diff --git a/ScreenPlay/qml/Create/Wizards/WizardPage.qml b/ScreenPlay/qml/Create/Wizards/WizardPage.qml index 75af0c2d..726faa57 100644 --- a/ScreenPlay/qml/Create/Wizards/WizardPage.qml +++ b/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