@konfuzio/document-validation-ui 0.1.26-dev.3 → 0.1.26-dev.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.26-dev.3",
+  "version": "0.1.26-dev.4",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_annotations.scss

@@ -501,6 +501,12 @@
       }
     }
 
+    .button-icon {
+      height: 24px;
+      width: 24px;
+      padding: 6px;
+    }
+
     .accept-decline-container {
       padding-right: 14px;
       display: flex;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -20,7 +20,10 @@
       type="is-primary"
       @click.stop="save"
     >
-      {{ $t("save") }}
+      <span v-if="showText">{{ $t("save") }}</span>
+      <b-tooltip v-else position="is-left" :label="$t('save')">
+        <b-icon icon="floppy-disk" size="small" class="button-icon" />
+      </b-tooltip>
     </b-button>
 
     <!-- cancel button -->
@@ -57,14 +60,20 @@
       class="missing-button-container"
     >
       <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
-        {{ $t("missing_annotation") }}
+        <span v-if="showText">{{ $t("missing_annotation") }}</span>
+        <b-tooltip v-else position="is-left" :label="$t('missing_annotation')">
+          <b-icon icon="xmark" size="small" class="button-icon" />
+        </b-tooltip>
       </b-button>
       <b-button
         type="is-ghost"
         class="search-btn"
         @click.stop="searchInDocument"
       >
-        {{ $t("search_in_document") }}
+        <span v-if="showText">{{ $t("search_in_document") }}</span>
+        <b-tooltip v-else position="is-left" :label="$t('search_in_document')">
+          <b-icon icon="search" size="small" class="button-icon" />
+        </b-tooltip>
       </b-button>
     </div>
 
@@ -75,7 +84,10 @@
       type="is-primary"
       @click.stop="restore"
     >
-      {{ $t("restore") }}
+      <span v-if="showText">{{ $t("restore") }}</span>
+      <b-tooltip v-else position="is-left" :label="$t('restore')">
+        <b-icon icon="trash-arrow-up" size="small" class="button-icon" />
+      </b-tooltip>
     </b-button>
   </div>
 </template>
@@ -83,6 +95,7 @@
 /* Component for showing actions for each annotation row */
 import { mapGetters, mapState } from "vuex";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
+import { TEXT_BREAKPOINT_WIDTH } from "../../constants";
 export default {
   name: "AnnotationActionButtons",
   components: {
@@ -116,6 +129,11 @@ export default {
       required: false,
     },
   },
+  data() {
+    return {
+      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
+    };
+  },
   computed: {
     ...mapState("document", ["publicView", "missingAnnotations"]),
     ...mapGetters("document", ["isDocumentReviewed"]),
@@ -129,7 +147,17 @@ export default {
       );
     },
   },
+  created() {
+    window.addEventListener("resize", this.resize);
+  },
+
+  destroyed() {
+    window.removeEventListener("resize", this.resize);
+  },
   methods: {
+    resize() {
+      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
+    },
     save() {
       this.$emit("save");
     },

package/src/constants.js

@@ -2,4 +2,5 @@ export const PIXEL_RATIO = window.devicePixelRatio || 1;
 export const VIEWPORT_RATIO = 0.98;
 export const MINIMUM_APP_WIDTH = 600;
 export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
+export const TEXT_BREAKPOINT_WIDTH = 1350;
 export const MULTI_ANN_TABLE_FEATURE = false;

package/src/icons.js

@@ -19,6 +19,8 @@ import {
   faArrowRight,
   faDownload,
   faSearch,
+  faTrashArrowUp,
+  faFloppyDisk,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -41,7 +43,9 @@ library.add(
   faArrowLeft,
   faArrowRight,
   faDownload,
-  faSearch
+  faSearch,
+  faTrashArrowUp,
+  faFloppyDisk
 );
 
 export default Icons;