[QgsQuick] Feature form improvements #2 (#9388)

TextEdit
* added radius property
QgsQuickFeatureFormStyling and ExternalResource widget - added optional color for trash icon
ExternalResource
* smaller icons
* preview available in read-only mode
FeatureForm
* fix of empty space for tabs which exists even if there are no tabs

Enabling widgets for interactions even in readOnly mode, still not edits! Changes due to introduction of a preview for externalResources widget, which should be available also in readOnly mode. Therefore the widget is always enabled.
NOTE: changed order of properties for widgets to keep the same order.

src/quickgui/plugin/editor/qgsquickcheckbox.qml

@@ -25,12 +25,13 @@ import QgsQuick 0.1 as QgsQuick
 Item {
   signal valueChanged( var value, bool isNull )
 
+  id: fieldItem
+  enabled: !readOnly
   height: childrenRect.height
   anchors {
     right: parent.right
     left: parent.left
   }
-  id: fieldItem
 
   CheckBox {
     property var currentValue: value

src/quickgui/plugin/editor/qgsquickdatetime.qml

@@ -28,6 +28,7 @@ Item {
     signal valueChanged(var value, bool isNull)
 
     id: fieldItem
+    enabled: !readOnly
     height: childrenRect.height
     anchors {
       left: parent.left

src/quickgui/plugin/editor/qgsquickexternalresource.qml

@@ -22,15 +22,18 @@ import QgsQuick 0.1 as QgsQuick
  * External Resource (Photo capture) for QGIS Attribute Form
  * Requires various global properties set to function, see qgsquickfeatureform Loader section
  * Do not use directly from Application QML
+ * The widget is interactive which allows interactions even in readOnly state (e.g showing preview), but no edit!
  */
 Item {
   signal valueChanged(var value, bool isNull)
 
   property var image: image
   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
 
   id: fieldItem
+  enabled: true // its interactive widget
   height: image.hasValidSource? customStyle.height * 3 : customStyle.height
   anchors {
     left: parent.left
@@ -53,7 +56,7 @@ Item {
 
     id: image
     height: fieldItem.height
-    sourceSize.height: height
+    sourceSize.height: image.hasValidSource? customStyle.height * 3 : fieldItem.iconSize
     autoTransform: true
     fillMode: Image.PreserveAspectFit
     visible: hasValidSource
@@ -93,8 +96,8 @@ Item {
 
   Button {
     id: deleteButton
-    visible: fieldItem.enabled && image.hasValidSource
-    width: customStyle.height
+    visible: !readOnly && image.hasValidSource
+    width: fieldItem.iconSize
     height: width
     padding: 0
 
@@ -117,14 +120,14 @@ Item {
     ColorOverlay {
         anchors.fill: deleteIcon
         source: deleteIcon
-        color: customStyle.fontColor
+        color: customStyle.attentionColor
     }
   }
 
   Button {
     id: imageBrowserButton
-    visible: fieldItem.enabled
-    width: customStyle.height
+    visible: !readOnly
+    width: fieldItem.iconSize
     height: width
     padding: 0
 
@@ -153,8 +156,8 @@ Item {
 
   Button {
     id: button
-    visible: fieldItem.enabled
-    width: customStyle.height
+    visible: !readOnly
+    width: fieldItem.iconSize
     height: width
     padding: 0
 

src/quickgui/plugin/editor/qgsquicktextedit.qml

@@ -28,15 +28,14 @@ Item {
   signal valueChanged(var value, bool isNull)
 
   id: fieldItem
-
+  enabled: !readOnly
+  height: childrenRect.height
   anchors {
     left: parent.left
     right: parent.right
     rightMargin: 10 * QgsQuick.Utils.dp
   }
 
-  height: childrenRect.height
-
   TextField {
     id: textField
     height: textArea.height == 0 ? customStyle.height : 0
@@ -92,6 +91,7 @@ Item {
 
     background: Rectangle {
         color: customStyle.backgroundColor
+        radius: customStyle.cornerRadius
     }
 
     onEditingFinished: {

src/quickgui/plugin/editor/qgsquickvaluemap.qml

@@ -25,16 +25,16 @@ import QgsQuick 0.1 as QgsQuick
  */
 Item {
   signal valueChanged(var value, bool isNull)
-  id: fieldItem
 
+  id: fieldItem
+  enabled: !readOnly
+  height: customStyle.height
   anchors {
     left: parent.left
     right: parent.right
     rightMargin: 10 * QgsQuick.Utils.dp
   }
 
-  height: customStyle.height
-
   ComboBox {
     id: comboBox
 

src/quickgui/plugin/qgsquickfeatureform.qml

@@ -170,7 +170,7 @@ Item {
         left: parent.left
         right: parent.right
       }
-      height: tabRow.height
+      height: form.model.hasTabs ? tabRow.height : 0
 
       flickableDirection: Flickable.HorizontalFlick
       contentWidth: tabRow.width
@@ -339,8 +339,6 @@ Item {
           height: childrenRect.height
           anchors { left: parent.left; right: parent.right }
 
-          enabled: form.state !== "ReadOnly" && !!AttributeEditable
-
           property var value: AttributeValue
           property var config: EditorWidgetConfig
           property var widget: EditorWidget
@@ -349,6 +347,7 @@ Item {
           property var homePath: form.project ? form.project.homePath : ""
           property var customStyle: form.style.fields
           property var externalResourceHandler: form.externalResourceHandler
+          property bool readOnly: form.state == "ReadOnly" || !AttributeEditable
 
           active: widget !== 'Hidden'
 

src/quickgui/plugin/qgsquickfeatureformstyling.qml

@@ -50,6 +50,7 @@ QtObject {
       property color backgroundColor: "lightGray"
       property color backgroundColorInactive: "lightGray"
       property color activeColor: "#1B5E20"
+      property color attentionColor: "red"
       property color normalColor: "#4CAF50"
       property real height: 48 * QgsQuick.Utils.dp
       property real cornerRadius: 0 * QgsQuick.Utils.dp