Changeset 35748 for main

Timestamp:

2021-11-24T16:13:53+13:00 (2 years ago)

Author:

cstephen

Message:

Annotated some UI components

Location:

main/trunk/model-interfaces-dev/atea

Files:

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

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

@@ -1 +1 @@
 <template>
 <div class="edit-page-root">
+    <div class="control-panel">
+        <div class="edit-action">
+            <button class="btn-fab" @click="$emit('closeAndDiscard')" :title="translations.get('EditPage_Discard')">
+                <span class="material-icons mdi-l">cancel</span>
+            </button>
+            <div class="card infotab">
+                Discard Changes
+            </div>
+        </div>
+
+        <button class="btn-fab" @click="invert = !invert" :title="translations.get('EditPage_InvertColour')">
+            <span class="material-icons mdi-l">invert_colors</span>
+        </button>
+
+        <toggle-button v-model="rotateMode" :title="translations.get('EditPage_Rotate')">
+            <span class="material-icons mdi-l">crop_rotate</span>
+        </toggle-button>
+
+        <button class="btn-fab" @click="closeAndSave" :title="translations.get('EditPage_Save')">
+            <span class="material-icons mdi-l">save</span>
+        </button>
+    </div>
+
     <div class="image-panel">
         <div class="image-container" :style="{ transform: transformString }">
@@ -26 +49 @@
         </div>
     </div>
-
-    <div class="control-panel">
-        <button class="btn-fab" @click="$emit('closeAndDiscard')">
-            <span class="material-icons mdi-l">cancel</span>
-        </button>
-
-        <button class="btn-fab" @click="closeAndSave">
-            <span class="material-icons mdi-l">save</span>
-        </button>
-
-        <button class="btn-fab" @click="invert = !invert">
-            <span class="material-icons mdi-l">invert_colors</span>
-        </button>
-
-        <toggle-button v-model="rotateMode">
-            <span class="material-icons mdi-l">crop_rotate</span>
-        </toggle-button>
-    </div>
 </div>
 </template>
@@ -50 +55 @@
 .edit-page-root {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto 1fr;
     align-items: center;
     justify-items: center;
@@ -134 +139 @@
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
 
     padding: 0.5em;
@@ -141 +146 @@
 
     // background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 10%);
+}
+
+.edit-action {
+    display: flex;
+
+    .card {
+        margin-left: 1em;
+        width: 0;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.2em;
+        transition-duration: var(--transition-duration);
+    }
+
+    .btn-fab:hover + .card {
+        min-width: 10em;
+    }
 }
 </style>

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

@@ -27 +27 @@
                     <span>{{ translations.get("MainPage_NewImage") }}</span>
                 </button>
-
-                <div v-if="ocrInProgress" class="progress-bar-container">
-                    <div class="progress-bar-value progress-bar-indeterminate" />
-                </div>
             </div>
 
+            <div class="progress-bar-container ocr-progress">
+                <div v-if="ocrInProgress" class="progress-bar-value progress-bar-indeterminate" />
+            </div>
+
             <img class="image-display" :src="imageUrl" />
 
             <div class="text-container">
+                <span v-if="ocrResult === null && !ocrInProgress" class="text-placeholder">{{ translations.get("MainPage_OCRHint") }}</span>
                 <pre>{{ ocrResult }}</pre>
             </div>
@@ -102 +103 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
     height: 100%;
 
@@ -128 +129 @@
     display: flex;
     gap: 1em;
+    grid-column-start: span 2;
+}
+
+.ocr-progress {
     grid-column-start: span 2;
 }

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

@@ -49 +49 @@
 atea.ocr.MainPage_EditImage=Edit
 atea.ocr.MainPage_NewImage=New
+atea.ocr.MainPage_OCRHint=Click 'Perform OCR' to begin...
+
+atea.ocr.EditPage_Discard=Discard Changes
+atea.ocr.EditPage_InvertColour=Invert Colours
+atea.ocr.EditPage_Save=Save Changes
+atea.ocr.EditPage_Rotate=Rotate