From 085dfe114a9a4b9a8ec87fe0577280c10f937393 Mon Sep 17 00:00:00 2001
From: Jaquee <jaquee.monero@gmail.com>
Date: Sun, 6 Aug 2017 18:12:37 +0200
Subject: [PATCH] checkbox redesign

---
 components/CheckBox.qml | 91 ++++++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/components/CheckBox.qml b/components/CheckBox.qml
index ffe585c3..267106b1 100644
--- a/components/CheckBox.qml
+++ b/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"
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            checkBox.checked = !checkBox.checked
-            checkBox.clicked()
+            Image {
+                anchors.centerIn: parent
+                source: checkBox.checked ? checkBox.checkedIcon :
+                                           checkBox.uncheckedIcon
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    toggle()
+                }
+            }
+        }
+
+        Text {
+            id: label
+            font.family: "Arial"
+            font.pixelSize: checkBox.fontSize
+            color: "#525252"
+            wrapMode: Text.Wrap
+            Layout.fillWidth: true
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    toggle()
+                }
+            }
         }
     }
 }