Monitor tab refactor + skeleton loading

Contributes to CL-1051

plugins/UM3NetworkPrinting/resources/qml/ClusterControlItem.qml

@@ -69,7 +69,8 @@ Component
         // Skeleton loading
         Column
         {
-            id: dummies
+            id: skeletonLoader
+            visible: printerList.count === 0;
             anchors
             {
                 top: printingLabel.bottom
@@ -97,12 +98,11 @@ Component
             id: printerScrollView
             anchors
             {
-                top: dummies.bottom
+                top: printingLabel.bottom
+                topMargin: UM.Theme.getSize("default_margin").height
                 left: parent.left
                 right: parent.right
-                topMargin: UM.Theme.getSize("default_margin").height
+                bottom: parent.bottom;
-                bottom: parent.bottom
-                bottomMargin: UM.Theme.getSize("default_margin").height
             }
 
             style: UM.Theme.styles.scrollview

plugins/UM3NetworkPrinting/resources/qml/HorizontalLine.qml

@@ -2,20 +2,8 @@ import QtQuick 2.3
 import QtQuick.Controls 2.0
 import UM 1.3 as UM
 
-Item {
+Rectangle {
-    id: root;
+    color: UM.Theme.getColor("monitor_tab_lining_inactive"); // TODO: Maybe theme separately? Maybe not.
-    property var enabled: true;
-    width: parent.width;
-    height: childrenRect.height;
-
-    Rectangle {
-        anchors {
-            left: parent.left;
-            leftMargin: UM.Theme.getSize("default_margin").width;
-            right: parent.right;
-            rightMargin: UM.Theme.getSize("default_margin").width;
-        }
-        color: root.enabled ? UM.Theme.getColor("monitor_lining_inactive") : UM.Theme.getColor("monitor_lining_active");
     height: UM.Theme.getSize("default_lining").height;
-    }
+    width: parent.width;
 }

plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml

@@ -9,7 +9,9 @@ import UM 1.3 as UM
 
 Item {
     id: root;
+
     property var printJob: null;
+    property var running: isRunning(printJob);
 
     Button {
         id: button;
@@ -36,164 +38,165 @@ Item {
 
     Popup {
         id: popup;
+        background: Item {
+            height: popup.height;
+            width: popup.width;
+
+            DropShadow {
+                anchors.fill: pointedRectangle;
+                color: "#3F000000"; // 25% shadow
+                radius: 5;
+                source: pointedRectangle;
+                transparentBorder: true;
+                verticalOffset: 2;
+            }
+
+            Item {
+                id: pointedRectangle
+                width: parent.width - 10 * screenScaleFactor; // Because of the shadow
+                height: parent.height - 10 * screenScaleFactor; // Because of the shadow
+                anchors.horizontalCenter: parent.horizontalCenter;
+                anchors.verticalCenter: parent.verticalCenter;
+
+                Rectangle {
+                    id: point
+                    anchors.right: bloop.right;
+                    anchors.rightMargin: 24;
+                    color: UM.Theme.getColor("setting_control");
+                    height: 14 * screenScaleFactor;
+                    transform: Rotation {
+                        angle: 45;
+                    }
+                    width: 14 * screenScaleFactor;
+                    y: 1;
+                }
+
+                Rectangle {
+                    id: bloop
+                    anchors {
+                        bottom: parent.bottom;
+                        bottomMargin: 8 * screenScaleFactor; // Because of the shadow
+                        top: parent.top;
+                        topMargin: 8 * screenScaleFactor; // Because of the shadow + point
+                    }
+                    color: UM.Theme.getColor("setting_control");
+                    width: parent.width;
+                }
+            }
+        }
         clip: true;
         closePolicy: Popup.CloseOnPressOutside;
+        contentItem: Column {
+            id: popupOptions;
+            anchors {
+                top: parent.top;
+                topMargin: UM.Theme.getSize("default_margin").height + 10 * screenScaleFactor; // Account for the point of the box
+            }
+            height: childrenRect.height + spacing * popupOptions.children.length + UM.Theme.getSize("default_margin").height;
+            spacing: Math.floor(UM.Theme.getSize("default_margin").height / 2);
+            width: parent.width;
+
+            PrintJobContextMenuItem {
+                enabled: printJob && !running ? OutputDevice.queuedPrintJobs[0].key != printJob.key : false;
+                onClicked: {
+                    sendToTopConfirmationDialog.visible = true;
+                    popup.close();
+                }
+                text: catalog.i18nc("@label", "Move to top");
+            }
+
+            PrintJobContextMenuItem {
+                enabled: printJob && !running;
+                onClicked: {
+                    deleteConfirmationDialog.visible = true;
+                    popup.close();
+                }
+                text: catalog.i18nc("@label", "Delete");
+            }
+
+            PrintJobContextMenuItem {
+                enabled: printJob && running;
+                onClicked: {
+                    if (printJob.state == "paused") {
+                        printJob.setState("print");
+                    } else if(printJob.state == "printing") {
+                        printJob.setState("pause");
+                    }
+                    popup.close();
+                }
+                text: printJob && printJob.state == "paused" ? catalog.i18nc("@label", "Resume") : catalog.i18nc("@label", "Pause");
+            }
+
+            PrintJobContextMenuItem {
+                enabled: printJob && running;
+                onClicked: {
+                    abortConfirmationDialog.visible = true;
+                    popup.close();
+                }
+                text: catalog.i18nc("@label", "Abort");
+            }
+        }
+        enter: Transition {
+            NumberAnimation {
+                duration: 75;
+                property: "visible";
+            }
+        }
+        exit: Transition {
+            NumberAnimation {
+                duration: 75;
+                property: "visible";
+            }
+        }
         height: contentItem.height + 2 * padding;
+        onClosed: visible = false;
+        onOpened: visible = true;
         padding: 5 * screenScaleFactor; // Because shadow
         transformOrigin: Popup.Top;
         visible: false;
         width: 182 * screenScaleFactor;
         x: (button.width - width) + 26 * screenScaleFactor;
         y: button.height + 5 * screenScaleFactor; // Because shadow
-        contentItem: Item {
-            width: popup.width
-            height: childrenRect.height + 36 * screenScaleFactor
-            anchors.topMargin: 10 * screenScaleFactor
-            anchors.bottomMargin: 10 * screenScaleFactor
-            Button {
-                id: sendToTopButton
-                text: catalog.i18nc("@label", "Move to top")
-                onClicked:
-                {
-                    sendToTopConfirmationDialog.visible = true;
-                    popup.close();
-                }
-                width: parent.width
-                enabled: printJob ? OutputDevice.queuedPrintJobs[0].key != printJob.key : false;
-                visible: enabled
-                anchors.top: parent.top
-                anchors.topMargin: 18 * screenScaleFactor
-                height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
-                hoverEnabled: true
-                background: Rectangle
-                {
-                    opacity: sendToTopButton.down || sendToTopButton.hovered ? 1 : 0
-                    color: UM.Theme.getColor("viewport_background")
-                }
-                contentItem: Label
-                {
-                    text: sendToTopButton.text
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
-                }
     }
 
-            MessageDialog
+    MessageDialog {
-            {
+        id: sendToTopConfirmationDialog;
-                id: sendToTopConfirmationDialog
+        Component.onCompleted: visible = false;
-                title: catalog.i18nc("@window:title", "Move print job to top")
+        icon: StandardIcon.Warning;
-                icon: StandardIcon.Warning
+        onYes: OutputDevice.sendJobToTop(printJob.key);
+        standardButtons: StandardButton.Yes | StandardButton.No;
         text: printJob ? catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to move %1 to the top of the queue?").arg(printJob.name) : "";
-                standardButtons: StandardButton.Yes | StandardButton.No
+        title: catalog.i18nc("@window:title", "Move print job to top");
-                Component.onCompleted: visible = false
-                onYes: {
-                    if (printJob) {
-                        OutputDevice.sendJobToTop(printJob.key)
-                    }
-                }
     }
 
-            Button
+    MessageDialog {
-            {
+        id: deleteConfirmationDialog;
-                id: deleteButton
+        Component.onCompleted: visible = false;
-                text: catalog.i18nc("@label", "Delete")
+        icon: StandardIcon.Warning;
-                onClicked:
+        onYes: OutputDevice.deleteJobFromQueue(printJob.key);
-                {
+        standardButtons: StandardButton.Yes | StandardButton.No;
-                    deleteConfirmationDialog.visible = true;
-                    popup.close();
-                }
-                width: parent.width
-                height: 39 * screenScaleFactor
-                anchors.top: sendToTopButton.bottom
-                hoverEnabled: true
-                background: Rectangle
-                {
-                    opacity: deleteButton.down || deleteButton.hovered ? 1 : 0
-                    color: UM.Theme.getColor("viewport_background")
-                }
-                contentItem: Label
-                {
-                    text: deleteButton.text
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
-            MessageDialog
-            {
-                id: deleteConfirmationDialog
-                title: catalog.i18nc("@window:title", "Delete print job")
-                icon: StandardIcon.Warning
         text: printJob ? catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to delete %1?").arg(printJob.name) : "";
-                standardButtons: StandardButton.Yes | StandardButton.No
+        title: catalog.i18nc("@window:title", "Delete print job");
-                Component.onCompleted: visible = false
-                onYes: OutputDevice.deleteJobFromQueue(printJob.key)
-            }
     }
 
-        background: Item
+    MessageDialog {
-        {
+        id: abortConfirmationDialog;
-            width: popup.width
+        Component.onCompleted: visible = false;
-            height: popup.height
+        icon: StandardIcon.Warning;
-
+        onYes: printJob.setState("abort");
-            DropShadow
+        standardButtons: StandardButton.Yes | StandardButton.No;
-            {
+        text: printJob ? catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to abort %1?").arg(printJob.name) : "";
-                anchors.fill: pointedRectangle
+        title: catalog.i18nc("@window:title", "Abort print");
-                radius: 5
-                color: "#3F000000"  // 25% shadow
-                source: pointedRectangle
-                transparentBorder: true
-                verticalOffset: 2
-            }
-
-            Item
-            {
-                id: pointedRectangle
-                width: parent.width - 10 * screenScaleFactor // Because of the shadow
-                height: parent.height - 10 * screenScaleFactor // Because of the shadow
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-
-                Rectangle
-                {
-                    id: point
-                    height: 14 * screenScaleFactor
-                    width: 14 * screenScaleFactor
-                    color: UM.Theme.getColor("setting_control")
-                    transform: Rotation { angle: 45}
-                    anchors.right: bloop.right
-                    anchors.rightMargin: 24
-                    y: 1
-                }
-
-                Rectangle
-                {
-                    id: bloop
-                    color: UM.Theme.getColor("setting_control")
-                    width: parent.width
-                    anchors.top: parent.top
-                    anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
-                }
-            }
-        }
-
-        exit: Transition
-        {
-            NumberAnimation { property: "visible"; duration: 75; }
-        }
-        enter: Transition
-        {
-            NumberAnimation { property: "visible"; duration: 75; }
-        }
-
-        onClosed: visible = false
-        onOpened: visible = true
     }
 
     // Utils
     function switchPopupState() {
-        popup.visible ? popup.close() : popup.open()
+        popup.visible ? popup.close() : popup.open();
+    }
+    function isRunning(job) {
+        if (!job) {
+            return false;
+        }
+        return ["paused", "printing", "pre_print"].indexOf(job.state) !== -1;
     }
 }

plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenuItem.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import QtQuick.Controls.Styles 1.4
+import UM 1.3 as UM
+
+Button {
+    background: Rectangle {
+        opacity: parent.down || parent.hovered ? 1 : 0;
+        color: UM.Theme.getColor("viewport_background"); // TODO: Theme!
+    }
+    contentItem: Label {
+        text: parent.text
+        horizontalAlignment: Text.AlignLeft;
+        verticalAlignment: Text.AlignVCenter;
+    }
+    height: 39 * screenScaleFactor; // TODO: Theme!
+    hoverEnabled: true;
+    visible: enabled;
+    width: parent.width;
+}

plugins/UM3NetworkPrinting/resources/qml/PrintJobPreview.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.3
+import QtQuick.Dialogs 1.1
+import QtQuick.Controls 2.0
+import QtQuick.Controls.Styles 1.3
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 1.4 as LegacyControls
+import UM 1.3 as UM
+
+// Includes print job name, owner, and preview
+
+Item {
+    property var job: null;
+    property var useUltibot: false;
+    height: 100;
+    width: height;
+
+    // Skeleton
+    Rectangle {
+        visible: !job;
+        anchors.fill: parent;
+        radius: UM.Theme.getSize("default_margin").width; // TODO: Theme!
+        color: UM.Theme.getColor("viewport_background"); // TODO: Theme!
+    }
+
+    // Actual content
+    Image {
+        id: previewImage;
+        visible: job;
+        source: job ? job.previewImageUrl : "";
+        opacity: {
+            if (job == null) {
+                return 1.0;
+            }
+            var states = ["wait_cleanup", "wait_user_action", "error", "paused"];
+            if (states.indexOf(job.state) !== -1) {
+                return 0.5;
+            }
+            return 1.0;
+        }
+        anchors.fill: parent;
+    }
+
+    UM.RecolorImage {
+        id: ultibotImage;
+        anchors.centerIn: parent;
+        source: "../svg/ultibot.svg";
+        /* Since print jobs ALWAYS have an image url, we have to check if that image URL errors or
+            not in order to determine if we show the placeholder (ultibot) image instead. */
+        visible: job && previewImage.status == Image.Error;
+        width: parent.width;
+        height: parent.height;
+        sourceSize.width: width;
+        sourceSize.height: height;
+        color: UM.Theme.getColor("monitor_tab_placeholder_image"); // TODO: Theme!
+    }
+
+    UM.RecolorImage {
+        id: statusImage;
+        anchors.centerIn: parent;
+        source: job && job.state == "error" ? "../svg/aborted-icon.svg" : "";
+        visible: source != "";
+        width: 0.5 * parent.width;
+        height: 0.5 * parent.height;
+        sourceSize.width: width;
+        sourceSize.height: height;
+        color: "black";
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/PrintJobTitle.qml

@@ -0,0 +1,53 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.3
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+Column {
+    property var job: null;
+    height: childrenRect.height;
+    spacing: Math.floor( UM.Theme.getSize("default_margin").height / 2); // TODO: Use explicit theme size
+    width: parent.width;
+
+    Item {
+        id: jobName;
+        height: UM.Theme.getSize("monitor_tab_text_line").height;
+        width: parent.width;
+
+        Rectangle {
+            visible: !job;
+            color: UM.Theme.getColor("viewport_background"); // TODO: Use explicit theme color
+            height: parent.height;
+            width: parent.width / 3;
+        }
+        Label {
+            visible: job;
+            text: job ? job.name : "";
+            font: UM.Theme.getFont("default_bold");
+            elide: Text.ElideRight;
+            anchors.fill: parent;
+        }
+    }
+
+    Item {
+        id: ownerName;
+        height: UM.Theme.getSize("monitor_tab_text_line").height;
+        width: parent.width;
+
+        Rectangle {
+            visible: !job;
+            color: UM.Theme.getColor("viewport_background"); // TODO: Use explicit theme color
+            height: parent.height;
+            width: parent.width / 2;
+        }
+        Label {
+            visible: job;
+            text: job ? job.owner : "";
+            font: UM.Theme.getFont("default");
+            elide: Text.ElideRight;
+            anchors.fill: parent;
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/PrinterCard.qml

@@ -49,8 +49,8 @@ Item {
             // Main card
             Item {
                 id: mainCard;
-                // color: "pink";
+                // I don't know why the extra height is needed but it is in order to look proportional.
-                height: childrenRect.height;
+                height: childrenRect.height + 2;
                 width: parent.width;
 
                 // Machine icon
@@ -201,8 +201,7 @@ Item {
                     anchors.fill: parent;
                     enabled: printer;
                     onClicked: {
-                        console.log(model.index)
+                        if (model && root.collapsed) {
-                        if (root.collapsed && model) {
                             printerList.currentIndex = model.index;
                         } else {
                             printerList.currentIndex = -1;
@@ -213,6 +212,9 @@ Item {
                 Connections {
                     target: printerList
                     onCurrentIndexChanged: {
+                        if (!model) {
+                            return;
+                        }
                         root.collapsed = printerList.currentIndex != model.index;
                     }
                 }
@@ -221,8 +223,8 @@ Item {
             // Detailed card
             PrinterCardDetails {
                 collapsed: root.collapsed;
-                printer: printer;
+                printer: root.printer;
-                visible: printer;
+                visible: root.printer;
             }
 
             // Progress bar

plugins/UM3NetworkPrinting/resources/qml/PrinterCardDetails.qml

@@ -7,10 +7,9 @@ import QtQuick.Controls 1.4 as LegacyControls
 import UM 1.3 as UM
 
 Item {
-    id: root;
 
     property var printer: null;
-    property var printJob: printer.activePrintJob;
+    property var printJob: printer ? printer.activePrintJob : null;
     property var collapsed: true;
 
     Behavior on height { NumberAnimation { duration: 100 } }
@@ -21,350 +20,59 @@ Item {
     opacity: collapsed ? 0 : 1;
 
     Column {
-        height: childrenRect.height;
+        id: contentColumn;
+        anchors {
+            left: parent.left;
+            leftMargin: UM.Theme.getSize("default_margin").width;
+            right: parent.right;
+            rightMargin: UM.Theme.getSize("default_margin").width;
+        }
+        height: childrenRect.height + UM.Theme.getSize("wide_margin").height;
+        spacing: UM.Theme.getSize("default_margin").height;
         width: parent.width;
 
-        spacing: UM.Theme.getSize("default_margin").height;
+        HorizontalLine {}
-
-        HorizontalLine { enabled: printer.state !== "disabled" }
 
         PrinterInfoBlock {
             printer: root.printer;
             printJob: root.printer.activePrintJob;
         }
 
-        HorizontalLine { enabled: printer.state !== "disabled" }
+        HorizontalLine {}
 
-        Rectangle {
+        Row {
-            color: "orange";
             width: parent.width;
-            height: 100;
+            height: childrenRect.height;
+
+            PrintJobTitle {
+                job: root.printer.activePrintJob;
             }
-
+            PrintJobContextMenu {
-        Item {
+                id: contextButton;
-            id: jobInfoSection;
+                anchors {
-
+                    right: parent.right;
-            property var job: root.printer ? root.printer.activePrintJob : null;
+                    rightMargin: UM.Theme.getSize("wide_margin").width;
-
-            Component.onCompleted: {
-                console.log(job)
                 }
-            height: visible ? childrenRect.height + 2 * UM.Theme.getSize("default_margin").height : 0;
+                printJob: root.printer.activePrintJob;
-            width: parent.width;
+                visible: root.printer.activePrintJob;
-            visible: job && job.state != "queued";
-
-            anchors.left: parent.left;
-            // anchors.right: contextButton.left;
-            // anchors.rightMargin: UM.Theme.getSize("default_margin").width;
-
-            Label {
-                id: printJobName;
-                elide: Text.ElideRight;
-                font: UM.Theme.getFont("default_bold");
-                text: job ? job.name : "";
-            }
-
-            Label {
-                id: ownerName;
-                anchors.top: job.bottom;
-                elide: Text.ElideRight;
-                font: UM.Theme.getFont("default");
-                opacity: 0.6;
-                text: job ? job.owner : "";
-                width: parent.width;
             }
         }
+        
+
+        PrintJobPreview {
+            job: root.printer.activePrintJob;
+            anchors.horizontalCenter: parent.horizontalCenter;
+        }
+    }
+
+    CameraButton {
+        id: showCameraButton;
+        anchors {
+            bottom: contentColumn.bottom;
+            bottomMargin: Math.round(1.5 * UM.Theme.getSize("default_margin").height);
+            left: contentColumn.left;
+            leftMargin: Math.round(0.5 * UM.Theme.getSize("default_margin").width);
+        }
+        iconSource: "../svg/camera-icon.svg";
     }
 }
-
-
-//     Item {
-//         id: jobInfo;
-//         property var showJobInfo: {
-//             return printer.activePrintJob != null && printer.activePrintJob.state != "queued"
-//         }
-
-//         // anchors {
-//         //     top: jobSpacer.bottom
-//         //     topMargin: 2 * UM.Theme.getSize("default_margin").height
-//         //     left: parent.left
-//         //     right: parent.right
-//         //     margins: UM.Theme.getSize("default_margin").width
-//         //     leftMargin: 2 * UM.Theme.getSize("default_margin").width
-//         // }
-
-//         height: showJobInfo ? childrenRect.height + 2 * UM.Theme.getSize("default_margin").height : 0;
-//         visible: showJobInfo;
-
-
-//         function switchPopupState()
-//         {
-//             popup.visible ? popup.close() : popup.open()
-//         }
-
-//         Button
-//         {
-//             id: contextButton
-//             text: "\u22EE" //Unicode; Three stacked points.
-//             width: 35
-//             height: width
-//             anchors
-//             {
-//                 right: parent.right
-//                 top: parent.top
-//             }
-//             hoverEnabled: true
-
-//             background: Rectangle
-//             {
-//                 opacity: contextButton.down || contextButton.hovered ? 1 : 0
-//                 width: contextButton.width
-//                 height: contextButton.height
-//                 radius: 0.5 * width
-//                 color: UM.Theme.getColor("viewport_background")
-//             }
-//             contentItem: Label
-//             {
-//                 text: contextButton.text
-//                 color: UM.Theme.getColor("monitor_tab_text_inactive")
-//                 font.pixelSize: 25
-//                 verticalAlignment: Text.AlignVCenter
-//                 horizontalAlignment: Text.AlignHCenter
-//             }
-
-//             onClicked: parent.switchPopupState()
-//         }
-
-//         Popup
-//         {
-//             // TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property
-//             id: popup
-//             clip: true
-//             closePolicy: Popup.CloseOnPressOutside
-//             x: (parent.width - width) + 26 * screenScaleFactor
-//             y: contextButton.height - 5 * screenScaleFactor // Because shadow
-//             width: 182 * screenScaleFactor
-//             height: contentItem.height + 2 * padding
-//             visible: false
-//             padding: 5 * screenScaleFactor // Because shadow
-
-//             transformOrigin: Popup.Top
-//             contentItem: Item
-//             {
-//                 width: popup.width
-//                 height: childrenRect.height + 36 * screenScaleFactor
-//                 anchors.topMargin: 10 * screenScaleFactor
-//                 anchors.bottomMargin: 10 * screenScaleFactor
-//                 Button
-//                 {
-//                     id: pauseButton
-//                     text: printer.activePrintJob != null && printer.activePrintJob.state == "paused" ? catalog.i18nc("@label", "Resume") : catalog.i18nc("@label", "Pause")
-//                     onClicked:
-//                     {
-//                         if(printer.activePrintJob.state == "paused")
-//                         {
-//                             printer.activePrintJob.setState("print")
-//                         }
-//                         else if(printer.activePrintJob.state == "printing")
-//                         {
-//                             printer.activePrintJob.setState("pause")
-//                         }
-//                         popup.close()
-//                     }
-//                     width: parent.width
-//                     enabled: printer.activePrintJob != null && ["paused", "printing"].indexOf(printer.activePrintJob.state) >= 0
-//                     visible: enabled
-//                     anchors.top: parent.top
-//                     anchors.topMargin: 18 * screenScaleFactor
-//                     height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
-//                     hoverEnabled: true
-//                     background: Rectangle
-//                     {
-//                         opacity: pauseButton.down || pauseButton.hovered ? 1 : 0
-//                         color: UM.Theme.getColor("viewport_background")
-//                     }
-//                     contentItem: Label
-//                     {
-//                         text: pauseButton.text
-//                         horizontalAlignment: Text.AlignLeft
-//                         verticalAlignment: Text.AlignVCenter
-//                     }
-//                 }
-
-//                 Button
-//                 {
-//                     id: abortButton
-//                     text: catalog.i18nc("@label", "Abort")
-//                     onClicked:
-//                     {
-//                         abortConfirmationDialog.visible = true;
-//                         popup.close();
-//                     }
-//                     width: parent.width
-//                     height: 39 * screenScaleFactor
-//                     anchors.top: pauseButton.bottom
-//                     hoverEnabled: true
-//                     enabled: printer.activePrintJob != null && ["paused", "printing", "pre_print"].indexOf(printer.activePrintJob.state) >= 0
-//                     background: Rectangle
-//                     {
-//                         opacity: abortButton.down || abortButton.hovered ? 1 : 0
-//                         color: UM.Theme.getColor("viewport_background")
-//                     }
-//                     contentItem: Label
-//                     {
-//                         text: abortButton.text
-//                         horizontalAlignment: Text.AlignLeft
-//                         verticalAlignment: Text.AlignVCenter
-//                     }
-//                 }
-
-//                 MessageDialog
-//                 {
-//                     id: abortConfirmationDialog
-//                     title: catalog.i18nc("@window:title", "Abort print")
-//                     icon: StandardIcon.Warning
-//                     text: catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to abort %1?").arg(printer.activePrintJob.name)
-//                     standardButtons: StandardButton.Yes | StandardButton.No
-//                     Component.onCompleted: visible = false
-//                     onYes: printer.activePrintJob.setState("abort")
-//                 }
-//             }
-
-//             background: Item
-//             {
-//                 width: popup.width
-//                 height: popup.height
-
-//                 DropShadow
-//                 {
-//                     anchors.fill: pointedRectangle
-//                     radius: 5
-//                     color: "#3F000000"  // 25% shadow
-//                     source: pointedRectangle
-//                     transparentBorder: true
-//                     verticalOffset: 2
-//                 }
-
-//                 Item
-//                 {
-//                     id: pointedRectangle
-//                     width: parent.width - 10 * screenScaleFactor // Because of the shadow
-//                     height: parent.height - 10 * screenScaleFactor // Because of the shadow
-//                     anchors.horizontalCenter: parent.horizontalCenter
-//                     anchors.verticalCenter: parent.verticalCenter
-
-//                     Rectangle
-//                     {
-//                         id: point
-//                         height: 14 * screenScaleFactor
-//                         width: 14 * screenScaleFactor
-//                         color: UM.Theme.getColor("setting_control")
-//                         transform: Rotation { angle: 45}
-//                         anchors.right: bloop.right
-//                         anchors.rightMargin: 24
-//                         y: 1
-//                     }
-
-//                     Rectangle
-//                     {
-//                         id: bloop
-//                         color: UM.Theme.getColor("setting_control")
-//                         width: parent.width
-//                         anchors.top: parent.top
-//                         anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
-//                         anchors.bottom: parent.bottom
-//                         anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
-//                     }
-//                 }
-//             }
-
-//             exit: Transition
-//             {
-//                 // This applies a default NumberAnimation to any changes a state change makes to x or y properties
-//                 NumberAnimation { property: "visible"; duration: 75; }
-//             }
-//             enter: Transition
-//             {
-//                 // This applies a default NumberAnimation to any changes a state change makes to x or y properties
-//                 NumberAnimation { property: "visible"; duration: 75; }
-//             }
-
-//             onClosed: visible = false
-//             onOpened: visible = true
-//         }
-
-//         Image
-//         {
-//             id: printJobPreview
-//             source: printer.activePrintJob != null ? printer.activePrintJob.previewImageUrl : ""
-//             anchors.top: ownerName.bottom
-//             anchors.horizontalCenter: parent.horizontalCenter
-//             width: parent.width / 2
-//             height: width
-//             opacity:
-//             {
-//                 if(printer.activePrintJob == null)
-//                 {
-//                     return 1.0
-//                 }
-
-//                 switch(printer.activePrintJob.state)
-//                 {
-//                     case "wait_cleanup":
-//                     case "wait_user_action":
-//                     case "paused":
-//                         return 0.5
-//                     default:
-//                         return 1.0
-//                 }
-//             }
-
-
-//         }
-
-//         UM.RecolorImage
-//         {
-//             id: statusImage
-//             anchors.centerIn: printJobPreview
-//             source:
-//             {
-//                 if(printer.activePrintJob == null)
-//                 {
-//                     return ""
-//                 }
-//                 switch(printer.activePrintJob.state)
-//                 {
-//                     case "paused":
-//                         return "../svg/paused-icon.svg"
-//                     case "wait_cleanup":
-//                         if(printer.activePrintJob.timeElapsed < printer.activePrintJob.timeTotal)
-//                         {
-//                             return "../svg/aborted-icon.svg"
-//                         }
-//                         return "../svg/approved-icon.svg"
-//                     case "wait_user_action":
-//                         return "../svg/aborted-icon.svg"
-//                     default:
-//                         return ""
-//                 }
-//             }
-//             visible: source != ""
-//             width: 0.5 * printJobPreview.width
-//             height: 0.5 * printJobPreview.height
-//             sourceSize.width: width
-//             sourceSize.height: height
-//             color: "black"
-//         }
-
-//         CameraButton
-//         {
-//             id: showCameraButton
-//             iconSource: "../svg/camera-icon.svg"
-//             anchors
-//             {
-//                 left: parent.left
-//                 bottom: printJobPreview.bottom
-//             }
-//         }
-//     }
-// }

plugins/UM3NetworkPrinting/resources/qml/PrinterInfoBlock.qml

@@ -24,8 +24,7 @@ Item {
         anchors {
             left: parent.left;
             right: parent.right;
-            bottom: extrudersInfo.top;
+            
-            bottomMargin: UM.Theme.getSize("default_margin").height;
         }
         height: childrenRect.height;
         spacing: Math.round(0.5 * UM.Theme.getSize("default_margin").width);
@@ -52,6 +51,8 @@ Item {
             left: parent.left;
             right: parent.right;
             rightMargin: UM.Theme.getSize("default_margin").width;
+            top: printerFamilyPills.bottom;
+            topMargin: UM.Theme.getSize("default_margin").height;
         }
         height: childrenRect.height;
         spacing: UM.Theme.getSize("default_margin").width;