Changeset 35749 for main/trunk/model-interfaces-dev
- Timestamp:
- 2021-11-25T11:37:01+13:00 (2 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/ocr/src
- Files:
-
- 1 added
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue
r35748 r35749 2 2 <div class="edit-page-root"> 3 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> 4 <edit-action :description="translations.get('EditPage_Discard')" @action="$emit('closeAndDiscard')" icon="cancel" /> 5 <edit-action :description="translations.get('EditPage_InvertColour')" @action="invert = !invert" icon="invert_colors" /> 6 <edit-action :description="translations.get('EditPage_Rotate')" v-model="rotateMode" icon="crop_rotate" toggleMode /> 7 <edit-action :description="translations.get('EditPage_Save')" @action="closeAndSave" icon="save" /> 24 8 </div> 25 9 … … 150 134 .edit-action { 151 135 display: flex; 152 153 .card { 154 margin-left: 1em; 155 width: 0; 156 min-width: 0; 136 position: relative; 137 138 .infotab { 139 position: absolute; 140 height: 70%; 141 top: 15%; 142 left: 120%; 143 157 144 display: flex; 158 145 align-items: center; 159 146 justify-content: center; 160 padding: 0.2em; 147 visibility: hidden; 148 149 width: 0; 150 min-width: 0; 151 padding: 0 0.2em; 152 153 white-space: nowrap; 161 154 transition-duration: var(--transition-duration); 162 155 } 163 156 164 .btn-fab:hover + .card { 157 .btn-fab:hover + .infotab { 158 visibility: visible; 165 159 min-width: 10em; 166 160 } … … 171 165 import { mapState } from "vuex"; 172 166 import Jimp from "jimp/es"; 173 import ToggleButton from "./ToggleButton.vue"167 import EditAction from "./EditAction.vue" 174 168 175 169 export default { 176 170 name: "EditPage", 177 171 components: { 178 ToggleButton172 EditAction 179 173 }, 180 174 props: { -
main/trunk/model-interfaces-dev/atea/ocr/src/styles/_material.scss
r35734 r35749 63 63 padding: 1.2em; 64 64 border-radius: var(--border-radius); 65 overflow: hidden; 65 66 66 67 background-color: var(--paper-color);
Note:
See TracChangeset
for help on using the changeset viewer.