@konfuzio/document-validation-ui 0.1.19-dev.1 → 0.1.19-dev.2

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -419,8 +419,8 @@
     button {
       height: 32px;
 
-      &.annotation-save-btn,
-      &.annotation-accept-btn {
+      &.annotation-save-btn {
+        cursor: pointer;
         padding: 6px 14px 6px 14px;
         border-radius: 8px;
         font-weight: 500;
@@ -481,12 +481,33 @@
       }
     }
 
-    .missing-button-container,
-    .decline-button-container {
+    .accept-decline-container {
+      padding-right: 14px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      button {
+        padding: 6px;
+
+        .decline-icon {
+          height: 24px;
+          width: 24px;
+          padding: 6px;
+          color: $red;
+          vertical-align: middle;
+        }
+
+        svg {
+          vertical-align: middle;
+          height: 24px;
+        }
+      }
+    }
+
+    .missing-button-container {
       background-color: transparent;
 
-      .missing-btn,
-      .decline-btn {
+      .missing-btn {
         color: $grey-blue !important;
         font-size: 14px !important;
         font-weight: 500;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -31,61 +31,32 @@
       @click.stop="cancel"
     />
 
-    <!-- decline button -->
-    <div
-      v-if="
-        declineBtn &&
-        !isLoading &&
-        !saveBtn &&
-        !cancelBtn &&
-        !publicView &&
-        !isDocumentReviewed
-      "
-      class="decline-button-container"
-    >
+    <div v-if="showHoverButton" class="accept-decline-container">
       <b-button
-        type="is-ghost"
+        v-if="declineBtn"
         class="decline-btn"
+        :title="$t('decline')"
+        type="is-ghost"
         @click.stop="decline"
       >
-        {{ $t("decline") }}
+        <b-icon icon="xmark" class="decline-icon" />
+      </b-button>
+      <b-button
+        v-if="acceptBtn"
+        class="accept-btn"
+        :title="$t('accept')"
+        type="is-ghost"
+        @click.stop="accept"
+      >
+        <AcceptedCheckMark />
       </b-button>
     </div>
-
-    <!-- accept button -->
-    <b-button
-      v-if="
-        acceptBtn &&
-        !isLoading &&
-        !saveBtn &&
-        !cancelBtn &&
-        !publicView &&
-        !isDocumentReviewed
-      "
-      class="annotation-accept-btn primary-button"
-      type="is-primary"
-      @click.stop="accept"
-    >
-      {{ $t("accept") }}
-    </b-button>
-
     <!-- missing button -->
     <div
-      v-if="
-        showMissingBtn &&
-        !isLoading &&
-        !cancelBtn &&
-        !saveBtn &&
-        !publicView &&
-        !isDocumentReviewed
-      "
+      v-if="showMissingBtn && showHoverButton"
       class="missing-button-container"
     >
-      <b-button
-        type="is-ghost"
-        class="missing-btn"
-        @click.stop="markAsMissing"
-      >
+      <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
         {{ $t("missing_annotation") }}
       </b-button>
     </div>
@@ -104,8 +75,12 @@
 <script>
 /* Component for showing actions for each annotation row */
 import { mapGetters, mapState } from "vuex";
+import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 export default {
   name: "AnnotationActionButtons",
+  components: {
+    AcceptedCheckMark,
+  },
   props: {
     saveBtn: {
       type: Boolean,
@@ -137,6 +112,15 @@ export default {
   computed: {
     ...mapState("document", ["publicView", "missingAnnotations"]),
     ...mapGetters("document", ["isDocumentReviewed"]),
+    showHoverButton() {
+      return (
+        !this.isLoading &&
+        !this.cancelBtn &&
+        !this.saveBtn &&
+        !this.publicView &&
+        !this.isDocumentReviewed
+      );
+    },
   },
   methods: {
     save() {