chore: add StatusCheckBox

Closes: #10

sandbox/Controls.qml

@@ -93,4 +93,6 @@ GridLayout {
     StatusRadioButton {
         text: "i'm radio!"
     }
+
+    StatusCheckBox {}
 }

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

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
+    }
+}

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

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>