From a60ae6a32c07dba52bd0ffb406d8a258ccc8f6ea Mon Sep 17 00:00:00 2001
From: Shrief Gabr <shrief.gabr@qt.io>
Date: Fri, 29 Mar 2024 06:08:20 +0200
Subject: [PATCH] QmlDesigner: Add "Unsaved Changes" indicator to Save button

Task-number: QDS-12237
Change-Id: Ib210ca06e061e82824ff4398604a569af44c2f6d
Reviewed-by: Ali Kianian <ali.kianian@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
---
 .../CollectionDetailsToolbar.qml              | 23 +++++++++++++++++--
 .../imports/StudioTheme/Values.qml            |  1 +
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
index 876e8456371..852341b9d5d 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
@@ -17,6 +17,7 @@ Rectangle {
     required property var model
     required property var backend
     property int selectedRow: -1
+    property bool hasUnsavedChanges: false
 
     implicitHeight: StudioTheme.Values.toolbarHeight
     color: StudioTheme.Values.themeToolbarBackground
@@ -34,6 +35,14 @@ Rectangle {
         fileDialog.reject()
     }
 
+    Connections {
+        target: root.model
+
+        function onDataChanged() {
+            hasUnsavedChanges = true
+        }
+    }
+
     RowLayout {
         id: container
 
@@ -122,8 +131,18 @@ Rectangle {
 
                 buttonIcon: StudioTheme.Constants.save_medium
                 tooltip: qsTr("Save changes")
-                enabled: root.model.collectionName !== ""
-                onClicked: root.model.saveDataStoreCollections()
+                enabled: root.model.collectionName !== "" && root.hasUnsavedChanges
+                onClicked: hasUnsavedChanges = !root.model.saveDataStoreCollections()
+
+                Rectangle {
+                    width: StudioTheme.Values.smallStatusIndicatorDiameter
+                    height: StudioTheme.Values.smallStatusIndicatorDiameter
+                    radius: StudioTheme.Values.smallStatusIndicatorDiameter / 2
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    visible: hasUnsavedChanges
+                    color: StudioTheme.Values.themeIconColorSelected
+                 }
             }
 
             IconButton {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index 59030cd1264..1a04c8ebc30 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -251,6 +251,7 @@ QtObject {
     property real collectionTableVerticalMargin: 10
     property real collectionCellMinimumWidth: 60
     property real collectionCellMinimumHeight: 20
+    property real smallStatusIndicatorDiameter: 6
 
     // NEW NEW NEW
     readonly property int flowMargin: 7