From c48d345044a3445e8f198056b88a1f9fbc1f9aa9 Mon Sep 17 00:00:00 2001
From: "B.Melnik" <b.melnik@restream.rt.ru>
Date: Thu, 20 May 2021 11:43:01 +0300
Subject: [PATCH] chore: add StatusCheckBox

Closes: #10
---
 sandbox/Controls.qml                    |  2 ++
 sandbox/sandbox.pro                     |  3 +-
 src/StatusQ/Controls/StatusCheckBox.qml | 42 +++++++++++++++++++++++++
 src/StatusQ/Controls/qmldir             |  1 +
 src/assets/img/icons/checkbox.svg       |  3 ++
 5 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/StatusQ/Controls/StatusCheckBox.qml
 create mode 100644 src/assets/img/icons/checkbox.svg

diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml
index df786e3a..f134f5ff 100644
--- a/sandbox/Controls.qml
+++ b/sandbox/Controls.qml
@@ -93,4 +93,6 @@ GridLayout {
     StatusRadioButton {
         text: "i'm radio!"
     }
+
+    StatusCheckBox {}
 }
diff --git a/sandbox/sandbox.pro b/sandbox/sandbox.pro
index 7050a5ef..0f39bd9d 100644
--- a/sandbox/sandbox.pro
+++ b/sandbox/sandbox.pro
@@ -34,6 +34,7 @@ HEADERS += \
 DISTFILES += \
     ../src/StatusQ/Controls/StatusBaseButton.qml \
     ../src/StatusQ/Controls/StatusButton.qml \
+    ../src/StatusQ/Controls/StatusCheckBox.qml \
     ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
+    ../src/StatusQ/Controls/StatusRadioButton.qml \
     ../src/StatusQ/Controls/StatusSwitch.qml
-    ../src/StatusQ/Controls/StatusRadioButton.qml
diff --git a/src/StatusQ/Controls/StatusCheckBox.qml b/src/StatusQ/Controls/StatusCheckBox.qml
new file mode 100644
index 00000000..bb31aa94
--- /dev/null
+++ b/src/StatusQ/Controls/StatusCheckBox.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+CheckBox {
+    id: statusCheckBox
+
+    indicator: Rectangle {
+        implicitWidth: 18
+        implicitHeight: 18
+        x: statusCheckBox.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 2
+        color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
+                                                               : Theme.palette.directColor8
+
+        StatusIcon {
+            icon: "checkbox"
+            width: 11
+            height: 8
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: 1
+            color: Theme.palette.white
+            visible: statusCheckBox.down || statusCheckBox.checked
+        }
+    }
+
+    contentItem: StatusBaseText {
+        text: statusCheckBox.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        width: parent.width
+        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
+                                           : statusCheckBox.indicator.width
+    }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index da702f23..fb9fed9a 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -10,3 +10,4 @@ StatusRoundButton 0.1 StatusRoundButton.qml
 StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
+StatusCheckBox 0.1 StatusCheckBox.qml
diff --git a/src/assets/img/icons/checkbox.svg b/src/assets/img/icons/checkbox.svg
new file mode 100644
index 00000000..c50799c9
--- /dev/null
+++ b/src/assets/img/icons/checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.76413 5.69006L9.32479 0.278881C9.70676 -0.0928258 10.3248 -0.0940903 10.7111 0.28187C11.0948 0.655228 11.0968 1.25861 10.7142 1.63093L4.45575 7.72112C4.26582 7.90595 4.01753 7.99919 3.76838 8C3.51183 7.99812 3.26284 7.90634 3.07584 7.72437L0.284232 5.0078C-0.0959013 4.63789 -0.0957078 4.03795 0.290638 3.66199C0.674309 3.28863 1.29863 3.29084 1.67363 3.65576L3.76413 5.69006Z" fill="white"/>
+</svg>