WIP: Add CheckBox and fix styles

resources/qml/MachineSettings/ComboBoxWithOptions.qml

@@ -24,11 +24,15 @@ UM.TooltipArea
     width: childrenRect.width
     text: tooltipText
 
+    property int controlWidth: UM.Theme.getSize("setting_control").width
+    property int controlHeight: UM.Theme.getSize("setting_control").height
+
     property alias containerStackId: propertyProvider.containerStackId
     property alias settingKey: propertyProvider.key
     property alias settingStoreIndex: propertyProvider.storeIndex
 
     property alias labelText: fieldLabel.text
+    property alias labelFont: fieldLabel.font
     property alias labelWidth: fieldLabel.width
 
     property string tooltipText: propertyProvider.properties.description
@@ -55,7 +59,8 @@ UM.TooltipArea
             id: fieldLabel
             anchors.verticalCenter: comboBox.verticalCenter
             visible: text != ""
-            elide: Text.ElideRight
+            font: UM.Theme.getFont("medium")
+            renderType: Text.NativeRendering
         }
 
         ListModel
@@ -80,8 +85,8 @@ UM.TooltipArea
         CuraComboBox
         {
             id: comboBox
-            width: 100
+            width: comboBoxWithOptions.controlWidth
-            height: UM.Theme.getSize("action_button").height
+            height: comboBoxWithOptions.controlHeight
             model: optionsModel
             textRole: "text"
 

resources/qml/MachineSettings/NumericTextFieldWithUnit.qml

@@ -31,6 +31,7 @@ UM.TooltipArea
     property alias settingStoreIndex: propertyProvider.storeIndex
 
     property alias labelText: fieldLabel.text
+    property alias labelFont: fieldLabel.font
     property alias labelWidth: fieldLabel.width
     property alias unitText: unitLabel.text
 
@@ -64,7 +65,7 @@ UM.TooltipArea
             id: fieldLabel
             anchors.verticalCenter: textFieldWithUnit.verticalCenter
             visible: text != ""
-            elide: Text.ElideRight
+            font: UM.Theme.getFont("medium")
             renderType: Text.NativeRendering
         }
 

resources/qml/MachineSettings/SimpleCheckBox.qml

@@ -8,14 +8,20 @@ import QtQuick.Layouts 1.3
 import UM 1.3 as UM
 import Cura 1.1 as Cura
 
+import "../Widgets"
+
 
 //
 // CheckBox widget for the on/off or true/false settings in the Machine Settings Dialog.
 //
 UM.TooltipArea
 {
+    id: simpleCheckBox
+
     UM.I18nCatalog { id: catalog; name: "cura"; }
 
+    property int controlHeight: UM.Theme.getSize("setting_control").height
+
     height: childrenRect.height
     width: childrenRect.width
     text: tooltip
@@ -25,6 +31,7 @@ UM.TooltipArea
     property alias settingStoreIndex: propertyProvider.storeIndex
 
     property alias labelText: checkBox.text
+    property alias labelFont: checkBox.font
 
     property string tooltip: propertyProvider.properties.description
 
@@ -40,10 +47,12 @@ UM.TooltipArea
         watchedProperties: [ "value", "description" ]
     }
 
-    CheckBox
+    CuraCheckBox
     {
         id: checkBox
         checked: String(propertyProvider.properties.value).toLowerCase() != 'false'
+        height: simpleCheckBox.controlHeight
+        font: UM.Theme.getFont("medium")
         onClicked:
         {
             propertyProvider.setPropertyValue("value", checked)

resources/qml/WelcomePages/TestContent.qml

@@ -20,6 +20,7 @@ Row
     UM.I18nCatalog { id: catalog; name: "cura" }
 
     property int labelWidth: 100
+    property var labelFont: UM.Theme.getFont("medium")
 
     // Left-side column for "Printer Settings"
     Column
@@ -39,6 +40,7 @@ Row
             settingKey: "machine_width"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "X (Width)")
+            labelFont: base.labelFont
             labelWidth: base.labelWidth
             unitText: catalog.i18nc("@label", "mm")
             // TODO: add forceUpdateOnChangeFunction:
@@ -51,6 +53,7 @@ Row
             settingKey: "machine_depth"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "Y (Depth)")
+            labelFont: base.labelFont
             labelWidth: base.labelWidth
             unitText: catalog.i18nc("@label", "mm")
             // TODO: add forceUpdateOnChangeFunction:
@@ -63,6 +66,7 @@ Row
             settingKey: "machine_height"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "Z (Height)")
+            labelFont: base.labelFont
             labelWidth: base.labelWidth
             unitText: catalog.i18nc("@label", "mm")
             // TODO: add forceUpdateOnChangeFunction:
@@ -86,6 +90,7 @@ Row
             settingKey: "machine_center_is_zero"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "Origin at center")
+            labelFont: base.labelFont
             // TODO: add forceUpdateOnChangeFunction:
         }
 
@@ -96,6 +101,7 @@ Row
             settingKey: "machine_heated_bed"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "Heated bed")
+            labelFont: base.labelFont
             // TODO: add forceUpdateOnChangeFunction:
         }
 
@@ -106,6 +112,7 @@ Row
             settingKey: "machine_gcode_flavor"
             settingStoreIndex: 1 // TODO
             labelText: catalog.i18nc("@label", "G-code flavor")
+            labelFont: base.labelFont
             labelWidth: base.labelWidth
             // TODO: add forceUpdateOnChangeFunction:
             // TODO: add afterOnActivate: manager.updateHasMaterialsMetadata

resources/qml/Widgets/CuraCheckBox.qml

@@ -0,0 +1,76 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.1 as Cura
+
+
+//
+// ComboBox with Cura styling.
+//
+CheckBox
+{
+    id: control
+
+    hoverEnabled: true
+
+    indicator: Rectangle
+    {
+        width: control.height
+        height: control.height
+
+        color:
+        {
+            if (!control.enabled)
+            {
+                return UM.Theme.getColor("setting_control_disabled")
+            }
+            if (control.hovered || control.activeFocus)
+            {
+                return UM.Theme.getColor("setting_control_highlight")
+            }
+            return UM.Theme.getColor("setting_control")
+        }
+
+        radius: UM.Theme.getSize("setting_control_radius").width
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color:
+        {
+            if (!enabled)
+            {
+                return UM.Theme.getColor("setting_control_disabled_border")
+            }
+            if (control.hovered || control.activeFocus)
+            {
+                return UM.Theme.getColor("setting_control_border_highlight")
+            }
+            return UM.Theme.getColor("setting_control_border")
+        }
+
+        UM.RecolorImage
+        {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.round(parent.width / 2.5)
+            height: Math.round(parent.height / 2.5)
+            sourceSize.height: width
+            color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text");
+            source: UM.Theme.getIcon("check")
+            opacity: control.checked ? 1 : 0
+            Behavior on opacity { NumberAnimation { duration: 100; } }
+        }
+    }
+
+    contentItem: Label
+    {
+        id: textLabel
+        leftPadding: control.indicator.width + control.spacing
+        text: control.text
+        font: control.font
+        renderType: Text.NativeRendering
+        verticalAlignment: Text.AlignVCenter
+    }
+}