Changeset 35748


Ignore:
Timestamp:
2021-11-24T16:13:53+13:00 (11 days ago)
Author:
cstephen
Message:

Annotated some UI components

Location:
main/trunk/model-interfaces-dev/atea
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

    r35746 r35748  
    11<template>
    22<div class="edit-page-root">
     3    <div class="control-panel">
     4        <div class="edit-action">
     5            <button class="btn-fab" @click="$emit('closeAndDiscard')" :title="translations.get('EditPage_Discard')">
     6                <span class="material-icons mdi-l">cancel</span>
     7            </button>
     8            <div class="card infotab">
     9                Discard Changes
     10            </div>
     11        </div>
     12
     13        <button class="btn-fab" @click="invert = !invert" :title="translations.get('EditPage_InvertColour')">
     14            <span class="material-icons mdi-l">invert_colors</span>
     15        </button>
     16
     17        <toggle-button v-model="rotateMode" :title="translations.get('EditPage_Rotate')">
     18            <span class="material-icons mdi-l">crop_rotate</span>
     19        </toggle-button>
     20
     21        <button class="btn-fab" @click="closeAndSave" :title="translations.get('EditPage_Save')">
     22            <span class="material-icons mdi-l">save</span>
     23        </button>
     24    </div>
     25
    326    <div class="image-panel">
    427        <div class="image-container" :style="{ transform: transformString }">
     
    2649        </div>
    2750    </div>
    28 
    29     <div class="control-panel">
    30         <button class="btn-fab" @click="$emit('closeAndDiscard')">
    31             <span class="material-icons mdi-l">cancel</span>
    32         </button>
    33 
    34         <button class="btn-fab" @click="closeAndSave">
    35             <span class="material-icons mdi-l">save</span>
    36         </button>
    37 
    38         <button class="btn-fab" @click="invert = !invert">
    39             <span class="material-icons mdi-l">invert_colors</span>
    40         </button>
    41 
    42         <toggle-button v-model="rotateMode">
    43             <span class="material-icons mdi-l">crop_rotate</span>
    44         </toggle-button>
    45     </div>
    4651</div>
    4752</template>
     
    5055.edit-page-root {
    5156    display: grid;
    52     grid-template-columns: 1fr auto;
     57    grid-template-columns: auto 1fr;
    5358    align-items: center;
    5459    justify-items: center;
     
    134139    flex-direction: column;
    135140    justify-content: center;
    136     align-items: center;
     141    align-items: flex-start;
    137142
    138143    padding: 0.5em;
     
    141146
    142147    // background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 10%);
     148}
     149
     150.edit-action {
     151    display: flex;
     152
     153    .card {
     154        margin-left: 1em;
     155        width: 0;
     156        min-width: 0;
     157        display: flex;
     158        align-items: center;
     159        justify-content: center;
     160        padding: 0.2em;
     161        transition-duration: var(--transition-duration);
     162    }
     163
     164    .btn-fab:hover + .card {
     165        min-width: 10em;
     166    }
    143167}
    144168</style>
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

    r35747 r35748  
    2727                    <span>{{ translations.get("MainPage_NewImage") }}</span>
    2828                </button>
    29 
    30                 <div v-if="ocrInProgress" class="progress-bar-container">
    31                     <div class="progress-bar-value progress-bar-indeterminate" />
    32                 </div>
    3329            </div>
    3430
     31            <div class="progress-bar-container ocr-progress">
     32                <div v-if="ocrInProgress" class="progress-bar-value progress-bar-indeterminate" />
     33            </div>
     34
    3535            <img class="image-display" :src="imageUrl" />
    3636
    3737            <div class="text-container">
     38                <span v-if="ocrResult === null && !ocrInProgress" class="text-placeholder">{{ translations.get("MainPage_OCRHint") }}</span>
    3839                <pre>{{ ocrResult }}</pre>
    3940            </div>
     
    102103    display: grid;
    103104    grid-template-columns: 1fr 1fr;
    104     grid-template-rows: auto 1fr;
     105    grid-template-rows: auto auto 1fr;
    105106    height: 100%;
    106107
     
    128129    display: flex;
    129130    gap: 1em;
     131    grid-column-start: span 2;
     132}
     133
     134.ocr-progress {
    130135    grid-column-start: span 2;
    131136}
  • main/trunk/model-interfaces-dev/atea/resources/interface_atea.properties

    r35747 r35748  
    4949atea.ocr.MainPage_EditImage=Edit
    5050atea.ocr.MainPage_NewImage=New
     51atea.ocr.MainPage_OCRHint=Click 'Perform OCR' to begin...
     52
     53atea.ocr.EditPage_Discard=Discard Changes
     54atea.ocr.EditPage_InvertColour=Invert Colours
     55atea.ocr.EditPage_Save=Save Changes
     56atea.ocr.EditPage_Rotate=Rotate
Note: See TracChangeset for help on using the changeset viewer.