[QgsQuick] Modified Checkbox widget

Replaced checkbox with switch.
Registered QVariant::Type to recognize field type. When value was empty/not set, it wasn't clear what is a type of field. It caused wrong behavior while setting default un/checked state.

Author: vsklencar

src/quickgui/plugin/editor/qgsquickcheckbox.qml

@@ -13,7 +13,7 @@
  *                                                                         *
  ***************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.6
 import QtQuick.Controls 2.2
 import QgsQuick 0.1 as QgsQuick
 
@@ -25,60 +25,82 @@ import QgsQuick 0.1 as QgsQuick
 Item {
   signal valueChanged( var value, bool isNull )
 
-  /**
-   * Handling missing config value for un/checked state for boolean field
-   */
   property var checkedState: getConfigValue(config['CheckedState'], true)
   property var uncheckedState: getConfigValue(config['UncheckedState'], false)
+  property string booleanEnum: "1" // QMetaType::Bool Enum of Qvariant::Type
 
   id: fieldItem
   enabled: !readOnly
   height: childrenRect.height
   anchors {
     right: parent.right
     left: parent.left
+    rightMargin: 10 * QgsQuick.Utils.dp
   }
 
   function getConfigValue(configValue, defaultValue) {
-     if (typeof value === "boolean" && !configValue) {
-         return defaultValue
-     } else return configValue
+    if (!configValue && field.type + "" === fieldItem.booleanEnum) {
+      return defaultValue
+    } else return configValue
   }
 
-  CheckBox {
-    property var currentValue: value
+  Rectangle {
+    id: fieldContainer
     height: customStyle.fields.height
-    id: checkBox
-    leftPadding: 0
-    checked: value === fieldItem.checkedState
+    color: customStyle.fields.backgroundColor
+    radius: customStyle.fields.cornerRadius
+    anchors { right: parent.right; left: parent.left }
 
-    indicator: Rectangle {
-                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.fields.fontColor
-                    radius: customStyle.fields.cornerRadius
-                    anchors.margins: 4
-                    anchors.fill: parent
-                }
+    Text {
+      text: checkBox.checked ? fieldItem.checkedState : fieldItem.uncheckedState
+      font.pixelSize: customStyle.fields.fontPixelSize
+      color: customStyle.fields.fontColor
+      horizontalAlignment: Text.AlignLeft
+      verticalAlignment: Text.AlignVCenter
+      anchors.left: parent.left
+      anchors.verticalCenter: parent.verticalCenter
+      leftPadding: 6 * QgsQuick.Utils.dp
+    }
+
+    CheckBox {
+      property var currentValue: value
+      height: customStyle.fields.height/2
+      width: height * 2
+      anchors.right: parent.right
+      anchors.rightMargin: fieldItem.anchors.rightMargin
+      anchors.verticalCenter: parent.verticalCenter
+      id: checkBox
+      leftPadding: 0
+      checked: value === fieldItem.checkedState
+
+      indicator: Rectangle {
+        implicitWidth: parent.width
+        implicitHeight: parent.height
+        x: checkBox.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: parent.height/2
+        color: checkBox.checked ? customStyle.fields.fontColor : "#ffffff"
+        border.color: checkBox.checked ? customStyle.fields.fontColor : customStyle.fields.normalColor
 
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: checkBox.checked = !checkBox.checked
-                }
+        Rectangle {
+          x: checkBox.checked ? parent.width - width : 0
+          width: parent.height
+          height: parent.height
+          radius: parent.height/2
+          color: "#ffffff"
+          border.color: checkBox.checked ? customStyle.fields.fontColor : customStyle.fields.normalColor
         }
-    onCheckedChanged: {
-      valueChanged( checked ? fieldItem.checkedState : fieldItem.uncheckedState, false )
-      forceActiveFocus()
-    }
+      }
+
+      onCheckedChanged: {
+        valueChanged( checked ? fieldItem.checkedState : fieldItem.uncheckedState, false )
+        forceActiveFocus()
+      }
 
-    // Workaround to get a signal when the value has changed
-    onCurrentValueChanged: {
-      checked = currentValue === fieldItem.checkedState
+      // Workaround to get a signal when the value has changed
+      onCurrentValueChanged: {
+        checked = currentValue === fieldItem.checkedState
+      }
     }
   }
 }

src/quickgui/plugin/qgsquickplugin.cpp

@@ -69,6 +69,7 @@ void QgsQuickPlugin::registerTypes( const char *uri )
   qRegisterMetaType< QgsUnitTypes::DistanceUnit >( "QgsUnitTypes::DistanceUnit" );
   qRegisterMetaType< QgsCoordinateFormatter::FormatFlags >( "QgsCoordinateFormatter::FormatFlags" );
   qRegisterMetaType< QgsCoordinateFormatter::Format >( "QgsCoordinateFormatter::Format" );
+  qRegisterMetaType< QVariant::Type >( "QVariant::Type" );
 
   qmlRegisterUncreatableType< QgsUnitTypes >( uri, 0, 1, "QgsUnitTypes", "Only enums from QgsUnitTypes can be used" );