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

Timestamp:

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

Author:

cstephen

Message:

Annotated some UI components

File:

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

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;
 }