Add rounded corners to the settings

Contributes to CURA-5941

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -97,10 +97,10 @@ Item
             property string color_override: ""  // for manually setting values
             property string color:  // is evaluated automatically, but the first time is before extruderModel being filled
             {
-                var current_extruder = extruderModel.get(currentIndex);
-                color_override = "";
+                var current_extruder = extruderModel.get(currentIndex)
+                color_override = ""
                 if (current_extruder === undefined) return ""
-                return (current_extruder.color) ? current_extruder.color : "";
+                return (current_extruder.color) ? current_extruder.color : ""
             }
 
             currentIndex:

resources/qml/Settings/SettingCheckBox.qml

@@ -28,37 +28,40 @@ SettingItem
             // 3: material  -> user changed material in materials page
             // 4: variant
             // 5: machine
-            var value;
-            if ((base.resolve != "None") && (stackLevel != 0) && (stackLevel != 1)) {
+            var value
+            if ((base.resolve != "None") && (stackLevel != 0) && (stackLevel != 1))
+            {
                 // We have a resolve function. Indicates that the setting is not settable per extruder and that
                 // we have to choose between the resolved value (default) and the global value
                 // (if user has explicitly set this).
-                value = base.resolve;
-            } else {
-                value = propertyProvider.properties.value;
+                value = base.resolve
+            }
+            else
+            {
+                value = propertyProvider.properties.value
             }
 
             switch(value)
             {
                 case "True":
-                    return true;
+                    return true
                 case "False":
-                    return false;
+                    return false
                 default:
-                    return value;
+                    return value
             }
         }
 
         Keys.onSpacePressed:
         {
-            forceActiveFocus();
-            propertyProvider.setPropertyValue("value", !checked);
+            forceActiveFocus()
+            propertyProvider.setPropertyValue("value", !checked)
         }
 
         onClicked:
         {
-            forceActiveFocus();
-            propertyProvider.setPropertyValue("value", !checked);
+            forceActiveFocus()
+            propertyProvider.setPropertyValue("value", !checked)
         }
 
         Keys.onTabPressed:
@@ -72,9 +75,9 @@ SettingItem
 
         onActiveFocusChanged:
         {
-            if(activeFocus)
+            if (activeFocus)
             {
-                base.focusReceived();
+                base.focusReceived()
             }
         }
 
@@ -90,32 +93,34 @@ SettingItem
 
             color:
             {
-                if(!enabled)
+                if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled")
                 }
-                if(control.containsMouse || control.activeFocus)
+                if (control.containsMouse || 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)
+                if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled_border")
                 }
-                if(control.containsMouse || control.activeFocus)
+                if (control.containsMouse || control.activeFocus)
                 {
                     return UM.Theme.getColor("setting_control_border_highlight")
                 }
                 return UM.Theme.getColor("setting_control_border")
             }
 
-            UM.RecolorImage {
+            UM.RecolorImage
+            {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.horizontalCenter: parent.horizontalCenter
                 width: Math.round(parent.width / 2.5)

resources/qml/Settings/SettingComboBox.qml

@@ -35,6 +35,7 @@ SettingItem
                 return UM.Theme.getColor("setting_control")
             }
 
+            radius: UM.Theme.getSize("setting_control_radius").width
             border.width: UM.Theme.getSize("default_lining").width
             border.color:
             {

resources/qml/Settings/SettingExtruder.qml

@@ -19,8 +19,9 @@ SettingItem
 
         model: Cura.ExtrudersModel
         {
-            onModelChanged: {
-                control.color = getItem(control.currentIndex).color;
+            onModelChanged:
+            {
+                control.color = getItem(control.currentIndex).color
             }
         }
 
@@ -113,14 +114,15 @@ SettingItem
             {
                 if (!enabled)
                 {
-                    return UM.Theme.getColor("setting_control_disabled");
+                    return UM.Theme.getColor("setting_control_disabled")
                 }
                 if (control.hovered || base.activeFocus)
                 {
-                    return UM.Theme.getColor("setting_control_highlight");
+                    return UM.Theme.getColor("setting_control_highlight")
                 }
-                return UM.Theme.getColor("setting_control");
+                return UM.Theme.getColor("setting_control")
             }
+            radius: UM.Theme.getSize("setting_control_radius").width
             border.width: UM.Theme.getSize("default_lining").width
             border.color:
             {
@@ -153,20 +155,18 @@ SettingItem
             elide: Text.ElideLeft
             verticalAlignment: Text.AlignVCenter
 
-            background: Rectangle
+            background: UM.RecolorImage
             {
                 id: swatch
-                height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                height: Math.round(parent.height / 2)
                 width: height
-
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
-
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-                radius: Math.round(width / 2)
+                anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
+                sourceSize.width: width
+                sourceSize.height: height
+                source: UM.Theme.getIcon("extruder_button")
                 color: control.color
             }
         }
@@ -219,20 +219,18 @@ SettingItem
                 verticalAlignment: Text.AlignVCenter
                 rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                background: Rectangle
+                background: UM.RecolorImage
                 {
                     id: swatch
-                    height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                    height: Math.round(parent.height / 2)
                     width: height
-
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
-
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-                    radius: Math.round(width / 2)
+                    anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    source: UM.Theme.getIcon("extruder_button")
                     color: control.model.getItem(index).color
                 }
             }

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -116,6 +116,7 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control");
             }
+            radius: UM.Theme.getSize("setting_control_radius").width
             border.width: UM.Theme.getSize("default_lining").width
             border.color:
             {
@@ -148,20 +149,18 @@ SettingItem
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
 
-            background: Rectangle
+            background: UM.RecolorImage
             {
                 id: swatch
-                height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                height: Math.round(parent.height / 2)
                 width: height
-
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
-
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-                radius: Math.round(width / 2)
+                anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
+                sourceSize.width: width
+                sourceSize.height: height
+                source: UM.Theme.getIcon("extruder_button")
                 color: control.color
             }
         }
@@ -215,20 +214,18 @@ SettingItem
                 verticalAlignment: Text.AlignVCenter
                 rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                background: Rectangle
+                background: UM.RecolorImage
                 {
                     id: swatch
-                    height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                    height: Math.round(parent.height / 2)
                     width: height
-
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
-
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-                    radius: Math.round(width / 2)
+                    anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    source: UM.Theme.getIcon("extruder_button")
                     color: control.model.getItem(index).color
                 }
             }

resources/qml/Settings/SettingTextField.qml

@@ -32,6 +32,7 @@ SettingItem
 
         anchors.fill: parent
 
+        radius: UM.Theme.getSize("setting_control_radius").width
         border.width: Math.round(UM.Theme.getSize("default_lining").width)
         border.color:
         {
@@ -81,10 +82,10 @@ SettingItem
 
         Rectangle
         {
-            anchors.fill: parent;
-            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width);
+            anchors.fill: parent
+            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
             color: UM.Theme.getColor("setting_control_highlight")
-            opacity: !control.hovered ? 0 : propertyProvider.properties.validationState == "ValidatorState.Valid" ? 1.0 : 0.35;
+            opacity: !control.hovered ? 0 : propertyProvider.properties.validationState == "ValidatorState.Valid" ? 1.0 : 0.35
         }
 
         Label
@@ -145,11 +146,11 @@ SettingItem
             }
 
             color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text")
-            font: UM.Theme.getFont("default");
+            font: UM.Theme.getFont("default")
 
-            selectByMouse: true;
+            selectByMouse: true
 
-            maximumLength: (definition.type == "str" || definition.type == "[int]") ? -1 : 10;
+            maximumLength: (definition.type == "str" || definition.type == "[int]") ? -1 : 10
             clip: true; //Hide any text that exceeds the width of the text box.
 
             validator: RegExpValidator { regExp: (definition.type == "[int]") ? /^\[?(\s*-?[0-9]{0,9}\s*,)*(\s*-?[0-9]{0,9})\s*\]?$/ : (definition.type == "int") ? /^-?[0-9]{0,10}$/ : (definition.type == "float") ? /^-?[0-9]{0,9}[.,]?[0-9]{0,3}$/ : /^.*$/ } // definition.type property from parent loader used to disallow fractional number entry
@@ -158,7 +159,8 @@ SettingItem
             {
                 target: input
                 property: "text"
-                value:  {
+                value:
+                {
                     // Stacklevels
                     // 0: user  -> unsaved change
                     // 1: quality changes  -> saved change
@@ -167,13 +169,15 @@ SettingItem
                     // 4: variant
                     // 5: machine_changes
                     // 6: machine
-                    if ((base.resolve != "None" && base.resolve) && (stackLevel != 0) && (stackLevel != 1)) {
+                    if ((base.resolve != "None" && base.resolve) && (stackLevel != 0) && (stackLevel != 1))
+                    {
                         // We have a resolve function. Indicates that the setting is not settable per extruder and that
                         // we have to choose between the resolved value (default) and the global value
                         // (if user has explicitly set this).
-                        return base.resolve;
-                    } else {
-                        return propertyProvider.properties.value;
+                        return base.resolve
+                    }
+                    else {
+                        return propertyProvider.properties.value
                     }
                 }
                 when: !input.activeFocus
@@ -182,16 +186,17 @@ SettingItem
             MouseArea
             {
                 id: mouseArea
-                anchors.fill: parent;
+                anchors.fill: parent
 
                 cursorShape: Qt.IBeamCursor
 
                 onPressed: {
-                    if(!input.activeFocus) {
-                        base.focusGainedByClick = true;
-                        input.forceActiveFocus();
+                    if (!input.activeFocus)
+                    {
+                        base.focusGainedByClick = true
+                        input.forceActiveFocus()
                     }
-                    mouse.accepted = false;
+                    mouse.accepted = false
                 }
             }
         }