Merge branch 'ui_rework_4_0' into CURA-5941_restyle_setting_dropdown

plugins/MonitorStage/MonitorMain.qml

@@ -1,45 +1,40 @@
-// Copyright (c) 2017 Ultimaker B.V.
+// Copyright (c) 2017 Ultimaker B.V.
-
+
-import QtQuick 2.2
+import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.4
-
+
-import UM 1.3 as UM
+import UM 1.3 as UM
-import Cura 1.0 as Cura
+import Cura 1.0 as Cura
-
+
-Item
+
-{
+Item
-    // parent could be undefined as this component is not visible at all times
+{
-    width: parent ? parent.width : 0
+    // We show a nice overlay on the 3D viewer when the current output device has no monitor view
-    height: parent ? parent.height : 0
+    Rectangle
-
+    {
-    // We show a nice overlay on the 3D viewer when the current output device has no monitor view
+        id: viewportOverlay
-    Rectangle
+
-    {
+        color: UM.Theme.getColor("viewport_overlay")
-        id: viewportOverlay
+        anchors.fill: parent
-
+        MouseArea
-        color: UM.Theme.getColor("viewport_overlay")
+        {
-        width: parent.width
+            anchors.fill: parent
-        height: parent.height
+            acceptedButtons: Qt.AllButtons
-
+            onWheel: wheel.accepted = true
-        MouseArea
+        }
-        {
+    }
-            anchors.fill: parent
+
-            acceptedButtons: Qt.AllButtons
+    Loader
-            onWheel: wheel.accepted = true
+    {
-        }
+        id: monitorViewComponent
-    }
+
-
+        anchors.fill: parent
-    Loader
+
-    {
+        height: parent.height
-        id: monitorViewComponent
+
-
+        property real maximumWidth: parent.width
-        width: parent.width
+        property real maximumHeight: parent.height
-        height: parent.height
+
-
+        sourceComponent: Cura.MachineManager.printerOutputDevices.length > 0 ? Cura.MachineManager.printerOutputDevices[0].monitorItem: null
-        property real maximumWidth: parent.width
+    }
-        property real maximumHeight: parent.height
+}
-
-        sourceComponent: Cura.MachineManager.printerOutputDevices.length > 0 ? Cura.MachineManager.printerOutputDevices[0].monitorItem: null
-        visible: sourceComponent != null
-    }
-}

plugins/MonitorStage/MonitorMenu.qml

@@ -0,0 +1,23 @@
+// 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.1 as Cura
+
+Item
+{
+    signal showTooltip(Item item, point location, string text)
+    signal hideTooltip()
+
+    Cura.MachineSelector
+    {
+        id: machineSelection
+        headerCornerSide: Cura.RoundedRectangle.Direction.All
+        width: UM.Theme.getSize("machine_selector_widget").width
+        height: parent.height
+        anchors.centerIn: parent
+    }
+}

plugins/MonitorStage/MonitorStage.py

@@ -65,15 +65,10 @@ class MonitorStage(CuraStage):
         # We can only connect now, as we need to be sure that everything is loaded (plugins get created quite early)
         Application.getInstance().getMachineManager().outputDevicesChanged.connect(self._onOutputDevicesChanged)
         self._onOutputDevicesChanged()
-        self._updateMainOverlay()
-        self._updateSidebar()
 
-    def _updateMainOverlay(self):
+        plugin_path = Application.getInstance().getPluginRegistry().getPluginPath(self.getPluginId())
-        main_component_path = os.path.join(PluginRegistry.getInstance().getPluginPath("MonitorStage"),
+        if plugin_path is not None:
-                                           "MonitorMainView.qml")
+            menu_component_path = os.path.join(plugin_path, "MonitorMenu.qml")
-        self.addDisplayComponent("main", main_component_path)
+            main_component_path = os.path.join(plugin_path, "MonitorMain.qml")
-
+            self.addDisplayComponent("menu", menu_component_path)
-    def _updateSidebar(self):
+            self.addDisplayComponent("main", main_component_path)
-        sidebar_component_path = os.path.join(Resources.getPath(Application.getInstance().ResourceTypes.QmlFiles),
-                                              "MonitorSidebar.qml")
-        self.addDisplayComponent("sidebar", sidebar_component_path)

plugins/USBPrinting/MonitorItem.qml

@@ -0,0 +1,46 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+Component
+{
+    Item
+    {
+        Rectangle
+        {
+            anchors.right: parent.right
+            width: parent.width * 0.3
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+
+            Cura.PrintMonitor
+            {
+                anchors.fill: parent
+            }
+
+            Rectangle
+            {
+                id: footerSeparator
+                width: parent.width
+                height: UM.Theme.getSize("wide_lining").height
+                color: UM.Theme.getColor("wide_lining")
+                anchors.bottom: monitorButton.top
+                anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
+            }
+
+            // MonitorButton is actually the bottom footer panel.
+            Cura.MonitorButton
+            {
+                id: monitorButton
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+        }
+    }
+}

plugins/USBPrinting/USBPrinterOutputDevice.py

@@ -1,5 +1,6 @@
 # Copyright (c) 2018 Ultimaker B.V.
 # Cura is released under the terms of the LGPLv3 or higher.
+import os
 
 from UM.Logger import Logger
 from UM.i18n import i18nCatalog
@@ -64,7 +65,7 @@ class USBPrinterOutputDevice(PrinterOutputDevice):
         self._accepts_commands = True
 
         self._paused = False
-        self._printer_busy = False # when printer is preheating and waiting (M190/M109), or when waiting for action on the printer
+        self._printer_busy = False  # When printer is preheating and waiting (M190/M109), or when waiting for action on the printer
 
         self.setConnectionText(catalog.i18nc("@info:status", "Connected via USB"))
 
@@ -77,6 +78,8 @@ class USBPrinterOutputDevice(PrinterOutputDevice):
         self._firmware_name_requested = False
         self._firmware_updater = AvrFirmwareUpdater(self)
 
+        self._monitor_view_qml_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "MonitorItem.qml")
+
         CuraApplication.getInstance().getOnExitCallbackManager().addCallback(self._checkActivePrintingUponAppExit)
 
     # This is a callback function that checks if there is any printing in progress via USB when the application tries

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -44,7 +44,7 @@ Column
     {
         id: autoSlicingLabel
         width: parent.width
-        visible: prepareButtons.autoSlice && widget.backendState == UM.Backend.Processing
+        visible: prepareButtons.autoSlice && (widget.backendState == UM.Backend.Processing || widget.backendState == UM.Backend.NotStarted)
 
         text: catalog.i18nc("@label:PrintjobStatus", "Auto slicing...")
         color: UM.Theme.getColor("text")
@@ -71,7 +71,8 @@ Column
         width: parent.width
         height: UM.Theme.getSize("progressbar").height
         value: progress
-        visible: widget.backendState == UM.Backend.Processing
+        indeterminate: widget.backendState == UM.Backend.NotStarted
+        visible: (widget.backendState == UM.Backend.Processing || (prepareButtons.autoSlice && widget.backendState == UM.Backend.NotStarted))
 
         background: Rectangle
         {

resources/qml/Cura.qml

@@ -146,6 +146,7 @@ UM.MainWindow
 
             Rectangle
             {
+                id: stageMenuBackground
                 anchors
                 {
                     left: parent.left
@@ -153,7 +154,7 @@ UM.MainWindow
                     top: parent.top
                 }
                 visible: stageMenu.source != ""
-                height: Math.round(UM.Theme.getSize("stage_menu").height / 2)
+                height: visible ? Math.round(UM.Theme.getSize("stage_menu").height / 2) : 0
 
                 LinearGradient
                 {
@@ -247,7 +248,13 @@ UM.MainWindow
                 // A stage can control this area. If nothing is set, it will therefore show the 3D view.
                 id: main
 
-                anchors.fill: parent
+                anchors
+                {
+                    top: stageMenuBackground.bottom
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
 
                 source: UM.Controller.activeStage != null ? UM.Controller.activeStage.mainComponent : ""
             }

resources/qml/Menus/ConfigurationMenu/PrintCoreConfiguration.qml

@@ -70,7 +70,7 @@ Column
     Label
     {
         id: materialLabel
-        text: printCoreConfiguration.material.name
+        text: printCoreConfiguration.material == null ? "" : printCoreConfiguration.material.name
         renderType: Text.NativeRendering
         elide: Text.ElideRight
         width: parent.width

resources/qml/MonitorSidebar.qml

@@ -1,15 +1,17 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
+import QtQuick 2.10
 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"
 
+
 Rectangle
 {
     id: base
@@ -85,7 +87,7 @@ Rectangle
         }
     }
 
-    MachineSelection
+    MachineSelector
     {
         id: machineSelection
         width: base.width - configSelection.width - separator.width
@@ -104,7 +106,7 @@ Rectangle
         anchors.left: machineSelection.right
     }
 
-    ConfigurationSelection
+    CustomConfigurationSelector
     {
         id: configSelection
         visible: isNetworkPrinter && printerConnected
@@ -112,7 +114,6 @@ Rectangle
         height: UM.Theme.getSize("stage_menu").height
         anchors.top: base.top
         anchors.right: parent.right
-        panelWidth: base.width
     }
 
     Loader

resources/qml/PrintMonitor.qml

@@ -11,136 +11,180 @@ import Cura 1.0 as Cura
 
 import "PrinterOutput"
 
-Column
+
+Rectangle
 {
-    id: printMonitor
+    id: base
+    UM.I18nCatalog { id: catalog; name: "cura"}
+
+    function showTooltip(item, position, text)
+    {
+        tooltip.text = text;
+        position = item.mapToItem(base, position.x - UM.Theme.getSize("default_arrow").width, position.y);
+        tooltip.show(position);
+    }
+
+    function hideTooltip()
+    {
+        tooltip.hide();
+    }
+
+    function strPadLeft(string, pad, length) {
+        return (new Array(length + 1).join(pad) + string).slice(-length);
+    }
+
+    function getPrettyTime(time)
+    {
+        var hours = Math.floor(time / 3600)
+        time -= hours * 3600
+        var minutes = Math.floor(time / 60);
+        time -= minutes * 60
+        var seconds = Math.floor(time);
+
+        var finalTime = strPadLeft(hours, "0", 2) + ":" + strPadLeft(minutes, "0", 2) + ":" + strPadLeft(seconds, "0", 2);
+        return finalTime;
+    }
+
     property var connectedDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
     property var activePrinter: connectedDevice != null ? connectedDevice.activePrinter : null
     property var activePrintJob: activePrinter != null ? activePrinter.activePrintJob: null
 
-    Cura.ExtrudersModel
+    SidebarTooltip
     {
-        id: extrudersModel
+        id: tooltip
-        simpleNames: true
     }
 
-    OutputDeviceHeader
+    Column
     {
-        outputDevice: connectedDevice
+        id: printMonitor
-    }
 
-    Rectangle
+        anchors.fill: parent
-    {
-        color: UM.Theme.getColor("wide_lining")
-        width: parent.width
-        height: childrenRect.height
 
-        Flow
+        Cura.ExtrudersModel
         {
-            id: extrudersGrid
+            id: extrudersModel
-            spacing: UM.Theme.getSize("thick_lining").width
+            simpleNames: true
+        }
+
+        OutputDeviceHeader
+        {
+            outputDevice: connectedDevice
+        }
+
+        Rectangle
+        {
+            color: UM.Theme.getColor("wide_lining")
             width: parent.width
+            height: childrenRect.height
 
-            Repeater
+            Flow
             {
-                id: extrudersRepeater
+                id: extrudersGrid
-                model: activePrinter != null ? activePrinter.extruders : null
+                spacing: UM.Theme.getSize("thick_lining").width
+                width: parent.width
 
-                ExtruderBox
+                Repeater
                 {
-                    color: UM.Theme.getColor("main_background")
+                    id: extrudersRepeater
-                    width: index == machineExtruderCount.properties.value - 1 && index % 2 == 0 ? extrudersGrid.width : Math.round(extrudersGrid.width / 2 - UM.Theme.getSize("thick_lining").width / 2)
+                    model: activePrinter != null ? activePrinter.extruders : null
-                    extruderModel: modelData
+
+                    ExtruderBox
+                    {
+                        color: UM.Theme.getColor("main_background")
+                        width: index == machineExtruderCount.properties.value - 1 && index % 2 == 0 ? extrudersGrid.width : Math.round(extrudersGrid.width / 2 - UM.Theme.getSize("thick_lining").width / 2)
+                        extruderModel: modelData
+                    }
                 }
             }
         }
-    }
 
-    Rectangle
+        Rectangle
-    {
-        color: UM.Theme.getColor("wide_lining")
-        width: parent.width
-        height: UM.Theme.getSize("thick_lining").width
-    }
-
-    HeatedBedBox
-    {
-        visible: {
-            if(activePrinter != null && activePrinter.bedTemperature != -1)
-            {
-                return true
-            }
-            return false
-        }
-        printerModel: activePrinter
-    }
-
-    UM.SettingPropertyProvider
-    {
-        id: bedTemperature
-        containerStack: Cura.MachineManager.activeMachine
-        key: "material_bed_temperature"
-        watchedProperties: ["value", "minimum_value", "maximum_value", "resolve"]
-        storeIndex: 0
-
-        property var resolve: Cura.MachineManager.activeStack != Cura.MachineManager.activeMachine ? properties.resolve : "None"
-    }
-
-    UM.SettingPropertyProvider
-    {
-        id: machineExtruderCount
-        containerStack: Cura.MachineManager.activeMachine
-        key: "machine_extruder_count"
-        watchedProperties: ["value"]
-    }
-
-    ManualPrinterControl
-    {
-        printerModel: activePrinter
-        visible: activePrinter != null ? activePrinter.canControlManually : false
-    }
-
-
-    MonitorSection
-    {
-        label: catalog.i18nc("@label", "Active print")
-        width: base.width
-        visible: activePrinter != null
-    }
-
-
-    MonitorItem
-    {
-        label: catalog.i18nc("@label", "Job Name")
-        value: activePrintJob != null ? activePrintJob.name : ""
-        width: base.width
-        visible: activePrinter != null
-    }
-
-    MonitorItem
-    {
-        label: catalog.i18nc("@label", "Printing Time")
-        value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal) : ""
-        width: base.width
-        visible: activePrinter != null
-    }
-
-    MonitorItem
-    {
-        label: catalog.i18nc("@label", "Estimated time left")
-        value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal - activePrintJob.timeElapsed) : ""
-        visible:
         {
-            if(activePrintJob == null)
+            color: UM.Theme.getColor("wide_lining")
+            width: parent.width
+            height: UM.Theme.getSize("thick_lining").width
+        }
+
+        HeatedBedBox
+        {
+            visible:
             {
+                if(activePrinter != null && activePrinter.bedTemperature != -1)
+                {
+                    return true
+                }
                 return false
             }
-
+            printerModel: activePrinter
-            return (activePrintJob.state == "printing" ||
+        }
-                    activePrintJob.state == "resuming" ||
+
-                    activePrintJob.state == "pausing" ||
+        UM.SettingPropertyProvider
-                    activePrintJob.state == "paused")
+        {
+            id: bedTemperature
+            containerStack: Cura.MachineManager.activeMachine
+            key: "material_bed_temperature"
+            watchedProperties: ["value", "minimum_value", "maximum_value", "resolve"]
+            storeIndex: 0
+
+            property var resolve: Cura.MachineManager.activeStack != Cura.MachineManager.activeMachine ? properties.resolve : "None"
+        }
+
+        UM.SettingPropertyProvider
+        {
+            id: machineExtruderCount
+            containerStack: Cura.MachineManager.activeMachine
+            key: "machine_extruder_count"
+            watchedProperties: ["value"]
+        }
+
+        ManualPrinterControl
+        {
+            printerModel: activePrinter
+            visible: activePrinter != null ? activePrinter.canControlManually : false
+        }
+
+
+        MonitorSection
+        {
+            label: catalog.i18nc("@label", "Active print")
+            width: base.width
+            visible: activePrinter != null
+        }
+
+
+        MonitorItem
+        {
+            label: catalog.i18nc("@label", "Job Name")
+            value: activePrintJob != null ? activePrintJob.name : ""
+            width: base.width
+            visible: activePrinter != null
+        }
+
+        MonitorItem
+        {
+            label: catalog.i18nc("@label", "Printing Time")
+            value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal) : ""
+            width: base.width
+            visible: activePrinter != null
+        }
+
+        MonitorItem
+        {
+            label: catalog.i18nc("@label", "Estimated time left")
+            value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal - activePrintJob.timeElapsed) : ""
+            visible:
+            {
+                if(activePrintJob == null)
+                {
+                    return false
+                }
+
+                return (activePrintJob.state == "printing" ||
+                        activePrintJob.state == "resuming" ||
+                        activePrintJob.state == "pausing" ||
+                        activePrintJob.state == "paused")
+            }
+            width: base.width
         }
-        width: base.width
     }
-}
+}

resources/qml/PrinterOutput/ExtruderBox.qml

@@ -12,6 +12,8 @@ Item
     property alias color: background.color
     property var extruderModel
     property var position: index
+    property var connectedPrinter: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
+
     implicitWidth: parent.width
     implicitHeight: UM.Theme.getSize("print_setup_extruder_box").height
 

resources/qml/PrinterOutput/HeatedBedBox.qml

@@ -1,10 +1,10 @@
 // Copyright (c) 2017 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.3
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
@@ -14,6 +14,7 @@ Item
     implicitWidth: parent.width
     height: visible ? UM.Theme.getSize("print_setup_extruder_box").height : 0
     property var printerModel
+    property var connectedPrinter: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
     Rectangle
     {
@@ -114,7 +115,7 @@ Item
                 {
                     return false; //Can't preheat if not connected.
                 }
-                if (!connectedPrinter.acceptsCommands)
+                if (connectedPrinter == null || !connectedPrinter.acceptsCommands)
                 {
                     return false; //Not allowed to do anything.
                 }

resources/qml/PrinterOutput/ManualPrinterControl.qml

@@ -1,103 +1,26 @@
 // Copyright (c) 2017 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.3
 
-import UM 1.2 as UM
+import UM 1.3 as UM
 import Cura 1.0 as Cura
 
+import "."
+
+
 Item
 {
-    property var printerModel
+    property var printerModel: null
     property var activePrintJob: printerModel != null ? printerModel.activePrintJob : null
+    property var connectedPrinter: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
+
     implicitWidth: parent.width
     implicitHeight: childrenRect.height
 
-    Component
-    {
-        id: monitorButtonStyle
-
-        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");
-                    }
-                    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");
-                    }
-                    return UM.Theme.getColor("action_button");
-                }
-                Behavior on color
-                {
-                    ColorAnimation
-                    {
-                        duration: 50
-                    }
-                }
-            }
-
-            label: Item
-            {
-                UM.RecolorImage
-                {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.floor(control.width / 2)
-                    height: Math.floor(control.height / 2)
-                    sourceSize.width: width
-                    sourceSize.height: width
-                    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");
-                        }
-                        return UM.Theme.getColor("action_button_text");
-                    }
-                    source: control.iconSource
-                }
-            }
-        }
-    }
-
     Column
     {
         enabled:
@@ -180,7 +103,7 @@ Item
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("arrow_top");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -197,7 +120,7 @@ Item
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("arrow_left");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -214,7 +137,7 @@ Item
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("arrow_right");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -231,7 +154,7 @@ Item
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("arrow_bottom");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -248,7 +171,7 @@ Item
                     Layout.preferredWidth: width
                     Layout.preferredHeight: height
                     iconSource: UM.Theme.getIcon("home");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -278,7 +201,7 @@ Item
                 Button
                 {
                     iconSource: UM.Theme.getIcon("arrow_top");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -291,7 +214,7 @@ Item
                 Button
                 {
                     iconSource: UM.Theme.getIcon("home");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -304,7 +227,7 @@ Item
                 Button
                 {
                     iconSource: UM.Theme.getIcon("arrow_bottom");
-                    style: monitorButtonStyle
+                    style: UM.Theme.styles.monitor_button_style
                     width: height
                     height: UM.Theme.getSize("setting_control").height
 
@@ -356,72 +279,7 @@ Item
                         checked: distancesRow.currentDistance == model.value
                         onClicked: distancesRow.currentDistance = model.value
 
-                        style: ButtonStyle {
+                        style: UM.Theme.styles.monitor_checkable_button_style
-                            background: Rectangle {
-                                border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
-                                border.color:
-                                {
-                                    if(!control.enabled)
-                                    {
-                                        return UM.Theme.getColor("action_button_disabled_border");
-                                    }
-                                    else if (control.checked || control.pressed)
-                                    {
-                                        return UM.Theme.getColor("action_button_active_border");
-                                    }
-                                    else if(control.hovered)
-                                    {
-                                        return UM.Theme.getColor("action_button_hovered_border");
-                                    }
-                                    return UM.Theme.getColor("action_button_border");
-                                }
-                                color:
-                                {
-                                    if(!control.enabled)
-                                    {
-                                        return UM.Theme.getColor("action_button_disabled");
-                                    }
-                                    else if (control.checked || control.pressed)
-                                    {
-                                        return UM.Theme.getColor("action_button_active");
-                                    }
-                                    else if (control.hovered)
-                                    {
-                                        return UM.Theme.getColor("action_button_hovered");
-                                    }
-                                    return UM.Theme.getColor("action_button");
-                                }
-                                Behavior on color { ColorAnimation { duration: 50; } }
-                                Label {
-                                    anchors.left: parent.left
-                                    anchors.right: parent.right
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
-                                    anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
-                                    color:
-                                    {
-                                        if(!control.enabled)
-                                        {
-                                            return UM.Theme.getColor("action_button_disabled_text");
-                                        }
-                                        else if (control.checked || 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");
-                                    }
-                                    font: UM.Theme.getFont("default")
-                                    text: control.text
-                                    horizontalAlignment: Text.AlignHCenter
-                                    elide: Text.ElideMiddle
-                                }
-                            }
-                            label: Item { }
-                        }
                     }
                 }
             }
@@ -462,7 +320,7 @@ Item
                         if (printerModel == null) {
                             return false // Can't send custom commands if not connected.
                         }
-                        if (!connectedPrinter.acceptsCommands) {
+                        if (connectedPrinter == null || !connectedPrinter.acceptsCommands) {
                             return false // Not allowed to do anything
                         }
                         if (connectedPrinter.jobState == "printing" || connectedPrinter.jobState == "pre_print" || connectedPrinter.jobState == "resuming" || connectedPrinter.jobState == "pausing" || connectedPrinter.jobState == "paused" || connectedPrinter.jobState == "error" || connectedPrinter.jobState == "offline") {
@@ -551,4 +409,4 @@ Item
         }
         ExclusiveGroup { id: distanceGroup }
     }
-}
+}

resources/qml/PrinterOutput/MonitorItem.qml

@@ -15,6 +15,8 @@ Item
     property string value: ""
     height: childrenRect.height;
 
+    property var connectedPrinter: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
+
     Row
     {
         height: UM.Theme.getSize("setting_control").height

resources/qml/PrinterOutput/MonitorSection.qml

@@ -1,10 +1,10 @@
 // Copyright (c) 2017 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.3
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
@@ -13,7 +13,8 @@ Item
 {
     id: base
     property string label
-    height: childrenRect.height;
+    height: childrenRect.height
+
     Rectangle
     {
         color: UM.Theme.getColor("setting_category")
@@ -30,4 +31,4 @@ Item
             color: UM.Theme.getColor("setting_category_text")
         }
     }
-}
+}

resources/qml/PrinterOutput/OutputDeviceHeader.qml

@@ -45,8 +45,8 @@ Item
             text: (outputDevice != null && outputDevice.address != null) ? outputDevice.address : ""
             font: UM.Theme.getFont("small")
             color: UM.Theme.getColor("text_inactive")
-            anchors.top: parent.top
+            anchors.top: outputDeviceNameLabel.bottom
-            anchors.right: parent.right
+            anchors.left: parent.left
             anchors.margins: UM.Theme.getSize("default_margin").width
         }
 

resources/themes/cura-light/styles.qml

@@ -1,9 +1,9 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.1
+import QtQuick 2.10
-import QtQuick.Controls 1.1
+import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.1
+import QtQuick.Controls.Styles 1.4
 
 import UM 1.1 as UM
 
@@ -727,4 +727,210 @@ QtObject
             label: Item { }
         }
     }
+
+    property Component toolbox_action_button: Component
+    {
+        ButtonStyle
+        {
+            background: Rectangle
+            {
+                implicitWidth: UM.Theme.getSize("toolbox_action_button").width
+                implicitHeight: UM.Theme.getSize("toolbox_action_button").height
+                color:
+                {
+                    if (control.installed)
+                    {
+                        return UM.Theme.getColor("action_button_disabled");
+                    }
+                    else
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("primary_hover");
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("primary");
+                        }
+                    }
+
+                }
+            }
+            label: Label
+            {
+                text: control.text
+                color:
+                {
+                    if (control.installed)
+                    {
+                        return UM.Theme.getColor("action_button_disabled_text");
+                    }
+                    else
+                    {
+                        if (control.hovered)
+                        {
+                            return UM.Theme.getColor("button_text_hover");
+                        }
+                        else
+                        {
+                            return UM.Theme.getColor("button_text");
+                        }
+                    }
+                }
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                font: UM.Theme.getFont("default_bold")
+            }
+        }
+    }
+
+    property Component monitor_button_style: Component
+    {
+        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");
+                    }
+                    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");
+                    }
+                    return UM.Theme.getColor("action_button");
+                }
+                Behavior on color
+                {
+                    ColorAnimation
+                    {
+                        duration: 50
+                    }
+                }
+            }
+
+            label: Item
+            {
+                UM.RecolorImage
+                {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: Math.floor(control.width / 2)
+                    height: Math.floor(control.height / 2)
+                    sourceSize.width: width
+                    sourceSize.height: width
+                    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");
+                        }
+                        return UM.Theme.getColor("action_button_text");
+                    }
+                    source: control.iconSource
+                }
+            }
+        }
+    }
+
+    property Component monitor_checkable_button_style: Component
+    {
+        ButtonStyle {
+            background: Rectangle {
+                border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
+                border.color:
+                {
+                    if(!control.enabled)
+                    {
+                        return UM.Theme.getColor("action_button_disabled_border");
+                    }
+                    else if (control.checked || control.pressed)
+                    {
+                        return UM.Theme.getColor("action_button_active_border");
+                    }
+                    else if(control.hovered)
+                    {
+                        return UM.Theme.getColor("action_button_hovered_border");
+                    }
+                    return UM.Theme.getColor("action_button_border");
+                }
+                color:
+                {
+                    if(!control.enabled)
+                    {
+                        return UM.Theme.getColor("action_button_disabled");
+                    }
+                    else if (control.checked || control.pressed)
+                    {
+                        return UM.Theme.getColor("action_button_active");
+                    }
+                    else if (control.hovered)
+                    {
+                        return UM.Theme.getColor("action_button_hovered");
+                    }
+                    return UM.Theme.getColor("action_button");
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+                Label {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
+                    anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
+                    color:
+                    {
+                        if(!control.enabled)
+                        {
+                            return UM.Theme.getColor("action_button_disabled_text");
+                        }
+                        else if (control.checked || 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");
+                    }
+                    font: UM.Theme.getFont("default")
+                    text: control.text
+                    horizontalAlignment: Text.AlignHCenter
+                    elide: Text.ElideMiddle
+                }
+            }
+            label: Item { }
+        }
+    }
 }