From c37366eb192d87b5c95b43e0c51c24d3e53ef395 Mon Sep 17 00:00:00 2001 From: EndrII Date: Fri, 9 Oct 2020 22:10:53 +0300 Subject: [PATCH] added static image page widgets --- Examples/src/VPGradientPage.qml | 1 + Examples/src/VPStaticGradientPage.qml | 47 ++++++++ Examples/src/ViewPortContainerPage.qml | 2 + Examples/src/main.qml | 1 + Examples/src/res.qrc | 1 + .../ViewPortDelegatBase.qml | 77 +----------- .../ViewPortGradientPage.qml | 3 +- .../ViewPortStaticGradientPage.qml | 39 ++++++ .../ViewPortStaticPage.qml | 111 ++++++++++++++++++ .../ViewSolutionsControl.qml | 30 +++++ ViewSolutions/src/ViewSolutionsModule/qmldir | 2 + ViewSolutions/src/ViewSolutionsResources.qrc | 3 + 12 files changed, 243 insertions(+), 74 deletions(-) create mode 100644 Examples/src/VPStaticGradientPage.qml create mode 100644 ViewSolutions/src/ViewSolutionsModule/ViewPortStaticGradientPage.qml create mode 100644 ViewSolutions/src/ViewSolutionsModule/ViewPortStaticPage.qml create mode 100644 ViewSolutions/src/ViewSolutionsModule/ViewSolutionsControl.qml diff --git a/Examples/src/VPGradientPage.qml b/Examples/src/VPGradientPage.qml index 3f33ef8..b5e8d13 100644 --- a/Examples/src/VPGradientPage.qml +++ b/Examples/src/VPGradientPage.qml @@ -16,6 +16,7 @@ Page { scrollPos: viewPort.globalPos source: modelData viewground: root + height: root.height / 3 title: "Test ViewPortPage" text: "Test ViewPortPage. General text and html code" } diff --git a/Examples/src/VPStaticGradientPage.qml b/Examples/src/VPStaticGradientPage.qml new file mode 100644 index 0000000..97fea82 --- /dev/null +++ b/Examples/src/VPStaticGradientPage.qml @@ -0,0 +1,47 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Controls.Material 2.15 + +import ViewSolutionsModule 1.0 + +Page { + id: root + + ListView { + id: viewPort + property real globalPos: 0 + anchors.fill: parent + delegate: Component { + ViewPortStaticGradientPage { + source: modelData + height: root.height / 3 + width: viewPort.width + title: "Test ViewPortPage" + text: "Test ViewPortPage. General text and html code" + } + } + + model: [ + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + ] + } +} diff --git a/Examples/src/ViewPortContainerPage.qml b/Examples/src/ViewPortContainerPage.qml index 0784a9e..9c58a87 100644 --- a/Examples/src/ViewPortContainerPage.qml +++ b/Examples/src/ViewPortContainerPage.qml @@ -16,6 +16,8 @@ Page { scrollPos: viewPort.globalPos source: modelData viewground: root + height: root.height / 3 + title: "Test ViewPortPage" text: "Test ViewPortPage. General text and html code" } diff --git a/Examples/src/main.qml b/Examples/src/main.qml index 9004ab2..7f29de9 100644 --- a/Examples/src/main.qml +++ b/Examples/src/main.qml @@ -84,6 +84,7 @@ ApplicationWindow { ListElement { title: "ImageView"; source: "qrc:/ImageViewPage.qml" } ListElement { title: "ViewPortContainer"; source: "qrc:/ViewPortContainerPage.qml" } ListElement { title: "ViewPortGradientPage"; source: "qrc:/VPGradientPage.qml" } + ListElement { title: "ViewPortStaticGradientPage"; source: "qrc:/VPStaticGradientPage.qml" } } diff --git a/Examples/src/res.qrc b/Examples/src/res.qrc index 5bcd8fe..a22c743 100644 --- a/Examples/src/res.qrc +++ b/Examples/src/res.qrc @@ -5,6 +5,7 @@ qtquickcontrols2.conf ViewPortContainerPage.qml VPGradientPage.qml + VPStaticGradientPage.qml res/LOGO.png diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml index 5db4c5c..58b359c 100644 --- a/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml @@ -4,20 +4,11 @@ import QtQuick.Controls 2.15 import QtQuick.Controls.Material 2.15 import QtQuick.Controls.Universal 2.15 -Item { +ViewSolutionsControl { id: delegateItem property string source: "" property alias imageSource: image - property var background: Rectangle { - border.color: "black" - anchors.fill: parent - color: "#00000000" - - } - - property var bloor: Item { - } property var viewground: null property real scrollPos: 0 @@ -31,20 +22,11 @@ Item { property int viewPortDelegatW: 0 property int viewPortDelegatH: 0 - property var content: Item { + + background: Rectangle { + border.color: "black" anchors.fill: parent - } - - onBackgroundChanged:{ - updateLayout() - } - - onContentChanged:{ - updateLayout() - } - - onBloorChanged:{ - updateLayout() + color: "#00000000" } width: (viewPortDelegatW)? viewPortDelegatW: (viewground)? viewground.width : 0 @@ -66,58 +48,9 @@ Item { flickable.contentY = -img.y; } - function updateLayout() { - - - if (background !== flickable.backgroundOld) { - if (flickable.backgroundOld) { - flickable.backgroundOld.parent = null - } - - background.parent = this; - background.anchors.fill = this; - background.z = 0; - flickable.backgroundOld = background - } - - flickable.z = 1; - - if (bloor !== flickable.bloorOld) { - if (flickable.bloorOld) { - flickable.bloorOld.parent = null - - } - bloor.parent = this; - bloor.anchors.fill = this; - bloor.z = 2; - flickable.bloorOld = bloor - - } - - if (content !== flickable.contentOld) { - if (flickable.contentOld) { - flickable.contentOld.parent = null - - } - content.parent = this; - content.anchors.fill = this; - content.z = 3; - flickable.contentOld = content - - } - } - Flickable { id: flickable - property var backgroundOld: Item { - } - property var bloorOld: Item { - } - property var contentOld: Item { - } - - contentWidth: viewground.width contentHeight: viewground.height clip: true diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortGradientPage.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortGradientPage.qml index ebeca96..bb7b8ec 100644 --- a/ViewSolutions/src/ViewSolutionsModule/ViewPortGradientPage.qml +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortGradientPage.qml @@ -14,13 +14,12 @@ ViewPortPage { function onStatusChanged(status) { if (status === Image.Ready) { - bacground.color = colorPicker.pick(source); + background.color = colorPicker.pick(source); } } } background: Rectangle { - id: bacground color: colorPicker.pick(source) radius: 16 } diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticGradientPage.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticGradientPage.qml new file mode 100644 index 0000000..126f91d --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticGradientPage.qml @@ -0,0 +1,39 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 +import QtQuick.Controls.Material 2.15 +import QtQuick.Controls.Universal 2.15 +import QtGraphicalEffects 1.15 + +ViewPortStaticPage { + + bloor: Item { + id: privateRoot + clip: true + + property var theme: Material.theme + + Rectangle { + rotation: -90 + + anchors.centerIn: privateRoot + radius: background.radius + + height: privateRoot.width + width: privateRoot.height + + gradient: Gradient { + GradientStop { + position: 0.50; + color: "#ff"+ baseColor; + } + + GradientStop { + position: 0.70; + color: "#00" + baseColor; + } + } + } + + } +} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticPage.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticPage.qml new file mode 100644 index 0000000..69dbc0b --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortStaticPage.qml @@ -0,0 +1,111 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 +import QtQuick.Controls.Material 2.15 +import QtQuick.Controls.Universal 2.15 +import QtGraphicalEffects 1.15 + +ViewSolutionsControl { + + id: root + + property string source: "" + property alias imageSource: image + + property var theme: Material.theme + property string baseLigtColor: "fafafa" + property string baseDarkColor: "242424" + property string baseColor: (theme === Material.Dark)? baseDarkColor: baseLigtColor + property int margins: 5 + + property int textMargins: 10 + property int sourceTextPointSize: 20 + property int headerTextPointSize: 32 + + property alias title: header.text + property alias text: sourceText.text + property alias headerFontColor: header.color + property alias fontColor: sourceText.color + + Connections { + target: imageSource + + function onStatusChanged(status) { + if (status === Image.Ready) { + background.color = colorPicker.pick(source); + } + } + } + + background: Rectangle { + anchors.fill: parent + color: colorPicker.pick(root.source); + + + Image { + id: image; + source: root.source + + fillMode: Image.PreserveAspectFit + anchors.right: parent.right + anchors.margins: margins + anchors.top: parent.top + anchors.bottom: parent.bottom + width: (parent.width / 2) - margins * 2 + } + + } + + content: Item { + id: privatePage + + clip: true + Label { + id: header + font.bold: true + font.pointSize: headerTextPointSize + + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WordWrap + clip: true + height: paintedHeight + + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: textMargins + + layer.effect: DropShadow { + verticalOffset: 2 + color: "#80000000" + radius: 1 + samples: 3 + } + } + + Label { + id: sourceText + font.bold: false + font.pointSize: sourceTextPointSize + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + width: parent.width / 2 + + wrapMode: Text.WordWrap + anchors.bottom: parent.bottom + anchors.top: header.bottom + anchors.left: parent.left + anchors.horizontalCenter: parent.Center + anchors.margins: textMargins + + layer.enabled: true + layer.effect: DropShadow { + verticalOffset: 2 + color: "#80000000" + radius: 1 + samples: 3 + } + } + } +} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewSolutionsControl.qml b/ViewSolutions/src/ViewSolutionsModule/ViewSolutionsControl.qml new file mode 100644 index 0000000..37f5c59 --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/ViewSolutionsControl.qml @@ -0,0 +1,30 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 +import QtQuick.Controls.Material 2.15 +import QtQuick.Controls.Universal 2.15 + + +Item { + property alias background: backgroudFrame.contentItem + property alias bloor: bloorFrame.contentItem + property alias content: contentFrame.contentItem + + Control { + id: backgroudFrame + anchors.fill: parent; + z: 0 + } + + Control { + id: bloorFrame + anchors.fill: parent; + z: 1 + } + + Control { + id: contentFrame + anchors.fill: parent; + z: 2 + } +} diff --git a/ViewSolutions/src/ViewSolutionsModule/qmldir b/ViewSolutions/src/ViewSolutionsModule/qmldir index 7920bcd..07e46e3 100644 --- a/ViewSolutions/src/ViewSolutionsModule/qmldir +++ b/ViewSolutions/src/ViewSolutionsModule/qmldir @@ -3,3 +3,5 @@ ImageView 1.0 ImageView.qml ViewPortDelegatBase 1.0 ViewPortDelegatBase.qml ViewPortPage 1.0 ViewPortPage.qml ViewPortGradientPage 1.0 ViewPortGradientPage.qml +ViewPortStaticPage 1.0 ViewPortStaticPage.qml +ViewPortStaticGradientPage 1.0 ViewPortStaticGradientPage.qml diff --git a/ViewSolutions/src/ViewSolutionsResources.qrc b/ViewSolutions/src/ViewSolutionsResources.qrc index 2e430d2..2431968 100644 --- a/ViewSolutions/src/ViewSolutionsResources.qrc +++ b/ViewSolutions/src/ViewSolutionsResources.qrc @@ -5,6 +5,9 @@ ViewSolutionsModule/ViewPortDelegatBase.qml ViewSolutionsModule/ViewPortPage.qml ViewSolutionsModule/ViewPortGradientPage.qml + ViewSolutionsModule/ViewPortStaticPage.qml + ViewSolutionsModule/ViewPortStaticGradientPage.qml + ViewSolutionsModule/ViewSolutionsControl.qml