status-desktop/ui/imports/shared/popups/SettingsDirtyToastMessage.qml

185 lines
5.3 KiB
QML
Raw Normal View History

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15
2022-06-22 12:16:21 +00:00
import utils 1.0
import shared.controls 1.0
import shared.panels 1.0
2022-06-22 12:16:21 +00:00
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Rectangle {
id: root
property bool loading: false
2022-06-22 12:16:21 +00:00
property bool active: false
property bool cancelButtonVisible: true
2022-06-22 12:16:21 +00:00
property bool saveChangesButtonEnabled: false
property bool saveForLaterButtonVisible
property alias saveChangesText: saveChangesButton.text
property string saveChangesTooltipText
property alias saveForLaterText: saveForLaterButton.text
property alias cancelChangesText: cancelChangesButton.text
property alias changesDetectedText: changesDetectedTextItem.text
property alias additionalComponent: additionalTextComponent
2022-06-22 12:16:21 +00:00
readonly property string defaultChangesDetectedText: qsTr("Changes detected")
readonly property string defaultSaveChangesText: qsTr("Save changes")
readonly property string defaultSaveForLaterText: qsTr("Save for later")
readonly property string defaultCancelChangesText: qsTr("Cancel")
2022-06-22 12:16:21 +00:00
property Flickable flickable: null
enum Type {
Danger,
Info
}
property int type: SettingsDirtyToastMessage.Type.Danger
2022-06-22 12:16:21 +00:00
signal saveChangesClicked
signal saveForLaterClicked
2022-06-22 12:16:21 +00:00
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: type === SettingsDirtyToastMessage.Type.Danger ? Theme.palette.dangerColor2 : Theme.palette.primaryColor2
2022-06-22 12:16:21 +00:00
border.width: 2
2022-06-22 12:16:21 +00:00
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 3
radius: 8
samples: 15
fast: true
cached: true
color: root.border.color
2022-06-22 12:16:21 +00:00
spread: 0.1
}
onActiveChanged: {
if (!active || !flickable)
return;
const item = Window.window.activeFocusItem;
2022-06-22 12:16:21 +00:00
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 || flickable.contentHeight <= 0)
2022-06-22 12:16:21 +00:00
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
}
ColumnLayout {
2022-06-22 12:16:21 +00:00
id: toastContent
anchors.fill: parent
anchors.margins: Theme.padding
spacing: Theme.padding
RowLayout {
Layout.alignment: Qt.AlignHCenter
StatusBaseText {
id: changesDetectedTextItem
Layout.fillWidth: true
padding: 8
horizontalAlignment: Text.AlignHCenter
color: Theme.palette.directColor1
text: root.defaultChangesDetectedText
}
StatusButton {
id: cancelChangesButton
text: root.defaultCancelChangesText
enabled: !root.loading && root.active
visible: root.cancelButtonVisible
type: StatusBaseButton.Type.Danger
onClicked: root.resetChangesClicked()
}
StatusFlatButton {
id: saveForLaterButton
text: root.defaultSaveForLaterText
loading: root.loading
enabled: root.active && root.saveChangesButtonEnabled
visible: root.saveForLaterButtonVisible
onClicked: root.saveForLaterClicked()
}
StatusButton {
id: saveChangesButton
objectName: "settingsDirtyToastMessageSaveButton"
loading: root.loading
text: root.defaultSaveChangesText
interactive: root.active && root.saveChangesButtonEnabled
tooltip.text: root.saveChangesTooltipText
onClicked: root.saveChangesClicked()
}
2022-06-22 12:16:21 +00:00
}
Separator {
id: separator
2022-06-22 12:16:21 +00:00
Layout.fillWidth: true
visible: additionalTextComponent.visible
2022-06-22 12:16:21 +00:00
}
StatusBaseText {
id: additionalTextComponent
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Theme.tertiaryTextFontSize
visible: false
2022-06-22 12:16:21 +00:00
}
}
}