diff --git a/plugins/UM3NetworkPrinting/ClusterControlItem.qml b/plugins/UM3NetworkPrinting/ClusterControlItem.qml index da9bf1d457..75c31a7a58 100644 --- a/plugins/UM3NetworkPrinting/ClusterControlItem.qml +++ b/plugins/UM3NetworkPrinting/ClusterControlItem.qml @@ -1,12 +1,13 @@ -import QtQuick 2.2 +import QtQuick 2.3 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.3 +import QtGraphicalEffects 1.0 + import UM 1.3 as UM import Cura 1.0 as Cura - Component { Rectangle @@ -57,15 +58,25 @@ Component { anchors.fill: parent spacing: UM.Theme.getSize("default_margin").height - + displayMarginBeginning: 2 model: OutputDevice.printers delegate: Rectangle { - width: parent.width + width: parent.width - 2 * shadowRadius height: childrenRect.height + UM.Theme.getSize("default_margin").height - + anchors.horizontalCenter: parent.horizontalCenter id: base + property var shadowRadius: 5 property var collapsed: true + + layer.enabled: true + layer.effect: DropShadow + { + radius: base.shadowRadius + verticalOffset: 2 + color: "#3F000000" // 25% shadow + } + Item { id: printerInfo @@ -136,11 +147,13 @@ Component { id: detailedInfo property var printJob: modelData.activePrintJob - visible: !base.collapsed + visible: height == childrenRect.height anchors.top: printerInfo.bottom width: parent.width - height: visible ? childrenRect.height : 0 - + height: !base.collapsed ? childrenRect.height : 0 + opacity: visible ? 1 : 0 + Behavior on height { NumberAnimation { duration: 100 } } + Behavior on opacity { NumberAnimation { duration: 50 } } Rectangle { id: topSpacer diff --git a/plugins/UM3NetworkPrinting/PrintJobInfoBlock.qml b/plugins/UM3NetworkPrinting/PrintJobInfoBlock.qml index d1d3b176bd..ea3aafb5cc 100644 --- a/plugins/UM3NetworkPrinting/PrintJobInfoBlock.qml +++ b/plugins/UM3NetworkPrinting/PrintJobInfoBlock.qml @@ -1,15 +1,16 @@ import QtQuick 2.2 import QtQuick.Controls 2.0 import QtQuick.Controls.Styles 1.4 - +import QtGraphicalEffects 1.0 import UM 1.3 as UM Item { + id: base property var printJob: null - + property var shadowRadius: 5 function getPrettyTime(time) { return OutputDevice.formatDuration(time) @@ -24,7 +25,25 @@ Item Rectangle { id: background - anchors.fill: parent + anchors + { + top: parent.top + topMargin: 3 + left: parent.left + leftMargin: base.shadowRadius + rightMargin: base.shadowRadius + right: parent.right + bottom: parent.bottom + bottomMargin: base.shadowRadius + } + + layer.enabled: true + layer.effect: DropShadow + { + radius: base.shadowRadius + verticalOffset: 2 + color: "#3F000000" // 25% shadow + } Item {