added static image page widgets

This commit is contained in:
Andrei Yankovich 2020-10-09 22:10:53 +03:00
parent b4b9368f41
commit c37366eb19
12 changed files with 243 additions and 74 deletions

View File

@ -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 <i>html code</i>"
}

View File

@ -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 <i>html code</i>"
}
}
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",
]
}
}

View File

@ -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 <i>html code</i>"
}

View File

@ -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" }
}

View File

@ -5,6 +5,7 @@
<file>qtquickcontrols2.conf</file>
<file>ViewPortContainerPage.qml</file>
<file>VPGradientPage.qml</file>
<file>VPStaticGradientPage.qml</file>
</qresource>
<qresource prefix="/img">
<file>res/LOGO.png</file>

View File

@ -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

View File

@ -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
}

View File

@ -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;
}
}
}
}
}

View File

@ -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
}
}
}
}

View File

@ -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
}
}

View File

@ -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

View File

@ -5,6 +5,9 @@
<file>ViewSolutionsModule/ViewPortDelegatBase.qml</file>
<file>ViewSolutionsModule/ViewPortPage.qml</file>
<file>ViewSolutionsModule/ViewPortGradientPage.qml</file>
<file>ViewSolutionsModule/ViewPortStaticPage.qml</file>
<file>ViewSolutionsModule/ViewPortStaticGradientPage.qml</file>
<file>ViewSolutionsModule/ViewSolutionsControl.qml</file>
</qresource>
<qresource prefix="/img"/>
</RCC>