Merge branch 'ui_rework_4_0' of github.com:Ultimaker/Cura into STAR-322_cloud-connection

cura/Settings/ExtruderStack.py

@@ -52,8 +52,8 @@ class ExtruderStack(CuraContainerStack):
         return super().getNextStack()
 
     def setEnabled(self, enabled: bool) -> None:
-        if self.getMetaDataEntry("enabled", True) == enabled: #No change.
+        if self.getMetaDataEntry("enabled", True) == enabled: # No change.
-            return #Don't emit a signal then.
+            return # Don't emit a signal then.
         self.setMetaDataEntry("enabled", str(enabled))
         self.enabledChanged.emit()
 

cura/Settings/MachineManager.py

@@ -1536,6 +1536,10 @@ class MachineManager(QObject):
             name = self._current_quality_group.name
         return name
 
+    @pyqtProperty(bool, notify = activeQualityGroupChanged)
+    def hasNotSupportedQuality(self) -> bool:
+        return self._current_quality_group is None and self._current_quality_changes_group is None
+
     def _updateUponMaterialMetadataChange(self) -> None:
         if self._global_container_stack is None:
             return

plugins/ModelChecker/ModelChecker.qml

@@ -4,19 +4,19 @@
 import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-import QtQuick.Dialogs 1.1
-import QtQuick.Window 2.2
 
 import UM 1.2 as UM
-import Cura 1.0 as Cura
 
 
 Button
 {
     id: modelCheckerButton
 
-    UM.I18nCatalog{id: catalog; name: "cura"}
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
 
     visible: manager.hasWarnings
     tooltip: catalog.i18nc("@info:tooltip", "Some things could be problematic in this print. Click to see tips for adjustment.")
@@ -25,6 +25,8 @@ Button
     width: UM.Theme.getSize("save_button_specs_icons").width
     height: UM.Theme.getSize("save_button_specs_icons").height
 
+    anchors.verticalCenter: parent ? parent.verticalCenter : undefined
+
     style: ButtonStyle
     {
         background: Item

plugins/PostProcessingPlugin/PostProcessingPlugin.qml

@@ -412,7 +412,7 @@ UM.Dialog
             }
         }
 
-        Cura.SidebarTooltip
+        Cura.PrintSetupTooltip
         {
             id: tooltip
         }

plugins/PrepareStage/PrepareMenu.qml

@@ -13,10 +13,6 @@ import QtGraphicalEffects 1.0 // For the dropshadow
 Item
 {
     id: prepareMenu
-    // 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)
-    signal hideTooltip()
-
 
     UM.I18nCatalog
     {
@@ -45,7 +41,6 @@ Item
             Cura.MachineSelector
             {
                 id: machineSelection
-                z: openFileButton.z - 1 //Ensure that the tooltip of the open file button stays above the item row.
                 headerCornerSide: Cura.RoundedRectangle.Direction.Left
                 Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
                 Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width

plugins/PreviewStage/PreviewMenu.qml

@@ -10,9 +10,6 @@ import Cura 1.1 as Cura
 Item
 {
     id: previewMenu
-    // 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)
-    signal hideTooltip()
 
     property real itemHeight: height - 2 * UM.Theme.getSize("default_lining").width
 

plugins/SimulationView/SimulationViewMenuComponent.qml

@@ -16,7 +16,6 @@ Cura.ExpandableComponent
     id: base
 
     width: UM.Theme.getSize("layerview_menu_size").width
-    iconSource: UM.Theme.getIcon("pencil")
 
     Connections
     {
@@ -45,7 +44,7 @@ Cura.ExpandableComponent
         verticalAlignment: Text.AlignVCenter
     }
 
-    popupItem: Column
+    contentItem: Column
     {
         id: viewSettings
 

plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml

@@ -27,7 +27,7 @@ Item
     Row
     {
         height: parent.height
-        spacing: 12 * screenScaleFactor // TODO: Theme! (Should be same as extruder spacing)
+        spacing: UM.Theme.getSize("print_setup_slider_handle").width // TODO: Theme! (Should be same as extruder spacing)
 
         // This wrapper ensures that the buildplate icon is located centered
         // below an extruder icon.

plugins/UM3NetworkPrinting/resources/qml/UM3InfoComponents.qml

@@ -29,7 +29,7 @@ Item {
         Button {
             height: UM.Theme.getSize("save_button_save_to_button").height;
             onClicked: Cura.MachineManager.printerOutputDevices[0].requestAuthentication();
-            style: UM.Theme.styles.sidebar_action_button;
+            style: UM.Theme.styles.print_setup_action_button;
             text: catalog.i18nc("@action:button", "Request Access");
             tooltip: catalog.i18nc("@info:tooltip", "Send access request to the printer");
             visible: printerConnected && !printerAcceptsCommands && !authenticationRequested;
@@ -38,7 +38,7 @@ Item {
         Button {
             height: UM.Theme.getSize("save_button_save_to_button").height;
             onClicked: connectActionDialog.show();
-            style: UM.Theme.styles.sidebar_action_button;
+            style: UM.Theme.styles.print_setup_action_button;
             text: catalog.i18nc("@action:button", "Connect");
             tooltip: catalog.i18nc("@info:tooltip", "Connect to a printer");
             visible: !printerConnected;

resources/qml/Account/AccountDetails.qml

@@ -13,8 +13,8 @@ Column
     property var loggedIn: false
     property var profileImage: ""
 
-    padding: 2 * UM.Theme.getSize("default_margin").height
+    padding: UM.Theme.getSize("wide_margin").height
-    spacing: 2 * UM.Theme.getSize("default_margin").height
+    spacing: UM.Theme.getSize("wide_margin").height
 
     AvatarImage
     {

resources/qml/ActionButton.qml

@@ -3,17 +3,17 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.1
-
 import QtGraphicalEffects 1.0 // For the dropshadow
-
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
+
 Button
 {
     id: button
-    property alias iconSource: buttonIconLeft.source
     property bool isIconOnRightSide: false
+
+    property alias iconSource: buttonIconLeft.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
@@ -28,9 +28,6 @@ Button
     property color outlineColor: color
     property color outlineHoverColor: hoverColor
     property color outlineDisabledColor: outlineColor
-
-    hoverEnabled: true
-
     property alias shadowColor: shadow.color
     property alias shadowEnabled: shadow.visible
 
@@ -42,6 +39,7 @@ Button
     leftPadding: UM.Theme.getSize("default_margin").width
     rightPadding: UM.Theme.getSize("default_margin").width
     height: UM.Theme.getSize("action_button").height
+    hoverEnabled: true
 
     contentItem: Row
     {
@@ -52,6 +50,8 @@ Button
             source: ""
             height: buttonText.height
             width: visible ? height : 0
+            sourceSize.width: width
+            sourceSize.height: height
             color: button.hovered ? button.textHoverColor : button.textColor
             visible: source != "" && !button.isIconOnRightSide
             anchors.verticalCenter: parent.verticalCenter
@@ -78,6 +78,8 @@ Button
             source: buttonIconLeft.source
             height: buttonText.height
             width: visible ? height : 0
+            sourceSize.width: width
+            sourceSize.height: height
             color: buttonIconLeft.color
             visible: source != "" && button.isIconOnRightSide
             anchors.verticalCenter: buttonIconLeft.verticalCenter
@@ -114,4 +116,4 @@ Button
         delay: 500
         visible: text != "" && button.hovered
     }
-}
+}

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -55,7 +55,7 @@ Item
 
         leftPadding: UM.Theme.getSize("narrow_margin").width //Need more space than usual here for wide text.
         rightPadding: UM.Theme.getSize("narrow_margin").width
-        tooltip: catalog.i18nc("@info:tooltip", "Select the active output device")
+        tooltip: popup.opened ? "" : catalog.i18nc("@info:tooltip", "Select the active output device")
         iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom")
         color: UM.Theme.getColor("action_panel_secondary")
         visible: (devicesModel.deviceCount > 1)

resources/qml/ActionPanel/OutputProcessWidget.qml

@@ -44,7 +44,7 @@ Column
                 rightMargin: UM.Theme.getSize("thin_margin").height
             }
 
-            Cura.IconLabel
+            Cura.IconWithText
             {
                 id: estimatedTime
                 width: parent.width
@@ -54,7 +54,7 @@ Column
                 font: UM.Theme.getFont("default_bold")
             }
 
-            Cura.IconLabel
+            Cura.IconWithText
             {
                 id: estimatedCosts
                 width: parent.width
@@ -84,7 +84,6 @@ Column
                     return totalWeights + "g · " + totalLengths.toFixed(2) + "m"
                 }
                 source: UM.Theme.getIcon("spool")
-                font: UM.Theme.getFont("default")
             }
         }
 

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -52,7 +52,7 @@ Column
         renderType: Text.NativeRendering
     }
 
-    Cura.IconLabel
+    Cura.IconWithText
     {
         id: unableToSliceMessage
         width: parent.width
@@ -61,7 +61,6 @@ Column
         text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice")
         source: UM.Theme.getIcon("warning")
         color: UM.Theme.getColor("warning")
-        font: UM.Theme.getFont("default")
     }
 
     // Progress bar, only visible when the backend is in the process of slice the printjob

resources/qml/Cura.qml

@@ -88,7 +88,7 @@ UM.MainWindow
             window: base
         }
 
-        Rectangle
+        Item
         {
             id: headerBackground
             anchors
@@ -192,23 +192,6 @@ UM.MainWindow
                 }
             }
 
-            Connections
-            {
-                target: stageMenu.item
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
-            }
-
-            JobSpecs
-            {
-                id: jobSpecs
-                anchors
-                {
-                    bottom: parent.bottom
-                    bottomMargin: UM.Theme.getSize("default_margin").height
-                }
-            }
-
             Toolbar
             {
                 // The toolbar is the left bar that is populated by all the tools (which are dynamicly populated by
@@ -238,6 +221,19 @@ UM.MainWindow
                 }
             }
 
+            JobSpecs
+            {
+                id: jobSpecs
+                visible: CuraApplication.platformActivity
+                anchors
+                {
+                    left: parent.left
+                    bottom: viewOrientationControls.top
+                    margins: UM.Theme.getSize("default_margin").width
+                    bottomMargin: UM.Theme.getSize("thin_margin").width
+                }
+            }
+
             ViewOrientationControls
             {
                 id: viewOrientationControls
@@ -245,9 +241,8 @@ UM.MainWindow
                 anchors
                 {
                     left: parent.left
-                    margins: UM.Theme.getSize("default_margin").width
-
                     bottom: parent.bottom
+                    margins: UM.Theme.getSize("default_margin").width
                 }
             }
 
@@ -298,8 +293,6 @@ UM.MainWindow
                 // Every time the stage is changed.
                 property var printSetupSelector: Cura.PrintSetupSelector
                 {
-                    onShowTooltip: base.showTooltip(item, location, text)
-                    onHideTooltip: base.hideTooltip()
                     width: UM.Theme.getSize("print_setup_widget").width
                     height: UM.Theme.getSize("stage_menu").height
                     headerCornerSide: RoundedRectangle.Direction.Right
@@ -318,7 +311,7 @@ UM.MainWindow
             }
         }
 
-        SidebarTooltip
+        PrintSetupTooltip
         {
             id: tooltip
         }

resources/qml/ExpandableComponent.qml

@@ -6,16 +6,15 @@ import Cura 1.0 as Cura
 
 import QtGraphicalEffects 1.0 // For the dropshadow
 
-// The expandable component has 3 major sub components:
+// The expandable component has 2 major sub components:
 //      * The headerItem; Always visible and should hold some info about what happens if the component is expanded
-//      * The popupItem; The content that needs to be shown if the component is expanded.
+//      * The contentItem; The content that needs to be shown if the component is expanded.
-//      * The icon; An icon that is displayed on the right of the drawer.
 Item
 {
     id: base
 
-    // Enumeration with the different possible alignments of the popup with respect of the headerItem
+    // Enumeration with the different possible alignments of the content with respect of the headerItem
-    enum PopupAlignment 
+    enum ContentAlignment
     {
         AlignLeft,
         AlignRight
@@ -24,21 +23,25 @@ Item
     // The headerItem holds the QML item that is always displayed.
     property alias headerItem: headerItemLoader.sourceComponent
 
-    // The popupItem holds the QML item that is shown when the "open" button is pressed
+    // The contentItem holds the QML item that is shown when the "open" button is pressed
-    property var popupItem
+    property alias contentItem: content.contentItem
 
-    property color popupBackgroundColor: UM.Theme.getColor("action_button")
+    property color contentBackgroundColor: UM.Theme.getColor("action_button")
 
     property color headerBackgroundColor: UM.Theme.getColor("action_button")
+    property color headerActiveColor: UM.Theme.getColor("secondary")
     property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
 
     property alias enabled: mouseArea.enabled
 
-    // Defines the alignment of the popup with respect of the headerItem, by default to the right
+    // Defines the alignment of the content with respect of the headerItem, by default to the right
-    property int popupAlignment: ExpandableComponent.PopupAlignment.AlignRight
+    property int contentAlignment: ExpandableComponent.ContentAlignment.AlignRight
 
-    // How much spacing is needed around the popupItem
+    // How much spacing is needed around the contentItem
-    property alias popupPadding: popup.padding
+    property alias contentPadding: content.padding
+
+    // How much spacing is needed for the contentItem by Y coordinate
+    property var contentSpacingY: UM.Theme.getSize("narrow_margin").width
 
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
@@ -52,9 +55,7 @@ Item
     property alias iconSize: collapseButton.height
 
     // Is the "drawer" open?
-    readonly property alias expanded: popup.visible
+    readonly property alias expanded: content.visible
-
-    property alias expandedHighlightColor: expandedHighlight.color
 
     // What should the radius of the header be. This is also influenced by the headerCornerSide
     property alias headerRadius: background.radius
@@ -68,33 +69,9 @@ Item
 
     property int shadowOffset: 2
 
-    function togglePopup()
+    function toggleContent()
     {
-        if(popup.visible)
+        content.visible = !content.visible
-        {
-            popup.close()
-        }
-        else
-        {
-            popup.open()
-        }
-    }
-
-    onPopupItemChanged:
-    {
-        // Since we want the size of the popup to be set by the size of the content,
-        // we need to do it like this.
-        popup.width = popupItem.width + 2 * popup.padding
-        popup.height = popupItem.height + 2 * popup.padding
-        popup.contentItem = popupItem
-    }
-
-    Connections
-    {
-        // Since it could be that the popup is dynamically populated, we should also take these changes into account.
-        target: popupItem
-        onWidthChanged: popup.width = popupItem.width + 2 * popup.padding
-        onHeightChanged: popup.height = popupItem.height + 2 * popup.padding
     }
 
     implicitHeight: 100 * screenScaleFactor
@@ -121,17 +98,6 @@ Item
             }
         }
 
-        // A highlight that is shown when the popup is expanded
-        Rectangle
-        {
-            id: expandedHighlight
-            width: parent.width
-            height: UM.Theme.getSize("thick_lining").height
-            color: UM.Theme.getColor("primary")
-            visible: expanded
-            anchors.bottom: parent.bottom
-        }
-
         UM.RecolorImage
         {
             id: collapseButton
@@ -141,22 +107,24 @@ Item
                 verticalCenter: parent.verticalCenter
                 margins: background.padding
             }
+            source: UM.Theme.getIcon("pencil")
             visible: source != "" && base.enabled
-            width: height
+            width: UM.Theme.getSize("standard_arrow").width
-            height: Math.round(0.2 * base.height)
+            height: UM.Theme.getSize("standard_arrow").height
-            color: UM.Theme.getColor("text")
+            color: UM.Theme.getColor("small_button_text")
         }
 
         MouseArea
         {
             id: mouseArea
             anchors.fill: parent
-            onClicked: togglePopup()
+            onClicked: toggleContent()
             hoverEnabled: true
             onEntered: background.color = headerHoverColor
-            onExited: background.color = headerBackgroundColor
+            onExited: background.color = expanded ? headerActiveColor : headerBackgroundColor
         }
     }
+
     DropShadow
     {
         id: shadow
@@ -171,26 +139,46 @@ Item
         z: background.z - 1
     }
 
-    Popup
+    Control
     {
-        id: popup
+        id: content
+        visible: false
 
-        // Ensure that the popup is located directly below the headerItem
+        // Ensure that the content is located directly below the headerItem
-        y: headerItemLoader.height + 2 * background.padding + base.shadowOffset
+        y: background.height + base.shadowOffset + base.contentSpacingY
 
-        // Make the popup aligned with the rest, using the property popupAlignment to decide whether is right or left.
+        // Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
         // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
-        x: popupAlignment == ExpandableComponent.PopupAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
+        x: contentAlignment == ExpandableComponent.ContentAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
         padding: UM.Theme.getSize("default_margin").width
-        closePolicy: Popup.CloseOnPressOutsideParent
 
         background: Cura.RoundedRectangle
         {
             cornerSide: Cura.RoundedRectangle.Direction.Down
-            color: popupBackgroundColor
+            color: contentBackgroundColor
             border.width: UM.Theme.getSize("default_lining").width
             border.color: UM.Theme.getColor("lining")
             radius: UM.Theme.getSize("default_radius").width
         }
+
+        contentItem: Item {}
+
+        onContentItemChanged:
+        {
+            // Since we want the size of the content to be set by the size of the content,
+            // we need to do it like this.
+            content.width = contentItem.width + 2 * content.padding
+            content.height = contentItem.height + 2 * content.padding
+        }
+    }
+
+    // DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the content item.
+    // Apparently the order in which these are handled matters and so the height is correctly updated if this is here.
+    Connections
+    {
+        // Since it could be that the content is dynamically populated, we should also take these changes into account.
+        target: content.contentItem
+        onWidthChanged: content.width = content.contentItem.width + 2 * content.padding
+        onHeightChanged: content.height = content.contentItem.height + 2 * content.padding
     }
 }

resources/qml/ExpandablePopup.qml

@@ -0,0 +1,204 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+import QtGraphicalEffects 1.0 // For the dropshadow
+
+// The expandable component has 2 major sub components:
+//      * The headerItem; Always visible and should hold some info about what happens if the component is expanded
+//      * The contentItem; The content that needs to be shown if the component is expanded.
+Item
+{
+    id: base
+
+    // Enumeration with the different possible alignments of the content with respect of the headerItem
+    enum ContentAlignment
+    {
+        AlignLeft,
+        AlignRight
+    }
+
+    // The headerItem holds the QML item that is always displayed.
+    property alias headerItem: headerItemLoader.sourceComponent
+
+    // The contentItem holds the QML item that is shown when the "open" button is pressed
+    property alias contentItem: content.contentItem
+
+    property color contentBackgroundColor: UM.Theme.getColor("action_button")
+
+    property color headerBackgroundColor: UM.Theme.getColor("action_button")
+    property color headerActiveColor: UM.Theme.getColor("secondary")
+    property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
+
+    property alias enabled: mouseArea.enabled
+
+    // Defines the alignment of the content with respect of the headerItem, by default to the right
+    property int contentAlignment: ExpandablePopup.ContentAlignment.AlignRight
+
+    // How much spacing is needed around the contentItem
+    property alias contentPadding: content.padding
+
+    // How much padding is needed around the header & button
+    property alias headerPadding: background.padding
+
+    // What icon should be displayed on the right.
+    property alias iconSource: collapseButton.source
+
+    property alias iconColor: collapseButton.color
+
+    // The icon size (it's always drawn as a square)
+    property alias iconSize: collapseButton.height
+
+    // Is the "drawer" open?
+    readonly property alias expanded: content.visible
+
+    property alias expandedHighlightColor: expandedHighlight.color
+
+    // What should the radius of the header be. This is also influenced by the headerCornerSide
+    property alias headerRadius: background.radius
+
+    // On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
+    property alias headerCornerSide: background.cornerSide
+
+    // Change the contentItem close behaviour
+    property alias contentClosePolicy : content.closePolicy
+
+    property alias headerShadowColor: shadow.color
+
+    property alias enableHeaderShadow: shadow.visible
+
+    property int shadowOffset: 2
+
+    function toggleContent()
+    {
+        if (content.visible)
+        {
+            content.close()
+        }
+        else
+        {
+            content.open()
+        }
+    }
+
+    implicitHeight: 100 * screenScaleFactor
+    implicitWidth: 400 * screenScaleFactor
+
+    RoundedRectangle
+    {
+        id: background
+        property real padding: UM.Theme.getSize("default_margin").width
+
+        color: headerBackgroundColor
+        anchors.fill: parent
+
+        Loader
+        {
+            id: headerItemLoader
+            anchors
+            {
+                left: parent.left
+                right: collapseButton.visible ? collapseButton.left : parent.right
+                top: parent.top
+                bottom: parent.bottom
+                margins: background.padding
+            }
+        }
+
+        // A highlight that is shown when the content is expanded
+        Rectangle
+        {
+            id: expandedHighlight
+            width: parent.width
+            height: UM.Theme.getSize("thick_lining").height
+            color: UM.Theme.getColor("primary")
+            visible: expanded
+            anchors.bottom: parent.bottom
+        }
+
+        UM.RecolorImage
+        {
+            id: collapseButton
+            anchors
+            {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+                margins: background.padding
+            }
+            source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+            visible: source != "" && base.enabled
+            width: UM.Theme.getSize("standard_arrow").width
+            height: UM.Theme.getSize("standard_arrow").height
+            color: UM.Theme.getColor("small_button_text")
+        }
+
+        MouseArea
+        {
+            id: mouseArea
+            anchors.fill: parent
+            onClicked: toggleContent()
+            hoverEnabled: true
+            onEntered: background.color = headerHoverColor
+            onExited: background.color = headerBackgroundColor
+        }
+    }
+
+    DropShadow
+    {
+        id: shadow
+        // Don't blur the shadow
+        radius: 0
+        anchors.fill: background
+        source: background
+        verticalOffset: base.shadowOffset
+        visible: true
+        color: UM.Theme.getColor("action_button_shadow")
+        // Should always be drawn behind the background.
+        z: background.z - 1
+    }
+
+    Popup
+    {
+        id: content
+
+        // Ensure that the content is located directly below the headerItem
+        y: background.height + base.shadowOffset
+
+        // Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
+        // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
+        x: contentAlignment == ExpandablePopup.ContentAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
+        padding: UM.Theme.getSize("default_margin").width
+        closePolicy: Popup.CloseOnPressOutsideParent
+
+        background: Cura.RoundedRectangle
+        {
+            cornerSide: Cura.RoundedRectangle.Direction.Down
+            color: contentBackgroundColor
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("lining")
+            radius: UM.Theme.getSize("default_radius").width
+        }
+
+        contentItem: Item {}
+
+        onContentItemChanged:
+        {
+            // Since we want the size of the content to be set by the size of the content,
+            // we need to do it like this.
+            content.width = contentItem.width + 2 * content.padding
+            content.height = contentItem.height + 2 * content.padding
+        }
+    }
+
+    // DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the content item.
+    // Apparently the order in which these are handled matters and so the height is correctly updated if this is here.
+    Connections
+    {
+        // Since it could be that the content is dynamically populated, we should also take these changes into account.
+        target: content.contentItem
+        onWidthChanged: content.width = content.contentItem.width + 2 * content.padding
+        onHeightChanged: content.height = content.contentItem.height + 2 * content.padding
+    }
+}

resources/qml/ExtruderIcon.qml

@@ -23,7 +23,7 @@ Item
         anchors.fill: parent
 
         source: UM.Theme.getIcon("extruder_button")
-        color: extruderEnabled ? materialColor: "gray"
+        color: extruderEnabled ? materialColor: UM.Theme.getColor("disabled")
     }
 
     Rectangle

resources/qml/IconLabel.qml

@@ -1,51 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
-
-import UM 1.1 as UM
-
-// This item will show a label with a squared icon in the left
-Item
-{
-    id: container
-
-    property alias text: label.text
-    property alias source: icon.source
-    property alias color: label.color
-    property alias font: label.font
-    property alias iconSize: icon.width
-
-    implicitHeight: icon.height
-
-    UM.RecolorImage
-    {
-        id: icon
-
-        anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
-
-        source: ""
-        width: UM.Theme.getSize("section_icon").width
-        height: width
-
-        color: label.color
-        visible: source != ""
-    }
-
-    Label
-    {
-        id: label
-        anchors.left: icon.visible ? icon.right : parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: UM.Theme.getSize("thin_margin").width
-        anchors.verticalCenter: icon.verticalCenter
-        text: "Empty label"
-        elide: Text.ElideRight
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("default")
-        renderType: Text.NativeRendering
-    }
-}

resources/qml/IconWithText.qml

@@ -13,9 +13,11 @@ import Cura 1.0 as Cura
 // It sets the icon size + half of the content as its minium width (in which case it will elide the text)
 Item
 {
-    property alias iconColor: icon.color
     property alias source: icon.source
+    property alias iconSize: icon.width
+    property alias color: label.color
     property alias text: label.text
+    property alias font: label.font
 
     property real margin: UM.Theme.getSize("narrow_margin").width
 
@@ -37,7 +39,7 @@ Item
         width: UM.Theme.getSize("section_icon").width
         height: UM.Theme.getSize("section_icon").height
 
-        color: "black"
+        color: label.color
 
         anchors
         {

resources/qml/JobSpecs.qml

@@ -9,118 +9,110 @@ import QtQuick.Layouts 1.1
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
-Item {
+Item
+{
     id: base
 
     property bool activity: CuraApplication.platformActivity
     property string fileBaseName: PrintInformation.baseName
 
-    UM.I18nCatalog { id: catalog; name: "cura"}
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
 
+    width: childrenRect.width
     height: childrenRect.height
 
-    onActivityChanged: {
+    onActivityChanged:
-        if (activity == false) {
+    {
+        if (!activity)
+        {
             //When there is no mesh in the buildplate; the printJobTextField is set to an empty string so it doesn't set an empty string as a jobName (which is later used for saving the file)
-            PrintInformation.baseName = ''
+            PrintInformation.baseName = ""
         }
     }
 
-    Rectangle
+    Item
     {
         id: jobNameRow
         anchors.top: parent.top
-        anchors.right: parent.right
+        anchors.left: parent.left
         height: UM.Theme.getSize("jobspecs_line").height
-        visible: base.activity
 
-        Item
+        Button
         {
-            width: parent.width
+            id: printJobPencilIcon
-            height: parent.height
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            width: UM.Theme.getSize("save_button_specs_icons").width
+            height: UM.Theme.getSize("save_button_specs_icons").height
 
-            Button
+            onClicked:
             {
-                id: printJobPencilIcon
+                printJobTextfield.selectAll()
-                anchors.right: parent.right
+                printJobTextfield.focus = true
-                anchors.verticalCenter: parent.verticalCenter
-                width: UM.Theme.getSize("save_button_specs_icons").width
-                height: UM.Theme.getSize("save_button_specs_icons").height
-
-                onClicked:
-                {
-                    printJobTextfield.selectAll();
-                    printJobTextfield.focus = true;
-                }
-                style: ButtonStyle
-                {
-                    background: Item
-                    {
-                        UM.RecolorImage
-                        {
-                            width: UM.Theme.getSize("save_button_specs_icons").width;
-                            height: UM.Theme.getSize("save_button_specs_icons").height;
-                            sourceSize.height: width;
-                            color: control.hovered ? UM.Theme.getColor("text_scene_hover") : UM.Theme.getColor("text_scene");
-                            source: UM.Theme.getIcon("pencil");
-                        }
-                    }
-                }
             }
 
-            TextField
+            style: ButtonStyle
             {
-                id: printJobTextfield
+                background: Item
-                anchors.right: printJobPencilIcon.left
+                {
-                anchors.rightMargin: Math.round(UM.Theme.getSize("default_margin").width / 2)
+                    UM.RecolorImage
-                height: UM.Theme.getSize("jobspecs_line").height
+                    {
-                width: Math.max(__contentWidth + UM.Theme.getSize("default_margin").width, 50)
+                        width: UM.Theme.getSize("save_button_specs_icons").width
-                maximumLength: 120
+                        height: UM.Theme.getSize("save_button_specs_icons").height
-                property int unremovableSpacing: 5
+                        sourceSize.width: width
-                text: PrintInformation.jobName
+                        sourceSize.height: width
-                horizontalAlignment: TextInput.AlignRight
+                        color: control.hovered ? UM.Theme.getColor("text_scene_hover") : UM.Theme.getColor("text_scene")
-                onEditingFinished: {
+                        source: UM.Theme.getIcon("pencil")
-                    var new_name = text == "" ? catalog.i18nc("@text Print job name", "Untitled") : text;
-                    PrintInformation.setJobName(new_name, true);
-                    printJobTextfield.focus = false;
-                }
-                validator: RegExpValidator {
-                    regExp: /^[^\\\/\*\?\|\[\]]*$/
-                }
-                style: TextFieldStyle{
-                    textColor: UM.Theme.getColor("text_scene");
-                    font: UM.Theme.getFont("default_bold");
-                    background: Rectangle {
-                        opacity: 0
-                        border.width: 0
                     }
                 }
             }
         }
-    }
 
-    Row {
+        TextField
-        id: additionalComponentsRow
+        {
-        anchors.top: jobNameRow.bottom
+            id: printJobTextfield
-        anchors.right: parent.right
+            anchors.left: printJobPencilIcon.right
+            anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+            height: UM.Theme.getSize("jobspecs_line").height
+            width: Math.max(__contentWidth + UM.Theme.getSize("default_margin").width, 50)
+            maximumLength: 120
+            text: PrintInformation.jobName
+            horizontalAlignment: TextInput.AlignLeft
+
+            onEditingFinished:
+            {
+                var new_name = text == "" ? catalog.i18nc("@text Print job name", "Untitled") : text
+                PrintInformation.setJobName(new_name, true)
+                printJobTextfield.focus = false
+            }
+
+            validator: RegExpValidator {
+                regExp: /^[^\\\/\*\?\|\[\]]*$/
+            }
+
+            style: TextFieldStyle
+            {
+                textColor: UM.Theme.getColor("text_scene")
+                font: UM.Theme.getFont("default_bold")
+                background: Rectangle
+                {
+                    opacity: 0
+                    border.width: 0
+                }
+            }
+        }
     }
 
     Label
     {
         id: boundingSpec
         anchors.top: jobNameRow.bottom
-        anchors.right: additionalComponentsRow.left
+        anchors.left: parent.left
-        anchors.rightMargin:
+
-        {
-            if (additionalComponentsRow.width > 0)
-            {
-                return UM.Theme.getSize("default_margin").width
-            }
-            else
-            {
-                return 0;
-            }
-        }
         height: UM.Theme.getSize("jobspecs_line").height
         verticalAlignment: Text.AlignVCenter
         font: UM.Theme.getFont("default_bold")
@@ -128,21 +120,34 @@ Item {
         text: CuraApplication.getSceneBoundingBoxString
     }
 
-    Component.onCompleted: {
+    Row
+    {
+        id: additionalComponentsRow
+        anchors.top: boundingSpec.top
+        anchors.bottom: boundingSpec.bottom
+        anchors.left: boundingSpec.right
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+    }
+
+    Component.onCompleted:
+    {
         base.addAdditionalComponents("jobSpecsButton")
     }
 
-    Connections {
+    Connections
+    {
         target: CuraApplication
         onAdditionalComponentsChanged: base.addAdditionalComponents("jobSpecsButton")
     }
 
-    function addAdditionalComponents (areaId) {
+    function addAdditionalComponents(areaId)
-        if(areaId == "jobSpecsButton") {
+    {
-            for (var component in CuraApplication.additionalComponents["jobSpecsButton"]) {
+        if (areaId == "jobSpecsButton")
+        {
+            for (var component in CuraApplication.additionalComponents["jobSpecsButton"])
+            {
                 CuraApplication.additionalComponents["jobSpecsButton"][component].parent = additionalComponentsRow
             }
         }
     }
-
 }

resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml

@@ -72,8 +72,8 @@ Button
                     right: parent.right
                     rightMargin: parent.padding
                 }
-                height: visible ? Math.round(UM.Theme.getSize("thick_lining").height / 2) : 0
+                height: visible ? Math.round(UM.Theme.getSize("default_lining").height / 2) : 0
-                color: UM.Theme.getColor("text")
+                color: UM.Theme.getColor("lining")
             }
 
             Item

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -64,11 +64,12 @@ Column
             section.criteria: ViewSection.FullString
             section.delegate: Item
             {
-                height: printerTypeLabel.height + UM.Theme.getSize("default_margin").height
+                height: printerTypeLabel.height + UM.Theme.getSize("default_margin").height * 2 //Causes a default margin above the label and a default margin below the label.
                 Cura.PrinterTypeLabel
                 {
                     id: printerTypeLabel
                     text: Cura.MachineManager.getAbbreviatedMachineName(section)
+                    anchors.verticalCenter: parent.verticalCenter //One default margin above and one below.
                 }
             }
 

resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml

@@ -13,7 +13,7 @@ import Cura 1.0 as Cura
  * Menu that allows you to select the configuration of the current printer, such
  * as the nozzle sizes and materials in each extruder.
  */
-Cura.ExpandableComponent
+Cura.ExpandablePopup
 {
     id: base
 
@@ -30,14 +30,15 @@ Cura.ExpandableComponent
 
     enum ConfigurationMethod
     {
-        AUTO,
+        Auto,
-        CUSTOM
+        Custom
     }
 
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+    enabled: Cura.MachineManager.hasMaterials || Cura.MachineManager.hasVariants || Cura.MachineManager.hasVariantBuildplates; //Only let it drop down if there is any configuration that you could change.
+
     headerItem: Item
     {
-        // Horizontal list that shows the extruders
+        // Horizontal list that shows the extruders and their materials
         ListView
         {
             id: extrudersList
@@ -45,7 +46,7 @@ Cura.ExpandableComponent
             orientation: ListView.Horizontal
             anchors.fill: parent
             model: extrudersModel
-            visible: base.enabled
+            visible: Cura.MachineManager.hasMaterials
 
             delegate: Item
             {
@@ -102,26 +103,28 @@ Cura.ExpandableComponent
                 }
             }
         }
+
+        //Placeholder text if there is a configuration to select but no materials (so we can't show the materials per extruder).
+        Label
+        {
+            text: catalog.i18nc("@label", "Select configuration")
+            elide: Text.ElideRight
+            font: UM.Theme.getFont("default")
+            color: UM.Theme.getColor("text")
+            renderType: Text.NativeRendering
+
+            visible: !Cura.MachineManager.hasMaterials && (Cura.MachineManager.hasVariants || Cura.MachineManager.hasVariantBuildplates)
+
+            anchors
+            {
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width
+                verticalCenter: parent.verticalCenter
+            }
+        }
     }
 
-    //Disable the menu if there are no materials, variants or build plates to change.
+    contentItem: Column
-    function updateEnabled()
-    {
-        var active_definition_id = Cura.MachineManager.activeMachine.definition.id;
-        var has_materials = Cura.ContainerManager.getContainerMetaDataEntry(active_definition_id, "has_materials");
-        var has_variants = Cura.ContainerManager.getContainerMetaDataEntry(active_definition_id, "has_variants");
-        var has_buildplates = Cura.ContainerManager.getContainerMetaDataEntry(active_definition_id, "has_variant_buildplates");
-        base.enabled = has_materials || has_variants || has_buildplates; //Only let it drop down if there is any configuration that you could change.
-    }
-
-    Connections
-    {
-        target: Cura.MachineManager
-        onGlobalContainerChanged: base.updateEnabled();
-    }
-    Component.onCompleted: updateEnabled();
-
-    popupItem: Column
     {
         id: popupItem
         width: base.width - 2 * UM.Theme.getSize("default_margin").width
@@ -134,22 +137,34 @@ Cura.ExpandableComponent
             is_connected = Cura.MachineManager.activeMachineNetworkKey !== "" && Cura.MachineManager.printerConnected //Re-evaluate.
         }
 
-        property int configuration_method: is_connected ? ConfigurationMenu.ConfigurationMethod.AUTO : ConfigurationMenu.ConfigurationMethod.CUSTOM //Auto if connected to a printer at start-up, or Custom if not.
+        property int configuration_method: is_connected ? ConfigurationMenu.ConfigurationMethod.Auto : ConfigurationMenu.ConfigurationMethod.Custom //Auto if connected to a printer at start-up, or Custom if not.
 
         Item
         {
             width: parent.width
-            height: childrenRect.height
+            height:
+            {
+                var height = 0;
+                if(autoConfiguration.visible)
+                {
+                    height += autoConfiguration.height;
+                }
+                if(customConfiguration.visible)
+                {
+                    height += customConfiguration.height;
+                }
+                return height;
+            }
             AutoConfiguration
             {
                 id: autoConfiguration
-                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.AUTO
+                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.Auto
             }
 
             CustomConfiguration
             {
                 id: customConfiguration
-                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.CUSTOM
+                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.Custom
             }
         }
 
@@ -157,7 +172,7 @@ Cura.ExpandableComponent
         {
             id: separator
             visible: buttonBar.visible
-            x: -popupPadding
+            x: -contentPadding
 
             width: base.width
             height: UM.Theme.getSize("default_lining").height
@@ -177,7 +192,7 @@ Cura.ExpandableComponent
             Cura.SecondaryButton
             {
                 id: goToCustom
-                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.AUTO
+                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.Auto
                 text: catalog.i18nc("@label", "Custom")
 
                 anchors.right: parent.right
@@ -185,18 +200,18 @@ Cura.ExpandableComponent
                 iconSource: UM.Theme.getIcon("arrow_right")
                 isIconOnRightSide: true
 
-                onClicked: popupItem.configuration_method = ConfigurationMenu.ConfigurationMethod.CUSTOM
+                onClicked: popupItem.configuration_method = ConfigurationMenu.ConfigurationMethod.Custom
             }
 
             Cura.SecondaryButton
             {
                 id: goToAuto
-                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.CUSTOM
+                visible: popupItem.configuration_method == ConfigurationMenu.ConfigurationMethod.Custom
                 text: catalog.i18nc("@label", "Configurations")
 
                 iconSource: UM.Theme.getIcon("arrow_left")
 
-                onClicked: popupItem.configuration_method = ConfigurationMenu.ConfigurationMethod.AUTO
+                onClicked: popupItem.configuration_method = ConfigurationMenu.ConfigurationMethod.Auto
             }
         }
     }

resources/qml/Menus/ConfigurationMenu/CustomConfiguration.qml

@@ -36,10 +36,57 @@ Item
         }
     }
 
+    //Printer type selector.
+    Item
+    {
+        id: printerTypeSelectorRow
+        visible:
+        {
+            return Cura.MachineManager.printerOutputDevices.length >= 1 //If connected...
+                && Cura.MachineManager.printerOutputDevices[0].connectedPrintersTypeCount != null //...and we have configuration information...
+                && Cura.MachineManager.printerOutputDevices[0].connectedPrintersTypeCount.length > 1; //...and there is more than one type of printer in the configuration list.
+        }
+        height: visible ? childrenRect.height : 0
+
+        anchors
+        {
+            left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+            top: header.bottom
+            topMargin: visible ? UM.Theme.getSize("default_margin").height : 0
+        }
+
+        Label
+        {
+            text: catalog.i18nc("@label", "Printer")
+            width: Math.round(parent.width * 0.3) - UM.Theme.getSize("default_margin").width
+            height: contentHeight
+            font: UM.Theme.getFont("default")
+            color: UM.Theme.getColor("text")
+            anchors.verticalCenter: printerTypeSelector.verticalCenter
+            anchors.left: parent.left
+        }
+
+        OldControls.ToolButton
+        {
+            id: printerTypeSelector
+            text: Cura.MachineManager.activeMachineDefinitionName
+            tooltip: Cura.MachineManager.activeMachineDefinitionName
+            height: UM.Theme.getSize("setting_control").height
+            width: Math.round(parent.width * 0.7) + UM.Theme.getSize("default_margin").width
+            anchors.right: parent.right
+            style: UM.Theme.styles.print_setup_header_button
+
+            menu: Cura.PrinterTypeMenu { }
+        }
+    }
+
     UM.TabRow
     {
         id: tabBar
-        anchors.top: header.bottom
+        anchors.top: printerTypeSelectorRow.bottom
         anchors.topMargin: UM.Theme.getSize("default_margin").height
         visible: extrudersModel.count > 1
 
@@ -141,6 +188,7 @@ Item
             Row
             {
                 height: UM.Theme.getSize("print_setup_item").height
+                visible: extrudersModel.count > 1  // If there is only one extruder, there is no point to enable/disable that.
 
                 Label
                 {
@@ -150,7 +198,6 @@ Item
                     color: UM.Theme.getColor("text")
                     height: parent.height
                     width: selectors.textWidth
-                    visible: extrudersModel.count > 1
                     renderType: Text.NativeRendering
                 }
 
@@ -160,7 +207,6 @@ Item
                     enabled: !checked || Cura.MachineManager.numberExtrudersEnabled > 1 //Disable if it's the last enabled extruder.
                     height: UM.Theme.getSize("setting_control").height
                     style: UM.Theme.styles.checkbox
-                    visible: extrudersModel.count > 1
 
                     /* Use a MouseArea to process the click on this checkbox.
                        This is necessary because actually clicking the checkbox
@@ -179,6 +225,8 @@ Item
             Row
             {
                 height: UM.Theme.getSize("print_setup_item").height
+                visible: Cura.MachineManager.hasMaterials
+
                 Label
                 {
                     text: catalog.i18nc("@label", "Material")
@@ -187,7 +235,6 @@ Item
                     color: UM.Theme.getColor("text")
                     height: parent.height
                     width: selectors.textWidth
-                    visible: materialSelection.visible
                     renderType: Text.NativeRendering
                 }
 
@@ -200,12 +247,11 @@ Item
 
                     text: Cura.MachineManager.activeStack != null ? Cura.MachineManager.activeStack.material.name : ""
                     tooltip: text
-                    visible: Cura.MachineManager.hasMaterials
 
                     height: UM.Theme.getSize("setting_control").height
                     width: selectors.controlWidth
 
-                    style: UM.Theme.styles.sidebar_header_button
+                    style: UM.Theme.styles.print_setup_header_button
                     activeFocusOnPress: true
                     menu: Cura.MaterialMenu
                     {
@@ -217,6 +263,7 @@ Item
             Row
             {
                 height: UM.Theme.getSize("print_setup_item").height
+                visible: Cura.MachineManager.hasVariants
 
                 Label
                 {
@@ -226,7 +273,6 @@ Item
                     color: UM.Theme.getColor("text")
                     height: parent.height
                     width: selectors.textWidth
-                    visible: variantSelection.visible
                     renderType: Text.NativeRendering
                 }
 
@@ -234,12 +280,11 @@ Item
                 {
                     id: variantSelection
                     text: Cura.MachineManager.activeVariantName
-                    tooltip: Cura.MachineManager.activeVariantName;
+                    tooltip: Cura.MachineManager.activeVariantName
-                    visible: Cura.MachineManager.hasVariants
 
                     height: UM.Theme.getSize("setting_control").height
                     width: selectors.controlWidth
-                    style: UM.Theme.styles.sidebar_header_button
+                    style: UM.Theme.styles.print_setup_header_button
                     activeFocusOnPress: true;
 
                     menu: Cura.NozzleMenu { extruderIndex: Cura.ExtruderManager.activeExtruderIndex }

resources/qml/Menus/ConfigurationMenu/PrintCoreConfiguration.qml

@@ -20,7 +20,7 @@ Row
     {
         materialColor: printCoreConfiguration.material.color
         anchors.verticalCenter: parent.verticalCenter
-        extruderEnabled: printCoreConfiguration.material.name !== "" && printCoreConfiguration.hotendID !== ""
+        extruderEnabled: printCoreConfiguration.material.brand !== "" && printCoreConfiguration.hotendID !== ""
     }
 
     Column
@@ -36,7 +36,7 @@ Row
         }
         Label
         {
-            text: printCoreConfiguration.material.name ? printCoreConfiguration.material.name : " " //Use space so that the height is still correct.
+            text: printCoreConfiguration.material.brand ? printCoreConfiguration.material.name : " " //Use space so that the height is still correct.
             renderType: Text.NativeRendering
             elide: Text.ElideRight
             font: UM.Theme.getFont("default")

resources/qml/MonitorButton.qml

@@ -309,7 +309,7 @@ Item
                 }
             }
 
-            style: UM.Theme.styles.sidebar_action_button
+            style: UM.Theme.styles.print_setup_action_button
         }
 
         Button
@@ -325,7 +325,7 @@ Item
             text: catalog.i18nc("@label", "Abort Print")
             onClicked: confirmationDialog.visible = true
 
-            style: UM.Theme.styles.sidebar_action_button
+            style: UM.Theme.styles.print_setup_action_button
         }
 
         MessageDialog

resources/qml/MonitorSidebar.qml

@@ -173,7 +173,7 @@ Rectangle
         anchors.bottom: parent.bottom
     }
 
-    SidebarTooltip
+    PrintSetupTooltip
     {
         id: tooltip
     }

resources/qml/ObjectsList.qml

@@ -224,7 +224,7 @@ Rectangle
     {
         id: arrangeAllBuildPlatesButton;
         text: catalog.i18nc("@action:button","Arrange to all build plates");
-        style: UM.Theme.styles.sidebar_action_button
+        style: UM.Theme.styles.print_setup_action_button
         height: UM.Theme.getSize("objects_menu_button").height;
         tooltip: '';
         anchors
@@ -244,7 +244,7 @@ Rectangle
     {
         id: arrangeBuildPlateButton;
         text: catalog.i18nc("@action:button","Arrange current build plate");
-        style: UM.Theme.styles.sidebar_action_button
+        style: UM.Theme.styles.print_setup_action_button
         height: UM.Theme.getSize("objects_menu_button").height;
         tooltip: '';
         anchors

resources/qml/PrintMonitor.qml

@@ -49,7 +49,7 @@ Rectangle
     property var activePrinter: connectedDevice != null ? connectedDevice.activePrinter : null
     property var activePrintJob: activePrinter != null ? activePrinter.activePrintJob: null
 
-    SidebarTooltip
+    PrintSetupTooltip
     {
         id: tooltip
     }

resources/qml/PrintSetupSelector.qml

@@ -1,261 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.3
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-import "Menus"
-import "Menus/ConfigurationMenu"
-
-Cura.ExpandableComponent
-{
-    id: base
-
-    property int currentModeIndex: -1
-    property bool hideSettings: PrintInformation.preSliced
-
-    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)
-    signal hideTooltip()
-
-    implicitWidth: 200 * screenScaleFactor
-    height: childrenRect.height
-    iconSource: UM.Theme.getIcon("pencil")
-
-    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
-
-    UM.I18nCatalog
-    {
-        id: catalog
-        name: "cura"
-    }
-
-    Timer
-    {
-        id: tooltipDelayTimer
-        interval: 500
-        repeat: false
-        property var item
-        property string text
-
-        onTriggered: base.showTooltip(base, {x: 0, y: item.y}, text)
-    }
-
-    headerItem: RowLayout
-    {
-        anchors.fill: parent
-
-        IconWithText
-        {
-            source: UM.Theme.getIcon("category_layer_height")
-            text: Cura.MachineManager.activeStack ? Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm" : ""
-
-            UM.SettingPropertyProvider
-            {
-                id: layerHeight
-                containerStack: Cura.MachineManager.activeStack
-                key: "layer_height"
-                watchedProperties: ["value"]
-            }
-        }
-
-        IconWithText
-        {
-            source: UM.Theme.getIcon("category_infill")
-            text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
-
-            UM.SettingPropertyProvider
-            {
-                id: infillDensity
-                containerStack: Cura.MachineManager.activeStack
-                key: "infill_sparse_density"
-                watchedProperties: ["value"]
-            }
-        }
-
-        IconWithText
-        {
-            source: UM.Theme.getIcon("category_support")
-            text: supportEnabled.properties.value == "True" ? enabledText : disabledText
-
-
-            UM.SettingPropertyProvider
-            {
-                id: supportEnabled
-                containerStack: Cura.MachineManager.activeMachine
-                key: "support_enable"
-                watchedProperties: ["value"]
-            }
-        }
-
-        IconWithText
-        {
-            source: UM.Theme.getIcon("category_adhesion")
-            text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText
-
-            UM.SettingPropertyProvider
-            {
-                id: platformAdhesionType
-                containerStack: Cura.MachineManager.activeMachine
-                key: "adhesion_type"
-                watchedProperties: [ "value"]
-            }
-        }
-    }
-
-    popupItem: Item
-    {
-        height: settingsModeSelection.height + sidebarContents.height + 2 * UM.Theme.getSize("default_margin").height
-        width: UM.Theme.getSize("print_setup_widget").width
-        ListView
-        {
-            // Settings mode selection toggle
-            id: settingsModeSelection
-            model: modesListModel
-            height: UM.Theme.getSize("print_setup_mode_toggle").height
-            visible: !hideSettings
-
-            anchors
-            {
-                right: parent.right
-                left: parent.left
-                margins: UM.Theme.getSize("thick_margin").width
-            }
-
-            ButtonGroup
-            {
-                id: modeMenuGroup
-            }
-
-            delegate: Button
-            {
-                id: control
-
-                height: settingsModeSelection.height
-                width: Math.round(parent.width / 2)
-
-                anchors.left: parent.left
-                anchors.leftMargin: model.index * Math.round(settingsModeSelection.width / 2)
-                anchors.verticalCenter: parent.verticalCenter
-
-                ButtonGroup.group: modeMenuGroup
-
-                checkable: true
-                checked: base.currentModeIndex == index
-                onClicked: base.currentModeIndex = index
-
-                onHoveredChanged:
-                {
-                    if (hovered)
-                    {
-                        tooltipDelayTimer.item = settingsModeSelection
-                        tooltipDelayTimer.text = model.tooltipText
-                        tooltipDelayTimer.start()
-                    }
-                    else
-                    {
-                        tooltipDelayTimer.stop()
-                        base.hideTooltip()
-                    }
-                }
-
-                background: Rectangle
-                {
-                    border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
-                    border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : control.hovered ? UM.Theme.getColor("action_button_hovered_border") : UM.Theme.getColor("action_button_border")
-
-                    // For some reason, QtQuick decided to use the color of the background property as text color for the contentItem, so here it is
-                    color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
-                }
-
-                contentItem: Label
-                {
-                    text: model.text
-                    font: UM.Theme.getFont("default")
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    renderType: Text.NativeRendering
-                    elide: Text.ElideRight
-
-                    color:
-                    {
-                        if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text")
-                        }
-                        return UM.Theme.getColor("action_button_text")
-                    }
-                }
-            }
-        }
-
-        Item
-        {
-            id: sidebarContents
-            anchors.top: settingsModeSelection.bottom
-            anchors.topMargin: UM.Theme.getSize("thick_margin").height
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: UM.Theme.getSize("print_setup_widget").height
-
-            visible: !hideSettings
-
-            // We load both of them at once (instead of using a loader) because the advanced sidebar can take
-            // quite some time to load. So in this case we sacrifice memory for speed.
-            SidebarAdvanced
-            {
-                anchors.fill: parent
-                visible: currentModeIndex == 1
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
-            }
-
-            SidebarSimple
-            {
-                anchors.fill: parent
-                visible: currentModeIndex != 1
-                onShowTooltip: base.showTooltip(item, location, text)
-                onHideTooltip: base.hideTooltip()
-            }
-        }
-
-        // Setting mode: Recommended or Custom
-        ListModel
-        {
-            id: modesListModel
-        }
-
-        Component.onCompleted:
-        {
-            modesListModel.append({
-                text: catalog.i18nc("@title:tab", "Recommended"),
-                tooltipText: "<b>%1</b><br/><br/>%2".arg(catalog.i18nc("@tooltip:title", "Recommended Print Setup")).arg(catalog.i18nc("@tooltip", "Print with the recommended settings for the selected printer, material and quality."))
-            })
-            modesListModel.append({
-                text: catalog.i18nc("@title:tab", "Custom"),
-                tooltipText: "<b>%1</b><br/><br/>%2".arg(catalog.i18nc("@tooltip:title", "Custom Print Setup")).arg(catalog.i18nc("@tooltip", "Print with finegrained control over every last bit of the slicing process."))
-            })
-
-            var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
-
-            if(index != null && !isNaN(index))
-            {
-                currentModeIndex = index
-            }
-            else
-            {
-                currentModeIndex = 0
-            }
-        }
-    }
-}

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -0,0 +1,133 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+
+Item
+{
+    id: customPrintSetup
+    height: childrenRect.height + padding
+
+    property real padding: UM.Theme.getSize("default_margin").width
+    property bool multipleExtruders: extrudersModel.count > 1
+
+    Cura.ExtrudersModel
+    {
+        id: extrudersModel
+    }
+
+    // Profile selector row
+    GlobalProfileSelector
+    {
+        id: globalProfileRow
+        anchors
+        {
+            top: parent.top
+            topMargin: parent.padding
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+        }
+    }
+
+    UM.TabRow
+    {
+        id: tabBar
+
+        visible: multipleExtruders  // The tab row is only visible when there are more than 1 extruder
+
+        anchors
+        {
+            top: globalProfileRow.bottom
+            topMargin: UM.Theme.getSize("default_margin").height
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+        }
+
+        Repeater
+        {
+            id: repeater
+            model: extrudersModel
+            delegate: UM.TabRowButton
+            {
+                contentItem: Item
+                {
+                    Cura.ExtruderIcon
+                    {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        materialColor: model.color
+                        extruderEnabled: model.enabled
+                    }
+                }
+                onClicked:
+                {
+                    Cura.ExtruderManager.setActiveExtruderIndex(tabBar.currentIndex)
+                }
+            }
+        }
+
+        //When active extruder changes for some other reason, switch tabs.
+        //Don't directly link currentIndex to Cura.ExtruderManager.activeExtruderIndex!
+        //This causes a segfault in Qt 5.11. Something with VisualItemModel removing index -1. We have to use setCurrentIndex instead.
+        Connections
+        {
+            target: Cura.ExtruderManager
+            onActiveExtruderChanged:
+            {
+                tabBar.setCurrentIndex(Cura.ExtruderManager.activeExtruderIndex);
+            }
+        }
+
+        //When the model of the extruders is rebuilt, the list of extruders is briefly emptied and rebuilt.
+        //This causes the currentIndex of the tab to be in an invalid position which resets it to 0.
+        //Therefore we need to change it back to what it was: The active extruder index.
+        Connections
+        {
+            target: repeater.model
+            onModelChanged:
+            {
+                tabBar.setCurrentIndex(Cura.ExtruderManager.activeExtruderIndex)
+            }
+        }
+    }
+
+    Rectangle
+    {
+        height: UM.Theme.getSize("print_setup_widget").height
+        anchors
+        {
+            top: tabBar.visible ? tabBar.bottom : globalProfileRow.bottom
+            left: parent.left
+            leftMargin: parent.padding
+            right: parent.right
+            rightMargin: parent.padding
+            topMargin: -UM.Theme.getSize("default_lining").width
+        }
+        z: tabBar.z - 1
+        // Don't show the border when only one extruder
+        border.color: tabBar.visible ? UM.Theme.getColor("lining") : "transparent"
+        border.width: UM.Theme.getSize("default_lining").width
+
+        Cura.SettingView
+        {
+            anchors
+            {
+                fill: parent
+                topMargin: UM.Theme.getSize("default_margin").height
+                leftMargin: UM.Theme.getSize("default_margin").width
+                // Small space for the scrollbar
+                rightMargin: UM.Theme.getSize("narrow_margin").width
+                // Compensate for the negative margin in the parent
+                bottomMargin: UM.Theme.getSize("default_lining").width
+            }
+        }
+    }
+}

resources/qml/PrintSetupSelector/Custom/GlobalProfileSelector.qml

@@ -0,0 +1,100 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.2
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: globalProfileRow
+    height: childrenRect.height
+
+    Label
+    {
+        id: globalProfileLabel
+        anchors
+        {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: globalProfileSelection.left
+        }
+        text: catalog.i18nc("@label", "Profile")
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    ToolButton
+    {
+        id: globalProfileSelection
+
+        text: generateActiveQualityText()
+        width: UM.Theme.getSize("print_setup_big_item").width
+        height: UM.Theme.getSize("print_setup_big_item").height
+        anchors
+        {
+            top: parent.top
+            right: parent.right
+        }
+        tooltip: Cura.MachineManager.activeQualityOrQualityChangesName
+        style: UM.Theme.styles.print_setup_header_button
+        activeFocusOnPress: true
+        menu: Cura.ProfileMenu { }
+
+        function generateActiveQualityText()
+        {
+            var result = Cura.MachineManager.activeQualityOrQualityChangesName
+            if (Cura.MachineManager.isActiveQualityExperimental)
+            {
+                result += " (Experimental)"
+            }
+
+            if (Cura.MachineManager.isActiveQualitySupported)
+            {
+                if (Cura.MachineManager.activeQualityLayerHeight > 0)
+                {
+                    result += " <font color=\"" + UM.Theme.getColor("text_detail") + "\">"
+                    result += " - "
+                    result += Cura.MachineManager.activeQualityLayerHeight + "mm"
+                    result += "</font>"
+                }
+            }
+
+            return result
+        }
+
+        UM.SimpleButton
+        {
+            id: customisedSettings
+
+            visible: Cura.MachineManager.hasUserSettings
+            width: UM.Theme.getSize("print_setup_icon").width
+            height: UM.Theme.getSize("print_setup_icon").height
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: Math.round(UM.Theme.getSize("setting_preferences_button_margin").width - UM.Theme.getSize("thick_margin").width)
+
+            color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button");
+            iconSource: UM.Theme.getIcon("star")
+
+            onClicked:
+            {
+                forceActiveFocus();
+                Cura.Actions.manageProfiles.trigger()
+            }
+            onEntered:
+            {
+                var content = catalog.i18nc("@tooltip","Some setting/override values are different from the values stored in the profile.\n\nClick to open the profile manager.")
+                base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("default_margin").width, 0),  content)
+            }
+            onExited: base.hideTooltip()
+        }
+    }
+}

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -0,0 +1,36 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+Cura.ExpandableComponent
+{
+    id: printSetupSelector
+
+    property string enabledText: catalog.i18nc("@label:Should be short", "On")
+    property string disabledText: catalog.i18nc("@label:Should be short", "Off")
+
+    contentPadding: UM.Theme.getSize("default_lining").width
+
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
+
+    headerItem: PrintSetupSelectorHeader
+    {
+        anchors.fill: parent
+    }
+
+    Cura.ExtrudersModel
+    {
+        id: extrudersModel
+    }
+
+    contentItem: PrintSetupSelectorContents {}
+}

resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml

@@ -0,0 +1,200 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+import "Recommended"
+import "Custom"
+
+Item
+{
+    id: popup
+
+    width: UM.Theme.getSize("print_setup_widget").width - 2 * UM.Theme.getSize("default_margin").width
+    height: childrenRect.height
+
+    enum Mode
+    {
+        Recommended = 0,
+        Custom = 1
+    }
+
+    // Set the current mode index to the value that is stored in the preferences or Recommended mode otherwise.
+    property int currentModeIndex:
+    {
+        var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
+
+        if (index != null && !isNaN(index))
+        {
+            return index
+        }
+        return PrintSetupSelectorContents.Mode.Recommended
+    }
+    onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
+
+
+    // Header of the popup
+    Rectangle
+    {
+        id: header
+        height: UM.Theme.getSize("print_setup_widget_header").height
+        color: UM.Theme.getColor("secondary")
+
+        anchors
+        {
+            top: parent.top
+            right: parent.right
+            left: parent.left
+        }
+
+        Label
+        {
+            id: headerLabel
+            text: catalog.i18nc("@label", "Print settings")
+            font: UM.Theme.getFont("default")
+            renderType: Text.NativeRendering
+            verticalAlignment: Text.AlignVCenter
+            color: UM.Theme.getColor("text")
+            height: parent.height
+
+            anchors
+            {
+                topMargin: UM.Theme.getSize("default_margin").height
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").height
+            }
+        }
+
+        Button
+        {
+            id: closeButton
+            width: UM.Theme.getSize("message_close").width
+            height: UM.Theme.getSize("message_close").height
+
+            anchors
+            {
+                right: parent.right
+                rightMargin: UM.Theme.getSize("default_margin").width
+                verticalCenter: parent.verticalCenter
+            }
+
+            contentItem: UM.RecolorImage
+            {
+                anchors.fill: parent
+                sourceSize.width: width
+                sourceSize.height: width
+                color: UM.Theme.getColor("message_text")
+                source: UM.Theme.getIcon("cross1")
+            }
+
+            background: Item {}
+
+            onClicked: toggleContent() // Will hide the popup item
+        }
+    }
+
+    Rectangle
+    {
+        id: topSeparator
+
+        anchors.bottom: header.bottom
+        width: parent.width
+        height: UM.Theme.getSize("default_lining").height
+        color: UM.Theme.getColor("lining")
+    }
+
+    Item
+    {
+        id: contents
+        // Use the visible property instead of checking the currentModeIndex. That creates a binding that
+        // evaluates the new height every time the visible property changes.
+        height: recommendedPrintSetup.visible ? recommendedPrintSetup.height : customPrintSetup.height
+
+        anchors
+        {
+            top: header.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        RecommendedPrintSetup
+        {
+            id: recommendedPrintSetup
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+            visible: currentModeIndex == PrintSetupSelectorContents.Mode.Recommended
+        }
+
+        CustomPrintSetup
+        {
+            id: customPrintSetup
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+            visible: currentModeIndex == PrintSetupSelectorContents.Mode.Custom
+        }
+    }
+
+    Rectangle
+    {
+        id: buttonsSeparator
+
+        // The buttonsSeparator is inside the contents. This is to avoid a double line in the bottom
+        anchors.bottom: contents.bottom
+        width: parent.width
+        height: UM.Theme.getSize("default_lining").height
+        color: UM.Theme.getColor("lining")
+    }
+
+    Item
+    {
+        id: buttonRow
+        property real padding: UM.Theme.getSize("default_margin").width
+        height: childrenRect.height + 2 * padding
+
+        anchors
+        {
+            top: buttonsSeparator.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        Cura.SecondaryButton
+        {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.margins: parent.padding
+            leftPadding: UM.Theme.getSize("default_margin").width
+            rightPadding: UM.Theme.getSize("default_margin").width
+            text: catalog.i18nc("@button", "Recommended")
+            iconSource: UM.Theme.getIcon("arrow_left")
+            visible: currentModeIndex == PrintSetupSelectorContents.Mode.Custom
+            onClicked: currentModeIndex = PrintSetupSelectorContents.Mode.Recommended
+        }
+
+        Cura.SecondaryButton
+        {
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.margins: UM.Theme.getSize("default_margin").width
+            leftPadding: UM.Theme.getSize("default_margin").width
+            rightPadding: UM.Theme.getSize("default_margin").width
+            text: catalog.i18nc("@button", "Custom")
+            iconSource: UM.Theme.getIcon("arrow_right")
+            isIconOnRightSide: true
+            visible: currentModeIndex == PrintSetupSelectorContents.Mode.Recommended
+            onClicked: currentModeIndex = PrintSetupSelectorContents.Mode.Custom
+        }
+    }
+}

resources/qml/PrintSetupSelector/PrintSetupSelectorHeader.qml

@@ -0,0 +1,80 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+RowLayout
+{
+    Cura.IconWithText
+    {
+        source: UM.Theme.getIcon("category_layer_height")
+        text:
+        {
+            if (Cura.MachineManager.activeStack)
+            {
+                var text = Cura.MachineManager.activeQualityOrQualityChangesName
+                if (!Cura.MachineManager.hasNotSupportedQuality)
+                {
+                    text += " " + layerHeight.properties.value + "mm"
+                }
+                return text
+            }
+            return ""
+        }
+
+        UM.SettingPropertyProvider
+        {
+            id: layerHeight
+            containerStack: Cura.MachineManager.activeStack
+            key: "layer_height"
+            watchedProperties: ["value"]
+        }
+    }
+
+    Cura.IconWithText
+    {
+        source: UM.Theme.getIcon("category_infill")
+        text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
+
+        UM.SettingPropertyProvider
+        {
+            id: infillDensity
+            containerStack: Cura.MachineManager.activeStack
+            key: "infill_sparse_density"
+            watchedProperties: ["value"]
+        }
+    }
+
+    Cura.IconWithText
+    {
+        source: UM.Theme.getIcon("category_support")
+        text: supportEnabled.properties.value == "True" ? enabledText : disabledText
+
+        UM.SettingPropertyProvider
+        {
+            id: supportEnabled
+            containerStack: Cura.MachineManager.activeMachine
+            key: "support_enable"
+            watchedProperties: ["value"]
+        }
+    }
+
+    Cura.IconWithText
+    {
+        source: UM.Theme.getIcon("category_adhesion")
+        text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText
+
+        UM.SettingPropertyProvider
+        {
+            id: platformAdhesionType
+            containerStack: Cura.MachineManager.activeMachine
+            key: "adhesion_type"
+            watchedProperties: [ "value"]
+        }
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml

@@ -0,0 +1,100 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+
+//
+//  Adhesion
+//
+Item
+{
+    id: enableAdhesionRow
+    height: childrenRect.height
+
+    property real labelColumnWidth: Math.round(width / 3)
+
+    Cura.IconWithText
+    {
+        id: enableAdhesionRowTitle
+        anchors.top: parent.top
+        anchors.left: parent.left
+        source: UM.Theme.getIcon("category_adhesion")
+        text: catalog.i18nc("@label", "Adhesion")
+        width: labelColumnWidth
+    }
+
+    Item
+    {
+        id: enableAdhesionContainer
+        height: enableAdhesionCheckBox.height
+
+        anchors
+        {
+            left: enableAdhesionRowTitle.right
+            right: parent.right
+            verticalCenter: enableAdhesionRowTitle.verticalCenter
+        }
+
+        CheckBox
+        {
+            id: enableAdhesionCheckBox
+            anchors.verticalCenter: parent.verticalCenter
+
+            property alias _hovered: adhesionMouseArea.containsMouse
+
+            //: Setting enable printing build-plate adhesion helper checkbox
+            style: UM.Theme.styles.checkbox
+            enabled: recommendedPrintSetup.settingsEnabled
+
+            visible: platformAdhesionType.properties.enabled == "True"
+            checked: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none"
+
+            MouseArea
+            {
+                id: adhesionMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onClicked:
+                {
+                    var adhesionType = "skirt"
+                    if (!parent.checked)
+                    {
+                        // Remove the "user" setting to see if the rest of the stack prescribes a brim or a raft
+                        platformAdhesionType.removeFromContainer(0)
+                        adhesionType = platformAdhesionType.properties.value
+                        if(adhesionType == "skirt" || adhesionType == "none")
+                        {
+                            // If the rest of the stack doesn't prescribe an adhesion-type, default to a brim
+                            adhesionType = "brim"
+                        }
+                    }
+                    platformAdhesionType.setPropertyValue("value", adhesionType)
+                }
+
+                onEntered:
+                {
+                    base.showTooltip(enableAdhesionCheckBox, Qt.point(-enableAdhesionContainer.x - UM.Theme.getSize("thick_margin").width, 0),
+                        catalog.i18nc("@label", "Enable printing a brim or raft. This will add a flat area around or under your object which is easy to cut off afterwards."));
+                }
+                onExited: base.hideTooltip()
+            }
+        }
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: platformAdhesionType
+        containerStack: Cura.MachineManager.activeMachine
+        removeUnusedValue: false //Doesn't work with settings that are resolved.
+        key: "adhesion_type"
+        watchedProperties: [ "value", "enabled" ]
+        storeIndex: 0
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml

@@ -0,0 +1,252 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+
+//
+// Infill
+//
+Item
+{
+    id: infillRow
+    height: childrenRect.height
+
+    property real labelColumnWidth: Math.round(width / 3)
+
+    // Create a binding to update the icon when the infill density changes
+    Binding
+    {
+        target: infillRowTitle
+        property: "source"
+        value:
+        {
+            var density = parseInt(infillDensity.properties.value)
+            if (parseInt(infillSteps.properties.value) != 0)
+            {
+                return UM.Theme.getIcon("gradual")
+            }
+            if (density <= 0)
+            {
+                return UM.Theme.getIcon("hollow")
+            }
+            if (density < 40)
+            {
+                return UM.Theme.getIcon("sparse")
+            }
+            if (density < 90)
+            {
+                return UM.Theme.getIcon("dense")
+            }
+            return UM.Theme.getIcon("solid")
+        }
+    }
+
+    // We use a binding to make sure that after manually setting infillSlider.value it is still bound to the property provider
+    Binding
+    {
+        target: infillSlider
+        property: "value"
+        value: parseInt(infillDensity.properties.value)
+    }
+
+    // Here are the elements that are shown in the left column
+    Cura.IconWithText
+    {
+        id: infillRowTitle
+        anchors.top: parent.top
+        anchors.left: parent.left
+        source: UM.Theme.getIcon("category_infill")
+        text: catalog.i18nc("@label", "Infill") + " (%)"
+        width: labelColumnWidth
+    }
+
+    Item
+    {
+        id: infillSliderContainer
+        height: childrenRect.height
+
+        anchors
+        {
+            left: infillRowTitle.right
+            right: parent.right
+            verticalCenter: infillRowTitle.verticalCenter
+        }
+
+        Slider
+        {
+            id: infillSlider
+
+            width: parent.width
+            height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
+
+            minimumValue: 0
+            maximumValue: 100
+            stepSize: 1
+            tickmarksEnabled: true
+
+            // disable slider when gradual support is enabled
+            enabled: parseInt(infillSteps.properties.value) == 0
+
+            // set initial value from stack
+            value: parseInt(infillDensity.properties.value)
+
+            style: SliderStyle
+            {
+                //Draw line
+                groove: Item
+                {
+                    Rectangle
+                    {
+                        height: UM.Theme.getSize("print_setup_slider_groove").height
+                        width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
+                    }
+                }
+
+                handle: Rectangle
+                {
+                    id: handleButton
+                    color: control.enabled ? UM.Theme.getColor("primary") : UM.Theme.getColor("quality_slider_unavailable")
+                    implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
+                    implicitHeight: implicitWidth
+                    radius: Math.round(implicitWidth / 2)
+                }
+
+                tickmarks: Repeater
+                {
+                    id: repeater
+                    model: control.maximumValue / control.stepSize + 1
+
+                    Rectangle
+                    {
+                        color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
+                        implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
+                        implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        // Do not use Math.round otherwise the tickmarks won't be aligned
+                        x: ((styleData.handleWidth / 2) - (implicitWidth / 2) + (index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))))
+                        radius: Math.round(implicitWidth / 2)
+                        visible: (index % 10) == 0 // Only show steps of 10%
+
+                        Label
+                        {
+                            text: index
+                            visible: (index % 20) == 0 // Only show steps of 20%
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            y: UM.Theme.getSize("thin_margin").height
+                            renderType: Text.NativeRendering
+                        }
+                    }
+                }
+            }
+
+            onValueChanged:
+            {
+                // Don't round the value if it's already the same
+                if (parseInt(infillDensity.properties.value) == infillSlider.value)
+                {
+                    return
+                }
+
+                // Round the slider value to the nearest multiple of 10 (simulate step size of 10)
+                var roundedSliderValue = Math.round(infillSlider.value / 10) * 10
+
+                // Update the slider value to represent the rounded value
+                infillSlider.value = roundedSliderValue
+
+                // Update value only if the Recomended mode is Active,
+                // Otherwise if I change the value in the Custom mode the Recomended view will try to repeat
+                // same operation
+                var active_mode = UM.Preferences.getValue("cura/active_mode")
+
+                if (active_mode == 0 || active_mode == "simple")
+                {
+                    Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", roundedSliderValue)
+                    Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance")
+                }
+            }
+        }
+    }
+
+    //  Gradual Support Infill Checkbox
+    CheckBox
+    {
+        id: enableGradualInfillCheckBox
+        property alias _hovered: enableGradualInfillMouseArea.containsMouse
+
+        anchors.top: infillSliderContainer.bottom
+        anchors.topMargin: UM.Theme.getSize("wide_margin").height
+        anchors.left: infillSliderContainer.left
+
+        text: catalog.i18nc("@label", "Gradual infill")
+        style: UM.Theme.styles.checkbox
+        enabled: recommendedPrintSetup.settingsEnabled
+        visible: infillSteps.properties.enabled == "True"
+        checked: parseInt(infillSteps.properties.value) > 0
+
+        MouseArea
+        {
+            id: enableGradualInfillMouseArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+            enabled: true
+
+            property var previousInfillDensity: parseInt(infillDensity.properties.value)
+
+            onClicked:
+            {
+                // Set to 90% only when enabling gradual infill
+                var newInfillDensity;
+                if (parseInt(infillSteps.properties.value) == 0)
+                {
+                    previousInfillDensity = parseInt(infillDensity.properties.value)
+                    newInfillDensity = 90
+                } else {
+                    newInfillDensity = previousInfillDensity
+                }
+                Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity))
+
+                var infill_steps_value = 0
+                if (parseInt(infillSteps.properties.value) == 0)
+                {
+                    infill_steps_value = 5
+                }
+
+                Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value)
+            }
+
+            onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillSliderContainer.x - UM.Theme.getSize("thick_margin").width, 0),
+                    catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top."))
+
+            onExited: base.hideTooltip()
+        }
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: infillDensity
+        containerStackId: Cura.MachineManager.activeStackId
+        key: "infill_sparse_density"
+        watchedProperties: [ "value" ]
+        storeIndex: 0
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: infillSteps
+        containerStackId: Cura.MachineManager.activeStackId
+        key: "gradual_infill_steps"
+        watchedProperties: ["value", "enabled"]
+        storeIndex: 0
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml

@@ -0,0 +1,81 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: recommendedPrintSetup
+
+    height: childrenRect.height + 2 * padding
+
+    property Action configureSettings
+
+    property bool settingsEnabled: Cura.ExtruderManager.activeExtruderStackId || extrudersEnabledCount.properties.value == 1
+    property real padding: UM.Theme.getSize("thick_margin").width
+
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
+
+    Column
+    {
+        width: parent.width - 2 * parent.padding
+        spacing: UM.Theme.getSize("wide_margin").height
+
+        anchors
+        {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            margins: parent.padding
+        }
+
+        // TODO
+        property real firstColumnWidth: Math.round(width / 3)
+
+        RecommendedQualityProfileSelector
+        {
+            width: parent.width
+            // TODO Create a reusable component with these properties to not define them separately for each component
+            labelColumnWidth: parent.firstColumnWidth
+        }
+
+        RecommendedInfillDensitySelector
+        {
+            width: parent.width
+            // TODO Create a reusable component with these properties to not define them separately for each component
+            labelColumnWidth: parent.firstColumnWidth
+        }
+
+        RecommendedSupportSelector
+        {
+            width: parent.width
+            // TODO Create a reusable component with these properties to not define them separately for each component
+            labelColumnWidth: parent.firstColumnWidth
+        }
+
+        RecommendedAdhesionSelector
+        {
+            width: parent.width
+            // TODO Create a reusable component with these properties to not define them separately for each component
+            labelColumnWidth: parent.firstColumnWidth
+        }
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: extrudersEnabledCount
+        containerStack: Cura.MachineManager.activeMachine
+        key: "extruders_enabled_count"
+        watchedProperties: [ "value" ]
+        storeIndex: 0
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml

@@ -0,0 +1,453 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+
+//
+// Quality profile
+//
+Item
+{
+    id: qualityRow
+    height: childrenRect.height
+
+    property real labelColumnWidth: Math.round(width / 3)
+    property real settingsColumnWidth: width - labelColumnWidth
+
+    Timer
+    {
+        id: qualitySliderChangeTimer
+        interval: 50
+        running: false
+        repeat: false
+        onTriggered:
+        {
+            var item = Cura.QualityProfilesDropDownMenuModel.getItem(qualitySlider.value);
+            Cura.MachineManager.activeQualityGroup = item.quality_group;
+        }
+    }
+
+    Component.onCompleted: qualityModel.update()
+
+    Connections
+    {
+        target: Cura.QualityProfilesDropDownMenuModel
+        onItemsChanged: qualityModel.update()
+    }
+
+    Connections {
+        target: base
+        onVisibleChanged:
+        {
+            // update needs to be called when the widgets are visible, otherwise the step width calculation
+            // will fail because the width of an invisible item is 0.
+            if (visible)
+            {
+                qualityModel.update();
+            }
+        }
+    }
+
+    ListModel
+    {
+        id: qualityModel
+
+        property var totalTicks: 0
+        property var availableTotalTicks: 0
+        property var existingQualityProfile: 0
+
+        property var qualitySliderActiveIndex: 0
+        property var qualitySliderStepWidth: 0
+        property var qualitySliderAvailableMin: 0
+        property var qualitySliderAvailableMax: 0
+        property var qualitySliderMarginRight: 0
+
+        function update ()
+        {
+            reset()
+
+            var availableMin = -1
+            var availableMax = -1
+
+            for (var i = 0; i < Cura.QualityProfilesDropDownMenuModel.rowCount(); i++)
+            {
+                var qualityItem = Cura.QualityProfilesDropDownMenuModel.getItem(i)
+
+                // Add each quality item to the UI quality model
+                qualityModel.append(qualityItem)
+
+                // Set selected value
+                if (Cura.MachineManager.activeQualityType == qualityItem.quality_type)
+                {
+                    // set to -1 when switching to user created profile so all ticks are clickable
+                    if (Cura.SimpleModeSettingsManager.isProfileUserCreated)
+                    {
+                        qualityModel.qualitySliderActiveIndex = -1
+                    }
+                    else
+                    {
+                        qualityModel.qualitySliderActiveIndex = i
+                    }
+
+                     qualityModel.existingQualityProfile = 1
+                }
+
+                // Set min available
+                if (qualityItem.available && availableMin == -1)
+                {
+                    availableMin = i
+                }
+
+                // Set max available
+                if (qualityItem.available)
+                {
+                    availableMax = i
+                }
+            }
+
+            // Set total available ticks for active slider part
+            if (availableMin != -1)
+            {
+                qualityModel.availableTotalTicks = availableMax - availableMin + 1
+            }
+
+            // Calculate slider values
+            calculateSliderStepWidth(qualityModel.totalTicks)
+            calculateSliderMargins(availableMin, availableMax, qualityModel.totalTicks)
+
+            qualityModel.qualitySliderAvailableMin = availableMin
+            qualityModel.qualitySliderAvailableMax = availableMax
+        }
+
+        function calculateSliderStepWidth (totalTicks)
+        {
+            // Do not use Math.round otherwise the tickmarks won't be aligned
+            qualityModel.qualitySliderStepWidth = totalTicks != 0 ?
+                    ((settingsColumnWidth - UM.Theme.getSize("print_setup_slider_handle").width) / (totalTicks)) : 0
+        }
+
+        function calculateSliderMargins (availableMin, availableMax, totalTicks)
+        {
+            if (availableMin == -1 || (availableMin == 0 && availableMax == 0))
+            {
+                // Do not use Math.round otherwise the tickmarks won't be aligned
+                qualityModel.qualitySliderMarginRight = settingsColumnWidth
+            }
+            else if (availableMin == availableMax)
+            {
+                // Do not use Math.round otherwise the tickmarks won't be aligned
+                qualityModel.qualitySliderMarginRight = (totalTicks - availableMin) * qualitySliderStepWidth
+            }
+            else
+            {
+                // Do not use Math.round otherwise the tickmarks won't be aligned
+                qualityModel.qualitySliderMarginRight = (totalTicks - availableMax) * qualitySliderStepWidth
+            }
+        }
+
+        function reset () {
+            qualityModel.clear()
+            qualityModel.availableTotalTicks = 0
+            qualityModel.existingQualityProfile = 0
+
+            // check, the ticks count cannot be less than zero
+            qualityModel.totalTicks = Math.max(0, Cura.QualityProfilesDropDownMenuModel.rowCount() - 1)
+        }
+    }
+
+    // Here are the elements that are shown in the left column
+    Item
+    {
+        id: titleRow
+        width: labelColumnWidth
+        height: childrenRect.height
+
+        Cura.IconWithText
+        {
+            id: qualityRowTitle
+            source: UM.Theme.getIcon("category_layer_height")
+            text: catalog.i18nc("@label", "Layer Height")
+            anchors.left: parent.left
+            anchors.right: customisedSettings.left
+        }
+
+        UM.SimpleButton
+        {
+            id: customisedSettings
+
+            visible: Cura.SimpleModeSettingsManager.isProfileCustomized || Cura.SimpleModeSettingsManager.isProfileUserCreated
+            height: visible ? UM.Theme.getSize("print_setup_icon").height : 0
+            width: height
+            anchors
+            {
+                right: parent.right
+                rightMargin: UM.Theme.getSize("default_margin").width
+                leftMargin: UM.Theme.getSize("default_margin").width
+                verticalCenter: parent.verticalCenter
+            }
+
+            color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button")
+            iconSource: UM.Theme.getIcon("reset")
+
+            onClicked:
+            {
+                // if the current profile is user-created, switch to a built-in quality
+                Cura.MachineManager.resetToUseDefaultQuality()
+            }
+            onEntered:
+            {
+                var tooltipContent = catalog.i18nc("@tooltip","You have modified some profile settings. If you want to change these go to custom mode.")
+                base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0),  tooltipContent)
+            }
+            onExited: base.hideTooltip()
+        }
+    }
+
+    // Show titles for the each quality slider ticks
+    Item
+    {
+        anchors.left: speedSlider.left
+        anchors.top: speedSlider.bottom
+        height: childrenRect.height
+
+        Repeater
+        {
+            model: qualityModel
+
+            Label
+            {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.top: parent.top
+                // The height has to be set manually, otherwise it's not automatically calculated in the repeater
+                height: UM.Theme.getSize("default_margin").height
+                color: (Cura.MachineManager.activeMachine != null && Cura.QualityProfilesDropDownMenuModel.getItem(index).available) ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
+                text:
+                {
+                    var result = ""
+                    if(Cura.MachineManager.activeMachine != null)
+                    {
+                        result = Cura.QualityProfilesDropDownMenuModel.getItem(index).layer_height
+
+                        if(result == undefined)
+                        {
+                            result = "";
+                        }
+                        else
+                        {
+                            result = Number(Math.round(result + "e+2") + "e-2"); //Round to 2 decimals. Javascript makes this difficult...
+                            if (result == undefined || result != result) //Parse failure.
+                            {
+                                result = "";
+                            }
+                        }
+                    }
+                    return result
+                }
+
+                x:
+                {
+                    // Make sure the text aligns correctly with each tick
+                    if (qualityModel.totalTicks == 0)
+                    {
+                        // If there is only one tick, align it centrally
+                        return Math.round(((settingsColumnWidth) - width) / 2)
+                    }
+                    else if (index == 0)
+                    {
+                        return Math.round(settingsColumnWidth / qualityModel.totalTicks) * index
+                    }
+                    else if (index == qualityModel.totalTicks)
+                    {
+                        return Math.round(settingsColumnWidth / qualityModel.totalTicks) * index - width
+                    }
+                    else
+                    {
+                        return Math.round((settingsColumnWidth / qualityModel.totalTicks) * index - (width / 2))
+                    }
+                }
+            }
+        }
+    }
+
+    // Print speed slider
+    // Two sliders are created, one at the bottom with the unavailable qualities
+    // and the other at the top with the available quality profiles and so the handle to select them.
+    Item
+    {
+        id: speedSlider
+        height: childrenRect.height
+
+        anchors
+        {
+            left: titleRow.right
+            right: parent.right
+            verticalCenter: titleRow.verticalCenter
+        }
+
+        // Draw unavailable slider
+        Slider
+        {
+            id: unavailableSlider
+
+            width: parent.width
+            height: qualitySlider.height // Same height as the slider that is on top
+            updateValueWhileDragging : false
+            tickmarksEnabled: true
+
+            minimumValue: 0
+            // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
+            // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
+            maximumValue: qualityModel.totalTicks
+            stepSize: 1
+
+            style: SliderStyle
+            {
+                //Draw Unvailable line
+                groove: Item
+                {
+                    Rectangle
+                    {
+                        height: UM.Theme.getSize("print_setup_slider_groove").height
+                        width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: UM.Theme.getColor("quality_slider_unavailable")
+                    }
+                }
+
+                handle: Item {}
+
+                tickmarks: Repeater
+                {
+                    id: qualityRepeater
+                    model: qualityModel.totalTicks > 0 ? qualityModel : 0
+
+                    Rectangle
+                    {
+                        color: Cura.QualityProfilesDropDownMenuModel.getItem(index).available ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
+                        implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
+                        implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        // Do not use Math.round otherwise the tickmarks won't be aligned
+                        x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (implicitWidth / 2) + (qualityModel.qualitySliderStepWidth * index))
+                        radius: Math.round(implicitWidth / 2)
+                    }
+                }
+            }
+
+            // Create a mouse area on top of the unavailable profiles to show a specific tooltip
+            MouseArea
+            {
+                anchors.fill: parent
+                hoverEnabled: true
+                enabled: !Cura.SimpleModeSettingsManager.isProfileUserCreated
+                onEntered:
+                {
+                    var tooltipContent = catalog.i18nc("@tooltip", "This quality profile is not available for your current material and nozzle configuration. Please change these to enable this quality profile")
+                    base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height), tooltipContent)
+                }
+                onExited: base.hideTooltip()
+            }
+        }
+
+        // Draw available slider
+        Slider
+        {
+            id: qualitySlider
+
+            width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
+            height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
+            enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized
+            visible: qualityModel.availableTotalTicks > 0
+            updateValueWhileDragging : false
+
+            anchors
+            {
+                right: parent.right
+                rightMargin: qualityModel.qualitySliderMarginRight
+            }
+
+            minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0
+            // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
+            // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
+            maximumValue: qualityModel.qualitySliderAvailableMax >= 1 ? qualityModel.qualitySliderAvailableMax : 1
+            stepSize: 1
+
+            value: qualityModel.qualitySliderActiveIndex
+
+            style: SliderStyle
+            {
+                // Draw Available line
+                groove: Item
+                {
+                    Rectangle
+                    {
+                        height: UM.Theme.getSize("print_setup_slider_groove").height
+                        width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        // Do not use Math.round otherwise the tickmarks won't be aligned
+                        x: UM.Theme.getSize("print_setup_slider_handle").width / 2
+                        color: UM.Theme.getColor("quality_slider_available")
+                    }
+                }
+
+                handle: Rectangle
+                {
+                    id: qualityhandleButton
+                    color: UM.Theme.getColor("primary")
+                    implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
+                    implicitHeight: implicitWidth
+                    radius: Math.round(implicitWidth / 2)
+                    visible: !Cura.SimpleModeSettingsManager.isProfileCustomized && !Cura.SimpleModeSettingsManager.isProfileUserCreated && qualityModel.existingQualityProfile
+                }
+            }
+
+            onValueChanged:
+            {
+                // only change if an active machine is set and the slider is visible at all.
+                if (Cura.MachineManager.activeMachine != null && visible)
+                {
+                    // prevent updating during view initializing. Trigger only if the value changed by user
+                    if (qualitySlider.value != qualityModel.qualitySliderActiveIndex && qualityModel.qualitySliderActiveIndex != -1)
+                    {
+                        // start updating with short delay
+                        qualitySliderChangeTimer.start()
+                    }
+                }
+            }
+
+            // This mouse area is only used to capture the onHover state and don't propagate it to the unavailable mouse area
+            MouseArea
+            {
+                anchors.fill: parent
+                hoverEnabled: true
+                acceptedButtons: Qt.NoButton
+                enabled: !Cura.SimpleModeSettingsManager.isProfileUserCreated
+            }
+        }
+
+        // This mouse area will only take the mouse events and show a tooltip when the profile in use is
+        // a user created profile
+        MouseArea
+        {
+            anchors.fill: parent
+            hoverEnabled: true
+            visible: Cura.SimpleModeSettingsManager.isProfileUserCreated
+
+            onEntered:
+            {
+                var tooltipContent = catalog.i18nc("@tooltip", "A custom profile is currently active. To enable the quality slider, choose a default quality profile in Custom tab")
+                base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height),  tooltipContent)
+            }
+            onExited: base.hideTooltip()
+        }
+    }
+}

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -0,0 +1,204 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+
+//
+//  Enable support
+//
+Item
+{
+    id: enableSupportRow
+    height: childrenRect.height
+
+    property real labelColumnWidth: Math.round(width / 3)
+
+    Cura.IconWithText
+    {
+        id: enableSupportRowTitle
+        anchors.top: parent.top
+        anchors.left: parent.left
+        visible: enableSupportCheckBox.visible
+        source: UM.Theme.getIcon("category_support")
+        text: catalog.i18nc("@label", "Support")
+        width: labelColumnWidth
+    }
+
+    Item
+    {
+        id: enableSupportContainer
+        height: enableSupportCheckBox.height
+
+        anchors
+        {
+            left: enableSupportRowTitle.right
+            right: parent.right
+            verticalCenter: enableSupportRowTitle.verticalCenter
+        }
+
+        CheckBox
+        {
+            id: enableSupportCheckBox
+            anchors.verticalCenter: parent.verticalCenter
+
+            property alias _hovered: enableSupportMouseArea.containsMouse
+
+            style: UM.Theme.styles.checkbox
+            enabled: recommendedPrintSetup.settingsEnabled
+
+            visible: supportEnabled.properties.enabled == "True"
+            checked: supportEnabled.properties.value == "True"
+
+            MouseArea
+            {
+                id: enableSupportMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onClicked: supportEnabled.setPropertyValue("value", supportEnabled.properties.value != "True")
+
+                onEntered:
+                {
+                    base.showTooltip(enableSupportCheckBox, Qt.point(-enableSupportContainer.x - UM.Theme.getSize("thick_margin").width, 0),
+                        catalog.i18nc("@label", "Generate structures to support parts of the model which have overhangs. Without these structures, such parts would collapse during printing."))
+                }
+                onExited: base.hideTooltip()
+            }
+        }
+
+        ComboBox
+        {
+            id: supportExtruderCombobox
+
+            height: UM.Theme.getSize("print_setup_big_item").height
+            anchors
+            {
+                left: enableSupportCheckBox.right
+                right: parent.right
+                leftMargin: UM.Theme.getSize("thick_margin").width
+                rightMargin: UM.Theme.getSize("thick_margin").width
+                verticalCenter: parent.verticalCenter
+            }
+
+            style: UM.Theme.styles.combobox_color
+            enabled: recommendedPrintSetup.settingsEnabled
+            visible: enableSupportCheckBox.visible && (supportEnabled.properties.value == "True") && (extrudersEnabledCount.properties.value > 1)
+            textRole: "text"  // this solves that the combobox isn't populated in the first time Cura is started
+
+            model: extruderModel
+
+            property alias _hovered: supportExtruderMouseArea.containsMouse
+            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 = ""
+                if (current_extruder === undefined) return ""
+                return (current_extruder.color) ? current_extruder.color : ""
+            }
+
+            currentIndex:
+            {
+                if (supportExtruderNr.properties == null)
+                {
+                    return Cura.MachineManager.defaultExtruderPosition
+                }
+                else
+                {
+                    var extruder = parseInt(supportExtruderNr.properties.value)
+                    if ( extruder === -1)
+                    {
+                        return Cura.MachineManager.defaultExtruderPosition
+                    }
+                    return extruder;
+                }
+            }
+
+            onActivated: supportExtruderNr.setPropertyValue("value", String(index))
+
+            MouseArea
+            {
+                id: supportExtruderMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                enabled: recommendedPrintSetup.settingsEnabled
+                acceptedButtons: Qt.NoButton
+                onEntered:
+                {
+                    base.showTooltip(supportExtruderCombobox, Qt.point(-enableSupportContainer.x - supportExtruderCombobox.x - UM.Theme.getSize("thick_margin").width, 0),
+                        catalog.i18nc("@label", "Select which extruder to use for support. This will build up supporting structures below the model to prevent the model from sagging or printing in mid air."));
+                }
+                onExited: base.hideTooltip()
+
+            }
+
+            function updateCurrentColor()
+            {
+                var current_extruder = extruderModel.get(currentIndex)
+                if (current_extruder !== undefined)
+                {
+                    supportExtruderCombobox.color_override = current_extruder.color
+                }
+            }
+        }
+    }
+
+    ListModel
+    {
+        id: extruderModel
+        Component.onCompleted: populateExtruderModel()
+    }
+
+    //: Model used to populate the extrudelModel
+    Cura.ExtrudersModel
+    {
+        id: extruders
+        onModelChanged: populateExtruderModel()
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: supportEnabled
+        containerStack: Cura.MachineManager.activeMachine
+        key: "support_enable"
+        watchedProperties: [ "value", "enabled", "description" ]
+        storeIndex: 0
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: supportExtruderNr
+        containerStack: Cura.MachineManager.activeMachine
+        key: "support_extruder_nr"
+        watchedProperties: [ "value" ]
+        storeIndex: 0
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: machineExtruderCount
+        containerStack: Cura.MachineManager.activeMachine
+        key: "machine_extruder_count"
+        watchedProperties: ["value"]
+        storeIndex: 0
+    }
+
+    function populateExtruderModel()
+    {
+        extruderModel.clear()
+        for (var extruderNumber = 0; extruderNumber < extruders.rowCount(); extruderNumber++)
+        {
+            extruderModel.append({
+                text: extruders.getItem(extruderNumber).name,
+                color: extruders.getItem(extruderNumber).color
+            })
+        }
+        supportExtruderCombobox.updateCurrentColor()
+    }
+}

resources/qml/PrinterSelector/MachineSelector.qml

@@ -7,7 +7,7 @@ import QtQuick.Controls 2.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-Cura.ExpandableComponent
+Cura.ExpandablePopup
 {
     id: machineSelector
 
@@ -15,9 +15,8 @@ Cura.ExpandableComponent
     property bool isPrinterConnected: Cura.MachineManager.printerConnected
     property var outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
-    popupPadding: UM.Theme.getSize("default_lining").width
+    contentPadding: UM.Theme.getSize("default_lining").width
-    popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft
+    contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
 
     UM.I18nCatalog
     {
@@ -100,7 +99,7 @@ Cura.ExpandableComponent
         }
     }
 
-    popupItem: Item
+    contentItem: Item
     {
         id: popup
         width: UM.Theme.getSize("machine_selector_widget_content").width
@@ -154,7 +153,7 @@ Cura.ExpandableComponent
                 text: catalog.i18nc("@button", "Add printer")
                 onClicked:
                 {
-                    togglePopup()
+                    toggleContent()
                     Cura.Actions.addMachine.trigger()
                 }
             }
@@ -166,7 +165,7 @@ Cura.ExpandableComponent
                 text: catalog.i18nc("@button", "Manage printers")
                 onClicked:
                 {
-                    togglePopup()
+                    toggleContent()
                     Cura.Actions.configureMachines.trigger()
                 }
             }

resources/qml/PrinterSelector/MachineSelectorButton.qml

@@ -83,7 +83,7 @@ Button
 
     onClicked:
     {
-        togglePopup()
+        toggleContent()
         Cura.MachineManager.setActiveMachine(model.id)
     }
 

resources/qml/Settings/SettingCategory.qml

@@ -12,8 +12,8 @@ Button
     id: base
     anchors.left: parent.left
     anchors.right: parent.right
-    anchors.leftMargin: UM.Theme.getSize("thick_margin").width
+    // To avoid overlaping with the scrollBars
-    anchors.rightMargin: UM.Theme.getSize("thick_margin").width
+    anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width
     hoverEnabled: true
 
     background: Rectangle
@@ -25,50 +25,26 @@ Button
             if (base.color)
             {
                 return base.color
-            } else if (!base.enabled)
+            }
+            else if (!base.enabled)
             {
                 return UM.Theme.getColor("setting_category_disabled")
-            } else if (base.hovered && base.checkable && base.checked)
+            }
+            else if (base.hovered && base.checkable && base.checked)
             {
                 return UM.Theme.getColor("setting_category_active_hover")
-            } else if (base.pressed || (base.checkable && base.checked))
+            }
+            else if (base.pressed || (base.checkable && base.checked))
             {
                 return UM.Theme.getColor("setting_category_active")
-            } else if (base.hovered)
+            }
+            else if (base.hovered)
             {
                 return UM.Theme.getColor("setting_category_hover")
-            } else
-            {
-                return UM.Theme.getColor("setting_category")
             }
+            return UM.Theme.getColor("setting_category")
         }
         Behavior on color { ColorAnimation { duration: 50; } }
-        Rectangle
-        {
-            id: backgroundLiningRectangle
-            height: UM.Theme.getSize("default_lining").height
-            width: parent.width
-            anchors.bottom: parent.bottom
-            color:
-            {
-                if (!base.enabled)
-                {
-                    return UM.Theme.getColor("setting_category_disabled_border")
-                } else if ((base.hovered || base.activeFocus) && base.checkable && base.checked)
-                {
-                    return UM.Theme.getColor("setting_category_active_hover_border")
-                } else if (base.pressed || (base.checkable && base.checked))
-                {
-                    return UM.Theme.getColor("setting_category_active_border")
-                } else if (base.hovered || base.activeFocus)
-                {
-                    return UM.Theme.getColor("setting_category_hover_border")
-                } else
-                {
-                    return UM.Theme.getColor("setting_category_border")
-                }
-            }
-        }
     }
 
     signal showTooltip(string text)
@@ -148,10 +124,7 @@ Button
                 {
                     return UM.Theme.getColor("setting_category_hover_text")
                 }
-                else
+                return UM.Theme.getColor("setting_category_text")
-                {
-                    return UM.Theme.getColor("setting_category_text")
-                }
             }
             source: base.checked ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
         }
@@ -162,25 +135,26 @@ Button
         id: icon
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: UM.Theme.getSize("thin_margin").width
         color:
         {
             if (!base.enabled)
             {
                 return UM.Theme.getColor("setting_category_disabled_text")
-            } else if((base.hovered || base.activeFocus) && base.checkable && base.checked)
+            }
+            else if((base.hovered || base.activeFocus) && base.checkable && base.checked)
             {
                 return UM.Theme.getColor("setting_category_active_hover_text")
-            } else if(base.pressed || (base.checkable && base.checked))
+            }
+            else if(base.pressed || (base.checkable && base.checked))
             {
                 return UM.Theme.getColor("setting_category_active_text")
-            } else if(base.hovered || base.activeFocus)
+            }
+            else if(base.hovered || base.activeFocus)
             {
                 return UM.Theme.getColor("setting_category_hover_text")
-            } else
-            {
-                return UM.Theme.getColor("setting_category_text")
             }
+            return UM.Theme.getColor("setting_category_text")
         }
         source: UM.Theme.getIcon(definition.icon)
         width: UM.Theme.getSize("section_icon").width
@@ -197,7 +171,9 @@ Button
         if (definition.expanded)
         {
             settingDefinitionsModel.collapse(definition.key)
-        } else {
+        }
+        else
+        {
             settingDefinitionsModel.expandRecursive(definition.key)
         }
         //Set focus so that tab navigation continues from this point on.
@@ -206,7 +182,7 @@ Button
     }
     onActiveFocusChanged:
     {
-        if(activeFocus)
+        if (activeFocus)
         {
             base.focusReceived()
         }

resources/qml/Settings/SettingCheckBox.qml

@@ -28,37 +28,40 @@ SettingItem
             // 3: material  -> user changed material in materials page
             // 4: variant
             // 5: machine
-            var value;
+            var value
-            if ((base.resolve != "None") && (stackLevel != 0) && (stackLevel != 1)) {
+            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;
+                value = base.resolve
-            } else {
+            }
-                value = propertyProvider.properties.value;
+            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();
+            forceActiveFocus()
-            propertyProvider.setPropertyValue("value", !checked);
+            propertyProvider.setPropertyValue("value", !checked)
         }
 
         onClicked:
         {
-            forceActiveFocus();
+            forceActiveFocus()
-            propertyProvider.setPropertyValue("value", !checked);
+            propertyProvider.setPropertyValue("value", !checked)
         }
 
         Keys.onTabPressed:
@@ -72,9 +75,9 @@ SettingItem
 
         onActiveFocusChanged:
         {
-            if(activeFocus)
+            if (activeFocus)
             {
-                base.focusReceived();
+                base.focusReceived()
             }
         }
 
@@ -90,25 +93,26 @@ 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")
                 }

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: {
+            onModelChanged:
-                control.color = getItem(control.currentIndex).color;
+            {
+                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)
+                anchors.rightMargin: UM.Theme.getSize("thin_margin").width
-
-                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)
 
+                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)
+                    anchors.rightMargin: UM.Theme.getSize("thin_margin").width
-
-                    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)
 
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    source: UM.Theme.getIcon("extruder_button")
                     color: control.model.getItem(index).color
                 }
             }

resources/qml/Settings/SettingItem.qml

@@ -10,10 +10,15 @@ import Cura 1.0 as Cura
 
 import "."
 
-Item {
+Item
-    id: base;
+{
+    id: base
 
     height: UM.Theme.getSize("section").height
+    anchors.left: parent.left
+    anchors.right: parent.right
+    // To avoid overlaping with the scrollBars
+    anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width
 
     property alias contents: controlContainer.children
     property alias hovered: mouse.containsMouse
@@ -43,25 +48,25 @@ Item {
         var affected_by = settingDefinitionsModel.getRequires(definition.key, "value")
 
         var affected_by_list = ""
-        for(var i in affected_by)
+        for (var i in affected_by)
         {
             affected_by_list += "<li>%1</li>\n".arg(affected_by[i].label)
         }
 
         var affects_list = ""
-        for(var i in affects)
+        for (var i in affects)
         {
             affects_list += "<li>%1</li>\n".arg(affects[i].label)
         }
 
         var tooltip = "<b>%1</b>\n<p>%2</p>".arg(definition.label).arg(definition.description)
 
-        if(affects_list != "")
+        if (affects_list != "")
         {
             tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affects")).arg(affects_list)
         }
 
-        if(affected_by_list != "")
+        if (affected_by_list != "")
         {
             tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affected By")).arg(affected_by_list)
         }
@@ -71,53 +76,57 @@ Item {
 
     MouseArea
     {
-        id: mouse;
+        id: mouse
 
-        anchors.fill: parent;
+        anchors.fill: parent
 
-        acceptedButtons: Qt.RightButton;
+        acceptedButtons: Qt.RightButton
         hoverEnabled: true;
 
-        onClicked: base.contextMenuRequested();
+        onClicked: base.contextMenuRequested()
 
-        onEntered: {
+        onEntered:
-            hoverTimer.start();
+        {
+            hoverTimer.start()
         }
 
-        onExited: {
+        onExited:
-            if(controlContainer.item && controlContainer.item.hovered) {
+        {
-                return;
+            if (controlContainer.item && controlContainer.item.hovered)
+            {
+                return
             }
-            hoverTimer.stop();
+            hoverTimer.stop()
-            base.hideTooltip();
+            base.hideTooltip()
         }
 
-        Timer {
+        Timer
-            id: hoverTimer;
+        {
-            interval: 500;
+            id: hoverTimer
-            repeat: false;
+            interval: 500
+            repeat: false
 
             onTriggered:
             {
-                base.showTooltip(base.tooltipText);
+                base.showTooltip(base.tooltipText)
             }
         }
 
         Label
         {
-            id: label;
+            id: label
 
-            anchors.left: parent.left;
+            anchors.left: parent.left
-            anchors.leftMargin: doDepthIndentation ? Math.round((UM.Theme.getSize("section_icon_column").width + 5) + ((definition.depth - 1) * UM.Theme.getSize("setting_control_depth_margin").width)) : 0
+            anchors.leftMargin: doDepthIndentation ? Math.round(UM.Theme.getSize("thin_margin").width + ((definition.depth - 1) * UM.Theme.getSize("setting_control_depth_margin").width)) : 0
-            anchors.right: settingControls.left;
+            anchors.right: settingControls.left
             anchors.verticalCenter: parent.verticalCenter
 
             text: definition.label
-            elide: Text.ElideMiddle;
+            elide: Text.ElideMiddle
             renderType: Text.NativeRendering
             textFormat: Text.PlainText
 
-            color: UM.Theme.getColor("setting_control_text");
+            color: UM.Theme.getColor("setting_control_text")
             opacity: (definition.visible) ? 1 : 0.5
             // emphasize the setting if it has a value in the user or quality profile
             font: base.doQualityUserSettingEmphasis && base.stackLevel != undefined && base.stackLevel <= 1 ? UM.Theme.getFont("default_italic") : UM.Theme.getFont("default")
@@ -130,7 +139,8 @@ Item {
             height: Math.round(parent.height / 2)
             spacing: Math.round(UM.Theme.getSize("thick_margin").height / 2)
 
-            anchors {
+            anchors
+            {
                 right: controlContainer.left
                 rightMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2)
                 verticalCenter: parent.verticalCenter
@@ -150,112 +160,123 @@ Item {
 
                 iconSource: UM.Theme.getIcon("link")
 
-                onEntered: {
+                onEntered:
-                    hoverTimer.stop();
+                {
-                    var tooltipText = catalog.i18nc("@label", "This setting is always shared between all extruders. Changing it here will change the value for all extruders.");
+                    hoverTimer.stop()
-                    if ((resolve != "None") && (stackLevel != 0)) {
+                    var tooltipText = catalog.i18nc("@label", "This setting is always shared between all extruders. Changing it here will change the value for all extruders.")
+                    if ((resolve != "None") && (stackLevel != 0))
+                    {
                         // We come here if a setting has a resolve and the setting is not manually edited.
-                        tooltipText += " " + catalog.i18nc("@label", "The value is resolved from per-extruder values ") + "[" + Cura.ExtruderManager.getInstanceExtruderValues(definition.key) + "].";
+                        tooltipText += " " + catalog.i18nc("@label", "The value is resolved from per-extruder values ") + "[" + Cura.ExtruderManager.getInstanceExtruderValues(definition.key) + "]."
                     }
-                    base.showTooltip(tooltipText);
+                    base.showTooltip(tooltipText)
                 }
-                onExited: base.showTooltip(base.tooltipText);
+                onExited: base.showTooltip(base.tooltipText)
             }
 
             UM.SimpleButton
             {
-                id: revertButton;
+                id: revertButton
 
                 visible: base.stackLevel == 0 && base.showRevertButton
 
-                height: parent.height;
+                height: parent.height
-                width: height;
+                width: height
 
                 color: UM.Theme.getColor("setting_control_button")
                 hoverColor: UM.Theme.getColor("setting_control_button_hover")
 
                 iconSource: UM.Theme.getIcon("reset")
 
-                onClicked: {
+                onClicked:
+                {
                     revertButton.focus = true
 
-                    if (externalResetHandler) {
+                    if (externalResetHandler)
+                    {
                         externalResetHandler(propertyProvider.key)
-                    } else {
+                    }
+                    else
+                    {
                         Cura.MachineManager.clearUserSettingAllCurrentStacks(propertyProvider.key)
                     }
                 }
 
-                onEntered: { hoverTimer.stop(); base.showTooltip(catalog.i18nc("@label", "This setting has a value that is different from the profile.\n\nClick to restore the value of the profile.")) }
+                onEntered:
-                onExited: base.showTooltip(base.tooltipText);
+                {
+                    hoverTimer.stop()
+                    base.showTooltip(catalog.i18nc("@label", "This setting has a value that is different from the profile.\n\nClick to restore the value of the profile."))
+                }
+                onExited: base.showTooltip(base.tooltipText)
             }
 
             UM.SimpleButton
             {
                 // This button shows when the setting has an inherited function, but is overriden by profile.
-                id: inheritButton;
+                id: inheritButton
                 // Inherit button needs to be visible if;
                 // - User made changes that override any loaded settings
                 // - This setting item uses inherit button at all
                 // - The type of the value of any deeper container is an "object" (eg; is a function)
                 visible:
                 {
-                    if(!base.showInheritButton)
+                    if (!base.showInheritButton)
                     {
-                        return false;
+                        return false
                     }
 
-                    if(!propertyProvider.properties.enabled)
+                    if (!propertyProvider.properties.enabled)
                     {
                         // Note: This is not strictly necessary since a disabled setting is hidden anyway.
                         // But this will cause the binding to be re-evaluated when the enabled property changes.
-                        return false;
+                        return false
                     }
 
                     // There are no settings with any warning.
-                    if(Cura.SettingInheritanceManager.settingsWithInheritanceWarning.length == 0)
+                    if (Cura.SettingInheritanceManager.settingsWithInheritanceWarning.length == 0)
                     {
-                        return false;
+                        return false
                     }
 
                     // This setting has a resolve value, so an inheritance warning doesn't do anything.
-                    if(resolve != "None")
+                    if (resolve != "None")
                     {
                         return false
                     }
 
                     // If the setting does not have a limit_to_extruder property (or is -1), use the active stack.
-                    if(globalPropertyProvider.properties.limit_to_extruder == null || String(globalPropertyProvider.properties.limit_to_extruder) == "-1")
+                    if (globalPropertyProvider.properties.limit_to_extruder == null || String(globalPropertyProvider.properties.limit_to_extruder) == "-1")
                     {
-                        return Cura.SettingInheritanceManager.settingsWithInheritanceWarning.indexOf(definition.key) >= 0;
+                        return Cura.SettingInheritanceManager.settingsWithInheritanceWarning.indexOf(definition.key) >= 0
                     }
 
                     // Setting does have a limit_to_extruder property, so use that one instead.
                     if (definition.key === undefined) {
                         // Observed when loading workspace, probably when SettingItems are removed.
-                        return false;
+                        return false
                     }
-                    return Cura.SettingInheritanceManager.getOverridesForExtruder(definition.key, String(globalPropertyProvider.properties.limit_to_extruder)).indexOf(definition.key) >= 0;
+                    return Cura.SettingInheritanceManager.getOverridesForExtruder(definition.key, String(globalPropertyProvider.properties.limit_to_extruder)).indexOf(definition.key) >= 0
                 }
 
-                height: parent.height;
+                height: parent.height
-                width: height;
+                width: height
 
-                onClicked: {
+                onClicked:
-                    focus = true;
+                {
+                    focus = true
 
                     // Get the most shallow function value (eg not a number) that we can find.
                     var last_entry = propertyProvider.stackLevels[propertyProvider.stackLevels.length - 1]
                     for (var i = 1; i < base.stackLevels.length; i++)
                     {
-                        var has_setting_function = typeof(propertyProvider.getPropertyValue("value", base.stackLevels[i])) == "object";
+                        var has_setting_function = typeof(propertyProvider.getPropertyValue("value", base.stackLevels[i])) == "object"
                         if(has_setting_function)
                         {
                             last_entry = propertyProvider.stackLevels[i]
-                            break;
+                            break
                         }
                     }
-                    if((last_entry == 4 || last_entry == 11) && base.stackLevel == 0 && base.stackLevels.length == 2)
+                    if ((last_entry == 4 || last_entry == 11) && base.stackLevel == 0 && base.stackLevels.length == 2)
                     {
                         // Special case of the inherit reset. If only the definition (4th or 11th) container) and the first
                         // entry (user container) are set, we can simply remove the container.
@@ -276,23 +297,22 @@ Item {
                 color: UM.Theme.getColor("setting_control_button")
                 hoverColor: UM.Theme.getColor("setting_control_button_hover")
 
-                iconSource: UM.Theme.getIcon("formula");
+                iconSource: UM.Theme.getIcon("formula")
 
                 onEntered: { hoverTimer.stop(); base.showTooltip(catalog.i18nc("@label", "This setting is normally calculated, but it currently has an absolute value set.\n\nClick to restore the calculated value.")) }
-                onExited: base.showTooltip(base.tooltipText);
+                onExited: base.showTooltip(base.tooltipText)
             }
         }
 
         Item
         {
-            id: controlContainer;
+            id: controlContainer
 
             enabled: propertyProvider.isValueUsed
 
-            anchors.right: parent.right;
+            anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("thick_margin").width
+            anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenter: parent.verticalCenter;
+            width: UM.Theme.getSize("setting_control").width
-            width: UM.Theme.getSize("setting_control").width;
             height: UM.Theme.getSize("setting_control").height
         }
     }

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -119,6 +119,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:
             {
@@ -151,20 +152,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)
+                anchors.rightMargin: UM.Theme.getSize("thin_margin").width
-
-                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)
 
+                sourceSize.width: width
+                sourceSize.height: height
+                source: UM.Theme.getIcon("extruder_button")
                 color: control.color
             }
         }
@@ -218,20 +217,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)
+                    anchors.rightMargin: UM.Theme.getSize("thin_margin").width
-
-                    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)
 
+                    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.fill: parent
-            anchors.margins: Math.round(UM.Theme.getSize("default_lining").width);
+            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;
+                        return base.resolve
-                    } else {
+                    }
-                        return propertyProvider.properties.value;
+                    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) {
+                    if (!input.activeFocus)
-                        base.focusGainedByClick = true;
+                    {
-                        input.forceActiveFocus();
+                        base.focusGainedByClick = true
+                        input.forceActiveFocus()
                     }
-                    mouse.accepted = false;
+                    mouse.accepted = false
                 }
             }
         }

resources/qml/Settings/SettingView.qml

@@ -13,162 +13,28 @@ import "../Menus"
 
 Item
 {
-    id: base;
+    id: settingsView
 
     property QtObject settingVisibilityPresetsModel: CuraApplication.getSettingVisibilityPresetsModel()
     property Action configureSettings
     property bool findingSettings
-    signal showTooltip(Item item, point location, string text)
-    signal hideTooltip()
-
-    Item
-    {
-        id: globalProfileRow
-        height: UM.Theme.getSize("print_setup_item").height
-
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            leftMargin: Math.round(UM.Theme.getSize("thick_margin").width)
-            right: parent.right
-            rightMargin: Math.round(UM.Theme.getSize("thick_margin").width)
-        }
-
-        Label
-        {
-            id: globalProfileLabel
-            text: catalog.i18nc("@label","Profile:")
-            textFormat: Text.PlainText
-            width: Math.round(parent.width * 0.45 - UM.Theme.getSize("thick_margin").width - 2)
-            font: UM.Theme.getFont("default")
-            color: UM.Theme.getColor("text")
-            verticalAlignment: Text.AlignVCenter
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-        }
-
-        ToolButton
-        {
-            id: globalProfileSelection
-
-            text: generateActiveQualityText()
-            width: Math.round(parent.width * 0.55)
-            height: UM.Theme.getSize("setting_control").height
-            anchors.left: globalProfileLabel.right
-            anchors.right: parent.right
-            tooltip: Cura.MachineManager.activeQualityOrQualityChangesName
-            style: UM.Theme.styles.sidebar_header_button
-            activeFocusOnPress: true
-            menu: ProfileMenu { }
-
-            function generateActiveQualityText ()
-            {
-                var result = Cura.MachineManager.activeQualityOrQualityChangesName
-                if (Cura.MachineManager.isActiveQualityExperimental)
-                {
-                    result += " (Experimental)"
-                }
-
-                if (Cura.MachineManager.isActiveQualitySupported)
-                {
-                    if (Cura.MachineManager.activeQualityLayerHeight > 0)
-                    {
-                        result += " <font color=\"" + UM.Theme.getColor("text_detail") + "\">"
-                        result += " - "
-                        result += Cura.MachineManager.activeQualityLayerHeight + "mm"
-                        result += "</font>"
-                    }
-                }
-
-                return result
-            }
-
-            UM.SimpleButton
-            {
-                id: customisedSettings
-
-                visible: Cura.MachineManager.hasUserSettings
-                height: Math.round(parent.height * 0.6)
-                width: Math.round(parent.height * 0.6)
-
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: Math.round(UM.Theme.getSize("setting_preferences_button_margin").width - UM.Theme.getSize("thick_margin").width)
-
-                color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button");
-                iconSource: UM.Theme.getIcon("star");
-
-                onClicked:
-                {
-                    forceActiveFocus();
-                    Cura.Actions.manageProfiles.trigger()
-                }
-                onEntered:
-                {
-                    var content = catalog.i18nc("@tooltip","Some setting/override values are different from the values stored in the profile.\n\nClick to open the profile manager.")
-                    base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0),  content)
-                }
-                onExited: base.hideTooltip()
-            }
-        }
-    }
-
-    ToolButton
-    {
-        id: settingVisibilityMenu
-
-        width: height
-        height: UM.Theme.getSize("setting_control").height
-        anchors
-        {
-            top: globalProfileRow.bottom
-            topMargin: UM.Theme.getSize("thick_margin").height
-            right: parent.right
-            rightMargin: UM.Theme.getSize("thick_margin").width
-        }
-        style: ButtonStyle
-        {
-            background: Item
-            {
-                UM.RecolorImage
-                {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: UM.Theme.getSize("standard_arrow").width
-                    height: UM.Theme.getSize("standard_arrow").height
-                    sourceSize.height: width
-                    color: control.enabled ? UM.Theme.getColor("setting_category_text") : UM.Theme.getColor("setting_category_disabled_text")
-                    source: UM.Theme.getIcon("menu")
-                }
-            }
-            label: Label{}
-        }
-        menu: SettingVisibilityPresetsMenu
-        {
-            onShowAllSettings:
-            {
-                definitionsModel.setAllVisible(true);
-                filter.updateDefinitionModel();
-            }
-        }
-    }
 
     Rectangle
     {
         id: filterContainer
         visible: true
 
+        radius: UM.Theme.getSize("setting_control_radius").width
         border.width: Math.round(UM.Theme.getSize("default_lining").width)
         border.color:
         {
-            if(hoverMouseArea.containsMouse || clearFilterButton.containsMouse)
+            if (hoverMouseArea.containsMouse || clearFilterButton.containsMouse)
             {
-                return UM.Theme.getColor("setting_control_border_highlight");
+                return UM.Theme.getColor("setting_control_border_highlight")
             }
             else
             {
-                return UM.Theme.getColor("setting_control_border");
+                return UM.Theme.getColor("setting_control_border")
             }
         }
 
@@ -176,14 +42,12 @@ Item
 
         anchors
         {
-            top: globalProfileRow.bottom
+            top: parent.top
-            topMargin: UM.Theme.getSize("thick_margin").height
             left: parent.left
-            leftMargin: UM.Theme.getSize("thick_margin").width
             right: settingVisibilityMenu.left
-            rightMargin: Math.floor(UM.Theme.getSize("default_margin").width / 2)
+            rightMargin: UM.Theme.getSize("default_margin").width
         }
-        height: UM.Theme.getSize("setting_control").height
+        height: UM.Theme.getSize("print_setup_big_item").height
         Timer
         {
             id: settingsSearchTimer
@@ -195,19 +59,19 @@ Item
 
         TextField
         {
-            id: filter;
+            id: filter
             height: parent.height
             anchors.left: parent.left
             anchors.right: clearFilterButton.left
             anchors.rightMargin: Math.round(UM.Theme.getSize("thick_margin").width)
 
-            placeholderText: catalog.i18nc("@label:textbox", "Search...")
+            placeholderText: "<img align='middle'  src='"+ UM.Theme.getIcon("search") +"'>" +  "<div vertical-align=bottom>" + catalog.i18nc("@label:textbox", "search settings")
 
             style: TextFieldStyle
             {
-                textColor: UM.Theme.getColor("setting_control_text");
+                textColor: UM.Theme.getColor("setting_control_text")
-                placeholderTextColor: UM.Theme.getColor("setting_control_text")
+                placeholderTextColor: UM.Theme.getColor("setting_filter_field")
-                font: UM.Theme.getFont("default");
+                font: UM.Theme.getFont("default_italic")
                 background: Item {}
             }
 
@@ -221,38 +85,38 @@ Item
 
             onEditingFinished:
             {
-                definitionsModel.filter = {"i18n_label": "*" + text};
+                definitionsModel.filter = {"i18n_label": "*" + text}
-                findingSettings = (text.length > 0);
+                findingSettings = (text.length > 0)
-                if(findingSettings != lastFindingSettings)
+                if (findingSettings != lastFindingSettings)
                 {
-                    updateDefinitionModel();
+                    updateDefinitionModel()
-                    lastFindingSettings = findingSettings;
+                    lastFindingSettings = findingSettings
                 }
             }
 
             Keys.onEscapePressed:
             {
-                filter.text = "";
+                filter.text = ""
             }
 
             function updateDefinitionModel()
             {
-                if(findingSettings)
+                if (findingSettings)
                 {
-                    expandedCategories = definitionsModel.expanded.slice();
+                    expandedCategories = definitionsModel.expanded.slice()
-                    definitionsModel.expanded = [""]; // keep categories closed while to prevent render while making settings visible one by one
+                    definitionsModel.expanded = [""]  // keep categories closed while to prevent render while making settings visible one by one
-                    definitionsModel.showAncestors = true;
+                    definitionsModel.showAncestors = true
-                    definitionsModel.showAll = true;
+                    definitionsModel.showAll = true
-                    definitionsModel.expanded = ["*"];
+                    definitionsModel.expanded = ["*"]
                 }
                 else
                 {
-                    if(expandedCategories)
+                    if (expandedCategories)
                     {
-                        definitionsModel.expanded = expandedCategories;
+                        definitionsModel.expanded = expandedCategories
                     }
-                    definitionsModel.showAncestors = false;
+                    definitionsModel.showAncestors = false
-                    definitionsModel.showAll = false;
+                    definitionsModel.showAll = false
                 }
             }
         }
@@ -284,40 +148,82 @@ Item
 
             onClicked:
             {
-                filter.text = "";
+                filter.text = ""
-                filter.forceActiveFocus();
+                filter.forceActiveFocus()
+            }
+        }
+    }
+
+    ToolButton
+    {
+        id: settingVisibilityMenu
+
+        anchors
+        {
+            top: filterContainer.top
+            bottom: filterContainer.bottom
+            right: parent.right
+            rightMargin: UM.Theme.getSize("wide_margin").width
+        }
+
+        style: ButtonStyle
+        {
+            background: Item {
+                UM.RecolorImage {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: UM.Theme.getSize("standard_arrow").width
+                    height: UM.Theme.getSize("standard_arrow").height
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    color: control.enabled ? UM.Theme.getColor("setting_category_text") : UM.Theme.getColor("setting_category_disabled_text")
+                    source: UM.Theme.getIcon("menu")
+                }
+            }
+            label: Label{}
+        }
+        menu: SettingVisibilityPresetsMenu
+        {
+            onShowAllSettings:
+            {
+                definitionsModel.setAllVisible(true)
+                filter.updateDefinitionModel()
             }
         }
     }
 
     ScrollView
     {
-        anchors.top: filterContainer.bottom;
+        id: scrollView
-        anchors.bottom: parent.bottom;
+        anchors
-        anchors.right: parent.right;
+        {
-        anchors.left: parent.left;
+            top: filterContainer.bottom
-        anchors.topMargin: UM.Theme.getSize("thick_margin").height
+            topMargin: UM.Theme.getSize("default_margin").height
+            bottom: parent.bottom
+            right: parent.right
+            left: parent.left
+        }
 
-        style: UM.Theme.styles.scrollview;
+        style: UM.Theme.styles.scrollview
-        flickableItem.flickableDirection: Flickable.VerticalFlick;
+        flickableItem.flickableDirection: Flickable.VerticalFlick
-        __wheelAreaScrollSpeed: 75; // Scroll three lines in one scroll event
+        __wheelAreaScrollSpeed: 75  // Scroll three lines in one scroll event
 
         ListView
         {
             id: contents
-            spacing: Math.round(UM.Theme.getSize("default_lining").height);
+            spacing: UM.Theme.getSize("default_lining").height
-            cacheBuffer: 1000000;   // Set a large cache to effectively just cache every list item.
+            cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
 
             model: UM.SettingDefinitionsModel
             {
-                id: definitionsModel;
+                id: definitionsModel
                 containerId: Cura.MachineManager.activeDefinitionId
                 visibilityHandler: UM.SettingPreferenceVisibilityHandler { }
                 exclude: ["machine_settings", "command_line_settings", "infill_mesh", "infill_mesh_order", "cutting_mesh", "support_mesh", "anti_overhang_mesh"] // TODO: infill_mesh settigns are excluded hardcoded, but should be based on the fact that settable_globally, settable_per_meshgroup and settable_per_extruder are false.
                 expanded: CuraApplication.expandedCategories
                 onExpandedChanged:
                 {
-                    if(!findingSettings)
+                    if (!findingSettings)
                     {
                         // Do not change expandedCategories preference while filtering settings
                         // because all categories are expanded while filtering
@@ -333,7 +239,7 @@ Item
             {
                 id: delegate
 
-                width: Math.round(UM.Theme.getSize("print_setup_widget").width);
+                width: scrollView.width
                 height: provider.properties.enabled == "True" ? UM.Theme.getSize("section").height : - contents.spacing
                 Behavior on height { NumberAnimation { duration: 100 } }
                 opacity: provider.properties.enabled == "True" ? 1 : 0
@@ -403,17 +309,17 @@ Item
                         // machine gets changed.
                         var activeMachineId = Cura.MachineManager.activeMachineId;
 
-                        if(!model.settable_per_extruder)
+                        if (!model.settable_per_extruder)
                         {
                             //Not settable per extruder or there only is global, so we must pick global.
                             return activeMachineId;
                         }
-                        if(inheritStackProvider.properties.limit_to_extruder != null && inheritStackProvider.properties.limit_to_extruder >= 0)
+                        if (inheritStackProvider.properties.limit_to_extruder != null && inheritStackProvider.properties.limit_to_extruder >= 0)
                         {
                             //We have limit_to_extruder, so pick that stack.
                             return Cura.ExtruderManager.extruderIds[String(inheritStackProvider.properties.limit_to_extruder)];
                         }
-                        if(Cura.ExtruderManager.activeExtruderStackId)
+                        if (Cura.ExtruderManager.activeExtruderStackId)
                         {
                             //We're on an extruder tab. Pick the current extruder.
                             return Cura.ExtruderManager.activeExtruderStackId;
@@ -454,7 +360,7 @@ Item
                         contextMenu.provider = provider
                         contextMenu.popup();
                     }
-                    onShowTooltip: base.showTooltip(delegate, { x: -UM.Theme.getSize("default_arrow").width, y: Math.round(delegate.height / 2) }, text)
+                    onShowTooltip: base.showTooltip(delegate, Qt.point(- settingsView.x - UM.Theme.getSize("default_margin").width, 0), text)
                     onHideTooltip: base.hideTooltip()
                     onShowAllHiddenInheritedSettings:
                     {
@@ -475,14 +381,14 @@ Item
                     }
                     onSetActiveFocusToNextSetting:
                     {
-                        if(forward == undefined || forward)
+                        if (forward == undefined || forward)
                         {
                             contents.currentIndex = contents.indexWithFocus + 1;
                             while(contents.currentItem && contents.currentItem.height <= 0)
                             {
                                 contents.currentIndex++;
                             }
-                            if(contents.currentItem)
+                            if (contents.currentItem)
                             {
                                 contents.currentItem.item.focusItem.forceActiveFocus();
                             }
@@ -494,7 +400,7 @@ Item
                             {
                                 contents.currentIndex--;
                             }
-                            if(contents.currentItem)
+                            if (contents.currentItem)
                             {
                                 contents.currentItem.item.focusItem.forceActiveFocus();
                             }

resources/qml/SidebarAdvanced.qml

@@ -1,10 +0,0 @@
-// Copyright (c) 2015 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-import "Settings"
-
-SettingView {
-}

resources/qml/SidebarContents.qml

@@ -1,43 +0,0 @@
-// Copyright (c) 2016 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-
-StackView
-{
-    id: sidebarContents
-
-    delegate: StackViewDelegate
-    {
-        function transitionFinished(properties)
-        {
-            properties.exitItem.opacity = 1
-        }
-
-        pushTransition: StackViewTransition
-        {
-            PropertyAnimation
-            {
-                target: enterItem
-                property: "opacity"
-                from: 0
-                to: 1
-                duration: 100
-            }
-            PropertyAnimation
-            {
-                target: exitItem
-                property: "opacity"
-                from: 1
-                to: 0
-                duration: 100
-            }
-        }
-    }
-}

resources/qml/ViewsSelector.qml

@@ -7,13 +7,12 @@ import QtQuick.Controls 2.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-Cura.ExpandableComponent
+Cura.ExpandablePopup
 {
     id: viewSelector
 
-    popupPadding: UM.Theme.getSize("default_lining").width
+    contentPadding: UM.Theme.getSize("default_lining").width
-    popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft
+    contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
 
     property var viewModel: UM.ViewModel { }
 
@@ -70,10 +69,10 @@ Cura.ExpandableComponent
         }
     }
 
-    popupItem: Column
+    contentItem: Column
     {
         id: viewSelectorPopup
-        width: viewSelector.width - 2 * viewSelector.popupPadding
+        width: viewSelector.width - 2 * viewSelector.contentPadding
         leftPadding: UM.Theme.getSize("default_lining").width
         rightPadding: UM.Theme.getSize("default_lining").width
 
@@ -81,7 +80,7 @@ Cura.ExpandableComponent
         Component.onCompleted:
         {
             height = implicitHeight
-            width = viewSelector.width - 2 * viewSelector.popupPadding
+            width = viewSelector.width - 2 * viewSelector.contentPadding
         }
 
         Repeater
@@ -122,7 +121,7 @@ Cura.ExpandableComponent
 
                 onClicked:
                 {
-                    viewSelector.togglePopup()
+                    toggleContent()
                     UM.Controller.setActiveView(id)
                 }
             }

resources/qml/qmldir

@@ -7,9 +7,11 @@ ActionButton 1.0 ActionButton.qml
 MaterialMenu 1.0 MaterialMenu.qml
 NozzleMenu 1.0 NozzleMenu.qml
 ActionPanelWidget 1.0 ActionPanelWidget.qml
-IconLabel 1.0 IconLabel.qml
+IconWithText 1.0 IconWithText.qml
 OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
 ExpandableComponent 1.0 ExpandableComponent.qml
 PrinterTypeLabel 1.0 PrinterTypeLabel.qml
 ViewsSelector 1.0 ViewsSelector.qml
-ToolbarButton 1.0 ToolbarButton.qml
+ToolbarButton 1.0 ToolbarButton.qml
+SettingView 1.0 SettingView.qml
+ProfileMenu 1.0 ProfileMenu.qml

resources/themes/cura-dark/theme.json

@@ -35,6 +35,7 @@
         "text_scene_hover": [255, 255, 255, 204],
 
         "error": [212, 31, 53, 255],
+        "disabled": [32, 32, 32, 255],
 
         "button": [39, 44, 48, 255],
         "button_hover": [39, 44, 48, 255],

resources/themes/cura-light/icons/buildplate.svg

@@ -1,17 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <g fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round">
-    <title>icn_buildplate</title>
+        <polyline points="0 6 7 9 14 6" />
-    <desc>Created with Sketch.</desc>
+        <polyline points="0 8 7 11 14 8" />
-    <defs></defs>
+        <polyline points="0 10 7 13 14 10" />
-    <g id="Visual" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="0 3.75 7 1 14 3.75 7 6.5" fill="black" />
-        <g id="Printer-status-icon" transform="translate(-33.000000, -366.000000)" stroke="#000000">
-            <g id="icn_buildplate" transform="translate(33.000000, 367.000000)">
-                <polyline id="Stroke-6823" points="0 5 7 8 14 5"></polyline>
-                <polyline id="Stroke-6823-Copy" points="0 7 7 10 14 7"></polyline>
-                <polyline id="Stroke-6823-Copy" points="0 9 7 12 14 9"></polyline>
-                <polygon id="Stroke-6824" points="0 2.75 7 0 14 2.75 7 5.5"></polygon>
-            </g>
-        </g>
     </g>
 </svg>

resources/themes/cura-light/icons/search.svg

@@ -1,4 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+<?xml version="1.0" encoding="UTF-8"?>
-  <path
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-     d="m 20.769231,12.692308 q 0,-3.3353368 -2.370794,-5.7061301 -2.370793,-2.3707933 -5.706129,-2.3707933 -3.335337,0 -5.70613,2.3707933 -2.370793,2.3707933 -2.370793,5.7061301 0,3.335336 2.370793,5.706129 2.370793,2.370794 5.70613,2.370794 3.335336,0 5.706129,-2.370794 2.370794,-2.370793 2.370794,-5.706129 z m 9.230769,15 q 0,0.9375 -0.685096,1.622596 Q 28.629808,30 27.692308,30 26.71875,30 26.069712,29.314904 l -6.183895,-6.165866 q -3.227163,2.235577 -7.193509,2.235577 -2.578125,0 -4.93089,-1.000601 Q 5.408654,23.383413 3.704928,21.679687 2.001202,19.975962 1.000601,17.623197 0,15.270433 0,12.692308 0,10.114183 1.000601,7.7614183 2.001202,5.4086538 3.704928,3.7049279 5.408654,2.0012019 7.761418,1.000601 10.114183,0 12.692308,0 q 2.578125,0 4.930889,1.000601 2.352765,1.0006009 4.05649,2.7043269 1.703726,1.7037259 2.704327,4.0564904 1.000601,2.3527647 1.000601,4.9308897 0,3.966346 -2.235577,7.193509 l 6.183895,6.183895 Q 30,26.736779 30,27.692308 Z" />
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-</svg>
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Panel/-Print-settings-custom" transform="translate(-32.000000, -157.000000)" fill="#999999" fill-rule="nonzero">
+            <g id="Print-settings">
+                <g id="noun_Search_860389">
+                    <g transform="translate(32.000000, 157.000000)">
+                        <g id="Group">
+                            <g id="Shape">
+                                <path d="M10.2242373,9.21452652 L13.7917958,12.782085 C14.0693364,13.0596257 14.07024,13.5087044 13.7894722,13.7894722 C13.5106483,14.0682962 13.0545722,14.064283 12.782085,13.7917958 L9.21452652,10.2242373 C6.97377165,11.9681155 3.73256035,11.8102461 1.67294351,9.75062929 C-0.557647836,7.52003797 -0.557647836,3.90353485 1.67294351,1.67294351 C3.90353485,-0.557647836 7.52003797,-0.557647836 9.75062929,1.67294351 C11.8102461,3.73256035 11.9681155,6.97377165 10.2242373,9.21452652 Z M8.74091861,8.74091861 C10.4138621,7.06797507 10.4138621,4.35559774 8.74091861,2.68265423 C7.06797507,1.00971073 4.35559774,1.00971073 2.68265423,2.68265423 C1.00971073,4.35559774 1.00971073,7.06797507 2.68265423,8.74091861 C4.35559774,10.4138621 7.06797507,10.4138621 8.74091861,8.74091861 Z"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/themes/cura-light/styles.qml

@@ -9,7 +9,7 @@ import UM 1.1 as UM
 
 QtObject
 {
-    property Component sidebar_header_button: Component
+    property Component print_setup_header_button: Component
     {
         ButtonStyle
         {
@@ -38,6 +38,7 @@ QtObject
                     }
                 }
 
+                radius: UM.Theme.getSize("setting_control_radius").width
                 border.width: Theme.getSize("default_lining").width
                 border.color:
                 {
@@ -79,7 +80,7 @@ QtObject
                 }
                 Label
                 {
-                    id: sidebarComboBoxLabel
+                    id: printSetupComboBoxLabel
                     color: control.enabled ? Theme.getColor("setting_control_text") : Theme.getColor("setting_control_disabled_text")
                     text: control.text;
                     elide: Text.ElideRight;
@@ -381,16 +382,16 @@ QtObject
             {
                 implicitWidth: Theme.getSize("scrollbar").width
                 radius: Math.round(implicitWidth / 2)
-                color: Theme.getColor("scrollbar_background");
+                color: Theme.getColor("scrollbar_background")
             }
 
             handle: Rectangle
             {
                 id: scrollViewHandle
-                implicitWidth: Theme.getSize("scrollbar").width;
+                implicitWidth: Theme.getSize("scrollbar").width
                 radius: Math.round(implicitWidth / 2)
 
-                color: styleData.pressed ? Theme.getColor("scrollbar_handle_down") : styleData.hovered ? Theme.getColor("scrollbar_handle_hover") : Theme.getColor("scrollbar_handle");
+                color: styleData.pressed ? Theme.getColor("scrollbar_handle_down") : styleData.hovered ? Theme.getColor("scrollbar_handle_hover") : Theme.getColor("scrollbar_handle")
                 Behavior on color { ColorAnimation { duration: 50; } }
             }
         }
@@ -411,11 +412,11 @@ QtObject
 
                 border.width: Theme.getSize("default_lining").width;
                 border.color: control.hovered ? Theme.getColor("setting_control_border_highlight") : Theme.getColor("setting_control_border");
+                radius: UM.Theme.getSize("setting_control_radius").width
             }
 
             label: Item
             {
-
                 Label
                 {
                     anchors.left: parent.left
@@ -463,11 +464,11 @@ QtObject
                 color: !enabled ? UM.Theme.getColor("setting_control_disabled") : control._hovered ? UM.Theme.getColor("setting_control_highlight") : UM.Theme.getColor("setting_control")
                 border.width: UM.Theme.getSize("default_lining").width
                 border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : control._hovered ? UM.Theme.getColor("setting_control_border_highlight") : UM.Theme.getColor("setting_control_border")
+                radius: UM.Theme.getSize("setting_control_radius").width
             }
 
             label: Item
             {
-
                 Label
                 {
                     anchors.left: parent.left
@@ -484,17 +485,18 @@ QtObject
                     verticalAlignment: Text.AlignVCenter
                 }
 
-                Rectangle
+                UM.RecolorImage
                 {
                     id: swatch
-                    height: Math.round(UM.Theme.getSize("setting_control").height / 2)
+                    height: Math.round(control.height / 2)
                     width: height
                     anchors.right: downArrow.left
                     anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
+                    anchors.rightMargin: UM.Theme.getSize("default_margin").width
-                    radius: Math.round(width / 2)
+
-                    border.width: UM.Theme.getSize("default_lining").width
+                    sourceSize.width: width
-                    border.color: UM.Theme.getColor("lining")
+                    sourceSize.height: height
+                    source: UM.Theme.getIcon("extruder_button")
                     color: (control.color_override !== "") ? control.color_override : control.color
                 }
 
@@ -530,7 +532,7 @@ QtObject
                 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : (control.enabled ? Theme.getColor("checkbox") : Theme.getColor("checkbox_disabled"))
                 Behavior on color { ColorAnimation { duration: 50; } }
 
-                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : 0
+                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width
 
                 border.width: Theme.getSize("default_lining").width
                 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border")
@@ -554,6 +556,7 @@ QtObject
                 color: Theme.getColor("checkbox_text")
                 font: Theme.getFont("default")
                 elide: Text.ElideRight
+                renderType: Text.NativeRendering
             }
         }
     }
@@ -571,7 +574,7 @@ QtObject
                 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : Theme.getColor("checkbox");
                 Behavior on color { ColorAnimation { duration: 50; } }
 
-                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : 0
+                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width
 
                 border.width: Theme.getSize("default_lining").width;
                 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border");
@@ -623,6 +626,7 @@ QtObject
 
                 border.width: Theme.getSize("default_lining").width;
                 border.color: control.hovered ? Theme.getColor("setting_control_border_highlight") : Theme.getColor("setting_control_border");
+                radius: UM.Theme.getSize("setting_control_radius").width
 
                 color: Theme.getColor("setting_validation_ok");
 
@@ -640,7 +644,7 @@ QtObject
         }
     }
 
-    property Component sidebar_action_button: Component
+    property Component print_setup_action_button: Component
     {
         ButtonStyle
         {

resources/themes/cura-light/theme.json

@@ -35,7 +35,7 @@
             "family": "Noto Sans"
         },
         "default_italic": {
-            "size": 1.15,
+            "size": 1.0,
             "weight": 50,
             "italic": true,
             "family": "Noto Sans"
@@ -80,7 +80,7 @@
         "primary_hover": [48, 182, 231, 255],
         "primary_text": [255, 255, 255, 255],
         "border": [127, 127, 127, 255],
-        "secondary": [240, 240, 240, 255],
+        "secondary": [245, 245, 245, 255],
         "secondary_shadow": [216, 216, 216, 255],
 
         "primary_button": [38, 113, 231, 255],
@@ -124,11 +124,12 @@
         "text_subtext": [0, 0, 0, 255],
         "text_medium": [128, 128, 128, 255],
         "text_emphasis": [255, 255, 255, 255],
-        "text_scene": [31, 36, 39, 255],
+        "text_scene": [102, 102, 102, 255],
-        "text_scene_hover": [70, 84, 113, 255],
+        "text_scene_hover": [123, 123, 113, 255],
 
         "error": [255, 140, 0, 255],
         "warning": [245, 166, 35, 255],
+        "disabled": [229, 229, 229, 255],
 
         "toolbar_button_text": [8, 7, 63, 255],
         "toolbar_button_hover": [232, 242, 252, 255],
@@ -145,10 +146,10 @@
         "button_text_active_hover": [255, 255, 255, 255],
 
         "small_button": [0, 0, 0, 0],
-        "small_button_hover": [8, 7, 63, 255],
+        "small_button_hover": [102, 102, 102, 255],
-        "small_button_active": [8, 7, 63, 255],
+        "small_button_active": [10, 8, 80, 255],
-        "small_button_active_hover": [8, 7, 63, 255],
+        "small_button_active_hover": [10, 8, 80, 255],
-        "small_button_text": [171, 171, 191, 255],
+        "small_button_text": [102, 102, 102, 255],
         "small_button_text_hover": [255, 255, 255, 255],
         "small_button_text_active": [255, 255, 255, 255],
         "small_button_text_active_hover": [255, 255, 255, 255],
@@ -178,34 +179,34 @@
         "action_button_disabled_shadow": [228, 228, 228, 255],
 
         "scrollbar_background": [255, 255, 255, 255],
-        "scrollbar_handle": [31, 36, 39, 255],
+        "scrollbar_handle": [10, 8, 80, 255],
-        "scrollbar_handle_hover": [12, 159, 227, 255],
+        "scrollbar_handle_hover": [50, 130, 255, 255],
-        "scrollbar_handle_down": [12, 159, 227, 255],
+        "scrollbar_handle_down": [50, 130, 255, 255],
 
         "setting_category": [245, 245, 245, 255],
         "setting_category_disabled": [255, 255, 255, 255],
-        "setting_category_hover": [245, 245, 245, 255],
+        "setting_category_hover": [232, 242, 252, 255],
         "setting_category_active": [245, 245, 245, 255],
-        "setting_category_active_hover": [245, 245, 245, 255],
+        "setting_category_active_hover": [232, 242, 252, 255],
-        "setting_category_text": [31, 36, 39, 255],
+        "setting_category_text": [35, 35, 35, 255],
         "setting_category_disabled_text": [24, 41, 77, 101],
-        "setting_category_hover_text": [31, 36, 39, 255],
+        "setting_category_hover_text": [35, 35, 35, 255],
-        "setting_category_active_text": [31, 36, 39, 255],
+        "setting_category_active_text": [35, 35, 35, 255],
-        "setting_category_active_hover_text": [31, 36, 39, 255],
+        "setting_category_active_hover_text": [35, 35, 35, 255],
         "setting_category_border": [245, 245, 245, 255],
         "setting_category_disabled_border": [245, 245, 245, 255],
-        "setting_category_hover_border": [12, 159, 227, 255],
+        "setting_category_hover_border": [50, 130, 255, 255],
-        "setting_category_active_border": [245, 245, 245, 255],
+        "setting_category_active_border": [50, 130, 255, 255],
-        "setting_category_active_hover_border": [12, 159, 227, 255],
+        "setting_category_active_hover_border": [50, 130, 255, 255],
 
         "setting_control": [255, 255, 255, 255],
         "setting_control_selected": [31, 36, 39, 255],
         "setting_control_highlight": [255, 255, 255, 255],
-        "setting_control_border": [127, 127, 127, 255],
+        "setting_control_border": [199, 199, 199, 255],
         "setting_control_border_highlight": [50, 130, 255, 255],
-        "setting_control_text": [27, 27, 27, 255],
+        "setting_control_text": [35, 35, 35, 255],
-        "setting_control_depth_line": [127, 127, 127, 255],
+        "setting_control_depth_line": [199, 199, 199, 255],
-        "setting_control_button": [127, 127, 127, 255],
+        "setting_control_button": [199, 199, 199, 255],
         "setting_control_button_hover": [70, 84, 113, 255],
         "setting_control_disabled": [245, 245, 245, 255],
         "setting_control_disabled_text": [127, 127, 127, 255],
@@ -216,6 +217,7 @@
         "setting_validation_warning_background": [255, 145, 62, 255],
         "setting_validation_warning": [127, 127, 127, 255],
         "setting_validation_ok": [255, 255, 255, 255],
+        "setting_filter_field" : [153, 153, 153, 255],
 
         "material_compatibility_warning": [0, 0, 0, 255],
 
@@ -233,11 +235,11 @@
 
         "checkbox": [255, 255, 255, 255],
         "checkbox_hover": [255, 255, 255, 255],
-        "checkbox_border": [64, 69, 72, 255],
+        "checkbox_border": [199, 199, 199, 255],
         "checkbox_border_hover": [50, 130, 255, 255],
-        "checkbox_mark": [119, 122, 124, 255],
+        "checkbox_mark": [50, 130, 255, 255],
         "checkbox_disabled": [223, 223, 223, 255],
-        "checkbox_text": [27, 27, 27, 255],
+        "checkbox_text": [35, 35, 35, 255],
 
         "tooltip": [68, 192, 255, 255],
         "tooltip_text": [255, 255, 255, 255],
@@ -293,16 +295,16 @@
         "xray_error": [255,  0,  0, 255],
 
         "layerview_ghost": [32, 32, 32, 96],
-        "layerview_none": [255,  255,  255, 255],
+        "layerview_none": [255, 255, 255, 255],
-        "layerview_inset_0": [255,  0,  0, 255],
+        "layerview_inset_0": [255, 0, 0, 255],
-        "layerview_inset_x": [0,  255,  0, 255],
+        "layerview_inset_x": [0, 255, 0, 255],
-        "layerview_skin": [255,  255,  0, 255],
+        "layerview_skin": [255, 255, 0, 255],
-        "layerview_support": [0,  255,  255, 255],
+        "layerview_support": [0, 255, 255, 255],
-        "layerview_skirt": [0,  255,  255, 255],
+        "layerview_skirt": [0, 255, 255, 255],
-        "layerview_infill": [255,  192, 0, 255],
+        "layerview_infill": [255, 192, 0, 255],
-        "layerview_support_infill": [0,  255,  255, 255],
+        "layerview_support_infill": [0, 255, 255, 255],
-        "layerview_move_combing": [0,  0,  255, 255],
+        "layerview_move_combing": [0, 0, 255, 255],
-        "layerview_move_retraction": [128,  128,  255, 255],
+        "layerview_move_retraction": [128, 128, 255, 255],
         "layerview_support_interface": [64, 192, 255, 255],
         "layerview_nozzle": [181, 166, 66, 50],
 
@@ -356,10 +358,16 @@
 
         "account_button": [12, 3],
 
-        "print_setup_widget": [30.0, 42.0],
+        "print_setup_widget": [38.0, 30.0],
         "print_setup_mode_toggle": [0.0, 2.0],
         "print_setup_item": [0.0, 2.0],
         "print_setup_extruder_box": [0.0, 6.0],
+        "print_setup_widget_header": [0.0, 3.0],
+        "print_setup_slider_groove": [0.16, 0.16],
+        "print_setup_slider_handle": [1.0, 1.0],
+        "print_setup_slider_tickmarks": [0.32, 0.32],
+        "print_setup_big_item": [28, 2.5],
+        "print_setup_icon": [1.2, 1.2],
 
         "configuration_selector_mode_tabs": [0.0, 3.0],
 
@@ -391,12 +399,13 @@
 
         "extruder_icon": [2.33, 2.33],
 
-        "section": [0.0, 2.2],
+        "section": [0.0, 2],
         "section_icon": [1.6, 1.6],
         "section_icon_column": [2.8, 0.0],
 
         "setting": [25.0, 1.8],
-        "setting_control": [10.0, 2.0],
+        "setting_control": [11.0, 2.0],
+        "setting_control_radius": [0.15, 0.15],
         "setting_control_depth_margin": [1.4, 0.0],
         "setting_preferences_button_margin": [4, 0.0],
         "setting_control_margin": [0.0, 0.0],
@@ -404,7 +413,7 @@
         "setting_text_maxwidth": [40.0, 0.0],
 
         "standard_list_lineheight": [1.5, 1.5],
-        "standard_arrow": [0.8, 0.8],
+        "standard_arrow": [1.0, 1.0],
 
         "button": [4, 4],
         "button_icon": [2.5, 2.5],
@@ -444,7 +453,8 @@
         "layerview_row": [11.0, 1.5],
         "layerview_row_spacing": [0.0, 0.5],
 
-        "checkbox": [2.0, 2.0],
+        "checkbox": [1.5, 1.5],
+        "checkbox_radius": [0.08, 0.08],
 
         "tooltip": [20.0, 10.0],
         "tooltip_margins": [1.0, 1.0],