Changeset 35762 for main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

Timestamp:

2021-11-30T14:06:55+13:00 (2 years ago)

Author:

cstephen

Message:

Improve modal dialogs

File:

• main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue (modified) (6 diffs)

main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

@@ -2 +2 @@
 <div class="edit-page-root">
     <div class="control-panel">
-        <edit-action :description="translations.get('EditPage_Discard')" @action="$emit('closeAndDiscard')" icon="cancel" />
-        <edit-action :description="translations.get('EditPage_InvertColour')" @action="invert = !invert" icon="invert_colors" />
+        <edit-action :description="translations.get('EditPage_Discard')" @action="closeAndDiscard" icon="cancel" />
+        <edit-action :description="translations.get('EditPage_InvertColour')" @action="invertColours" icon="invert_colors" />
         <edit-action :description="translations.get('EditPage_Rotate')" v-model="rotateMode" icon="crop_rotate" toggleMode />
         <edit-action :description="translations.get('EditPage_Save')" @action="closeAndSave" icon="save" />
@@ -165 +165 @@
 import { mapState } from "vuex";
 import EditAction from "./EditAction.vue"
+import { ModalController } from "./ModalDialog.vue"
 
 export default {
@@ -181 +182 @@
             rotation: 0,
             rotateMode: false,
-            allowRotation: false
+            allowRotation: false,
+            edited: false
         }
     },
@@ -205 +207 @@
     },
     methods: {
+        closeAndDiscard(force) {
+            if (force || !this.edited) {
+                this.$emit("closeAndDiscard");
+                return;
+            }
+
+            const that = this;
+
+            ModalController.open(
+                this.translations.get("DiscardEditsModal_Title"),
+                this.translations.get("DiscardEditsModal_Description"),
+                [
+                    this.translations.get("DiscardEditsModal_ButtonContinue"),
+                    this.translations.get("DiscardEditsModal_ButtonCancel")
+                ],
+                async function(buttonName) {
+                    if (buttonName === that.translations.get("DiscardEditsModal_ButtonContinue")) {
+                        that.closeAndDiscard(true);
+                    }
+                }
+            );
+        },
         async closeAndSave() {
             const Jimp = await import("jimp/es");
@@ -225 +249 @@
 
             this.$emit("closeAndSave", modifiedBuffer, Jimp.MIME_PNG);
+        },
+
+        invertColours() {
+            this.invert = !this.invert;
+            this.edited = true;
         },
 
@@ -263 +292 @@
                 this.rotation -= 360;
             }
+
+            this.edited = true;
         },
         onDocumentMouseUp() {