Use screenScaleFactor to consistently adapt sizes to display pixel ratio

plugins/3MFReader/WorkspaceDialog.qml

@@ -12,11 +12,13 @@ UM.Dialog
 {
     title: catalog.i18nc("@title:window", "Open Project")
 
-    width: 500
-    height: 400
+    minimumWidth: 500 * screenScaleFactor
+    minumumHeight: 400 * screenScaleFactor
+    width: minimumWidth
+    height: minumumHeight
 
-    property int comboboxHeight: 15
-    property int spacerHeight: 10
+    property int comboboxHeight: 15 * screenScaleFactor
+    property int spacerHeight: 10 * screenScaleFactor
 
     onClosing: manager.notifyClosed()
     onVisibleChanged:
@@ -31,7 +33,7 @@ UM.Dialog
     Item
     {
         anchors.fill: parent
-        anchors.margins: 20
+        anchors.margins: 20 * screenScaleFactor
 
         UM.I18nCatalog
         {
@@ -59,7 +61,7 @@ UM.Dialog
         Column
         {
             anchors.fill: parent
-            spacing: 2
+            spacing: 2 * screenScaleFactor
             Label
             {
                 id: titleLabel
@@ -373,7 +375,7 @@ UM.Dialog
             enabled: true
             anchors.bottom: parent.bottom
             anchors.right: ok_button.left
-            anchors.rightMargin:2
+            anchors.rightMargin: 2 * screenScaleFactor
         }
          Button
         {

plugins/ImageReader/ConfigUI.qml

@@ -10,11 +10,11 @@ import UM 1.1 as UM
 
 UM.Dialog
 {
-    width: 350 * Screen.devicePixelRatio;
-    minimumWidth: 350 * Screen.devicePixelRatio;
+    width: minimumWidth;
+    minimumWidth: 350 * screenScaleFactor;
 
-    height: 250 * Screen.devicePixelRatio;
-    minimumHeight: 250 * Screen.devicePixelRatio;
+    height: minimumHeight;
+    minimumHeight: 250 * screenScaleFactor;
 
     title: catalog.i18nc("@title:window", "Convert Image...")
 
@@ -23,8 +23,8 @@ UM.Dialog
         UM.I18nCatalog{id: catalog; name:"cura"}
         anchors.fill: parent;
         Layout.fillWidth: true
-        columnSpacing: 16
-        rowSpacing: 4
+        columnSpacing: 16 * screenScaleFactor
+        rowSpacing: 4 * screenScaleFactor
         columns: 1
 
         UM.TooltipArea {
@@ -36,7 +36,7 @@ UM.Dialog
 
                 Label {
                     text: catalog.i18nc("@action:label","Height (mm)")
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -44,7 +44,7 @@ UM.Dialog
                     id: peak_height
                     objectName: "Peak_Height"
                     validator: DoubleValidator {notation: DoubleValidator.StandardNotation; bottom: -500; top: 500;}
-                    width: 180
+                    width: 180 * screenScaleFactor
                     onTextChanged: { manager.onPeakHeightChanged(text) }
                 }
             }
@@ -59,7 +59,7 @@ UM.Dialog
 
                 Label {
                     text: catalog.i18nc("@action:label","Base (mm)")
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -67,7 +67,7 @@ UM.Dialog
                     id: base_height
                     objectName: "Base_Height"
                     validator: DoubleValidator {notation: DoubleValidator.StandardNotation; bottom: 0; top: 500;}
-                    width: 180
+                    width: 180 * screenScaleFactor
                     onTextChanged: { manager.onBaseHeightChanged(text) }
                 }
             }
@@ -82,7 +82,7 @@ UM.Dialog
 
                 Label {
                     text: catalog.i18nc("@action:label","Width (mm)")
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -91,7 +91,7 @@ UM.Dialog
                     objectName: "Width"
                     focus: true
                     validator: DoubleValidator {notation: DoubleValidator.StandardNotation; bottom: 1; top: 500;}
-                    width: 180
+                    width: 180 * screenScaleFactor
                     onTextChanged: { manager.onWidthChanged(text) }
                 }
             }
@@ -106,7 +106,7 @@ UM.Dialog
 
                 Label {
                     text: catalog.i18nc("@action:label","Depth (mm)")
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
                 TextField {
@@ -114,7 +114,7 @@ UM.Dialog
                     objectName: "Depth"
                     focus: true
                     validator: DoubleValidator {notation: DoubleValidator.StandardNotation; bottom: 1; top: 500;}
-                    width: 180
+                    width: 180 * screenScaleFactor
                     onTextChanged: { manager.onDepthChanged(text) }
                 }
             }
@@ -130,14 +130,14 @@ UM.Dialog
                 //Empty label so 2 column layout works.
                 Label {
                     text: ""
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
                 ComboBox {
                     id: image_color_invert
                     objectName: "Image_Color_Invert"
                     model: [ catalog.i18nc("@item:inlistbox","Lighter is higher"), catalog.i18nc("@item:inlistbox","Darker is higher") ]
-                    width: 180
+                    width: 180 * screenScaleFactor
                     onCurrentIndexChanged: { manager.onImageColorInvertChanged(currentIndex) }
                 }
             }
@@ -152,13 +152,13 @@ UM.Dialog
 
                 Label {
                     text: catalog.i18nc("@action:label","Smoothing")
-                    width: 150
+                    width: 150 * screenScaleFactor
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
                 Item {
-                    width: 180
-                    height: 20
+                    width: 180 * screenScaleFactor
+                    height: 20 * screenScaleFactor
                     Layout.fillWidth: true
 
                     Slider {

plugins/LayerView/LayerView.qml

@@ -111,7 +111,7 @@ Item
                 visible: !UM.LayerView.compatibilityMode
                 style: UM.Theme.styles.combobox
                 anchors.right: parent.right
-                anchors.rightMargin: 10
+                anchors.rightMargin: 10 * screenScaleFactor
 
                 onActivated:
                 {
@@ -602,7 +602,7 @@ Item
                     anchors.leftMargin: UM.Theme.getSize("default_margin").width / 2;
                     anchors.verticalCenter: parent.verticalCenter;
 
-                    width: Math.max(UM.Theme.getSize("line").width * maxValue.length + 2, 20);
+                    width: Math.max(UM.Theme.getSize("line").width * maxValue.length + 2 * screenScaleFactor, 20);
                     style: TextFieldStyle
                     {
                         textColor: UM.Theme.getColor("setting_control_text");

plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml

@@ -30,7 +30,7 @@ Item {
         {
             // This is to ensure that the panel is first increasing in size up to 200 and then shows a scrollbar.
             // It kinda looks ugly otherwise (big panel, no content on it)
-            property int maximumHeight: 200 * Screen.devicePixelRatio
+            property int maximumHeight: 200 * screenScaleFactor
             height: Math.min(contents.count * (UM.Theme.getSize("section").height + UM.Theme.getSize("default_lining").height), maximumHeight)
 
             ScrollView
@@ -246,7 +246,7 @@ Item {
         id: settingPickDialog
 
         title: catalog.i18nc("@title:window", "Select Settings to Customize for this model")
-        width: Screen.devicePixelRatio * 360;
+        width: screenScaleFactor * 360;
 
         property string labelFilter: ""
 

plugins/PluginBrowser/PluginBrowser.qml

@@ -9,10 +9,10 @@ UM.Dialog
     id: base
 
     title: catalog.i18nc("@title:window", "Find & Update plugins")
-    width: 600 * Screen.devicePixelRatio
-    height: 450 * Screen.devicePixelRatio
-    minimumWidth: 350 * Screen.devicePixelRatio
-    minimumHeight: 350 * Screen.devicePixelRatio
+    width: 600 * screenScaleFactor
+    height: 450 * screenScaleFactor
+    minimumWidth: 350 * screenScaleFactor
+    minimumHeight: 350 * screenScaleFactor
     Item
     {
         anchors.fill: parent

plugins/UM3NetworkPrinting/DiscoverUM3Action.qml

@@ -298,8 +298,8 @@ Cura.MachineAction
 
         title: catalog.i18nc("@title:window", "Printer Address")
 
-        minimumWidth: 400 * Screen.devicePixelRatio
-        minimumHeight: 120 * Screen.devicePixelRatio
+        minimumWidth: 400 * screenScaleFactor
+        minimumHeight: 120 * screenScaleFactor
         width: minimumWidth
         height: minimumHeight
 

plugins/USBPrinting/FirmwareUpdateWindow.qml

@@ -11,10 +11,10 @@ UM.Dialog
 {
     id: base;
 
-    width: 500 * Screen.devicePixelRatio;
-    minimumWidth: 500 * Screen.devicePixelRatio;
-    height: 100 * Screen.devicePixelRatio;
-    minimumHeight: 100 * Screen.devicePixelRatio;
+    width: minimumWidth;
+    minimumWidth: 500 * screenScaleFactor;
+    height: minimumHeight;
+    minimumHeight: 100 * screenScaleFactor;
 
     visible: true;
     modality: Qt.ApplicationModal;

resources/qml/AskOpenAsProjectOrModelsDialog.qml

@@ -18,8 +18,8 @@ UM.Dialog
     id: base
 
     title: catalog.i18nc("@title:window", "Open project file")
-    width: 450
-    height: 150
+    width: 450 * screenScaleFactor
+    height: 150 * screenScaleFactor
 
     maximumHeight: height
     maximumWidth: width
@@ -61,10 +61,10 @@ UM.Dialog
     Column
     {
         anchors.fill: parent
-        anchors.leftMargin: 20
-        anchors.rightMargin: 20
-        anchors.bottomMargin: 20
-        spacing: 10
+        anchors.leftMargin: 20 * screenScaleFactor
+        anchors.rightMargin: 20 * screenScaleFactor
+        anchors.bottomMargin: 20 * screenScaleFactor
+        spacing: 10 * screenScaleFactor
 
         Label
         {

resources/qml/DiscardOrKeepProfileChangesDialog.qml

@@ -14,8 +14,8 @@ UM.Dialog
     id: base
     title: catalog.i18nc("@title:window", "Discard or Keep changes")
 
-    width: 800
-    height: 400
+    width: 800 * screenScaleFactor
+    height: 400 * screenScaleFactor
     property var changesModel: Cura.UserChangesModel{ id: userChangesModel}
     onVisibilityChanged:
     {

resources/qml/ExtruderButton.qml

@@ -67,7 +67,7 @@ Button
         height: UM.Theme.getSize("extruder_button_material").height
         radius: width / 2
 
-        border.width: 1
+        border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("extruder_button_material_border")
 
         opacity: !base.enabled ? 0.2 : 1.0