From d12641264afff495d45aa7bd8074f23ba5e4149e Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Mon, 4 Mar 2024 13:41:54 +0100
Subject: [PATCH] feat(SettingsContentBase): Save changes bubble overlaid by
 default

- Added `autoscrollWhenDirty` property to be able to configure the settings content base as autoscroll mode when dirty toast appears. Otherwise, the toast will be shown overlaid on top of the view content.
- Updated profile view to setup autoscroll on `Identity` tab. Rest of app cases are setup with the overlay mode.

Closes #13517
---
 .../Profile/views/MyProfileView.qml           |  1 +
 .../Profile/views/SettingsContentBase.qml     | 20 ++++++++++++++-----
 .../AppLayouts/Profile/views/WalletView.qml   |  4 ++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml
index c2119b58f6..c30946dbbf 100644
--- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml
+++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml
@@ -68,6 +68,7 @@ SettingsContentBase {
 
     toast.saveChangesTooltipVisible: root.dirty
     toast.saveChangesTooltipText: qsTr("Invalid changes made to Identity")
+    autoscrollWhenDirty: profileTabBar.currentIndex === MyProfileView.Identity
 
     onResetChangesClicked: priv.reset()
 
diff --git a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
index 0b138e41f8..6656566231 100644
--- a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
+++ b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
@@ -24,10 +24,17 @@ FocusScope {
     property alias titleLayout: titleLayout
 
     property bool dirty: false
-    property bool ignoreDirty // ignore dirty state and do not notifyDirty()
+
+    // Used to configure the dirty behaviour of the settings page as a must blocker notification when
+    // user wants to leave the current page or just, ignore the changes done. Default: blocker
+    property bool ignoreDirty: false
+
     property bool saveChangesButtonEnabled: false
     readonly property alias toast: settingsDirtyToastMessage
 
+    // Used to configure the dirty toast behaviour (by default overlay on top of content)
+    property bool autoscrollWhenDirty: false
+
     readonly property real availableHeight:
         scrollView.availableHeight - settingsDirtyToastMessagePlaceholder.height
         - Style.current.bigPadding
@@ -45,6 +52,7 @@ FocusScope {
         id: d
 
         readonly property int titleRowHeight: 56
+        readonly property int bottomDirtyToastMargin: 36
     }
 
     MouseArea {
@@ -121,14 +129,16 @@ FocusScope {
                 }
             }
 
+            // Used only when dirty toast visible and in case of autoscrolling configuration
             Item {
                 id: settingsDirtyToastMessagePlaceholder
 
                 width: settingsDirtyToastMessage.implicitWidth
-                height: settingsDirtyToastMessage.active && !root.ignoreDirty ? settingsDirtyToastMessage.implicitHeight : 0
+                height: settingsDirtyToastMessage.active && root.autoscrollWhenDirty ?
+                            (settingsDirtyToastMessage.implicitHeight + d.bottomDirtyToastMargin) : 0 /*Overlay on top of content*/
 
                 Behavior on implicitHeight {
-                    enabled: !root.ignoreDirty
+                    enabled: root.autoscrollWhenDirty
                     NumberAnimation {
                         duration: 150
                         easing.type: Easing.InOutQuad
@@ -141,10 +151,10 @@ FocusScope {
     SettingsDirtyToastMessage {
         id: settingsDirtyToastMessage
         anchors.bottom: scrollView.bottom
-        anchors.bottomMargin: root.ignoreDirty ? 40 : 0
+        anchors.bottomMargin: d.bottomDirtyToastMargin
         anchors.horizontalCenter: scrollView.horizontalCenter
         active: root.dirty
-        flickable: root.ignoreDirty ? null : scrollView.flickable
+        flickable: root.autoscrollWhenDirty ? scrollView.flickable : null
         saveChangesButtonEnabled: root.saveChangesButtonEnabled
         onResetChangesClicked: root.resetChangesClicked()
         onSaveChangesClicked: root.saveChangesClicked()
diff --git a/ui/app/AppLayouts/Profile/views/WalletView.qml b/ui/app/AppLayouts/Profile/views/WalletView.qml
index 19718d1093..1f1f582aa4 100644
--- a/ui/app/AppLayouts/Profile/views/WalletView.qml
+++ b/ui/app/AppLayouts/Profile/views/WalletView.qml
@@ -57,9 +57,9 @@ SettingsContentBase {
         }
     }
 
-    dirty: manageTokensView.dirty
+    // Dirty state will be just ignored when user leaves manage tokens settings (excluding advanced settings that needs user action)
     ignoreDirty: stackContainer.currentIndex === manageTokensViewIndex && !manageTokensView.advancedTabVisible
-
+    dirty: manageTokensView.dirty
     saveChangesButtonEnabled: dirty
     toast.type: SettingsDirtyToastMessage.Type.Info
     toast.cancelButtonVisible: manageTokensView.advancedTabVisible