Changeset 35762 for main/trunk/model-interfaces-dev

Timestamp:

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

Author:

cstephen

Message:

Improve modal dialogs

Location:

main/trunk/model-interfaces-dev/atea

Files:

• ocr/src/App.vue (modified) (3 diffs)
• ocr/src/components/EditPage.vue (modified) (6 diffs)
• ocr/src/components/MainPage.vue (modified) (10 diffs)
• ocr/src/components/ModalDialog.vue (modified) (5 diffs)
• resources/interface_atea.properties (modified) (1 diff)

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

@@ -9 +9 @@
     <main-page class="content" />
 </div>
+
+<modal-dialog ref="modalDialog" />
 </template>
 
@@ -57 +59 @@
 import { mapState } from "vuex";
 import MainPage from "./components/MainPage.vue"
+import ModalDialog, { ModalController } from "./components/ModalDialog.vue"
 
 export default {
     name: "App",
     components: {
-        MainPage
+        MainPage,
+        ModalDialog
     },
     computed: {
@@ -67 +71 @@
             translations: state => state.translations
         })
+    },
+    mounted() {
+        ModalController.setModal(this.$refs.modalDialog);
     }
 }

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() {

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

@@ -1 +1 @@
 <template>
 <div class="main-page-root">
-    <modal-dialog v-if="modal.show" :title="modal.title" :description="modal.description" :buttons="modal.buttons" @close="onModalClose" />
     <edit-page v-if="showEditor" class="image-editor" :src="imageUrl" :imageBuffer="imageBuffer"
         @closeAndDiscard="onEditorCloseRequested" @closeAndSave="onEditorSave" />
@@ -42 +41 @@
 
             <textarea class="text-container" v-model="ocrResult" :placeholder="translations.get('MainPage_OCRHint')"
-                @input="modalChecks.ocrTextEdited = true" :disabled="!isValidOcrResult" />
+                @input="ocrTextEdited = true" :disabled="!isValidOcrResult || ocrInProgress" />
         </div>
     </div>
@@ -144 +143 @@
 import { mapState } from "vuex";
 import EditPage from "./EditPage.vue";
-import ModalDialog from "./ModalDialog.vue"
+import { ModalController } from "./ModalDialog.vue"
 import OcrService, { OcrOptions } from "../js/OcrService"
 import { log } from "../js/Util";
@@ -153 +152 @@
     name: "MainPage",
     components: {
-        EditPage,
-        ModalDialog
+        EditPage
     },
     data() {
@@ -165 +163 @@
             ocrResult: null,
             showEditor: false,
-            modal: {
-                show: false,
-                title: "",
-                description: "",
-                buttons: []
-            },
-            modalChecks: {
-                ocrTextEdited: false,
-                pendingReset: false
-            }
+            ocrTextEdited: false
         }
     },
@@ -216 +205 @@
 
         async doOcr() {
-            if (this.modalChecks.ocrTextEdited) {
-                this.modal.title = this.translations.get("OCREditedModal_Title");
-                this.modal.description = this.translations.get("OCREditedModal_Description");
-                this.modal.buttons = [
-                    this.translations.get("OCREditedModal_ButtonContinue"),
-                    this.translations.get("OCREditedModal_ButtonCancel")
-                ];
-                this.modal.show = true;
-
-                return;
-            }
-
             try {
+                if (this.ocrTextEdited) {
+                    this.confirmOcr();
+                    return;
+                }
+
                 this.ocrInProgress = true;
 
@@ -243 +225 @@
 
                 this.ocrResult = result[0].text;
-                this.modalChecks.ocrTextEdited = false;
+                this.ocrTextEdited = false;
             }
             catch (ex) {
@@ -253 +235 @@
                 this.ocrInProgress = false;
             }
+        },
+        confirmOcr() {
+            const that = this;
+
+            ModalController.open(
+                this.translations.get("OCREditedModal_Title"),
+                this.translations.get("OCREditedModal_Description"),
+                [
+                    this.translations.get("OCREditedModal_ButtonContinue"),
+                    this.translations.get("OCREditedModal_ButtonCancel")
+                ],
+                async function(buttonName) {
+                    if (buttonName === that.translations.get("OCREditedModal_ButtonContinue")) {
+                        that.ocrTextEdited = false;
+                        await that.doOcr();
+                    }
+                }
+            );
         },
 
@@ -272 +272 @@
         reset(hard) {
             if (!hard) {
-                this.modalChecks.pendingReset = true;
-
-                this.modal.title = this.translations.get("NewImageModal_Title");
-                this.modal.description = this.translations.get("NewImageModal_Description");
-                this.modal.buttons = [
-                    this.translations.get("NewImageModal_ButtonContinue"),
-                    this.translations.get("NewImageModal_ButtonCancel")
-                ];
-                this.modal.show = true;
+                const that = this;
+
+                ModalController.open(
+                    this.translations.get("NewImageModal_Title"),
+                    this.translations.get("NewImageModal_Description"),
+                    [
+                        this.translations.get("NewImageModal_ButtonContinue"),
+                        this.translations.get("NewImageModal_ButtonCancel")
+                    ],
+                    function(buttonName) {
+                        if (buttonName === that.translations.get("NewImageModal_ButtonContinue")) {
+                            that.reset(true);
+                        }
+                    }
+                );
 
                 return;
@@ -290 +296 @@
             this.ocrResult = null;
             this.showEditor = false;
+            this.ocrTextEdited = false;
             this.$refs.fileInput.value = "";
-        },
-
-        async onModalClose(button) {
-            this.modal.show = false;
-
-            if (this.modalChecks.pendingReset) {
-                console.log("reset is indeed pending");
-                if (button === "Continue") {
-                    this.reset(true);
-                }
-
-                this.modalChecks.pendingReset = false;
-            }
-            else if (this.modalChecks.ocrTextEdited) {
-                if (button === "Continue") {
-                    this.modalChecks.ocrTextEdited = false;
-                    await this.doOcr();
-                }
-            }
         },
 

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

@@ -1 +1 @@
 <template>
-<div class="background-cover">
+<div class="background-cover" :class="{ 'hidden': !isShowing }">
     <div class="paper modal">
         <span class="heading3">{{ title }}</span>
@@ -8 +8 @@
 
         <div class="buttons">
-            <button v-for="name in buttons" :key="name" class="btn-primary" @click="$emit('close', name)">{{ name }}</button>
+            <button v-for="name in buttons" :key="name" class="btn-primary" @click="close(name)">{{ name }}</button>
         </div>
     </div>
@@ -19 +19 @@
     height: 100%;
     width: 100%;
+    top: 0;
+    left: 0;
 
     display: flex;
@@ -39 +41 @@
 }
 
+.hidden {
+    display: none;
+}
+
 hr {
     margin: 0.5em 0;
@@ -48 +54 @@
 export default {
     name: "ModalDialog",
-    props: {
-        title: String,
-        description: String,
-        buttons: Array
+    data() {
+        return {
+            id: null,
+            title: null,
+            description: null,
+            buttons: null,
+            callback: null,
+            isShowing: false
+        }
     },
-    emits: [ "close" ]
+    methods: {
+        show(title, description, buttons, callback, id) {
+            this.id = id;
+            this.title = title;
+            this.description = description;
+            this.buttons = buttons;
+            this.callback = callback;
+
+            this.isShowing = true;
+        },
+        close(buttonName) {
+            this.isShowing = false;
+            this.callback(buttonName, this.id);
+        }
+    }
+}
+
+export class ModalController {
+    static modal = null;
+    static queue = [];
+    static waitingOnClose = false;
+
+    static setModal(modal) {
+        this.modal = modal;
+    }
+
+    static open(title, description, buttons, callback, id) {
+        this.queue.push({
+            title: title,
+            description: description,
+            buttons: buttons,
+            callback: callback,
+            id: id
+        });
+
+        this.showModals();
+    }
+
+    static showModals() {
+        if (this.waitingOnClose || this.queue.length === 0) {
+            return;
+        }
+
+        this.waitingOnClose = true;
+        const item = this.queue.shift();
+        const that = this;
+
+        this.modal.show(
+            item.title,
+            item.description,
+            item.buttons,
+            function(buttonName, id) {
+                that.waitingOnClose = false;
+                that.showModals();
+                item.callback(buttonName, id);
+            },
+            item.id
+        );
+    }
 }
 </script>

main/trunk/model-interfaces-dev/atea/resources/interface_atea.properties

@@ -68 +68 @@
 atea.ocr.OCREditedModal_Description=It looks like you've edited the OCR result, and running it again will remove these edits.
 atea.ocr.OCREditedModal_Title=Are you sure?
+
+atea.ocr.DiscardEditsModal_ButtonCancel=Cancel
+atea.ocr.DiscardEditsModal_ButtonContinue=Continue
+atea.ocr.DiscardEditsModal_Description=You have edited the image. Are you sure you want to discard your changes?
+atea.ocr.DiscardEditsModal_Title=Discard Changes?