Changeset 35749 for main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

Timestamp:

2021-11-25T11:37:01+13:00 (2 years ago)

Author:

cstephen

Message:

Improve editing action buttons

File:

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

main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

@@ -2 +2 @@
 <div class="edit-page-root">
     <div class="control-panel">
-        <div class="edit-action">
-            <button class="btn-fab" @click="$emit('closeAndDiscard')" :title="translations.get('EditPage_Discard')">
-                <span class="material-icons mdi-l">cancel</span>
-            </button>
-            <div class="card infotab">
-                Discard Changes
-            </div>
-        </div>
-
-        <button class="btn-fab" @click="invert = !invert" :title="translations.get('EditPage_InvertColour')">
-            <span class="material-icons mdi-l">invert_colors</span>
-        </button>
-
-        <toggle-button v-model="rotateMode" :title="translations.get('EditPage_Rotate')">
-            <span class="material-icons mdi-l">crop_rotate</span>
-        </toggle-button>
-
-        <button class="btn-fab" @click="closeAndSave" :title="translations.get('EditPage_Save')">
-            <span class="material-icons mdi-l">save</span>
-        </button>
+        <edit-action :description="translations.get('EditPage_Discard')" @action="$emit('closeAndDiscard')" icon="cancel" />
+        <edit-action :description="translations.get('EditPage_InvertColour')" @action="invert = !invert" icon="invert_colors" />
+        <edit-action :description="translations.get('EditPage_Rotate')" v-model="rotateMode" icon="crop_rotate" toggleMode />
+        <edit-action :description="translations.get('EditPage_Save')" @action="closeAndSave" icon="save" />
     </div>
 
@@ -150 +134 @@
 .edit-action {
     display: flex;
-
-    .card {
-        margin-left: 1em;
-        width: 0;
-        min-width: 0;
+    position: relative;
+
+    .infotab {
+        position: absolute;
+        height: 70%;
+        top: 15%;
+        left: 120%;
+
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0.2em;
+        visibility: hidden;
+
+        width: 0;
+        min-width: 0;
+        padding: 0 0.2em;
+
+        white-space: nowrap;
         transition-duration: var(--transition-duration);
     }
 
-    .btn-fab:hover + .card {
+    .btn-fab:hover + .infotab {
+        visibility: visible;
         min-width: 10em;
     }
@@ -171 +165 @@
 import { mapState } from "vuex";
 import Jimp from "jimp/es";
-import ToggleButton from "./ToggleButton.vue"
+import EditAction from "./EditAction.vue"
 
 export default {
     name: "EditPage",
     components: {
-        ToggleButton
+        EditAction
     },
     props: {