Merge branch 'ui_rework_4_0' into CURA-5876-Configuration_dropdown

Conflicts:
	plugins/PrepareStage/PrepareMenu.qml: Git was wrong, this was not really a conflict.
	resources/qml/ActionButton.qml: With iconSource being modified on ui_rework_4_0 and me modifying the icon to be able to display it on the left hand side.
	resources/qml/ActionPanel/OutputProcessWidget.qml: Git was wrong, not really a conflict.
	resources/qml/ActionPanel/SliceProcessWidget.qml: Git was wrong, not really a conflict.
	resources/qml/ExpandableComponent.qml: Both ui_rework_4_0 and me implemented a border around popups.
	resources/qml/MainWindow/MainWindowHeader.qml: Git was wrong, not really a conflict.
	resources/themes/cura-light/theme.json: Theme item was added in a place where I added whitespace.

29 files changed, 830 insertions, 763 deletions

diff --git a/resources/qml/Account/GeneralOperations.qml b/resources/qml/Account/GeneralOperations.qml
index 4614c4ba88..b9f1025d5e 100644
--- a/resources/qml/Account/GeneralOperations.qml
+++ b/resources/qml/Account/GeneralOperations.qml
@@ -11,20 +11,16 @@ Row
 {
     spacing: UM.Theme.getSize("default_margin").width
 
-    Cura.ActionButton
+    Cura.SecondaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Create account")
-        color: UM.Theme.getColor("secondary")
-        hoverColor: UM.Theme.getColor("secondary")
-        textColor: UM.Theme.getColor("main_window_header_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com/app/create")
         fixedWidthMode: true
     }
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
diff --git a/resources/qml/Account/UserOperations.qml b/resources/qml/Account/UserOperations.qml
index c167813425..b9ffa395d6 100644
--- a/resources/qml/Account/UserOperations.qml
+++ b/resources/qml/Account/UserOperations.qml
@@ -11,20 +11,16 @@ Row
 {
     spacing: UM.Theme.getSize("default_margin").width
 
-    Cura.ActionButton
+    Cura.SecondaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Manage account")
-        color: UM.Theme.getColor("secondary")
-        hoverColor: UM.Theme.getColor("secondary")
-        textColor: UM.Theme.getColor("main_window_header_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
         fixedWidthMode: true
     }
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml
index 7ecaeda4b0..cd0a264766 100644
--- a/resources/qml/ActionButton.qml
+++ b/resources/qml/ActionButton.qml
@@ -3,28 +3,35 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
+
+import QtGraphicalEffects 1.0 // For the dropshadow
 
 import UM 1.1 as UM
 
 Button
 {
     id: button
-    property alias cursorShape: mouseArea.cursorShape
     property alias iconSource: buttonIconLeft.source
     property var iconOnRightSide: false
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
-    property var color: UM.Theme.getColor("primary")
-    property var hoverColor: UM.Theme.getColor("primary_hover")
-    property var disabledColor: color
-    property var textColor: UM.Theme.getColor("button_text")
-    property var textHoverColor: UM.Theme.getColor("button_text_hover")
-    property var textDisabledColor: textColor
-    property var outlineColor: color
-    property var outlineHoverColor: hoverColor
-    property var outlineDisabledColor: outlineColor
+
+    property color color: UM.Theme.getColor("primary")
+    property color hoverColor: UM.Theme.getColor("primary_hover")
+    property color disabledColor: color
+    property color textColor: UM.Theme.getColor("button_text")
+    property color textHoverColor: textColor
+    property color textDisabledColor: textColor
+    property color outlineColor: color
+    property color outlineHoverColor: hoverColor
+    property color outlineDisabledColor: outlineColor
+
+    hoverEnabled: true
+
+    property alias shadowColor: shadow.color
+    property alias shadowEnabled: shadow.visible
+
     // This property is used to indicate whether the button has a fixed width or the width would depend on the contents
     // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case,
     // we elide the text to the right so the text will be cut off with the three dots at the end.
@@ -88,6 +95,19 @@ Button
         border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
     }
 
+    DropShadow
+    {
+        id: shadow
+        // Don't blur the shadow
+        radius: 0
+        anchors.fill: backgroundRect
+        source: backgroundRect
+        verticalOffset: 2
+        visible: false
+        // Should always be drawn behind the background.
+        z: backgroundRect.z - 1
+    }
+
     ToolTip
     {
         id: tooltip
@@ -95,12 +115,4 @@ Button
         delay: 500
         visible: text != "" && button.hovered
     }
-
-    MouseArea
-    {
-        id: mouseArea
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-        hoverEnabled: true
-    }
 }
diff --git a/resources/qml/ActionPanel/OutputDevicesActionButton.qml b/resources/qml/ActionPanel/OutputDevicesActionButton.qml
index a2a69ed526..12e4ac42fd 100644
--- a/resources/qml/ActionPanel/OutputDevicesActionButton.qml
+++ b/resources/qml/ActionPanel/OutputDevicesActionButton.qml
@@ -12,7 +12,7 @@ Item
 {
     id: widget
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         id: saveToButton
         height: parent.height
@@ -42,6 +42,9 @@ Item
         id: deviceSelectionMenu
         height: parent.height
 
+        shadowEnabled: true
+        shadowColor: UM.Theme.getColor("primary_shadow")
+
         anchors
         {
             top: parent.top
@@ -67,7 +70,7 @@ Item
 
             closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
-            contentItem: Column
+            contentItem: ColumnLayout
             {
                 Repeater
                 {
@@ -79,7 +82,7 @@ Item
                         color: "transparent"
                         cornerRadius: 0
                         hoverColor: UM.Theme.getColor("primary")
-
+                        Layout.fillWidth: true
                         onClicked:
                         {
                             UM.OutputDeviceManager.setActiveDevice(model.id)
@@ -93,10 +96,7 @@ Item
             {
                 opacity: visible ? 1 : 0
                 Behavior on opacity { NumberAnimation { duration: 100 } }
-                radius: UM.Theme.getSize("default_radius").width
                 color: UM.Theme.getColor("action_panel_secondary")
-                border.color: UM.Theme.getColor("lining")
-                border.width: UM.Theme.getSize("default_lining").width
             }
         }
     }
diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml
index 296ee2fc16..92f2bfab30 100644
--- a/resources/qml/ActionPanel/OutputProcessWidget.qml
+++ b/resources/qml/ActionPanel/OutputProcessWidget.qml
@@ -101,17 +101,18 @@ Column
         spacing: UM.Theme.getSize("default_margin").width
         width: parent.width
 
-        Cura.ActionButton
+        Cura.SecondaryButton
         {
             id: previewStageShortcut
 
+            height: UM.Theme.getSize("action_panel_button").height
             text: catalog.i18nc("@button", "Preview")
-            color: UM.Theme.getColor("secondary")
-            hoverColor: UM.Theme.getColor("secondary")
-            textColor: UM.Theme.getColor("primary")
-            textHoverColor: UM.Theme.getColor("text")
+
             onClicked: UM.Controller.setActiveStage("PreviewStage")
             visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage"
+
+            shadowEnabled: true
+            shadowColor: UM.Theme.getColor("action_button_disabled_shadow")
         }
 
         Cura.OutputDevicesActionButton
diff --git a/resources/qml/ActionPanel/SliceProcessWidget.qml b/resources/qml/ActionPanel/SliceProcessWidget.qml
index 9ce86463f8..cae598fea6 100644
--- a/resources/qml/ActionPanel/SliceProcessWidget.qml
+++ b/resources/qml/ActionPanel/SliceProcessWidget.qml
@@ -40,9 +40,21 @@ Column
         }
     }
 
+    Label
+    {
+        id: autoSlicingLabel
+        width: parent.width
+        visible: prepareButtons.autoSlice && widget.backendState == UM.Backend.Processing
+
+        text: catalog.i18nc("@label:PrintjobStatus", "Auto slicing...")
+        color: UM.Theme.getColor("text")
+        font: UM.Theme.getFont("very_small")
+        renderType: Text.NativeRendering
+    }
+
     Cura.IconLabel
     {
-        id: message
+        id: unableToSliceMessage
         width: parent.width
         visible: widget.backendState == UM.Backend.Error
 
@@ -81,37 +93,40 @@ Column
         }
     }
 
-    Cura.ActionButton
+    Item
     {
-        id: prepareButton
-        width: parent.width
-        fixedWidthMode: true
-        text:
-        {
-            if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1)
-            {
-                return catalog.i18nc("@button", "Slice")
-            }
-            if (autoSlice)
-            {
-                return catalog.i18nc("@button", "Auto slicing...")
-            }
-            return catalog.i18nc("@button", "Cancel")
-        }
-        enabled: !autoSlice && !disabledSlice
-
+        id: prepareButtons
         // Get the current value from the preferences
         property bool autoSlice: UM.Preferences.getValue("general/auto_slice")
         // Disable the slice process when
-        property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error].indexOf(widget.backendState) != -1
 
-        disabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled") : "transparent"
-        textDisabledColor: disabledSlice ?  UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary")
-        outlineDisabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled_border") : "transparent"
+        width: parent.width
+        height: UM.Theme.getSize("action_panel_button").height
+        visible: !autoSlice
+        Cura.PrimaryButton
+        {
+            id: sliceButton
+            fixedWidthMode: true
+            anchors.fill: parent
+            text: catalog.i18nc("@button", "Slice")
+            enabled: widget.backendState != UM.Backend.Error
+            visible: widget.backendState == UM.Backend.NotStarted || widget.backendState == UM.Backend.Error
+            onClicked: sliceOrStopSlicing()
+        }
 
-        onClicked: sliceOrStopSlicing()
+        Cura.SecondaryButton
+        {
+            id: cancelButton
+            fixedWidthMode: true
+            anchors.fill: parent
+            text: catalog.i18nc("@button", "Cancel")
+            enabled: sliceButton.enabled
+            visible: !sliceButton.visible
+            onClicked: sliceOrStopSlicing()
+        }
     }
 
+
     // React when the user changes the preference of having the auto slice enabled
     Connections
     {
@@ -119,7 +134,7 @@ Column
         onPreferenceChanged:
         {
             var autoSlice = UM.Preferences.getValue("general/auto_slice")
-            prepareButton.autoSlice = autoSlice
+            prepareButtons.autoSlice = autoSlice
         }
     }
 
diff --git a/resources/qml/BorderGroup.qml b/resources/qml/BorderGroup.qml
new file mode 100644
index 0000000000..38ad9fadff
--- /dev/null
+++ b/resources/qml/BorderGroup.qml
@@ -0,0 +1,10 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.0
+
+QtObject
+{
+    property real width: 0
+    property color color: "black"
+}
diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml
index 2814bb9eb2..63888a4ee4 100644
--- a/resources/qml/Cura.qml
+++ b/resources/qml/Cura.qml
@@ -6,6 +6,7 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
+import QtGraphicalEffects 1.0
 
 import UM 1.3 as UM
 import Cura 1.1 as Cura
@@ -153,7 +154,31 @@ UM.MainWindow
                 }
                 visible: stageMenu.source != ""
                 height: Math.round(UM.Theme.getSize("stage_menu").height / 2)
-                color: UM.Theme.getColor("main_window_header_background")
+
+                LinearGradient
+                {
+                    anchors.fill: parent
+                    start: Qt.point(0, 0)
+                    end: Qt.point(parent.width, 0)
+                    gradient: Gradient
+                    {
+                        GradientStop
+                        {
+                            position: 0.0
+                            color: UM.Theme.getColor("main_window_header_background")
+                        }
+                        GradientStop
+                        {
+                            position: 0.5
+                            color: UM.Theme.getColor("main_window_header_background_gradient")
+                        }
+                        GradientStop
+                        {
+                            position: 1.0
+                            color: UM.Theme.getColor("main_window_header_background")
+                        }
+                    }
+                }
             }
 
             Connections
diff --git a/resources/qml/Dialogs/AddMachineDialog.qml b/resources/qml/Dialogs/AddMachineDialog.qml
index aa160acd4d..8b2b9d1868 100644
--- a/resources/qml/Dialogs/AddMachineDialog.qml
+++ b/resources/qml/Dialogs/AddMachineDialog.qml
@@ -298,7 +298,6 @@ UM.Dialog
                 id: machineName
                 text: getMachineName()
                 width: Math.floor(parent.width * 0.75)
-                implicitWidth: UM.Theme.getSize("standard_list_input").width
                 maximumLength: 40
                 //validator: Cura.MachineNameValidator { } //TODO: Gives a segfault in PyQt5.6. For now, we must use a signal on text changed.
                 validator: RegExpValidator
diff --git a/resources/qml/ExpandableComponent.qml b/resources/qml/ExpandableComponent.qml
index c54f957358..b438f0398c 100644
--- a/resources/qml/ExpandableComponent.qml
+++ b/resources/qml/ExpandableComponent.qml
@@ -2,6 +2,9 @@ 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 3 major sub components:
 //      * The headerItem; Always visible and should hold some info about what happens if the component is expanded
@@ -10,6 +13,14 @@ import UM 1.2 as UM
 Item
 {
     id: base
+
+    // Enumeration with the different possible alignments of the popup with respect of the headerItem
+    enum PopupAlignment 
+    {
+        AlignLeft,
+        AlignRight
+    }
+
     // The headerItem holds the QML item that is always displayed.
     property alias headerItem: headerItemLoader.sourceComponent
 
@@ -17,12 +28,13 @@ Item
     property var popupItem
 
     property color popupBackgroundColor: UM.Theme.getColor("action_button")
-    property int popupBorderWidth: UM.Theme.getSize("default_lining").width
-    property color popupBorderColor: UM.Theme.getColor("lining")
 
     property color headerBackgroundColor: UM.Theme.getColor("action_button")
     property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
 
+    // Defines the alignment of the popup with respect of the headerItem, by default to the right
+    property int popupAlignment: ExpandableComponent.PopupAlignment.AlignRight
+
     // How much spacing is needed around the popupItem
     property alias popupPadding: popup.padding
 
@@ -48,6 +60,12 @@ Item
     // 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
 
+    property alias headerShadowColor: shadow.color
+
+    property alias enableHeaderShadow: shadow.visible
+
+    property int shadowOffset: 2
+
     function togglePopup()
     {
         if(popup.visible)
@@ -125,8 +143,8 @@ Item
             sourceSize.height: height
             visible: source != ""
             width: height
-            height: 0.2 * base.height
-            color: "black"
+            height: Math.round(0.2 * base.height)
+            color: UM.Theme.getColor("text")
         }
 
         MouseArea
@@ -139,25 +157,40 @@ Item
             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: popup
 
         // Ensure that the popup is located directly below the headerItem
-        y: headerItemLoader.height + 2 * background.padding
+        y: headerItemLoader.height + 2 * background.padding + base.shadowOffset
 
-        // Make the popup right aligned with the rest. The 3x padding is due to left, right and padding between
-        // the button & text.
-        x: -width + collapseButton.width + headerItemLoader.width + 3 * background.padding
+        // Make the popup aligned with the rest, using the property popupAlignment 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
         padding: UM.Theme.getSize("default_margin").width
         closePolicy: Popup.CloseOnPressOutsideParent
 
-        background: Rectangle
+        background: Cura.RoundedRectangle
         {
+            cornerSide: Cura.RoundedRectangle.Direction.Down
             color: popupBackgroundColor
-            border.width: popupBorderWidth
-            border.color: popupBorderColor
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("lining")
+            radius: UM.Theme.getSize("default_radius").width
         }
     }
 }
diff --git a/resources/qml/ExtruderIcon.qml b/resources/qml/ExtruderIcon.qml
index 7151719fb9..742c2a9dfe 100644
--- a/resources/qml/ExtruderIcon.qml
+++ b/resources/qml/ExtruderIcon.qml
@@ -16,6 +16,7 @@ Item
     property color materialColor
     property alias textColor: extruderNumberText.color
     property bool extruderEnabled: true
+
     UM.RecolorImage
     {
         id: mainIcon
diff --git a/resources/qml/IconLabel.qml b/resources/qml/IconLabel.qml
index 1f15e0823f..386ed0ae01 100644
--- a/resources/qml/IconLabel.qml
+++ b/resources/qml/IconLabel.qml
@@ -16,32 +16,37 @@ Item
     property alias source: icon.source
     property alias color: label.color
     property alias font: label.font
+    property alias iconSize: icon.width
 
-    height: childrenRect.height
+    implicitHeight: icon.height
 
     UM.RecolorImage
     {
         id: icon
 
         anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
 
-        source: UM.Theme.getIcon("dot")
+        source: ""
         width: UM.Theme.getSize("section_icon").width
-        height: UM.Theme.getSize("section_icon").height
+        height: width
 
         sourceSize.width: width
         sourceSize.height: height
 
         color: label.color
+        visible: source != ""
     }
 
     Label
     {
         id: label
-        anchors.left: icon.right
+        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
diff --git a/resources/qml/MachineSelector.qml b/resources/qml/MachineSelector.qml
deleted file mode 100644
index 750ac7f620..0000000000
--- a/resources/qml/MachineSelector.qml
+++ /dev/null
@@ -1,140 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.2
-import QtQuick.Controls 2.3
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-import "Menus"
-
-
-Cura.ExpandableComponent
-{
-    id: machineSelector
-
-    property bool isNetworkPrinter: Cura.MachineManager.activeMachineNetworkKey != ""
-
-    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
-
-    UM.I18nCatalog
-    {
-        id: catalog
-        name: "cura"
-    }
-
-    headerItem: Label
-    {
-        text: isNetworkPrinter ? Cura.MachineManager.activeMachineNetworkGroupName : Cura.MachineManager.activeMachineName
-        verticalAlignment: Text.AlignVCenter
-        height: parent.height
-        elide: Text.ElideRight
-        font: UM.Theme.getFont("default")
-        color: UM.Theme.getColor("text")
-        renderType: Text.NativeRendering
-    }
-
-    popupItem: Item
-    {
-        id: popup
-        width: machineSelector.width - 2 * UM.Theme.getSize("default_margin").width
-        height: 200
-
-        ScrollView
-        {
-            anchors.fill: parent
-            contentHeight: column.implicitHeight
-            contentWidth: column.implicitWidth
-            clip: true
-            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
-            Column
-            {
-                id: column
-                anchors.fill: parent
-                Label
-                {
-                    text: catalog.i18nc("@label", "Networked Printers")
-                    visible: networkedPrintersModel.items.length > 0
-                    height: visible ? contentHeight + 2 * UM.Theme.getSize("default_margin").height : 0
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    renderType: Text.NativeRendering
-                    verticalAlignment: Text.AlignVCenter
-                }
-
-                Repeater
-                {
-                    id: networkedPrinters
-
-                    model: UM.ContainerStacksModel
-                    {
-                        id: networkedPrintersModel
-                        filter: {"type": "machine", "um_network_key": "*", "hidden": "False"}
-                    }
-
-                    delegate: RoundButton
-                    {
-                        text: name
-                        width: parent.width
-
-                        checkable: true
-                        radius: UM.Theme.getSize("default_radius").width
-                        onClicked:
-                        {
-                            togglePopup()
-                            Cura.MachineManager.setActiveMachine(model.id)
-                        }
-
-                        Connections
-                        {
-                            target: Cura.MachineManager
-                            onActiveMachineNetworkGroupNameChanged: checked = Cura.MachineManager.activeMachineNetworkGroupName == model.metadata["connect_group_name"]
-                        }
-                    }
-
-                }
-
-                Label
-                {
-                    text: catalog.i18nc("@label", "Virtual Printers")
-                    visible: virtualPrintersModel.items.length > 0
-                    height: visible ? contentHeight + 2 * UM.Theme.getSize("default_margin").height : 0
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                    verticalAlignment: Text.AlignVCenter
-                    renderType: Text.NativeRendering
-                }
-
-                Repeater
-                {
-                    id: virtualPrinters
-
-                    model: UM.ContainerStacksModel
-                    {
-                        id: virtualPrintersModel
-                        filter: {"type": "machine", "um_network_key": null}
-                    }
-
-                    delegate: RoundButton
-                    {
-                        text: name
-                        width: parent.width
-                        checked: Cura.MachineManager.activeMachineId == model.id
-                        checkable: true
-
-                        radius: UM.Theme.getSize("default_radius").width
-                        onClicked:
-                        {
-                            togglePopup()
-                            Cura.MachineManager.setActiveMachine(model.id)
-                        }
-                    }
-
-                }
-            }
-        }
-    }
-}
diff --git a/resources/qml/MainWindow/MainWindowHeader.qml b/resources/qml/MainWindow/MainWindowHeader.qml
index 6f3358648b..34936e9b5a 100644
--- a/resources/qml/MainWindow/MainWindowHeader.qml
+++ b/resources/qml/MainWindow/MainWindowHeader.qml
@@ -2,11 +2,13 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
+import QtQuick.Controls 2.0 as Controls2
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.1
 
 import UM 1.4 as UM
 import Cura 1.0 as Cura
+import QtGraphicalEffects 1.0
 
 import "../Account"
 
@@ -16,7 +18,31 @@ Rectangle
 
     implicitHeight: UM.Theme.getSize("main_window_header").height
     implicitWidth: UM.Theme.getSize("main_window_header").width
-    color: UM.Theme.getColor("main_window_header_background")
+
+    LinearGradient
+    {
+        anchors.fill: parent
+        start: Qt.point(0, 0)
+        end: Qt.point(parent.width, 0)
+        gradient: Gradient
+        {
+            GradientStop
+            {
+                position: 0.0
+                color: UM.Theme.getColor("main_window_header_background")
+            }
+            GradientStop
+            {
+                position: 0.5
+                color: UM.Theme.getColor("main_window_header_background_gradient")
+            }
+            GradientStop
+            {
+                position: 1.0
+                color: UM.Theme.getColor("main_window_header_background")
+            }
+        }
+    }
 
     Image
     {
@@ -73,23 +99,39 @@ Rectangle
     }
 
     // Shortcut button to quick access the Toolbox
-    Cura.ActionButton
+    Controls2.Button
     {
+        id: marketplaceButton
+        text: catalog.i18nc("@action:button", "Marketplace")
+        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        onClicked: Cura.Actions.browsePackages.trigger()
+
+        hoverEnabled: true
+
+        background: Rectangle
+        {
+            radius: UM.Theme.getSize("action_button_radius").width
+            color: marketplaceButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("primary_text")
+        }
+
+        contentItem: Label
+        {
+            id: label
+            text: marketplaceButton.text
+            color: marketplaceButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+            width: contentWidth
+            verticalAlignment: Text.AlignVCenter
+            renderType: Text.NativeRendering
+        }
+
         anchors
         {
             right: accountWidget.left
             rightMargin: UM.Theme.getSize("default_margin").width
             verticalCenter: parent.verticalCenter
         }
-        text: catalog.i18nc("@action:button", "Marketplace")
-        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
-        color: UM.Theme.getColor("main_window_header_secondary_button_background_active")
-        hoverColor: UM.Theme.getColor("main_window_header_secondary_button_background_hovered")
-        outlineColor: UM.Theme.getColor("main_window_header_secondary_button_outline_active")
-        outlineHoverColor: UM.Theme.getColor("main_window_header_secondary_button_outline_hovered")
-        textColor: UM.Theme.getColor("main_window_header_secondary_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_secondary_button_text_hovered")
-        onClicked: Cura.Actions.browsePackages.trigger()
     }
 
     AccountWidget
diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml
index 86deae9c4e..393c2715b2 100644
--- a/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml
+++ b/resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml
@@ -18,7 +18,7 @@ Column
     {
         // FIXME For now the model should be removed and then created again, otherwise changes in the printer don't automatically update the UI
         configurationList.model = []
-        if(outputDevice)
+        if (outputDevice)
         {
             configurationList.model = outputDevice.uniqueConfigurations
         }
diff --git a/resources/qml/Menus/PrinterStatusIcon.qml b/resources/qml/Menus/PrinterStatusIcon.qml
deleted file mode 100644
index 6ff6b07af8..0000000000
--- a/resources/qml/Menus/PrinterStatusIcon.qml
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (c) 2017 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.2
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-
-Item
-{
-    property var status: "disconnected"
-    width: childrenRect.width
-    height: childrenRect.height
-    UM.RecolorImage
-    {
-        id: statusIcon
-        width: UM.Theme.getSize("printer_status_icon").width
-        height: UM.Theme.getSize("printer_status_icon").height
-        sourceSize.width: width
-        sourceSize.height: width
-        color: UM.Theme.getColor("tab_status_" + parent.status)
-        source: UM.Theme.getIcon(parent.status)
-    }
-}
-
-
-
diff --git a/resources/qml/PrimaryButton.qml b/resources/qml/PrimaryButton.qml
new file mode 100644
index 0000000000..fca63d2cdb
--- /dev/null
+++ b/resources/qml/PrimaryButton.qml
@@ -0,0 +1,20 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+
+Cura.ActionButton
+{
+    shadowEnabled: true
+    shadowColor: enabled ? UM.Theme.getColor("primary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
+    color: UM.Theme.getColor("primary_button")
+    textColor: UM.Theme.getColor("primary_button_text")
+    outlineColor: "transparent"
+    disabledColor: UM.Theme.getColor("action_button_disabled")
+    textDisabledColor: UM.Theme.getColor("action_button_disabled_text")
+    hoverColor: UM.Theme.getColor("primary_button_hover")
+}
\ No newline at end of file
diff --git a/resources/qml/PrintSetupSelector.qml b/resources/qml/PrintSetupSelector.qml
index 2ecdc9e546..9b90d8589f 100644
--- a/resources/qml/PrintSetupSelector.qml
+++ b/resources/qml/PrintSetupSelector.qml
@@ -54,12 +54,12 @@ Cura.ExpandableComponent
         IconWithText
         {
             source: UM.Theme.getIcon("category_layer_height")
-            text: Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm"
+            text: Cura.MachineManager.activeStack ? Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm" : ""
 
             UM.SettingPropertyProvider
             {
                 id: layerHeight
-                containerStackId: Cura.MachineManager.activeStackId
+                containerStack: Cura.MachineManager.activeStack
                 key: "layer_height"
                 watchedProperties: ["value"]
             }
@@ -68,12 +68,12 @@ Cura.ExpandableComponent
         IconWithText
         {
             source: UM.Theme.getIcon("category_infill")
-            text: parseInt(infillDensity.properties.value) + "%"
+            text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
 
             UM.SettingPropertyProvider
             {
                 id: infillDensity
-                containerStackId: Cura.MachineManager.activeStackId
+                containerStack: Cura.MachineManager.activeStack
                 key: "infill_sparse_density"
                 watchedProperties: ["value"]
             }
diff --git a/resources/qml/PrinterSelector/MachineSelector.qml b/resources/qml/PrinterSelector/MachineSelector.qml
new file mode 100644
index 0000000000..15cd773c90
--- /dev/null
+++ b/resources/qml/PrinterSelector/MachineSelector.qml
@@ -0,0 +1,155 @@
+// 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.2 as UM
+import Cura 1.0 as Cura
+
+Cura.ExpandableComponent
+{
+    id: machineSelector
+
+    property bool isNetworkPrinter: Cura.MachineManager.activeMachineNetworkKey != ""
+    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
+    popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft
+    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+
+    UM.I18nCatalog
+    {
+        id: catalog
+        name: "cura"
+    }
+
+    headerItem: Cura.IconLabel
+    {
+        text: isNetworkPrinter ? Cura.MachineManager.activeMachineNetworkGroupName : Cura.MachineManager.activeMachineName
+        source:
+        {
+            if (isNetworkPrinter)
+            {
+                if (machineSelector.outputDevice != null && machineSelector.outputDevice.clusterSize > 1)
+                {
+                    return UM.Theme.getIcon("printer_group")
+                }
+                return UM.Theme.getIcon("printer_single")
+            }
+            return ""
+        }
+        font: UM.Theme.getFont("medium")
+        color: UM.Theme.getColor("text")
+        iconSize: UM.Theme.getSize("machine_selector_icon").width
+
+        UM.RecolorImage
+        {
+            id: icon
+
+            anchors
+            {
+                bottom: parent.bottom
+                left: parent.left
+                leftMargin: UM.Theme.getSize("thick_margin").width
+            }
+
+            source: UM.Theme.getIcon("printer_connected")
+            width: UM.Theme.getSize("printer_status_icon").width
+            height: UM.Theme.getSize("printer_status_icon").height
+
+            sourceSize.width: width
+            sourceSize.height: height
+
+            color: UM.Theme.getColor("primary")
+            visible: isNetworkPrinter && isPrinterConnected
+
+            // Make a themable circle in the background so we can change it in other themes
+            Rectangle
+            {
+                id: iconBackground
+                anchors.centerIn: parent
+                // Make it a bit bigger so there is an outline
+                width: parent.width + 2 * UM.Theme.getSize("default_lining").width
+                height: parent.height + 2 * UM.Theme.getSize("default_lining").height
+                radius: Math.round(width / 2)
+                color: UM.Theme.getColor("main_background")
+                z: parent.z - 1
+            }
+        }
+    }
+
+    popupItem: Item
+    {
+        id: popup
+        width: UM.Theme.getSize("machine_selector_widget_content").width
+
+        ScrollView
+        {
+            id: scroll
+            width: parent.width
+            clip: true
+            leftPadding: UM.Theme.getSize("default_lining").width
+            rightPadding: UM.Theme.getSize("default_lining").width
+
+            MachineSelectorList
+            {
+                // Can't use parent.width since the parent is the flickable component and not the ScrollView
+                width: scroll.width - scroll.leftPadding - scroll.rightPadding
+                property real maximumHeight: UM.Theme.getSize("machine_selector_widget_content").height - buttonRow.height
+
+                onHeightChanged:
+                {
+                    scroll.height = Math.min(height, maximumHeight)
+                    popup.height = scroll.height + buttonRow.height
+                }
+            }
+        }
+
+        Rectangle
+        {
+            id: separator
+
+            anchors.top: scroll.bottom
+            width: parent.width
+            height: UM.Theme.getSize("default_lining").height
+            color: UM.Theme.getColor("lining")
+        }
+
+        Row
+        {
+            id: buttonRow
+
+            // The separator is inside the buttonRow. This is to avoid some weird behaviours with the scroll bar.
+            anchors.top: separator.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            padding: UM.Theme.getSize("default_margin").width
+            spacing: UM.Theme.getSize("default_margin").width
+
+            Cura.SecondaryButton
+            {
+                leftPadding: UM.Theme.getSize("default_margin").width
+                rightPadding: UM.Theme.getSize("default_margin").width
+                text: catalog.i18nc("@button", "Add printer")
+                onClicked:
+                {
+                    togglePopup()
+                    Cura.Actions.addMachine.trigger()
+                }
+            }
+
+            Cura.SecondaryButton
+            {
+                leftPadding: UM.Theme.getSize("default_margin").width
+                rightPadding: UM.Theme.getSize("default_margin").width
+                text: catalog.i18nc("@button", "Manage printers")
+                onClicked:
+                {
+                    togglePopup()
+                    Cura.Actions.configureMachines.trigger()
+                }
+            }
+        }
+    }
+}
diff --git a/resources/qml/PrinterSelector/MachineSelectorButton.qml b/resources/qml/PrinterSelector/MachineSelectorButton.qml
new file mode 100644
index 0000000000..369e75cede
--- /dev/null
+++ b/resources/qml/PrinterSelector/MachineSelectorButton.qml
@@ -0,0 +1,103 @@
+// 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 UM 1.1 as UM
+import Cura 1.0 as Cura
+
+Button
+{
+    id: machineSelectorButton
+
+    width: parent.width
+    height: UM.Theme.getSize("action_button").height
+    leftPadding: UM.Theme.getSize("thick_margin").width
+    rightPadding: UM.Theme.getSize("thick_margin").width
+    checkable: true
+    hoverEnabled: true
+
+    property var outputDevice: null
+    property var printerTypesList: []
+
+    function updatePrinterTypesList()
+    {
+        printerTypesList = (checked && (outputDevice != null)) ? outputDevice.uniquePrinterTypes : []
+    }
+
+    contentItem: Item
+    {
+        width: machineSelectorButton.width - machineSelectorButton.leftPadding
+        height: UM.Theme.getSize("action_button").height
+
+        Label
+        {
+            id: buttonText
+            anchors
+            {
+                left: parent.left
+                right: printerTypes.left
+                verticalCenter: parent.verticalCenter
+            }
+            text: machineSelectorButton.text
+            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("action_button")
+            visible: text != ""
+            renderType: Text.NativeRendering
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        Row
+        {
+            id: printerTypes
+            width: childrenRect.width
+
+            anchors
+            {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            spacing: UM.Theme.getSize("narrow_margin").width
+
+            Repeater
+            {
+                model: printerTypesList
+                delegate: Cura.PrinterTypeLabel
+                {
+                    text: Cura.MachineManager.getAbbreviatedMachineName(modelData)
+                }
+            }
+        }
+    }
+
+    background: Rectangle
+    {
+        id: backgroundRect
+        color: machineSelectorButton.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent"
+        radius: UM.Theme.getSize("action_button_radius").width
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: machineSelectorButton.checked ? UM.Theme.getColor("primary") : "transparent"
+    }
+
+    onClicked:
+    {
+        togglePopup()
+        Cura.MachineManager.setActiveMachine(model.id)
+    }
+
+    Connections
+    {
+        target: outputDevice
+        onUniqueConfigurationsChanged: updatePrinterTypesList()
+    }
+
+    Connections
+    {
+        target: Cura.MachineManager
+        onOutputDevicesChanged: updatePrinterTypesList()
+    }
+
+    Component.onCompleted: updatePrinterTypesList()
+}
diff --git a/resources/qml/PrinterSelector/MachineSelectorList.qml b/resources/qml/PrinterSelector/MachineSelectorList.qml
new file mode 100644
index 0000000000..5ef04b7351
--- /dev/null
+++ b/resources/qml/PrinterSelector/MachineSelectorList.qml
@@ -0,0 +1,84 @@
+// 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.2 as UM
+import Cura 1.0 as Cura
+
+Column
+{
+    id: machineSelectorList
+
+    Label
+    {
+        text: catalog.i18nc("@label", "Network connected printers")
+        visible: networkedPrintersModel.items.length > 0
+        leftPadding: UM.Theme.getSize("default_margin").width
+        height: visible ? contentHeight + 2 * UM.Theme.getSize("default_margin").height : 0
+        renderType: Text.NativeRendering
+        font: UM.Theme.getFont("medium")
+        color: UM.Theme.getColor("text_medium")
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    Repeater
+    {
+        id: networkedPrinters
+
+        model: UM.ContainerStacksModel
+        {
+            id: networkedPrintersModel
+            filter:
+            {
+                "type": "machine", "um_network_key": "*", "hidden": "False"
+            }
+        }
+
+        delegate: MachineSelectorButton
+        {
+            text: model.metadata["connect_group_name"]
+            checked: Cura.MachineManager.activeMachineNetworkGroupName == model.metadata["connect_group_name"]
+            outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
+
+            Connections
+            {
+                target: Cura.MachineManager
+                onActiveMachineNetworkGroupNameChanged: checked = Cura.MachineManager.activeMachineNetworkGroupName == model.metadata["connect_group_name"]
+            }
+        }
+    }
+
+    Label
+    {
+        text: catalog.i18nc("@label", "Preset printers")
+        visible: virtualPrintersModel.items.length > 0
+        leftPadding: UM.Theme.getSize("default_margin").width
+        height: visible ? contentHeight + 2 * UM.Theme.getSize("default_margin").height : 0
+        renderType: Text.NativeRendering
+        font: UM.Theme.getFont("medium")
+        color: UM.Theme.getColor("text_medium")
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    Repeater
+    {
+        id: virtualPrinters
+
+        model: UM.ContainerStacksModel
+        {
+            id: virtualPrintersModel
+            filter:
+            {
+                "type": "machine", "um_network_key": null
+            }
+        }
+
+        delegate: MachineSelectorButton
+        {
+            text: model.name
+            checked: Cura.MachineManager.activeMachineId == model.id
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/qml/PrinterSelector/PrinterTypeLabel.qml b/resources/qml/PrinterSelector/PrinterTypeLabel.qml
new file mode 100644
index 0000000000..cd9f3b9743
--- /dev/null
+++ b/resources/qml/PrinterSelector/PrinterTypeLabel.qml
@@ -0,0 +1,34 @@
+// 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 UM 1.1 as UM
+
+// This component creates a label with the abbreviated name of a printer, with a rectangle surrounding the label.
+// It is created in a separated place in order to be reused whenever needed.
+Item
+{
+    property alias text: printerTypeLabel.text
+
+    width: UM.Theme.getSize("printer_type_label").width
+    height: UM.Theme.getSize("printer_type_label").height
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: UM.Theme.getColor("printer_type_label_background")
+    }
+
+    Label
+    {
+        id: printerTypeLabel
+        text: "CFFFP" // As an abbreviated name of the Custom FFF Printer
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        renderType: Text.NativeRendering
+        font: UM.Theme.getFont("very_small")
+        color: UM.Theme.getColor("text")
+    }
+}
\ No newline at end of file
diff --git a/resources/qml/RoundedRectangle.qml b/resources/qml/RoundedRectangle.qml
index 9ad2230be5..3ca05e2125 100644
--- a/resources/qml/RoundedRectangle.qml
+++ b/resources/qml/RoundedRectangle.qml
@@ -5,6 +5,7 @@ import UM 1.2 as UM
 // The rounded rectangle works mostly like a regular rectangle, but provides the option to have rounded corners on only one side of the rectangle.
 Item
 {
+    id: roundedRectangle
     // As per the regular rectangle
     property color color: "transparent"
 
@@ -15,6 +16,9 @@ Item
     // 1 is down, 2 is left, 3 is up and 4 is right.
     property int cornerSide: RoundedRectangle.Direction.None
 
+    // Simple object to ensure that border.width and border.color work
+    property BorderGroup border: BorderGroup {}
+
     enum Direction
     {
         None = 0,
@@ -31,6 +35,8 @@ Item
         anchors.fill: parent
         radius: cornerSide != RoundedRectangle.Direction.None ? parent.radius : 0
         color: parent.color
+        border.width: parent.border.width
+        border.color: parent.border.color
     }
 
     // The item that covers 2 of the corners to make them not rounded.
@@ -45,5 +51,22 @@ Item
             right: cornerSide == RoundedRectangle.Direction.Left ? parent.right: undefined
             bottom: cornerSide == RoundedRectangle.Direction.Up ? parent.bottom: undefined
         }
+
+        border.width: parent.border.width
+        border.color: parent.border.color
+
+        Rectangle
+        {
+            color: roundedRectangle.color
+            height: cornerSide % 2 ? roundedRectangle.border.width: roundedRectangle.height - 2 * roundedRectangle.border.width
+            width: cornerSide % 2 ? roundedRectangle.width - 2 * roundedRectangle.border.width: roundedRectangle.border.width
+            anchors
+            {
+                right: cornerSide == RoundedRectangle.Direction.Right ? parent.right : undefined
+                bottom: cornerSide  == RoundedRectangle.Direction.Down ? parent.bottom: undefined
+                horizontalCenter: cornerSide % 2 ? parent.horizontalCenter: undefined
+                verticalCenter: cornerSide % 2 ? undefined: parent.verticalCenter
+            }
+        }
     }
 }
diff --git a/resources/qml/SaveButton.qml b/resources/qml/SaveButton.qml
deleted file mode 100644
index c2d310e30c..0000000000
--- a/resources/qml/SaveButton.qml
+++ /dev/null
@@ -1,478 +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 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-
-import UM 1.1 as UM
-import Cura 1.0 as Cura
-
-// This widget does so much more than "just" being a save button, so it should be refactored at some point in time.
-Item
-{
-    id: base;
-    UM.I18nCatalog { id: catalog; name: "cura"}
-
-    property real progress: UM.Backend.progress
-    property int backendState: UM.Backend.state
-    property bool activity: CuraApplication.platformActivity
-
-    property alias buttonRowWidth: saveRow.width
-
-    property string fileBaseName
-    property string statusText:
-    {
-        if(!activity)
-        {
-            return catalog.i18nc("@label:PrintjobStatus", "Please load a 3D model");
-        }
-
-        switch(base.backendState)
-        {
-            case 1:
-                return catalog.i18nc("@label:PrintjobStatus", "Ready to slice");
-            case 2:
-                return catalog.i18nc("@label:PrintjobStatus", "Slicing...");
-            case 3:
-                return catalog.i18nc("@label:PrintjobStatus %1 is target operation", "Ready to %1").arg(UM.OutputDeviceManager.activeDeviceShortDescription);
-            case 4:
-                return catalog.i18nc("@label:PrintjobStatus", "Unable to Slice");
-            case 5:
-                return catalog.i18nc("@label:PrintjobStatus", "Slicing unavailable");
-            default:
-                return "";
-        }
-    }
-
-    function sliceOrStopSlicing()
-    {
-        try
-        {
-            if ([1, 5].indexOf(base.backendState) != -1)
-            {
-                CuraApplication.backend.forceSlice();
-            }
-            else
-            {
-                CuraApplication.backend.stopSlicing();
-            }
-        }
-        catch (e)
-        {
-            console.log("Could not start or stop slicing.", e)
-        }
-    }
-
-    Label
-    {
-        id: statusLabel
-        width: parent.width - 2 * UM.Theme.getSize("thick_margin").width
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
-
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("default_bold")
-        text: statusText;
-    }
-
-    Rectangle
-    {
-        id: progressBar
-        width: parent.width - 2 * UM.Theme.getSize("thick_margin").width
-        height: UM.Theme.getSize("progressbar").height
-        anchors.top: statusLabel.bottom
-        anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 4)
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
-        radius: UM.Theme.getSize("progressbar_radius").width
-        color: UM.Theme.getColor("progressbar_background")
-
-        Rectangle
-        {
-            width: Math.max(parent.width * base.progress)
-            height: parent.height
-            color: UM.Theme.getColor("progressbar_control")
-            radius: UM.Theme.getSize("progressbar_radius").width
-            visible: base.backendState == 2
-        }
-    }
-
-    // Shortcut for "save as/print/..."
-    Action
-    {
-        shortcut: "Ctrl+P"
-        onTriggered:
-        {
-            // only work when the button is enabled
-            if (saveToButton.enabled)
-            {
-                saveToButton.clicked();
-            }
-            // prepare button
-            if (prepareButton.enabled)
-            {
-                sliceOrStopSlicing();
-            }
-        }
-    }
-
-    Item
-    {
-        id: saveRow
-        width: {
-            // using childrenRect.width directly causes a binding loop, because setting the width affects the childrenRect
-            var children_width = UM.Theme.getSize("default_margin").width;
-            for (var index in children)
-            {
-                var child = children[index];
-                if(child.visible)
-                {
-                    children_width += child.width + child.anchors.rightMargin;
-                }
-            }
-            return Math.min(children_width, base.width - UM.Theme.getSize("thick_margin").width);
-        }
-        height: saveToButton.height
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
-        anchors.right: parent.right
-        clip: true
-
-        Row
-        {
-            id: additionalComponentsRow
-            anchors.top: parent.top
-            anchors.right: saveToButton.visible ? saveToButton.left : (prepareButton.visible ? prepareButton.left : parent.right)
-            anchors.rightMargin: UM.Theme.getSize("default_margin").width
-
-            spacing: UM.Theme.getSize("default_margin").width
-        }
-
-        Component.onCompleted:
-        {
-            saveRow.addAdditionalComponents("saveButton")
-        }
-
-        Connections
-        {
-            target: CuraApplication
-            onAdditionalComponentsChanged: saveRow.addAdditionalComponents("saveButton")
-        }
-
-        function addAdditionalComponents (areaId)
-        {
-            if(areaId == "saveButton")
-            {
-                for (var component in CuraApplication.additionalComponents["saveButton"])
-                {
-                    CuraApplication.additionalComponents["saveButton"][component].parent = additionalComponentsRow
-                }
-            }
-        }
-
-        Connections
-        {
-            target: UM.Preferences
-            onPreferenceChanged:
-            {
-                var autoSlice = UM.Preferences.getValue("general/auto_slice");
-                prepareButton.autoSlice = autoSlice;
-                saveToButton.autoSlice = autoSlice;
-            }
-        }
-
-        // Prepare button, only shows if auto_slice is off
-        Button
-        {
-            id: prepareButton
-
-            tooltip: [1, 5].indexOf(base.backendState) != -1 ? catalog.i18nc("@info:tooltip","Slice current printjob") : catalog.i18nc("@info:tooltip","Cancel slicing process")
-            // 1 = not started, 2 = Processing
-            enabled: ([1, 2].indexOf(base.backendState) != -1) && base.activity
-            visible: !autoSlice && ([1, 2, 4].indexOf(base.backendState) != -1) && base.activity
-            property bool autoSlice
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("thick_margin").width
-
-            // 1 = not started, 4 = error, 5 = disabled
-            text: [1, 4, 5].indexOf(base.backendState) != -1 ? catalog.i18nc("@label:Printjob", "Prepare") : catalog.i18nc("@label:Printjob", "Cancel")
-            onClicked:
-            {
-                sliceOrStopSlicing();
-            }
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button");
-                        }
-                    }
-
-                    Behavior on color { ColorAnimation { duration: 50; } }
-
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2)
-
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color:
-                        {
-                            if(!control.enabled)
-                            {
-                                return UM.Theme.getColor("action_button_disabled_text");
-                            }
-                            else if(control.pressed)
-                            {
-                                return UM.Theme.getColor("action_button_active_text");
-                            }
-                            else if(control.hovered)
-                            {
-                                return UM.Theme.getColor("action_button_hovered_text");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("action_button_text");
-                            }
-                        }
-                        font: UM.Theme.getFont("action_button")
-                        text: control.text;
-                    }
-                }
-                label: Item {}
-            }
-        }
-
-        Button
-        {
-            id: saveToButton
-
-            tooltip: UM.OutputDeviceManager.activeDeviceDescription;
-            // 3 = done, 5 = disabled
-            enabled: base.backendState != "undefined" && (base.backendState == 3 || base.backendState == 5) && base.activity == true
-            visible: base.backendState != "undefined" && autoSlice || ((base.backendState == 3 || base.backendState == 5) && base.activity == true)
-            property bool autoSlice
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            anchors.top: parent.top
-            anchors.right: deviceSelectionMenu.visible ? deviceSelectionMenu.left : parent.right
-            anchors.rightMargin: deviceSelectionMenu.visible ? -3 * UM.Theme.getSize("default_lining").width : UM.Theme.getSize("thick_margin").width
-
-            text: UM.OutputDeviceManager.activeDeviceShortDescription
-            onClicked:
-            {
-                forceActiveFocus();
-                UM.OutputDeviceManager.requestWriteToDevice(UM.OutputDeviceManager.activeDevice, PrintInformation.jobName,
-                    { "filter_by_machine": true, "preferred_mimetypes": Cura.MachineManager.activeMachine.preferred_output_file_formats });
-            }
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready");
-                        }
-                    }
-
-                    Behavior on color { ColorAnimation { duration: 50; } }
-
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2)
-
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color: control.enabled ? UM.Theme.getColor("print_button_ready_text") : UM.Theme.getColor("action_button_disabled_text")
-                        font: UM.Theme.getFont("action_button")
-                        text: control.text
-                    }
-                }
-                label: Item { }
-            }
-        }
-
-        Button
-        {
-            id: deviceSelectionMenu
-            tooltip: catalog.i18nc("@info:tooltip","Select the active output device");
-            anchors.top: parent.top
-            anchors.right: parent.right
-
-            anchors.rightMargin: UM.Theme.getSize("thick_margin").width
-            width: UM.Theme.getSize("save_button_save_to_button").height
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            // 3 = Done, 5 = Disabled
-            enabled: (base.backendState == 3 || base.backendState == 5) && base.activity == true
-            visible: (devicesModel.deviceCount > 1) && (base.backendState == 3 || base.backendState == 5) && base.activity == true
-
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    id: deviceSelectionIcon
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border")
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed_border")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered_border")
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready_border")
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled")
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered")
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready")
-                        }
-                    }
-                    Behavior on color { ColorAnimation { duration: 50; } }
-                    anchors.left: parent.left
-                    anchors.leftMargin: Math.round(UM.Theme.getSize("save_button_text_margin").width / 2);
-                    width: parent.height
-                    height: parent.height
-
-                    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("print_button_ready_text") : UM.Theme.getColor("action_button_disabled_text")
-                        source: UM.Theme.getIcon("arrow_bottom")
-                    }
-                }
-            }
-
-            menu: Menu
-            {
-                id: devicesMenu;
-                Instantiator
-                {
-                    model: devicesModel;
-                    MenuItem
-                    {
-                        text: model.description
-                        checkable: true;
-                        checked: model.id == UM.OutputDeviceManager.activeDevice
-                        exclusiveGroup: devicesMenuGroup
-                        onTriggered:
-                        {
-                            UM.OutputDeviceManager.setActiveDevice(model.id);
-                        }
-                    }
-                    onObjectAdded: devicesMenu.insertItem(index, object)
-                    onObjectRemoved: devicesMenu.removeItem(object)
-                }
-                ExclusiveGroup { id: devicesMenuGroup }
-            }
-        }
-        UM.OutputDevicesModel { id: devicesModel }
-    }
-}
diff --git a/resources/qml/SecondaryButton.qml b/resources/qml/SecondaryButton.qml
new file mode 100644
index 0000000000..f03d8acdfa
--- /dev/null
+++ b/resources/qml/SecondaryButton.qml
@@ -0,0 +1,20 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+
+Cura.ActionButton
+{
+    shadowEnabled: true
+    shadowColor: enabled ? UM.Theme.getColor("secondary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
+    color: UM.Theme.getColor("secondary_button")
+    textColor: UM.Theme.getColor("secondary_button_text")
+    outlineColor: "transparent"
+    disabledColor: UM.Theme.getColor("action_button_disabled")
+    textDisabledColor: UM.Theme.getColor("action_button_disabled_text")
+    hoverColor: UM.Theme.getColor("secondary_button_hover")
+}
\ No newline at end of file
diff --git a/resources/qml/ViewOrientationButton.qml b/resources/qml/ViewOrientationButton.qml
new file mode 100644
index 0000000000..682fd71b4e
--- /dev/null
+++ b/resources/qml/ViewOrientationButton.qml
@@ -0,0 +1,16 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+import UM 1.4 as UM
+
+UM.SimpleButton
+{
+    width: UM.Theme.getSize("small_button").width
+    height: UM.Theme.getSize("small_button").height
+    hoverBackgroundColor: UM.Theme.getColor("small_button_hover")
+    hoverColor: UM.Theme.getColor("small_button_text_hover")
+    color: UM.Theme.getColor("small_button_text")
+    iconMargin: 0.5 * UM.Theme.getSize("wide_lining").width
+}
\ No newline at end of file
diff --git a/resources/qml/ViewOrientationControls.qml b/resources/qml/ViewOrientationControls.qml
index acf75b1b48..51ed6e3dcb 100644
--- a/resources/qml/ViewOrientationControls.qml
+++ b/resources/qml/ViewOrientationControls.qml
@@ -7,7 +7,7 @@ import QtQuick.Controls.Styles 1.1
 
 import UM 1.4 as UM
 
-// View orientation Item
+// A row of buttons that control the view direction
 Row
 {
     id: viewOrientationControl
@@ -16,43 +16,33 @@ Row
     height: childrenRect.height
     width: childrenRect.width
 
-    // #1 3d view
-    Button
+    ViewOrientationButton
     {
         iconSource: UM.Theme.getIcon("view_3d")
-        style: UM.Theme.styles.small_tool_button
-        onClicked:UM.Controller.rotateView("3d", 0)
+        onClicked: UM.Controller.rotateView("3d", 0)
     }
 
-    // #2 Front view
-    Button
+    ViewOrientationButton
     {
         iconSource: UM.Theme.getIcon("view_front")
-        style: UM.Theme.styles.small_tool_button
         onClicked: UM.Controller.rotateView("home", 0)
     }
 
-    // #3 Top view
-    Button
+    ViewOrientationButton
     {
         iconSource: UM.Theme.getIcon("view_top")
-        style: UM.Theme.styles.small_tool_button
         onClicked: UM.Controller.rotateView("y", 90)
     }
 
-    // #4 Left view
-    Button
+    ViewOrientationButton
     {
         iconSource: UM.Theme.getIcon("view_left")
-        style: UM.Theme.styles.small_tool_button
         onClicked: UM.Controller.rotateView("x", 90)
     }
 
-    // #5 Right view
-    Button
+    ViewOrientationButton
     {
         iconSource: UM.Theme.getIcon("view_right")
-        style: UM.Theme.styles.small_tool_button
         onClicked: UM.Controller.rotateView("x", -90)
     }
 }
diff --git a/resources/qml/ViewsSelector.qml b/resources/qml/ViewsSelector.qml
new file mode 100644
index 0000000000..e9fdd57177
--- /dev/null
+++ b/resources/qml/ViewsSelector.qml
@@ -0,0 +1,129 @@
+// 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.2 as UM
+import Cura 1.0 as Cura
+
+Cura.ExpandableComponent
+{
+    id: viewSelector
+
+    popupPadding: UM.Theme.getSize("default_lining").width
+    popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft
+    iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+
+    property var viewModel: UM.ViewModel { }
+
+    property var activeView:
+    {
+        for (var i = 0; i < viewModel.rowCount(); i++)
+        {
+            if (viewModel.items[i].active)
+            {
+                return viewModel.items[i]
+            }
+        }
+        return null
+    }
+
+    Component.onCompleted:
+    {
+        // Nothing was active, so just return the first one (the list is sorted by priority, so the most
+        // important one should be returned)
+        if (activeView == null)
+        {
+            UM.Controller.setActiveView(viewModel.getItem(0).id)
+        }
+    }
+
+    headerItem: Item
+    {
+        Label
+        {
+            id: title
+            text: catalog.i18nc("@button", "View types")
+            verticalAlignment: Text.AlignVCenter
+            height: parent.height
+            elide: Text.ElideRight
+            font: UM.Theme.getFont("default")
+            color: UM.Theme.getColor("text_medium")
+            renderType: Text.NativeRendering
+        }
+
+        Label
+        {
+            text: viewSelector.activeView ? viewSelector.activeView.name : ""
+            verticalAlignment: Text.AlignVCenter
+            anchors
+            {
+                left: title.right
+                leftMargin: UM.Theme.getSize("default_margin").width
+            }
+            height: parent.height
+            elide: Text.ElideRight
+            font: UM.Theme.getFont("default")
+            color: UM.Theme.getColor("text")
+            renderType: Text.NativeRendering
+        }
+    }
+
+    popupItem: Column
+    {
+        id: viewSelectorPopup
+        width: viewSelector.width - 2 * viewSelector.popupPadding
+
+        // For some reason the height/width of the column gets set to 0 if this is not set...
+        Component.onCompleted:
+        {
+            height = implicitHeight
+            width = viewSelector.width - 2 * viewSelector.popupPadding
+        }
+
+        Repeater
+        {
+            id: viewsList
+            model: viewSelector.viewModel
+
+            delegate: Button
+            {
+                id: viewsSelectorButton
+                text: model.name
+                width: parent.width
+                height: UM.Theme.getSize("action_button").height
+                leftPadding: UM.Theme.getSize("default_margin").width
+                rightPadding: UM.Theme.getSize("default_margin").width
+                checkable: true
+                checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
+
+                contentItem: Label
+                {
+                    id: buttonText
+                    text: viewsSelectorButton.text
+                    color: UM.Theme.getColor("text")
+                    font: UM.Theme.getFont("action_button")
+                    renderType: Text.NativeRendering
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                }
+
+                background: Rectangle
+                {
+                    id: backgroundRect
+                    color: viewsSelectorButton.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent"
+                    radius: UM.Theme.getSize("action_button_radius").width
+                    border.width: UM.Theme.getSize("default_lining").width
+                    border.color: viewsSelectorButton.checked ? UM.Theme.getColor("primary") : "transparent"
+                }
+
+                onClicked:
+                {
+                    viewSelector.togglePopup()
+                    UM.Controller.setActiveView(id)
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/qml/qmldir b/resources/qml/qmldir
index 878945b922..9017739219 100644
--- a/resources/qml/qmldir
+++ b/resources/qml/qmldir
@@ -8,4 +8,7 @@ MaterialMenu 1.0 MaterialMenu.qml
 NozzleMenu 1.0 NozzleMenu.qml
 ActionPanelWidget 1.0 ActionPanelWidget.qml
 IconLabel 1.0 IconLabel.qml
-OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
\ No newline at end of file
+OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
+ExpandableComponent 1.0 ExpandableComponent.qml
+PrinterTypeLabel 1.0 PrinterTypeLabel.qml
+ViewsSelector 1.0 ViewsSelector.qml
\ No newline at end of file