checkbox redesign

components/CheckBox.qml

@@ -29,61 +29,70 @@
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
 
-Item {
+RowLayout {
     id: checkBox
     property alias text: label.text
     property string checkedIcon
     property string uncheckedIcon
     property bool checked: false
     property alias background: backgroundRect.color
-    property int fontSize: 14
+    property int fontSize: 14 * scaleRatio
     property alias fontColor: label.color
     signal clicked()
-    height: 25
-    width: label.x + label.width
-    Layout.minimumWidth: label.x + label.contentWidth
-    clip: true
+    height: 25 * scaleRatio
 
-    Rectangle {
-        anchors.left: parent.left
-        height: parent.height - 1
-        width: 25
-        //radius: 4
-        y: 0
-        color: "#DBDBDB"
+    function toggle(){
+        checkBox.checked = !checkBox.checked
+        checkBox.clicked()
     }
 
-    Rectangle {
-        id: backgroundRect
-        anchors.left: parent.left
-        height: parent.height - 1
-        width: 25
-        //radius: 4
-        y: 1
-        color: "#FFFFFF"
-
-        Image {
-            anchors.centerIn: parent
-            source: checkBox.checked ? checkBox.checkedIcon :
-                                       checkBox.uncheckedIcon
+    RowLayout {
+        Layout.fillWidth: true
+        Rectangle {
+            anchors.left: parent.left
+            width: 25 * scaleRatio
+            height: checkBox.height - 1
+            //radius: 4
+            y: 0
+            color: "#DBDBDB"
         }
-    }
 
-    Text {
-        id: label
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: 25 + 12
-        font.family: "Arial"
-        font.pixelSize: checkBox.fontSize
-        color: "#525252"
-    }
+        Rectangle {
+            id: backgroundRect
+            anchors.left: parent.left
+            width: 25 * scaleRatio
+            height: checkBox.height - 1
+            //radius: 4
+            y: 1
+            color: "#FFFFFF"
+
+            Image {
+                anchors.centerIn: parent
+                source: checkBox.checked ? checkBox.checkedIcon :
+                                           checkBox.uncheckedIcon
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    toggle()
+                }
+            }
+        }
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            checkBox.checked = !checkBox.checked
-            checkBox.clicked()
+        Text {
+            id: label
+            font.family: "Arial"
+            font.pixelSize: checkBox.fontSize
+            color: "#525252"
+            wrapMode: Text.Wrap
+            Layout.fillWidth: true
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    toggle()
+                }
+            }
         }
     }
 }