import QtQuick 2.14 import QtQuick.Layouts 1.14 import QtGraphicalEffects 1.13 import utils 1.0 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 Rectangle { id: root property bool active: false property bool saveChangesButtonEnabled: false property Flickable flickable: null signal saveChangesClicked signal resetChangesClicked function notifyDirty() { toastAlertAnimation.running = true saveChangesButton.forceActiveFocus() } implicitHeight: toastContent.implicitHeight + toastContent.anchors.topMargin + toastContent.anchors.bottomMargin implicitWidth: toastContent.implicitWidth + toastContent.anchors.leftMargin + toastContent.anchors.rightMargin opacity: active ? 1 : 0 color: Theme.palette.statusToastMessage.backgroundColor radius: 8 border.color: Theme.palette.dangerColor2 border.width: 2 layer.enabled: true layer.effect: DropShadow { verticalOffset: 3 radius: 8 samples: 15 fast: true cached: true color: Theme.palette.dangerColor2 spread: 0.1 } onActiveChanged: { if (!active || !flickable) return; const item = Global.applicationWindow.activeFocusItem; const h1 = this.height; const y1 = this.mapToGlobal(0, 0).y; const h2 = item.height; const y2 = item.mapToGlobal(0, 0).y; const margin = 20; const offset = h2 - (y1 - y2); if (offset <= 0) return; toastFlickAnimation.from = flickable.contentY; toastFlickAnimation.to = flickable.contentY + offset + margin; toastFlickAnimation.start() } NumberAnimation { id: toastFlickAnimation target: root.flickable property: "contentY" duration: 150 easing.type: Easing.InOutQuad } NumberAnimation on border.width { id: toastAlertAnimation from: 0 to: 4 loops: 2 duration: 600 onFinished: root.border.width = 2 } Behavior on opacity { NumberAnimation {} } MouseArea { anchors.fill: parent visible: root.active // This is required not to change cursorShape enabled: root.active hoverEnabled: true } RowLayout { id: toastContent anchors { fill: parent margins: 16 } StatusBaseText { Layout.columnSpan: 2 Layout.fillWidth: true padding: 8 horizontalAlignment: Text.AlignHCenter color: Theme.palette.directColor1 text: qsTr("Changes detected") } StatusButton { text: qsTr("Cancel") enabled: root.active type: StatusBaseButton.Type.Danger onClicked: root.resetChangesClicked() } StatusButton { id: saveChangesButton enabled: root.active && root.saveChangesButtonEnabled text: qsTr("Save changes") onClicked: root.saveChangesClicked() } } }