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
This commit is contained in:
Noelia 2024-03-04 13:41:54 +01:00 committed by Noelia
parent 96d9acf1f0
commit d12641264a
3 changed files with 18 additions and 7 deletions

View File

@ -68,6 +68,7 @@ SettingsContentBase {
toast.saveChangesTooltipVisible: root.dirty toast.saveChangesTooltipVisible: root.dirty
toast.saveChangesTooltipText: qsTr("Invalid changes made to Identity") toast.saveChangesTooltipText: qsTr("Invalid changes made to Identity")
autoscrollWhenDirty: profileTabBar.currentIndex === MyProfileView.Identity
onResetChangesClicked: priv.reset() onResetChangesClicked: priv.reset()

View File

@ -24,10 +24,17 @@ FocusScope {
property alias titleLayout: titleLayout property alias titleLayout: titleLayout
property bool dirty: false 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 property bool saveChangesButtonEnabled: false
readonly property alias toast: settingsDirtyToastMessage 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: readonly property real availableHeight:
scrollView.availableHeight - settingsDirtyToastMessagePlaceholder.height scrollView.availableHeight - settingsDirtyToastMessagePlaceholder.height
- Style.current.bigPadding - Style.current.bigPadding
@ -45,6 +52,7 @@ FocusScope {
id: d id: d
readonly property int titleRowHeight: 56 readonly property int titleRowHeight: 56
readonly property int bottomDirtyToastMargin: 36
} }
MouseArea { MouseArea {
@ -121,14 +129,16 @@ FocusScope {
} }
} }
// Used only when dirty toast visible and in case of autoscrolling configuration
Item { Item {
id: settingsDirtyToastMessagePlaceholder id: settingsDirtyToastMessagePlaceholder
width: settingsDirtyToastMessage.implicitWidth 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 { Behavior on implicitHeight {
enabled: !root.ignoreDirty enabled: root.autoscrollWhenDirty
NumberAnimation { NumberAnimation {
duration: 150 duration: 150
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
@ -141,10 +151,10 @@ FocusScope {
SettingsDirtyToastMessage { SettingsDirtyToastMessage {
id: settingsDirtyToastMessage id: settingsDirtyToastMessage
anchors.bottom: scrollView.bottom anchors.bottom: scrollView.bottom
anchors.bottomMargin: root.ignoreDirty ? 40 : 0 anchors.bottomMargin: d.bottomDirtyToastMargin
anchors.horizontalCenter: scrollView.horizontalCenter anchors.horizontalCenter: scrollView.horizontalCenter
active: root.dirty active: root.dirty
flickable: root.ignoreDirty ? null : scrollView.flickable flickable: root.autoscrollWhenDirty ? scrollView.flickable : null
saveChangesButtonEnabled: root.saveChangesButtonEnabled saveChangesButtonEnabled: root.saveChangesButtonEnabled
onResetChangesClicked: root.resetChangesClicked() onResetChangesClicked: root.resetChangesClicked()
onSaveChangesClicked: root.saveChangesClicked() onSaveChangesClicked: root.saveChangesClicked()

View File

@ -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 ignoreDirty: stackContainer.currentIndex === manageTokensViewIndex && !manageTokensView.advancedTabVisible
dirty: manageTokensView.dirty
saveChangesButtonEnabled: dirty saveChangesButtonEnabled: dirty
toast.type: SettingsDirtyToastMessage.Type.Info toast.type: SettingsDirtyToastMessage.Type.Info
toast.cancelButtonVisible: manageTokensView.advancedTabVisible toast.cancelButtonVisible: manageTokensView.advancedTabVisible