diff --git a/storybook/main.qml b/storybook/main.qml index c09ae21e5f..20a8906bcb 100644 --- a/storybook/main.qml +++ b/storybook/main.qml @@ -31,6 +31,11 @@ ApplicationWindow { onCurrentPageChanged: testsReRunTimer.restart() + // We need to set Global.applicationWindow to test components that relies on it e.g. ConfirmChangePasswordModal + Component.onCompleted: { + Global.applicationWindow = this; + } + QtObject { id: d diff --git a/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml b/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml index a483ddf6da..390a11287f 100644 --- a/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml +++ b/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml @@ -2,7 +2,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.12 import QtQml.Models 2.15 - +import QtGraphicalEffects 1.15 import utils 1.0 import shared 1.0 @@ -48,11 +48,65 @@ StatusDialog { width: 480 height: 546 - closePolicy: d.passwordChanged || d.dbEncryptionInProgress ? Popup.NoAutoClose : Popup.CloseOnEscape | Popup.CloseOnPressOutside + closePolicy: d.passwordChanged || d.dbEncryptionInProgress + ? Popup.NoAutoClose + : Popup.CloseOnEscape | Popup.CloseOnPressOutside + + // Overwrite the default modal background with a conditioned blurred one + Overlay.modal: Item { + Rectangle { + id: normalBackground + anchors.fill: parent + visible: !blurredBackground.visible + color: Theme.palette.backdropColor + } + Item { + id: blurredBackground + + anchors.fill: parent + visible: d.dbEncryptionInProgress + + // Update the blur source only once, when the modal is shown for performance reasons + onVisibleChanged: { + if (!visible) { + return; + } + blurSource.scheduleUpdate() + } + + GaussianBlur { + visible: true + + anchors.fill: parent + source: blurSource + radius: 16 + samples: 16 + + Rectangle { + anchors.fill: parent + color: normalBackground.color + opacity: 0.6 + } + } + + // Capture the entire main window content to be blurred + ShaderEffectSource { + id: blurSource + + sourceItem: Global.applicationWindow.contentItem + width: Global.applicationWindow.contentItem.width + height: Global.applicationWindow.contentItem.height + + live: false + visible: false + } + } + } Column { anchors.fill: parent spacing: 20 + StatusBaseText { width: parent.width wrapMode: Text.WordWrap @@ -109,7 +163,7 @@ StatusDialog { id: footer leftButtons: ObjectModel { StatusFlatButton { - text: qsTr("Cancel") + text: qsTr("Cancel") visible: !d.dbEncryptionInProgress && !d.passwordChanged textColor: Style.current.darkGrey onClicked: { root.close(); }