Merge branch '4.0'

plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml

@@ -9,12 +9,14 @@ import Cura 1.0 as Cura
 
 Rectangle {
     id: base
+
+    property var enabled: true
+
     property var iconSource: null;
-    color: "#0a0850" // TODO: Theme!
+    color: UM.Theme.getColor("monitor_icon_primary")
     height: width;
     radius: Math.round(0.5 * width);
     width: 24 * screenScaleFactor;
-    property var enabled: true
 
     UM.RecolorImage {
         id: icon;
@@ -22,7 +24,7 @@ Rectangle {
             horizontalCenter: parent.horizontalCenter;
             verticalCenter: parent.verticalCenter;
         }
-        color: UM.Theme.getColor("primary_text");
+        color: UM.Theme.getColor("monitor_icon_accent");
         height: width;
         source: iconSource;
         width: Math.round(parent.width / 2);

plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml

@@ -6,10 +6,11 @@ import QtQuick.Controls 2.0
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
-// TODO: Theme & documentation!
-// 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
-//      * The popupItem The content that needs to be shown if the component is expanded.
+/**
+ * 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
+ *  - The popupItem The content that needs to be shown if the component is expanded.
+ */
 Item
 {
     id: base
@@ -17,10 +18,10 @@ Item
     property bool expanded: false
     property bool enabled: true
     property var borderWidth: 1
-    property color borderColor: "#CCCCCC"
-    property color headerBackgroundColor: "white"
-    property color headerHoverColor: "#e8f2fc"
-    property color drawerBackgroundColor: "white"
+    property color borderColor: UM.Theme.getColor("monitor_card_border")
+    property color headerBackgroundColor: UM.Theme.getColor("monitor_icon_accent")
+    property color headerHoverColor: UM.Theme.getColor("monitor_card_hover")
+    property color drawerBackgroundColor: UM.Theme.getColor("monitor_icon_accent")
     property alias headerItem: header.children
     property alias drawerItem: drawer.children
 

plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml

@@ -0,0 +1,227 @@
+// 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.0
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Dialogs 1.1
+import QtGraphicalEffects 1.0
+import UM 1.3 as UM
+
+/**
+ * This is a generic pop-up element which can be supplied with a target and a content item. The
+ * content item will appear to the left, right, above, or below the target depending on the value of
+ * the direction property
+ */
+Popup
+{
+    id: base
+
+    /**
+     * The target item is what the pop-up is "tied" to, usually a button
+     */
+    property var target
+
+    /**
+     * Which direction should the pop-up "point"?
+     * Possible values include:
+     *   - "up"
+     *   - "down"
+     *   - "left"
+     *   - "right"
+     */
+    property string direction: "down"
+
+    /**
+     * We save the default direction so that if a pop-up was flipped but later has space (i.e. it
+     * moved), we can unflip it back to the default direction.
+     */
+    property string originalDirection: ""
+
+    /**
+     * Should the popup close when you click outside it? For example, this is
+     * disabled by the InfoBlurb component since it's opened and closed using mouse
+     * hovers, not clicks.
+     */
+    property bool closeOnClick: true
+
+    /**
+     * Use white for context menus, dark grey for info blurbs!
+     */
+    property var color: "#ffffff" // TODO: Theme!
+
+    Component.onCompleted:
+    {
+        recalculatePosition()
+
+        // Set the direction here so it's only set once and never mutated
+        originalDirection = (' ' + direction).slice(1)
+    }
+
+    background: Item
+    {
+        anchors.fill: parent
+
+        DropShadow
+        {
+            anchors.fill: pointedRectangle
+            color: UM.Theme.getColor("monitor_shadow")
+            radius: UM.Theme.getSize("monitor_shadow_radius").width
+            source: pointedRectangle
+            transparentBorder: true
+            verticalOffset: 2 * screenScaleFactor
+        }
+
+        Item
+        {
+            id: pointedRectangle
+            anchors
+            {
+                horizontalCenter: parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
+            }
+            height: parent.height - 10 * screenScaleFactor // Because of the shadow
+            width: parent.width - 10 * screenScaleFactor // Because of the shadow
+
+            Rectangle
+            {
+                id: point
+                anchors
+                {
+                    horizontalCenter:
+                    {
+                        switch(direction)
+                        {
+                            case "left":
+                                return bloop.left
+                            case "right":
+                                return bloop.right
+                            default:
+                                return bloop.horizontalCenter
+                        }
+                    }
+                    verticalCenter:
+                    {
+                        switch(direction)
+                        {
+                            case "up":
+                                return bloop.top
+                            case "down":
+                                return bloop.bottom
+                            default:
+                                return bloop.verticalCenter
+                        }
+                    }
+                }
+                color: base.color
+                height: 12 * screenScaleFactor
+                transform: Rotation
+                {
+                    angle: 45
+                    origin.x: point.width / 2
+                    origin.y: point.height / 2
+                }
+                width: height
+            }
+
+            Rectangle
+            {
+                id: bloop
+                anchors
+                {
+                    fill: parent
+                    leftMargin:   direction == "left"  ? 8 * screenScaleFactor : 0
+                    rightMargin:  direction == "right" ? 8 * screenScaleFactor : 0
+                    topMargin:    direction == "up"    ? 8 * screenScaleFactor : 0
+                    bottomMargin: direction == "down"  ? 8 * screenScaleFactor : 0
+                }
+                color: base.color
+                width: parent.width
+            }
+        }
+    }
+
+    visible: false
+    onClosed: visible = false
+    onOpened:
+    {
+        // Flip orientation if necessary
+        recalculateOrientation()
+
+        // Fix position if necessary
+        recalculatePosition()
+
+        // Show the pop up
+        visible = true
+    }
+    closePolicy: closeOnClick ? Popup.CloseOnPressOutside : Popup.NoAutoClose
+
+    clip: true
+
+    padding: UM.Theme.getSize("monitor_shadow_radius").width
+    topPadding:    direction == "up"    ? padding + 8 * screenScaleFactor : padding
+    bottomPadding: direction == "down"  ? padding + 8 * screenScaleFactor : padding
+    leftPadding:   direction == "left"  ? padding + 8 * screenScaleFactor : padding
+    rightPadding:  direction == "right" ? padding + 8 * screenScaleFactor : padding
+
+    function recalculatePosition() {
+
+        // Stupid pop-up logic causes the pop-up to resize, so let's compute what it SHOULD be
+        const realWidth = contentItem.implicitWidth + leftPadding + rightPadding
+        const realHeight = contentItem.implicitHeight + topPadding + bottomPadding
+
+        var centered = {
+            x: target.x + target.width / 2 - realWidth / 2,
+            y: target.y + target.height / 2 - realHeight / 2
+        }
+
+        switch(direction)
+        {
+            case "left":
+                x = target.x + target.width
+                y = centered.y
+                break
+            case "right":
+                x = target.x - realWidth
+                y = centered.y
+                break
+            case "up":
+                x = centered.x
+                y = target.y + target.height
+                break
+            case "down":
+                x = centered.x
+                y = target.y - realHeight
+                break
+        }
+    }
+
+    function recalculateOrientation() {
+        var availableSpace
+        var targetPosition = target.mapToItem(monitorFrame, 0, 0)
+
+        // Stupid pop-up logic causes the pop-up to resize, so let's compute what it SHOULD be
+        const realWidth = contentItem.implicitWidth + leftPadding + rightPadding
+        const realHeight = contentItem.implicitHeight + topPadding + bottomPadding
+
+        switch(originalDirection)
+        {
+            case "up":
+                availableSpace = monitorFrame.height - (targetPosition.y + target.height)
+                direction = availableSpace < realHeight ? "down" : originalDirection
+                break
+            case "down":
+                availableSpace = targetPosition.y
+                direction = availableSpace < realHeight ? "up" : originalDirection
+                break
+            case "right":
+                availableSpace = targetPosition.x
+                direction = availableSpace < realWidth ? "left" : originalDirection
+                break
+            case "left":
+                availableSpace = monitorFrame.width - (targetPosition.x + target.width)
+                direction = availableSpace < realWidth ? "right" : originalDirection
+                break
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml

@@ -41,7 +41,7 @@ Item
                 anchors.centerIn: parent
                 height: parent.height
                 width: height
-                color: buildplateIcon.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+                color: buildplateIcon.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
                 radius: Math.floor(height / 2)
             }
 
@@ -49,7 +49,7 @@ Item
             {
                 id: buildplateIcon
                 anchors.centerIn: parent
-                color: "#0a0850" // TODO: Theme! (Standard purple)
+                color: UM.Theme.getColor("monitor_icon_primary")
                 height: parent.height
                 source: "../svg/icons/buildplate.svg"
                 width: height
@@ -60,7 +60,7 @@ Item
         Label
         {
             id: buildplateLabel
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default") // 12pt, regular
             text: buildplate ? buildplate : ""

plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml

@@ -49,12 +49,12 @@ Item
                 GradientStop
                 {
                     position: 0.0
-                    color: "#fff6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background")
                 }
                 GradientStop
                 {
                     position: 1.0
-                    color: "#66f6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background_fade")
                 }
             }
         }
@@ -82,9 +82,9 @@ Item
         onClicked: navigateTo(currentIndex - 1)
         background: Rectangle
         {
-            color: leftButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme!
+            color: leftButton.hovered ? UM.Theme.getColor("monitor_card_hover") : UM.Theme.getColor("monitor_card_background")
             border.width: 1 * screenScaleFactor // TODO: Theme!
-            border.color: "#cccccc" // TODO: Theme!
+            border.color: UM.Theme.getColor("monitor_card_border")
             radius: 2 * screenScaleFactor // TODO: Theme!
         }
         contentItem: Item
@@ -97,7 +97,7 @@ Item
                 height: width // TODO: Theme!
                 sourceSize.width: width // TODO: Theme!
                 sourceSize.height: width // TODO: Theme!
-                color: "#152950" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_text_primary")
                 source: UM.Theme.getIcon("arrow_left")
             }
         }
@@ -161,9 +161,9 @@ Item
         hoverEnabled: true
         background: Rectangle
         {
-            color: rightButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme!
+            color: rightButton.hovered ? UM.Theme.getColor("monitor_card_hover") : UM.Theme.getColor("monitor_card_background")
             border.width: 1 * screenScaleFactor // TODO: Theme!
-            border.color: "#cccccc" // TODO: Theme!
+            border.color: UM.Theme.getColor("monitor_card_border")
             radius: 2 * screenScaleFactor // TODO: Theme!
         }
         contentItem: Item
@@ -176,7 +176,7 @@ Item
                 height: width // TODO: Theme!
                 sourceSize.width: width // TODO: Theme!
                 sourceSize.height: width // TODO: Theme!
-                color: "#152950" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_text_primary")
                 source: UM.Theme.getIcon("arrow_right")
             }
         }
@@ -204,12 +204,12 @@ Item
                 GradientStop
                 {
                     position: 0.0
-                    color: "#66f6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background_fade")
                 }
                 GradientStop
                 {
                     position: 1.0
-                    color: "#fff6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background")
                 }
             }
         }
@@ -238,7 +238,7 @@ Item
             {
                 background: Rectangle
                 {
-                    color: model.index == currentIndex ? "#777777" : "#d8d8d8" // TODO: Theme!
+                    color: model.index == currentIndex ? UM.Theme.getColor("monitor_carousel_dot_current") : UM.Theme.getColor("monitor_carousel_dot")
                     radius: Math.floor(width / 2)
                     width: 12 * screenScaleFactor // TODO: Theme!
                     height: width // TODO: Theme!

plugins/UM3NetworkPrinting/resources/qml/MonitorContextMenu.qml

@@ -0,0 +1,182 @@
+// 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 QtQuick.Dialogs 1.1
+import UM 1.3 as UM
+
+/**
+ * A MonitorInfoBlurb is an extension of the GenericPopUp used to show static information (vs. interactive context
+ * menus). It accepts some text (text), an item to link to to (target), and a specification of which side of the target
+ * to appear on (direction). It also sets the GenericPopUp's color to black, to differentiate itself from a menu.
+ */
+Item
+{
+    property alias target: popUp.target
+
+    property var printJob: null
+
+    GenericPopUp
+    {
+        id: popUp
+
+        // Which way should the pop-up point? Default is up, but will flip when required
+        direction: "up"
+
+        // Use dark grey for info blurbs and white for context menus
+        color: UM.Theme.getColor("monitor_context_menu")
+
+        contentItem: Item
+        {
+            id: contentWrapper
+            implicitWidth: childrenRect.width
+            implicitHeight: menuItems.height + UM.Theme.getSize("default_margin").height
+
+            Column
+            {
+                id: menuItems
+                width: 144 * screenScaleFactor
+
+                anchors
+                {
+                    top: parent.top
+                    topMargin: Math.floor(UM.Theme.getSize("default_margin").height / 2)
+                }
+
+                spacing: Math.floor(UM.Theme.getSize("default_margin").height / 2)
+
+                PrintJobContextMenuItem {
+                    onClicked: {
+                        sendToTopConfirmationDialog.visible = true;
+                        popUp.close();
+                    }
+                    text: catalog.i18nc("@label", "Move to top");
+                    visible: {
+                        if (printJob && (printJob.state == "queued" || printJob.state == "error") && !isAssigned(printJob)) {
+                            if (OutputDevice && OutputDevice.queuedPrintJobs[0]) {
+                                return OutputDevice.queuedPrintJobs[0].key != printJob.key;
+                            }
+                        }
+                        return false;
+                    }
+                }
+
+                PrintJobContextMenuItem {
+                    onClicked: {
+                        deleteConfirmationDialog.visible = true;
+                        popUp.close();
+                    }
+                    text: catalog.i18nc("@label", "Delete");
+                    visible: {
+                        if (!printJob) {
+                            return false;
+                        }
+                        var states = ["queued", "error", "sent_to_printer"];
+                        return states.indexOf(printJob.state) !== -1;
+                    }
+                }
+
+                PrintJobContextMenuItem {
+                    enabled: visible && !(printJob.state == "pausing" || printJob.state == "resuming");
+                    onClicked: {
+                        if (printJob.state == "paused") {
+                            printJob.setState("print");
+                            popUp.close();
+                            return;
+                        }
+                        if (printJob.state == "printing") {
+                            printJob.setState("pause");
+                            popUp.close();
+                            return;
+                        }
+                    }
+                    text: {
+                        if (!printJob) {
+                            return "";
+                        }
+                        switch(printJob.state) {
+                            case "paused":
+                                return catalog.i18nc("@label", "Resume");
+                            case "pausing":
+                                return catalog.i18nc("@label", "Pausing...");
+                            case "resuming":
+                                return catalog.i18nc("@label", "Resuming...");
+                            default:
+                                catalog.i18nc("@label", "Pause");
+                        }
+                    }
+                    visible: {
+                        if (!printJob) {
+                            return false;
+                        }
+                        var states = ["printing", "pausing", "paused", "resuming"];
+                        return states.indexOf(printJob.state) !== -1;
+                    }
+                }
+
+                PrintJobContextMenuItem {
+                    enabled: visible && printJob.state !== "aborting";
+                    onClicked: {
+                        abortConfirmationDialog.visible = true;
+                        popUp.close();
+                    }
+                    text: printJob && printJob.state == "aborting" ? catalog.i18nc("@label", "Aborting...") : catalog.i18nc("@label", "Abort");
+                    visible: {
+                        if (!printJob) {
+                            return false;
+                        }
+                        var states = ["pre_print", "printing", "pausing", "paused", "resuming"];
+                        return states.indexOf(printJob.state) !== -1;
+                    }
+                }
+            }
+        }
+    }
+
+    MessageDialog {
+        id: sendToTopConfirmationDialog
+        Component.onCompleted: visible = false
+        icon: StandardIcon.Warning
+        onYes: OutputDevice.sendJobToTop(printJob.key)
+        standardButtons: StandardButton.Yes | StandardButton.No
+        text: printJob && printJob.name ? 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) : ""
+        title: catalog.i18nc("@window:title", "Move print job to top")
+    }
+
+    MessageDialog {
+        id: deleteConfirmationDialog
+        Component.onCompleted: visible = false
+        icon: StandardIcon.Warning
+        onYes: OutputDevice.deleteJobFromQueue(printJob.key)
+        standardButtons: StandardButton.Yes | StandardButton.No
+        text: printJob && printJob.name ? catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to delete %1?").arg(printJob.name) : ""
+        title: catalog.i18nc("@window:title", "Delete print job")
+    }
+
+    MessageDialog {
+        id: abortConfirmationDialog
+        Component.onCompleted: visible = false
+        icon: StandardIcon.Warning
+        onYes: printJob.setState("abort")
+        standardButtons: StandardButton.Yes | StandardButton.No
+        text: printJob && printJob.name ? catalog.i18nc("@label %1 is the name of a print job.", "Are you sure you want to abort %1?").arg(printJob.name) : ""
+        title: catalog.i18nc("@window:title", "Abort print")
+    }
+
+    function switchPopupState() {
+        popUp.visible ? popUp.close() : popUp.open()
+    }
+    function open() {
+        popUp.open()
+    }
+    function close() {
+        popUp.close()
+    }
+    function isAssigned(job) {
+        if (!job) {
+            return false;
+        }
+        return job.assignedPrinter ? true : false;
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorContextMenuButton.qml

@@ -0,0 +1,31 @@
+// 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
+import Cura 1.0 as Cura
+
+Button
+{
+    id: base
+    background: Rectangle
+    {
+        color: UM.Theme.getColor("viewport_background") // TODO: Theme!
+        height: base.height
+        opacity: base.down || base.hovered ? 1 : 0
+        radius: Math.round(0.5 * width)
+        width: base.width
+    }
+    contentItem: Label {
+        color: UM.Theme.getColor("monitor_text_primary")
+        font.pixelSize: 32 * screenScaleFactor
+        horizontalAlignment: Text.AlignHCenter
+        text: base.text
+        verticalAlignment: Text.AlignVCenter
+    }
+    height: width
+    hoverEnabled: enabled
+    text: "\u22EE" //Unicode Three stacked points.
+    width: 36 * screenScaleFactor // TODO: Theme!
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml

@@ -36,7 +36,7 @@ Item
     MonitorIconExtruder
     {
         id: extruderIcon
-        color: "#eeeeee" // TODO: Theme!
+        color: UM.Theme.getColor("monitor_skeleton_loading")
         position: 0
     }
 
@@ -48,7 +48,7 @@ Item
             left: extruderIcon.right
             leftMargin: 12 * screenScaleFactor // TODO: Theme!
         }
-        color: materialLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+        color: materialLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
         height: 18 * screenScaleFactor // TODO: Theme!
         width: Math.max(materialLabel.contentWidth, 60 * screenScaleFactor) // TODO: Theme!
         radius: 2 * screenScaleFactor // TODO: Theme!
@@ -57,7 +57,7 @@ Item
         {
             id: materialLabel
             
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default") // 12pt, regular
             text: ""
@@ -77,7 +77,7 @@ Item
             left: materialLabelWrapper.left
             bottom: parent.bottom
         }
-        color: printCoreLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+        color: printCoreLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
         height: 18 * screenScaleFactor // TODO: Theme!
         width: Math.max(printCoreLabel.contentWidth, 36 * screenScaleFactor) // TODO: Theme!
         radius: 2 * screenScaleFactor // TODO: Theme!
@@ -86,7 +86,7 @@ Item
         {
             id: printCoreLabel
             
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default_bold") // 12pt, bold
             text: ""

plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml

@@ -39,6 +39,7 @@ Item
     {
         id: positionLabel
         font: UM.Theme.getFont("small")
+        color: UM.Theme.getColor("monitor_text_primary")
         height: Math.round(size / 2)
         horizontalAlignment: Text.AlignHCenter
         text: position + 1

plugins/UM3NetworkPrinting/resources/qml/MonitorInfoBlurb.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
+
+/**
+ * A MonitorInfoBlurb is an extension of the GenericPopUp used to show static information (vs. interactive context
+ * menus). It accepts some text (text), an item to link to to (target), and a specification of which side of the target
+ * to appear on (direction). It also sets the GenericPopUp's color to black, to differentiate itself from a menu.
+ */
+Item
+{
+    property alias text: innerLabel.text
+    property alias target: popUp.target
+    property alias direction: popUp.direction
+
+    GenericPopUp
+    {
+        id: popUp
+
+        // Which way should the pop-up point? Default is up, but will flip when required
+        direction: "up"
+
+        // Use dark grey for info blurbs and white for context menus
+        color: UM.Theme.getColor("monitor_tooltip")
+
+        contentItem: Item
+        {
+            id: contentWrapper
+            implicitWidth: childrenRect.width
+            implicitHeight: innerLabel.contentHeight + 2 * innerLabel.padding
+            Label
+            {
+                id: innerLabel
+                padding: 12 * screenScaleFactor // TODO: Theme!
+                text: ""
+                wrapMode: Text.WordWrap
+                width: 240 * screenScaleFactor // TODO: Theme!
+                color: UM.Theme.getColor("monitor_tooltip_text")
+                font: UM.Theme.getFont("default")
+            }
+        }
+    }
+
+    function open() {
+        popUp.open()
+    }
+    function close() {
+        popUp.close()
+    }
+}