Changeset 35749


Ignore:
Timestamp:
2021-11-25T11:37:01+13:00 (10 days ago)
Author:
cstephen
Message:

Improve editing action buttons

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  
    22<div class="edit-page-root">
    33    <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" />
    248    </div>
    259
     
    150134.edit-action {
    151135    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
    157144        display: flex;
    158145        align-items: center;
    159146        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;
    161154        transition-duration: var(--transition-duration);
    162155    }
    163156
    164     .btn-fab:hover + .card {
     157    .btn-fab:hover + .infotab {
     158        visibility: visible;
    165159        min-width: 10em;
    166160    }
     
    171165import { mapState } from "vuex";
    172166import Jimp from "jimp/es";
    173 import ToggleButton from "./ToggleButton.vue"
     167import EditAction from "./EditAction.vue"
    174168
    175169export default {
    176170    name: "EditPage",
    177171    components: {
    178         ToggleButton
     172        EditAction
    179173    },
    180174    props: {
  • main/trunk/model-interfaces-dev/atea/ocr/src/styles/_material.scss

    r35734 r35749  
    6363    padding: 1.2em;
    6464    border-radius: var(--border-radius);
     65    overflow: hidden;
    6566   
    6667    background-color: var(--paper-color);
Note: See TracChangeset for help on using the changeset viewer.