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

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -47,7 +47,7 @@
   .annotation-set-list {
     padding-bottom: 16px;
     overflow: auto;
-    max-height: 100%;
+    height: 100vh;
 
     #annotation-filters {
       padding: 16px 16px 0px 16px;
@@ -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/components/DocumentAnnotations/AnnotationDetails.vue

@@ -5,7 +5,13 @@
     :class="[!fromTable && 'left-aligned', 'annotation-details']"
   >
     <div :class="['label-icon', fromTable && 'is-small']">
-      <div v-if="(created(annotation) || edited(annotation)) && !isNegative(annotation) && !publicView">
+      <div
+        v-if="
+          (created(annotation) || edited(annotation)) &&
+          !isNegative(annotation) &&
+          !publicView
+        "
+      >
         <div
           :class="[
             'annotation-details-icon',
@@ -23,7 +29,9 @@
         <NotFoundIcon />
       </div>
       <div
-        v-else-if="notExtracted(annotation) || isNegative(annotation) && !publicView"
+        v-else-if="
+          notExtracted(annotation) || (isNegative(annotation) && !publicView)
+        "
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -202,7 +210,10 @@ export default {
   },
   methods: {
     getText() {
-      if (this.notExtracted(this.annotation) || this.isNegative(this.annotation)) {
+      if (
+        this.notExtracted(this.annotation) ||
+        this.isNegative(this.annotation)
+      ) {
         return this.$t("not_found_in_document");
       } else if (this.created(this.annotation)) {
         return this.getUser(this.annotation)

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;