[QgsQuick] Customizable icons for external source widget

..and date time widget. Changes in other widgets due to passing a whole style object to components.

src/quickgui/plugin/components/qgsquickicontextitem.qml

@@ -5,6 +5,7 @@ import QgsQuick 0.1 as QgsQuick
 Item {
   property real iconSize
   property color fontColor
+  property real fontPixelSize: root.iconSize * 0.75
   property string iconSource
   property string labelText
 
@@ -32,7 +33,7 @@ Item {
     id: text
     height: root.iconSize
     text: root.labelText
-    font.pixelSize: root.iconSize * 0.75
+    font.pixelSize: root.fontPixelSize
     color: root.fontColor
     anchors.leftMargin: root.iconSize + fieldItem.textMargin
     x: root.iconSize + fieldItem.textMargin

src/quickgui/plugin/editor/qgsquickcheckbox.qml

@@ -35,21 +35,21 @@ Item {
 
   CheckBox {
     property var currentValue: value
-    height: customStyle.height
+    height: customStyle.fields.height
     id: checkBox
     leftPadding: 0
     checked: value == config['CheckedState']
 
     indicator: Rectangle {
-                implicitWidth: customStyle.height
-                implicitHeight: customStyle.height
-                radius: customStyle.cornerRadius
-                border.color: checkBox.activeFocus ? customStyle.fontColor : "grey"
+                implicitWidth: customStyle.fields.height
+                implicitHeight: customStyle.fields.height
+                radius: customStyle.fields.cornerRadius
+                border.color: checkBox.activeFocus ? customStyle.fields.fontColor : "grey"
                 border.width: 1
                 Rectangle {
                     visible: checkBox.checked
-                    color: customStyle.fontColor
-                    radius: customStyle.cornerRadius
+                    color: customStyle.fields.fontColor
+                    radius: customStyle.fields.cornerRadius
                     anchors.margins: 4
                     anchors.fill: parent
                 }

src/quickgui/plugin/editor/qgsquickdatetime.qml

@@ -48,21 +48,21 @@ Item {
 
         Item {
             Layout.fillWidth: true
-            Layout.minimumHeight: customStyle.height
+            Layout.minimumHeight: customStyle.fields.height
 
             TextField {
                 id: label
 
                 anchors.fill: parent
                 verticalAlignment: Text.AlignVCenter
-                font.pixelSize: customStyle.fontPixelSize
+                font.pixelSize: customStyle.fields.fontPixelSize
                 padding: 0
                 background: Rectangle {
-                    radius: customStyle.cornerRadius
+                    radius: customStyle.fields.cornerRadius
 
-                    border.color: label.activeFocus ? customStyle.activeColor : customStyle.normalColor
+                    border.color: label.activeFocus ? customStyle.fields.activeColor : customStyle.fields.normalColor
                     border.width: label.activeFocus ? 2 : 1
-                    color: customStyle.backgroundColor
+                    color: customStyle.fields.backgroundColor
                 }
 
                 inputMethodHints: Qt.ImhDigitsOnly
@@ -95,7 +95,7 @@ Item {
                       }
             }
 
-                color: main.currentValue === undefined ? 'transparent' : customStyle.fontColor
+                color: main.currentValue === undefined ? 'transparent' : customStyle.fields.fontColor
 
                 MouseArea {
                     enabled: config['calendar_popup']
@@ -146,7 +146,7 @@ Item {
                 sourceSize.height: fieldItem.iconSize
                 autoTransform: true
                 fillMode: Image.PreserveAspectFit
-                source: QgsQuick.Utils.getThemeIcon("ic_today")
+                source: customStyle.icons.today
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
                 visible: fieldItem.enabled
@@ -161,7 +161,7 @@ Item {
             ColorOverlay {
                 anchors.fill: todayBtn
                 source: todayBtn
-                color: customStyle.fontColor
+                color: customStyle.fields.fontColor
                 visible: todayBtn.visible
             }
         }
@@ -211,11 +211,11 @@ Item {
             if (main.currentValue === undefined)
             {
                 label.text = qsTr('(no date)')
-                label.color = customStyle.fontColor
+                label.color = customStyle.fields.fontColor
             }
             else
             {
-                label.color = customStyle.fontColor
+                label.color = customStyle.fields.fontColor
                 label.text = new Date(value).toLocaleString(Qt.locale(), config['display_format'] )
             }
         }

src/quickgui/plugin/editor/qgsquickexternalresource.qml

@@ -28,17 +28,17 @@ 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 var cameraIcon: customStyle.icons.camera
+  property var deleteIcon: customStyle.icons.remove
+  property var galleryIcon: customStyle.icons.gallery
+  property var brokenImageIcon: customStyle.icons.brokenImage
+  property var notAvailableImageIcon: customStyle.icons.notAvailable
+  property real iconSize:  customStyle.fields.height * 0.75
   property real textMargin: QgsQuick.Utils.dp * 10
 
   id: fieldItem
   enabled: true // its interactive widget
-  height: customStyle.height * 3
+  height: customStyle.fields.height * 3
   anchors {
     left: parent.left
     right: parent.right
@@ -66,15 +66,15 @@ Item {
     height: window.height
     width: window.width
     edge: Qt.RightEdge
-    imageButtonSize: customStyle.height
+    imageButtonSize: fieldItem.iconSize
   }
 
   Rectangle {
     id: imageContainer
     width: parent.width
-    height: customStyle.height * 3
-    color: customStyle.backgroundColor
-    radius: customStyle.cornerRadius
+    height: parent.height
+    color: customStyle.fields.backgroundColor
+    radius: customStyle.fields.cornerRadius
 
     Image {
       property var currentValue: value
@@ -145,7 +145,7 @@ Item {
     ColorOverlay {
       anchors.fill: deleteIcon
       source: deleteIcon
-      color: customStyle.attentionColor
+      color: customStyle.fields.attentionColor
     }
   }
 
@@ -159,7 +159,8 @@ Item {
     QgsQuick.IconTextItem {
       id: photoButton
       iconSize: fieldItem.iconSize
-      fontColor: customStyle.fontColor
+      fontColor: customStyle.fields.fontColor
+      fontPixelSize: fieldItem.iconSize/2
       iconSource: fieldItem.cameraIcon
       labelText: qsTr("Take a Photo")
 
@@ -180,7 +181,8 @@ Item {
     QgsQuick.IconTextItem {
       id: browseButton
       iconSize: fieldItem.iconSize
-      fontColor: customStyle.fontColor
+      fontColor: customStyle.fields.fontColor
+      fontPixelSize: fieldItem.iconSize/2
       iconSource: fieldItem.galleryIcon
       labelText: qsTr("Add From a Gallery")
 
@@ -198,8 +200,8 @@ Item {
     QgsQuick.IconTextItem {
       id: infoItem
       iconSize: fieldItem.iconSize/2
-      fontColor: customStyle.fontColor
-      iconSource: fieldItem.brokenImageSource
+      fontColor: customStyle.fields.fontColor
+      iconSource: fieldItem.brokenImageIcon
       labelText: qsTr("Image is broken: ") + image.currentValue
 
       visible: fieldItem.state === "broken" || fieldItem.state === "notAvailable"

src/quickgui/plugin/editor/qgsquicktextedit.qml

@@ -37,14 +37,14 @@ Item {
 
   TextField {
     id: textField
-    height: textArea.height == 0 ? customStyle.height : 0
+    height: textArea.height == 0 ? customStyle.fields.height : 0
     topPadding: 10 * QgsQuick.Utils.dp
     bottomPadding: 10 * QgsQuick.Utils.dp
     visible: height !== 0
     anchors.left: parent.left
     anchors.right: parent.right
-    font.pixelSize: customStyle.fontPixelSize
-    color: customStyle.fontColor
+    font.pixelSize: customStyle.fields.fontPixelSize
+    color: customStyle.fields.fontColor
 
     text: value || ''
     inputMethodHints: field.isNumeric || widget == 'Range' ? field.precision === 0 ? Qt.ImhDigitsOnly : Qt.ImhFormattedNumbersOnly : Qt.ImhNone
@@ -63,10 +63,10 @@ Item {
 
     background: Rectangle {
         anchors.fill: parent
-        border.color: textField.activeFocus ? customStyle.activeColor : customStyle.normalColor
+        border.color: textField.activeFocus ? customStyle.fields.activeColor : customStyle.fields.normalColor
         border.width: textField.activeFocus ? 2 : 1
-        color: customStyle.backgroundColor
-        radius: customStyle.cornerRadius
+        color: customStyle.fields.backgroundColor
+        radius: customStyle.fields.cornerRadius
     }
 
     onTextChanged: {
@@ -77,20 +77,20 @@ Item {
   TextArea {
     id: textArea
     height: config['IsMultiline'] === true ? undefined : 0
-    topPadding: customStyle.height * 0.25
-    bottomPadding: customStyle.height * 0.25
+    topPadding: customStyle.fields.height * 0.25
+    bottomPadding: customStyle.fields.height * 0.25
     visible: height !== 0
     anchors.left: parent.left
     anchors.right: parent.right
-    font.pixelSize: customStyle.fontPixelSize
+    font.pixelSize: customStyle.fields.fontPixelSize
     wrapMode: Text.Wrap
-    color: customStyle.fontColor
+    color: customStyle.fields.fontColor
     text: value || ''
     textFormat: config['UseHtml'] ? TextEdit.RichText : TextEdit.PlainText
 
     background: Rectangle {
-        color: customStyle.backgroundColor
-        radius: customStyle.cornerRadius
+        color: customStyle.fields.backgroundColor
+        radius: customStyle.fields.cornerRadius
     }
 
     onEditingFinished: {

src/quickgui/plugin/editor/qgsquickvaluemap.qml

@@ -28,7 +28,7 @@ Item {
 
   id: fieldItem
   enabled: !readOnly
-  height: customStyle.height
+  height: customStyle.fields.height
   anchors {
     left: parent.left
     right: parent.right
@@ -40,7 +40,7 @@ Item {
     property var reverseConfig: ({})
     property var currentValue: value
 
-    comboStyle: customStyle
+    comboStyle: customStyle.fields
     textRole: 'text'
     height: parent.height
     model: ListModel {

src/quickgui/plugin/editor/qgsquickvaluerelation.qml

@@ -42,7 +42,7 @@ Item {
     property var reversedMap: ({})
     property var currentValue: value
 
-    comboStyle: customStyle
+    comboStyle: customStyle.fields
     textRole: 'text'
     height: parent.height
     model: ListModel {

src/quickgui/plugin/qgsquickfeatureform.qml

@@ -373,7 +373,7 @@ Item {
           property var field: Field
           property var constraintValid: ConstraintValid
           property var homePath: form.project ? form.project.homePath : ""
-          property var customStyle: form.style.fields
+          property var customStyle: form.style
           property var externalResourceHandler: form.externalResourceHandler
           property bool readOnly: form.state == "ReadOnly" || !AttributeEditable
 

src/quickgui/plugin/qgsquickfeatureformstyling.qml

@@ -71,4 +71,14 @@ QtObject {
       property int fontPixelSize: 48 * QgsQuick.Utils.dp
 
     }
+
+  property QtObject icons: QtObject {
+    property var camera: QgsQuick.Utils.getThemeIcon("ic_camera")
+    property var remove: QgsQuick.Utils.getThemeIcon("ic_delete_forever_white")
+    property var gallery: QgsQuick.Utils.getThemeIcon("ic_gallery")
+    property var brokenImage: QgsQuick.Utils.getThemeIcon("ic_broken_image_black")
+    property var notAvailable: QgsQuick.Utils.getThemeIcon("ic_photo_notavailable_white")
+    property var today: QgsQuick.Utils.getThemeIcon("ic_today")
+  }
+
 }