From 171da643d524c9d6752720099c92e747c2044585 Mon Sep 17 00:00:00 2001
From: "j.delarago" <joeydelarago@gmail.com>
Date: Fri, 21 Jan 2022 18:06:31 +0100
Subject: [PATCH] I'm replacing all CheckBox in Cura with this CheckBox except
 ones that use the old "style" tag (Not in scope). This should make the design
 consistent everywhere and easier to update.

Moved set width and height from top level into "indicator" since this was causing the label to be cut off.

Swapped out setting_control_radius for checkbox_radius since these are different now.

Updated the UM.RecolorImage to work with tri state checkboxes so this can replace the Checkbox in SettingVisiblityPage.qml.
---
 resources/qml/Widgets/CheckBox.qml     | 60 ++++++++++++++++++++------
 resources/themes/cura-light/theme.json |  3 ++
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/resources/qml/Widgets/CheckBox.qml b/resources/qml/Widgets/CheckBox.qml
index 84b074af71..e60384d565 100644
--- a/resources/qml/Widgets/CheckBox.qml
+++ b/resources/qml/Widgets/CheckBox.qml
@@ -17,13 +17,12 @@ CheckBox
 
     hoverEnabled: true
 
-    height: UM.Theme.getSize("checkbox").height
-    width: UM.Theme.getSize("checkbox").width
-
     indicator: Rectangle
     {
-        width: control.height
-        height: control.height
+        height: UM.Theme.getSize("checkbox").height
+        width: UM.Theme.getSize("checkbox").width
+
+        anchors.verticalCenter: parent.verticalCenter
 
         color:
         {
@@ -38,7 +37,7 @@ CheckBox
             return UM.Theme.getColor("setting_control")
         }
 
-        radius: UM.Theme.getSize("setting_control_radius").width
+        radius: UM.Theme.getSize("checkbox_radius").width
         border.width: UM.Theme.getSize("default_lining").width
         border.color:
         {
@@ -57,12 +56,46 @@ CheckBox
         {
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
-            height: UM.Theme.getSize("checkbox_mark").height
-            width: UM.Theme.getSize("checkbox_mark").width
-            sourceSize.height: width
-            color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text")
-            source: UM.Theme.getIcon("EmptyCheck", "low")
-            opacity: control.checked ? 1 : 0
+
+            height:
+            {
+                switch(control.checkState)
+                {
+                    case Qt.Checked: return UM.Theme.getSize("checkbox_mark").height
+                    case Qt.PartiallyChecked: return UM.Theme.getSize("checkbox_square").height
+                    default: UM.Theme.getSize("checkbox_mark").height
+                }
+            }
+            width: height
+            sourceSize.height: height
+
+            color:
+            {
+                switch(control.checkState)
+                {
+                    case Qt.Checked: return !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("checkbox_mark")
+                    case Qt.PartiallyChecked: return !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("checkbox_square")
+                    default: return !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("checkbox_mark")
+                }
+            }
+            source:
+            {
+                switch (control.checkState)
+                {
+                    case Qt.Checked: return UM.Theme.getIcon("EmptyCheck", "low")
+                    case Qt.PartiallyChecked: return UM.Theme.getIcon("CheckBoxFill", "low")
+                    default: return UM.Theme.getIcon("EmptyCheck", "low")
+                }
+            }
+            opacity:
+            {
+                switch (control.checkState)
+                {
+                    case Qt.Checked: return 1;
+                    case Qt.PartiallyChecked: return 1;
+                    default: 0;
+                }
+            }
             Behavior on opacity { NumberAnimation { duration: 100; } }
         }
     }
@@ -70,7 +103,8 @@ CheckBox
     contentItem: Label
     {
         id: textLabel
-        leftPadding: control.indicator.width + control.spacing
+        anchors.left: control.indicator.right
+        leftPadding: UM.Theme.getSize("checkbox_label_padding").width
         text: control.text
         font: control.font
         color: UM.Theme.getColor("text")
diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json
index 2276c39744..e98b734a1d 100644
--- a/resources/themes/cura-light/theme.json
+++ b/resources/themes/cura-light/theme.json
@@ -352,6 +352,7 @@
         "checkbox_border": [199, 199, 199, 255],
         "checkbox_border_hover": [50, 130, 255, 255],
         "checkbox_mark": [35, 35, 35, 255],
+        "checkbox_square": [180, 180, 180, 255],
         "checkbox_disabled": [223, 223, 223, 255],
         "checkbox_text": [35, 35, 35, 255],
 
@@ -606,7 +607,9 @@
 
         "checkbox": [1.33, 1.33],
         "checkbox_mark": [1, 1],
+        "checkbox_square": [0.83, 0.83],
         "checkbox_radius": [0.25, 0.25],
+        "checkbox_label_padding": [0.5, 0.5],
 
         "tooltip": [20.0, 10.0],
         "tooltip_margins": [1.0, 1.0],