From 54685c983acf1e1d5d24425b67d7d5f5e7a2c3ff Mon Sep 17 00:00:00 2001
From: Jaime van Kessel <nallath@gmail.com>
Date: Mon, 12 Nov 2018 13:29:21 +0100
Subject: [PATCH] Make PrintSetupSelector use layout instead of fixed width

This makes the components autoscale a bit when needed.

CURA-5785
---
 resources/qml/IconWithText.qml       | 22 ++++++++++++++++------
 resources/qml/PrintSetupSelector.qml | 15 ++++-----------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/resources/qml/IconWithText.qml b/resources/qml/IconWithText.qml
index 0b0feea821..d19c7e3899 100644
--- a/resources/qml/IconWithText.qml
+++ b/resources/qml/IconWithText.qml
@@ -8,18 +8,29 @@ import QtQuick.Layouts 1.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-// Reusable component that holds an (re-colorable) icon on the left with some text on the right
+// Reusable component that holds an (re-colorable) icon on the left with some text on the right.
+// This component is also designed to be used with layouts. It will use the width of the text + icon as preferred width
+// It sets the icon size + half of the content as it's minium width (in which case it will elide the text)
 Item
 {
     property alias iconColor: icon.color
     property alias source: icon.source
     property alias text: label.text
 
+    property real margin: UM.Theme.getSize("narrow_margin").width
+
+    // These properties can be used in combination with layouts.
+    readonly property real contentWidth: icon.width + margin + label.contentWidth
+    readonly property real minContentWidth: icon.width + margin + 0.5 * label.contentWidth
+
+    Layout.minimumWidth: minContentWidth
+    Layout.preferredWidth: contentWidth
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+
     implicitWidth: icon.width + 100
     implicitHeight: icon.height
 
-    Component.onCompleted: print(label.contentWidth)
-
     UM.RecolorImage
     {
         id: icon
@@ -35,18 +46,17 @@ Item
             left: parent.left
             verticalCenter: parent.verticalCenter
         }
-
     }
 
     Label
     {
         id: label
-        height: contentHeight
         font: UM.Theme.getFont("default")
         color: UM.Theme.getColor("text")
         renderType: Text.NativeRendering
         elide: Text.ElideRight
         verticalAlignment: Text.AlignVCenter
+
         anchors
         {
             left: icon.right
@@ -54,7 +64,7 @@ Item
             top: parent.top
             bottom: parent.bottom
             rightMargin: 0
-            margins: UM.Theme.getSize("narrow_margin").width
+            margins: margin
         }
     }
 }
\ No newline at end of file
diff --git a/resources/qml/PrintSetupSelector.qml b/resources/qml/PrintSetupSelector.qml
index 2daf8adb4b..4a8ebda2b3 100644
--- a/resources/qml/PrintSetupSelector.qml
+++ b/resources/qml/PrintSetupSelector.qml
@@ -18,8 +18,8 @@ Cura.ExpandableComponent
     property int currentModeIndex: -1
     property bool hideSettings: PrintInformation.preSliced
 
-    property string enabledText: catalog.i18nc("@label", "On")
-    property string disabledText: catalog.i18nc("@label", "Off")
+    property string enabledText: catalog.i18nc("@label:Should be short", "On")
+    property string disabledText: catalog.i18nc("@label:Should be short", "Off")
 
     // This widget doesn't show tooltips by itself. Instead it emits signals so others can do something with it.
     signal showTooltip(Item item, point location, string text)
@@ -44,7 +44,7 @@ Cura.ExpandableComponent
 
     onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
 
-    headerItem: Row
+    headerItem: RowLayout
     {
         anchors.fill: parent
 
@@ -52,8 +52,6 @@ Cura.ExpandableComponent
         {
             source: UM.Theme.getIcon("category_layer_height")
             text: Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm"
-            width: parent.width / 4
-            height: parent.height
 
             UM.SettingPropertyProvider
             {
@@ -68,8 +66,6 @@ Cura.ExpandableComponent
         {
             source: UM.Theme.getIcon("category_infill")
             text: parseInt(infillDensity.properties.value) + "%"
-            width: parent.width / 4
-            height: parent.height
 
             UM.SettingPropertyProvider
             {
@@ -84,8 +80,7 @@ Cura.ExpandableComponent
         {
             source: UM.Theme.getIcon("category_support")
             text: supportEnabled.properties.value == "True" ? enabledText : disabledText
-            width: parent.width / 4
-            height: parent.height
+
 
             UM.SettingPropertyProvider
             {
@@ -100,8 +95,6 @@ Cura.ExpandableComponent
         {
             source: UM.Theme.getIcon("category_adhesion")
             text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText
-            width: parent.width / 4
-            height: parent.height
 
             UM.SettingPropertyProvider
             {