Skip to content

Commit a337758

Browse files
vsklencarwonder-sk
vsklencar
authored and
wonder-sk
committed
[QgsQuick] Updated external resource widget
It has been enlarged, button changed Added a new component qgsquickicontextitem
1 parent dc0877c commit a337758

File tree

4 files changed

+165
-98
lines changed

4 files changed

+165
-98
lines changed

‎src/quickgui/plugin/CMakeLists.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ SET(QGIS_QUICK_PLUGIN_SRC
1010
)
1111

1212
SET(QGIS_QUICK_PLUGIN_RESOURCES
13+
components/qgsquickicontextitem.qml
1314
editor/qgsquickeditorwidgetcombobox.qml
1415
editor/qgsquickcheckbox.qml
1516
editor/qgsquickdatetime.qml

‎src/quickgui/plugin/components/qgsquickicontextitem.qml

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import QtQuick 2.5
2+
import QtGraphicalEffects 1.0
3+
import QgsQuick 0.1 as QgsQuick
4+
5+
Item {
6+
property real iconSize
7+
property color fontColor
8+
property string iconSource
9+
property string labelText
10+
11+
id: root
12+
width: root.iconSize + text.width
13+
height: root.iconSize
14+
15+
Image {
16+
id: icon
17+
source: root.iconSource
18+
width: root.iconSize
19+
height: root.iconSize
20+
sourceSize.width: width
21+
sourceSize.height: height
22+
fillMode: Image.PreserveAspectFit
23+
}
24+
25+
ColorOverlay {
26+
anchors.fill: icon
27+
source: icon
28+
color: root.fontColor
29+
}
30+
31+
Text {
32+
id: text
33+
height: root.iconSize
34+
text: root.labelText
35+
font.pixelSize: root.iconSize * 0.75
36+
color: root.fontColor
37+
anchors.leftMargin: root.iconSize + fieldItem.textMargin
38+
x: root.iconSize + fieldItem.textMargin
39+
horizontalAlignment: Text.AlignRight
40+
verticalAlignment: Text.AlignVCenter
41+
}
42+
}

‎src/quickgui/plugin/editor/qgsquickexternalresource.qml

Lines changed: 121 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,38 @@ Item {
2828
signal valueChanged(var value, bool isNull)
2929

3030
property var image: image
31+
property var cameraIcon: QgsQuick.Utils.getThemeIcon("ic_camera")
32+
property var deleteIcon: QgsQuick.Utils.getThemeIcon("ic_delete_forever_white")
33+
property var galleryIcon: QgsQuick.Utils.getThemeIcon("ic_gallery")
3134
property var brokenImageSource: QgsQuick.Utils.getThemeIcon("ic_broken_image_black")
3235
property var notavailableImageSource: QgsQuick.Utils.getThemeIcon("ic_photo_notavailable_white")
3336
property real iconSize: customStyle.height * 0.75
37+
property real textMargin: QgsQuick.Utils.dp * 10
3438

3539
id: fieldItem
3640
enabled: true // its interactive widget
37-
height: image.hasValidSource? customStyle.height * 3 : customStyle.height
41+
height: customStyle.height * 3
3842
anchors {
3943
left: parent.left
4044
right: parent.right
4145
rightMargin: 10 * QgsQuick.Utils.dp
4246
}
4347

48+
states: [
49+
State {
50+
name: "valid"
51+
},
52+
State {
53+
name: "notSet"
54+
},
55+
State {
56+
name: "broken"
57+
},
58+
State {
59+
name: "notAvailable"
60+
}
61+
]
62+
4463
QgsQuick.PhotoCapture {
4564
id: photoCapturePanel
4665
visible: false
@@ -50,66 +69,72 @@ Item {
5069
imageButtonSize: customStyle.height
5170
}
5271

53-
Image {
54-
property var currentValue: value
55-
property bool hasValidSource: false
72+
Rectangle {
73+
id: imageContainer
74+
width: parent.width
75+
height: customStyle.height * 3
76+
color: customStyle.backgroundColor
77+
radius: customStyle.cornerRadius
5678

57-
id: image
58-
height: fieldItem.height
59-
sourceSize.height: image.hasValidSource? customStyle.height * 3 : fieldItem.iconSize
60-
autoTransform: true
61-
fillMode: Image.PreserveAspectFit
62-
visible: hasValidSource
79+
Image {
80+
property var currentValue: value
6381

64-
MouseArea {
82+
id: image
83+
height: imageContainer.height
84+
sourceSize.height: imageContainer.height
85+
autoTransform: true
86+
fillMode: Image.PreserveAspectFit
87+
visible: fieldItem.state === "valid"
88+
anchors.verticalCenter: parent.verticalCenter
89+
anchors.horizontalCenter: parent.horizontalCenter
90+
91+
MouseArea {
6592
anchors.fill: parent
6693
onClicked: externalResourceHandler.previewImage(homePath + "/" + image.currentValue)
67-
}
94+
}
6895

69-
onCurrentValueChanged: {
96+
onCurrentValueChanged: {
7097
image.source = image.getSource()
98+
}
99+
100+
Component.onCompleted: image.source = getSource()
101+
102+
function getSource() {
103+
if (image.status === Image.Error) {
104+
fieldItem.state = "broken"
105+
return ""
106+
}
107+
else if (image.currentValue && QgsQuick.Utils.fileExists(homePath + "/" + image.currentValue)) {
108+
fieldItem.state = "valid"
109+
return homePath + "/" + image.currentValue
110+
}
111+
else if (!image.currentValue) {
112+
fieldItem.state = "notSet"
113+
return ""
114+
}
115+
else {
116+
fieldItem.state = "notAvailable"
117+
return homePath + "/" + image.currentValue
118+
}
119+
}
71120
}
72-
73-
onSourceChanged: {
74-
hasValidSource = (image.source === fieldItem.brokenImageSource ||
75-
image.source === fieldItem.notavailableImageSource) ? false : true
76-
}
77-
78-
Component.onCompleted: image.source = getSource()
79-
80-
function getSource() {
81-
if (image.status === Image.Error)
82-
return fieldItem.brokenImageSource
83-
else if (image.currentValue && QgsQuick.Utils.fileExists(homePath + "/" + image.currentValue))
84-
return homePath + "/" + image.currentValue
85-
else
86-
return fieldItem.notavailableImageSource
87-
}
88-
}
89-
90-
ColorOverlay {
91-
anchors.fill: image
92-
source: image
93-
color: customStyle.fontColor
94-
visible: !image.hasValidSource
95121
}
96122

97123
Button {
98124
id: deleteButton
99-
visible: !readOnly && image.hasValidSource
125+
visible: !readOnly && fieldItem.state === "valid"
100126
width: fieldItem.iconSize
101127
height: width
102128
padding: 0
103129

104-
anchors.right: imageBrowserButton.left
105-
anchors.bottom: parent.bottom
106-
anchors.verticalCenter: parent.verticalCenter
130+
anchors.right: imageContainer.right
131+
anchors.bottom: imageContainer.bottom
107132

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

110135
background: Image {
111136
id: deleteIcon
112-
source: QgsQuick.Utils.getThemeIcon("ic_delete_forever_white")
137+
source: fieldItem.deleteIcon
113138
width: deleteButton.width
114139
height: deleteButton.height
115140
sourceSize.width: width
@@ -118,73 +143,71 @@ Item {
118143
}
119144

120145
ColorOverlay {
121-
anchors.fill: deleteIcon
122-
source: deleteIcon
123-
color: customStyle.attentionColor
146+
anchors.fill: deleteIcon
147+
source: deleteIcon
148+
color: customStyle.attentionColor
124149
}
125150
}
126151

127-
Button {
128-
id: imageBrowserButton
129-
visible: !readOnly
130-
width: fieldItem.iconSize
131-
height: width
132-
padding: 0
133-
134-
anchors.right: button.left
135-
anchors.bottom: parent.bottom
136-
anchors.verticalCenter: parent.verticalCenter
137-
138-
onClicked:externalResourceHandler.chooseImage(fieldItem)
139-
140-
background: Image {
141-
id: browseIcon
142-
source: QgsQuick.Utils.getThemeIcon("ic_gallery")
143-
width: imageBrowserButton.width
144-
height: imageBrowserButton.height
145-
sourceSize.width: width
146-
sourceSize.height: height
147-
fillMode: Image.PreserveAspectFit
148-
}
149-
150-
ColorOverlay {
151-
anchors.fill: browseIcon
152-
source: browseIcon
153-
color: customStyle.fontColor
152+
Item {
153+
id: buttonsContainer
154+
anchors.centerIn: imageContainer
155+
anchors.fill: imageContainer
156+
anchors.margins: 10
157+
visible: fieldItem.state !== "valid"
158+
159+
QgsQuick.IconTextItem {
160+
id: photoButton
161+
iconSize: fieldItem.iconSize
162+
fontColor: customStyle.fontColor
163+
iconSource: fieldItem.cameraIcon
164+
labelText: qsTr("Take a Photo")
165+
166+
visible: !readOnly && fieldItem.state !== " valid"
167+
height: fieldItem.iconSize
168+
anchors.horizontalCenter: parent.horizontalCenter
169+
170+
MouseArea {
171+
anchors.fill: parent
172+
onClicked: {
173+
photoCapturePanel.visible = true
174+
photoCapturePanel.targetDir = homePath
175+
photoCapturePanel.fieldItem = fieldItem
176+
}
177+
}
154178
}
155-
}
156179

157-
Button {
158-
id: button
159-
visible: !readOnly
160-
width: fieldItem.iconSize
161-
height: width
162-
padding: 0
180+
QgsQuick.IconTextItem {
181+
id: browseButton
182+
iconSize: fieldItem.iconSize
183+
fontColor: customStyle.fontColor
184+
iconSource: fieldItem.galleryIcon
185+
labelText: qsTr("Add From a Gallery")
163186

164-
anchors.right: parent.right
165-
anchors.bottom: parent.bottom
166-
anchors.verticalCenter: parent.verticalCenter
187+
visible: !readOnly && fieldItem.state !== " valid"
188+
height: fieldItem.iconSize
189+
anchors.top: photoButton.bottom
190+
anchors.horizontalCenter: parent.horizontalCenter
167191

168-
onClicked: {
169-
photoCapturePanel.visible = true
170-
photoCapturePanel.targetDir = homePath
171-
photoCapturePanel.fieldItem = fieldItem
192+
MouseArea {
193+
anchors.fill: parent
194+
onClicked: externalResourceHandler.chooseImage(fieldItem)
195+
}
172196
}
173197

174-
background: Image {
175-
id: cameraIcon
176-
source: QgsQuick.Utils.getThemeIcon("ic_camera")
177-
width: button.width
178-
height: button.height
179-
sourceSize.width: width
180-
sourceSize.height: height
181-
fillMode: Image.PreserveAspectFit
182-
}
198+
QgsQuick.IconTextItem {
199+
id: infoItem
200+
iconSize: fieldItem.iconSize/2
201+
fontColor: customStyle.fontColor
202+
iconSource: fieldItem.brokenImageSource
203+
labelText: qsTr("Image is broken: ") + image.currentValue
204+
205+
visible: fieldItem.state === "broken" || fieldItem.state === "notAvailable"
206+
height: fieldItem.iconSize/2
207+
anchors.bottom: parent.bottom
208+
anchors.horizontalCenter: parent.horizontalCenter
183209

184-
ColorOverlay {
185-
anchors.fill: cameraIcon
186-
source: cameraIcon
187-
color: customStyle.fontColor
188210
}
189211
}
212+
190213
}

‎src/quickgui/plugin/qmldir

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ plugin qgis_quick_plugin
1515

1616
# suppose to be used only internaly in QgsQuick plugin
1717
EditorWidgetComboBox 0.1 qgsquickeditorwidgetcombobox.qml
18+
IconTextItem 0.1 qgsquickicontextitem.qml
1819

1920
MapCanvas 0.1 qgsquickmapcanvas.qml
2021
FeatureForm 0.1 qgsquickfeatureform.qml

0 commit comments

Comments
 (0)