From e7b60a529059772be8e70e69bc59a2c82038c726 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Wed, 9 Jan 2019 16:29:57 +0100 Subject: [PATCH] Create GenericPopUp.qml Contributes to CL-1165 --- .../resources/qml/GenericPopUp.qml | 202 ++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml diff --git a/plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml b/plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml new file mode 100644 index 0000000000..442de3cd7a --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml @@ -0,0 +1,202 @@ +// 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 side of the target should the contentItem appear on? + * Possible values include: + * - "top" + * - "bottom" + * - "left" + * - "right" + */ + property string direction: "bottom" + + /** + * 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! + + 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 "top": + return bloop.top + case "bottom": + 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 == "top" ? 8 * screenScaleFactor : 0 + bottomMargin: direction == "bottom" ? 8 * screenScaleFactor : 0 + } + color: base.color + width: parent.width + } + } + } + + onClosed: visible = false + onOpened: visible = true + closePolicy: closeOnClick ? Popup.CloseOnPressOutside : Popup.NoAutoClose + enter: Transition + { + NumberAnimation + { + duration: 75 + property: "visible" + } + } + exit: Transition + { + NumberAnimation + { + duration: 75 + property: "visible" + } + } + + clip: true + + padding: UM.Theme.getSize("monitor_shadow_radius").width + topPadding: direction == "top" ? padding + 8 * screenScaleFactor : padding + bottomPadding: direction == "bottom" ? padding + 8 * screenScaleFactor : padding + leftPadding: direction == "left" ? padding + 8 * screenScaleFactor : padding + rightPadding: direction == "right" ? padding + 8 * screenScaleFactor : padding + + transformOrigin: + { + switch(direction) + { + case "top": + return Popup.Top + case "bottom": + return Popup.Bottom + case "right": + return Popup.Right + case "left": + return Popup.Left + default: + direction = "bottom" + return Popup.Bottom + } + } + + visible: false; + + x: + { + switch(direction) + { + case "left": + return target.x + target.width + 4 * screenScaleFactor + case "right": + return target.x - base.width - 4 * screenScaleFactor + default: + return target.x + target.width / 2 - base.width / 2 + } + } + y: + { + switch(direction) + { + case "top": + return target.y + target.height + 4 * screenScaleFactor + case "bottom": + return target.y - base.height - 4 * screenScaleFactor + default: + return target.y + target.height / 2 - base.height / 2 + } + } +}