@konfuzio/document-validation-ui 0.1.1 → 0.1.2-pre-release-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.1",
+  "version": "0.1.2-pre-release-2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -22,9 +22,9 @@
     "*.js"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^2.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/vue-fontawesome": "^2.0.10",
     "@sentry/tracing": "^6.19.4",
     "@sentry/vue": "^6.2.0",
     "axios": "^0.21.1",

package/src/assets/scss/annotation_details.scss

@@ -47,7 +47,7 @@
     width: 216px;
   }
 
-  .accuracy {
+  .confidence {
     color: $white;
     font-weight: 400;
     font-size: 12px;

package/src/assets/scss/categorize_modal.scss

@@ -1,42 +1,45 @@
 @import "./imports.scss";
 
 .categorize-modal {
-    .content {
-        h3 {
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 28px;
-            color: $grey-darker;
-        }
+  .content {
+    h3 {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 28px;
+      color: $grey-darker;
+    }
 
-        p {
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            color: $text-strong;
-        }
+    p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: $text-strong;
+    }
 
-        .categorize-dropdown {
-            width: 100%;
-            border: 1px solid #D0D5DD;
-            height: 40px;
-            cursor: pointer;
-            box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-            border-radius: 8px;
-            margin-bottom: 4px;
-        }
+    .categorize-dropdown {
+      width: 100%;
+      border: 1px solid #d0d5dd;
+      height: 40px;
+      cursor: pointer;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      margin-bottom: 4px;
 
-        .category-description {
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            color: $text-lighter;
-        }
+      &.dropdown-disabled {
+        cursor: not-allowed;
+      }
+    }
 
-        .submit-category {
-            margin-top: 16px;
-            width: 100%;
-        }
+    .category-description {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: $text-lighter;
     }
 
-}
+    .submit-category {
+      margin-top: 16px;
+      width: 100%;
+    }
+  }
+}

package/src/assets/scss/choose_label_set_modal.scss

@@ -1,62 +1,65 @@
 @import "./imports.scss";
 
 .choose-label-set-modal {
-    .content {
-        h3 {
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 28px;
-            color: $grey-darker;
-        }
-
-        p {
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            color: $text-strong;
-        }
-
-        .label-set-dropdown {
-            width: 100%;
-            border: 1px solid #D0D5DD;
-            height: 40px;
-            cursor: pointer;
-            box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-            border-radius: 8px;
-            margin-bottom: 4px;
-        }
-
-        .labels-list {
-            color: $grey-blue;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 20px;
-
-            .labels-select {
-                padding: 12px;
-                overflow: scroll;
-                height: 154px;
-                border: 1px solid $grey-detail;
-                border-radius: 8px;
-                display: flex;
-                flex-direction: column;
-                gap: 5px;
-            }
-        }
-
-        .next-step-description {
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 18px;
-            text-align: center;
-            color: $dark-blue;
-            margin-top: 8px;
-        }
-
-        .submit-ann-set {
-            margin-top: 16px;
-            width: 100%;
-        }
+  .content {
+    h3 {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 28px;
+      color: $grey-darker;
     }
 
-}
+    p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: $text-strong;
+    }
+
+    .label-set-dropdown {
+      width: 100%;
+      border: 1px solid #d0d5dd;
+      height: 40px;
+      cursor: pointer;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      margin-bottom: 4px;
+
+      &.dropdown-disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    .labels-list {
+      color: $grey-blue;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+
+      .labels-select {
+        padding: 12px;
+        overflow: scroll;
+        height: 154px;
+        border: 1px solid $grey-detail;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+    }
+
+    .next-step-description {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+      color: $dark-blue;
+      margin-top: 8px;
+    }
+
+    .submit-ann-set {
+      margin-top: 16px;
+      width: 100%;
+    }
+  }
+}

package/src/assets/scss/document_page.scss

@@ -5,4 +5,8 @@
   cursor: crosshair;
   width: fit-content;
   margin: 0 auto;
+
+  &.pointer-cursor {
+    cursor: default;
+  }
 }

package/src/assets/scss/document_top_bar.scss

@@ -38,13 +38,6 @@
       display: flex;
       flex: 1;
 
-      .handover {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 16px;
-      }
-
       .read-only-info {
         display: flex;
         align-items: center;

package/src/assets/scss/variables.scss

@@ -254,35 +254,6 @@ button {
     display: flex;
     align-items: center;
   }
-
-  &.handover {
-    position: relative;
-    margin-right: 15px;
-    margin-left: 15px;
-    margin-top: 7px;
-    width: auto;
-
-    .message {
-      display: flex;
-    }
-
-    .message-body {
-      border-radius: 4px;
-      border: 1px solid $red;
-      background-color: $lightest-red !important;
-      color: $red;
-      width: 100%;
-    }
-
-    .media-content {
-      margin: 0px 10px 0px 10px !important;
-    }
-
-    .message-container {
-      justify-content: flex-start !important;
-      text-align: left;
-    }
-  }
 }
 
 .message {
@@ -365,6 +336,16 @@ button {
   &.modal-400 {
     .modal-content {
       max-width: 400px !important;
+
+      .scroll-hidden {
+        overflow: hidden;
+        padding: 0;
+
+        .content {
+          overflow: auto;
+          padding: 20px;
+        }
+      }
     }
   }
 
@@ -479,6 +460,10 @@ button {
 }
 
 .b-tooltip {
+  .tooltip-content {
+    background-color: $dark-blue !important;
+  }
+
   &.left-aligned {
     .tooltip-content {
       left: 10px !important;
@@ -488,6 +473,8 @@ button {
       &::before {
         left: 16px !important;
         right: auto !important;
+        border-top-color: $dark-blue !important;
+        border-bottom-color: $dark-blue !important;
       }
     }
   }
@@ -502,6 +489,13 @@ button {
       &::before {
         right: 16px !important;
         left: auto !important;
+        border-bottom-color: $dark-blue !important;
+      }
+    }
+
+    &.finish-review {
+      .tooltip-content {
+        right: 0 !important;
       }
     }
   }
@@ -526,6 +520,30 @@ button {
       }
     }
   }
+
+  &.bottom-aligned {
+    width: 100%;
+
+    .tooltip-content {
+      &::before {
+        border-bottom-color: $dark-blue !important;
+      }
+
+      a {
+        color: $white;
+        text-decoration: underline;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &.top-aligned {
+    .tooltip-content {
+      &::before {
+        border-top-color: $dark-blue !important;
+      }
+    }
+  }
 }
 
 .rejected-tag-container {

package/src/components/DocumentAnnotations/ActionButtons.vue

@@ -11,7 +11,7 @@
 
     <!-- save button -->
     <b-button
-      v-if="saveBtn && !isLoading"
+      v-if="saveBtn && !isLoading && !publicView"
       :class="[
         'annotation-save-btn text-btn',
         actionBar && 'action-bar-save-btn',
@@ -32,7 +32,7 @@
 
     <!-- decline button -->
     <div
-      v-if="declineBtn && !isLoading && !saveBtn && !cancelBtn"
+      v-if="declineBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
       class="reject-decline-button-container"
     >
       <b-button
@@ -46,7 +46,7 @@
 
     <!-- accept button -->
     <b-button
-      v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn"
+      v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
       class="annotation-accept-btn"
       type="is-primary"
       @click.stop="accept"
@@ -56,7 +56,7 @@
 
     <!-- reject button -->
     <div
-      v-if="showReject && !isLoading && !cancelBtn && !saveBtn"
+      v-if="showReject && !isLoading && !cancelBtn && !saveBtn && !publicView"
       class="reject-decline-button-container"
     >
       <b-button
@@ -107,25 +107,37 @@
     </div>
 
     <!-- finish review button -->
-    <b-button
-      v-if="finishReviewBtn"
-      :class="['finish-review-btn', 'text-btn']"
-      type="is-primary"
-      :disabled="finishDisabled"
-      @click.stop="finishReview"
+    <b-tooltip
+      :active="finishDisabled"
+      position="is-bottom"
+      multilined
+      class="right-aligned finish-review"
     >
-      <span v-if="!isLoading">
-        {{ $t("finish_review") }}
-      </span>
+      <b-button
+        v-if="finishReviewBtn && !publicView"
+        :class="['finish-review-btn', 'text-btn']"
+        type="is-primary"
+        :disabled="finishDisabled"
+        @click.stop="finishReview"
+      >
+        <span v-if="!isLoading">
+          {{ $t("finish_review") }}
+        </span>
 
-      <div v-else>
-        <b-notification :closable="false" :class="['loading-background']">
-          <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
-            <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
-          </b-loading>
-        </b-notification>
-      </div>
-    </b-button>
+        <div v-else>
+          <b-notification :closable="false" :class="['loading-background']">
+            <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+              <b-icon
+                icon="spinner"
+                class="fa-spin loading-icon-size spinner"
+              />
+            </b-loading>
+          </b-notification>
+        </div>
+      </b-button>
+
+      <template #content> {{ $t("disabled_finish_review") }} </template>
+    </b-tooltip>
   </div>
 </template>
 <script>