Skip to content
Permalink
Browse files

[QgsQuick] Updated external resource widget

It has been enlarged, button changed
Added a new component qgsquickicontextitem
  • Loading branch information
vsklencar authored and wonder-sk committed Apr 16, 2019
1 parent dc0877c commit a337758035a674764bc32f84e29a6a8b411617ff
@@ -10,6 +10,7 @@ SET(QGIS_QUICK_PLUGIN_SRC
)

SET(QGIS_QUICK_PLUGIN_RESOURCES
components/qgsquickicontextitem.qml
editor/qgsquickeditorwidgetcombobox.qml
editor/qgsquickcheckbox.qml
editor/qgsquickdatetime.qml
@@ -0,0 +1,42 @@
import QtQuick 2.5
import QtGraphicalEffects 1.0
import QgsQuick 0.1 as QgsQuick

Item {
property real iconSize
property color fontColor
property string iconSource
property string labelText

id: root
width: root.iconSize + text.width
height: root.iconSize

Image {
id: icon
source: root.iconSource
width: root.iconSize
height: root.iconSize
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
}

ColorOverlay {
anchors.fill: icon
source: icon
color: root.fontColor
}

Text {
id: text
height: root.iconSize
text: root.labelText
font.pixelSize: root.iconSize * 0.75
color: root.fontColor
anchors.leftMargin: root.iconSize + fieldItem.textMargin
x: root.iconSize + fieldItem.textMargin
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
}
@@ -28,19 +28,38 @@ Item {
signal valueChanged(var value, bool isNull)

property var image: image
property var cameraIcon: QgsQuick.Utils.getThemeIcon("ic_camera")
property var deleteIcon: QgsQuick.Utils.getThemeIcon("ic_delete_forever_white")
property var galleryIcon: QgsQuick.Utils.getThemeIcon("ic_gallery")
property var brokenImageSource: QgsQuick.Utils.getThemeIcon("ic_broken_image_black")
property var notavailableImageSource: QgsQuick.Utils.getThemeIcon("ic_photo_notavailable_white")
property real iconSize: customStyle.height * 0.75
property real textMargin: QgsQuick.Utils.dp * 10

id: fieldItem
enabled: true // its interactive widget
height: image.hasValidSource? customStyle.height * 3 : customStyle.height
height: customStyle.height * 3
anchors {
left: parent.left
right: parent.right
rightMargin: 10 * QgsQuick.Utils.dp
}

states: [
State {
name: "valid"
},
State {
name: "notSet"
},
State {
name: "broken"
},
State {
name: "notAvailable"
}
]

QgsQuick.PhotoCapture {
id: photoCapturePanel
visible: false
@@ -50,66 +69,72 @@ Item {
imageButtonSize: customStyle.height
}

Image {
property var currentValue: value
property bool hasValidSource: false
Rectangle {
id: imageContainer
width: parent.width
height: customStyle.height * 3
color: customStyle.backgroundColor
radius: customStyle.cornerRadius

id: image
height: fieldItem.height
sourceSize.height: image.hasValidSource? customStyle.height * 3 : fieldItem.iconSize
autoTransform: true
fillMode: Image.PreserveAspectFit
visible: hasValidSource
Image {
property var currentValue: value

MouseArea {
id: image
height: imageContainer.height
sourceSize.height: imageContainer.height
autoTransform: true
fillMode: Image.PreserveAspectFit
visible: fieldItem.state === "valid"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter

MouseArea {
anchors.fill: parent
onClicked: externalResourceHandler.previewImage(homePath + "/" + image.currentValue)
}
}

onCurrentValueChanged: {
onCurrentValueChanged: {
image.source = image.getSource()
}

Component.onCompleted: image.source = getSource()

function getSource() {
if (image.status === Image.Error) {
fieldItem.state = "broken"
return ""
}
else if (image.currentValue && QgsQuick.Utils.fileExists(homePath + "/" + image.currentValue)) {
fieldItem.state = "valid"
return homePath + "/" + image.currentValue
}
else if (!image.currentValue) {
fieldItem.state = "notSet"
return ""
}
else {
fieldItem.state = "notAvailable"
return homePath + "/" + image.currentValue
}
}
}

onSourceChanged: {
hasValidSource = (image.source === fieldItem.brokenImageSource ||
image.source === fieldItem.notavailableImageSource) ? false : true
}

Component.onCompleted: image.source = getSource()

function getSource() {
if (image.status === Image.Error)
return fieldItem.brokenImageSource
else if (image.currentValue && QgsQuick.Utils.fileExists(homePath + "/" + image.currentValue))
return homePath + "/" + image.currentValue
else
return fieldItem.notavailableImageSource
}
}

ColorOverlay {
anchors.fill: image
source: image
color: customStyle.fontColor
visible: !image.hasValidSource
}

Button {
id: deleteButton
visible: !readOnly && image.hasValidSource
visible: !readOnly && fieldItem.state === "valid"
width: fieldItem.iconSize
height: width
padding: 0

anchors.right: imageBrowserButton.left
anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter
anchors.right: imageContainer.right
anchors.bottom: imageContainer.bottom

onClicked: externalResourceHandler.removeImage(fieldItem, homePath + "/" + image.currentValue)

background: Image {
id: deleteIcon
source: QgsQuick.Utils.getThemeIcon("ic_delete_forever_white")
source: fieldItem.deleteIcon
width: deleteButton.width
height: deleteButton.height
sourceSize.width: width
@@ -118,73 +143,71 @@ Item {
}

ColorOverlay {
anchors.fill: deleteIcon
source: deleteIcon
color: customStyle.attentionColor
anchors.fill: deleteIcon
source: deleteIcon
color: customStyle.attentionColor
}
}

Button {
id: imageBrowserButton
visible: !readOnly
width: fieldItem.iconSize
height: width
padding: 0

anchors.right: button.left
anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter

onClicked:externalResourceHandler.chooseImage(fieldItem)

background: Image {
id: browseIcon
source: QgsQuick.Utils.getThemeIcon("ic_gallery")
width: imageBrowserButton.width
height: imageBrowserButton.height
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
}

ColorOverlay {
anchors.fill: browseIcon
source: browseIcon
color: customStyle.fontColor
Item {
id: buttonsContainer
anchors.centerIn: imageContainer
anchors.fill: imageContainer
anchors.margins: 10
visible: fieldItem.state !== "valid"

QgsQuick.IconTextItem {
id: photoButton
iconSize: fieldItem.iconSize
fontColor: customStyle.fontColor
iconSource: fieldItem.cameraIcon
labelText: qsTr("Take a Photo")

visible: !readOnly && fieldItem.state !== " valid"
height: fieldItem.iconSize
anchors.horizontalCenter: parent.horizontalCenter

MouseArea {
anchors.fill: parent
onClicked: {
photoCapturePanel.visible = true
photoCapturePanel.targetDir = homePath
photoCapturePanel.fieldItem = fieldItem
}
}
}
}

Button {
id: button
visible: !readOnly
width: fieldItem.iconSize
height: width
padding: 0
QgsQuick.IconTextItem {
id: browseButton
iconSize: fieldItem.iconSize
fontColor: customStyle.fontColor
iconSource: fieldItem.galleryIcon
labelText: qsTr("Add From a Gallery")

anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter
visible: !readOnly && fieldItem.state !== " valid"
height: fieldItem.iconSize
anchors.top: photoButton.bottom
anchors.horizontalCenter: parent.horizontalCenter

onClicked: {
photoCapturePanel.visible = true
photoCapturePanel.targetDir = homePath
photoCapturePanel.fieldItem = fieldItem
MouseArea {
anchors.fill: parent
onClicked: externalResourceHandler.chooseImage(fieldItem)
}
}

background: Image {
id: cameraIcon
source: QgsQuick.Utils.getThemeIcon("ic_camera")
width: button.width
height: button.height
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
}
QgsQuick.IconTextItem {
id: infoItem
iconSize: fieldItem.iconSize/2
fontColor: customStyle.fontColor
iconSource: fieldItem.brokenImageSource
labelText: qsTr("Image is broken: ") + image.currentValue

visible: fieldItem.state === "broken" || fieldItem.state === "notAvailable"
height: fieldItem.iconSize/2
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter

ColorOverlay {
anchors.fill: cameraIcon
source: cameraIcon
color: customStyle.fontColor
}
}

}
@@ -15,6 +15,7 @@ plugin qgis_quick_plugin

# suppose to be used only internaly in QgsQuick plugin
EditorWidgetComboBox 0.1 qgsquickeditorwidgetcombobox.qml
IconTextItem 0.1 qgsquickicontextitem.qml

MapCanvas 0.1 qgsquickmapcanvas.qml
FeatureForm 0.1 qgsquickfeatureform.qml

0 comments on commit a337758

Please sign in to comment.
You can’t perform that action at this time.