- Timestamp:
- 2021-11-24T16:13:53+13:00 (2 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue
r35746 r35748 1 1 <template> 2 2 <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 3 26 <div class="image-panel"> 4 27 <div class="image-container" :style="{ transform: transformString }"> … … 26 49 </div> 27 50 </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>46 51 </div> 47 52 </template> … … 50 55 .edit-page-root { 51 56 display: grid; 52 grid-template-columns: 1fr auto;57 grid-template-columns: auto 1fr; 53 58 align-items: center; 54 59 justify-items: center; … … 134 139 flex-direction: column; 135 140 justify-content: center; 136 align-items: center;141 align-items: flex-start; 137 142 138 143 padding: 0.5em; … … 141 146 142 147 // 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 } 143 167 } 144 168 </style>
Note:
See TracChangeset
for help on using the changeset viewer.