@konfuzio/document-validation-ui 0.1.1

package/src/assets/images/PlusIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="11"
+    height="12"
+    viewBox="0 0 11 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.49935 0.667969C5.13116 0.667969 4.83268 0.966447 4.83268 1.33464V5.33463H0.832682C0.464492 5.33463 0.166016 5.63311 0.166016 6.0013C0.166016 6.36949 0.464493 6.66797 0.832682 6.66797H4.83268V10.668C4.83268 11.0362 5.13116 11.3346 5.49935 11.3346C5.86754 11.3346 6.16602 11.0362 6.16602 10.668V6.66797H10.166C10.5342 6.66797 10.8327 6.36949 10.8327 6.0013C10.8327 5.63311 10.5342 5.33463 10.166 5.33463H6.16602V1.33464C6.16602 0.966446 5.86754 0.667969 5.49935 0.667969Z"
+    />
+  </svg>
+</template>

package/src/assets/images/QuestionMark.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    data-name="Layer 1"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="#dfe0e4"
+      d="M15.33252,9.5A3.5001,3.5001,0,0,0,8.80127,7.75a1.00016,1.00016,0,0,0,1.73242,1A1.50266,1.50266,0,0,1,11.83252,8a1.5,1.5,0,1,1,0,3h-.00244a.94984.94984,0,0,0-.18927.0387,1.03181,1.03181,0,0,0-.19861.04065.98275.98275,0,0,0-.15552.10485,1.00813,1.00813,0,0,0-.162.10975,1.00464,1.00464,0,0,0-.11706.1737.97789.97789,0,0,0-.09668.14417,1.02252,1.02252,0,0,0-.04285.21191A.94847.94847,0,0,0,10.83252,12v1l.00232.01135.0011.49109a1.00016,1.00016,0,0,0,1,.99756h.00244a1.00006,1.00006,0,0,0,.99756-1.00244l-.00153-.66138A3.49363,3.49363,0,0,0,15.33252,9.5Zm-4.20264,6.79A1,1,0,0,0,11.82959,18a1.036,1.036,0,0,0,.71045-.29,1.01517,1.01517,0,0,0,0-1.41992A1.03425,1.03425,0,0,0,11.12988,16.29Z"
+    />
+  </svg>
+</template>

package/src/assets/images/ServerImage.vue

@@ -0,0 +1,63 @@
+<template>
+  <div style="display: flex">
+    <img v-show="loaded" ref="imgTag" :height="height" />
+    <slot v-if="!loaded" />
+  </div>
+</template>
+
+<script>
+import api from "../../api";
+
+export default {
+  name: "ServerImage",
+  props: {
+    imageUrl: {
+      required: true,
+    },
+    height: {
+      default: null,
+    },
+    width: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      loaded: false,
+    };
+  },
+  watch: {
+    imageUrl() {
+      this.loadImage();
+    },
+  },
+  mounted() {
+    this.loadImage();
+  },
+  methods: {
+    loadImage() {
+      if (!this.imageUrl) return;
+      return api.IMG_REQUEST.get(this.imageUrl)
+        .then((response) => {
+          return response.data;
+        })
+        .then((myBlob) => {
+          this.$refs.imgTag.src = URL.createObjectURL(myBlob);
+          if (this.height) {
+            this.$refs.imgTag.style.height = this.height;
+          }
+          if (this.width) {
+            this.$refs.imgTag.style.width = this.width;
+          }
+          this.loaded = true;
+        });
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_thumbnails.scss"
+></style>

package/src/assets/images/SplitLines.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="2"
+    height="59"
+    viewBox="0 0 2 59"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 0.908203V58.2693"
+      stroke="#858C9A"
+      stroke-opacity="0.4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-dasharray="2 2"
+    />
+  </svg>
+</template>

package/src/assets/images/SplitZigZag.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="6"
+    height="57"
+    viewBox="0 0 6 57"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1L5 7.875L1 14.75L5 21.625L1 28.5L5 35.375L1 42.25L5 49.125L1 56"
+      stroke="#2B3545"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/assets/images/StatusImg.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="18"
+    height="10"
+    viewBox="0 0 18 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.0917 1.07462C17.0142 0.996517 16.9221 0.934522 16.8205 0.892214C16.719 0.849907 16.61 0.828125 16.5 0.828125C16.39 0.828125 16.2811 0.849907 16.1795 0.892214C16.078 0.934522 15.9858 0.996517 15.9084 1.07462L10.6667 6.32462L7.0917 2.74129C7.01423 2.66318 6.92206 2.60119 6.82051 2.55888C6.71896 2.51657 6.61004 2.49479 6.50003 2.49479C6.39002 2.49479 6.2811 2.51657 6.17955 2.55888C6.078 2.60119 5.98583 2.66318 5.90836 2.74129L0.908364 7.74129C0.830257 7.81876 0.768262 7.91093 0.725954 8.01248C0.683647 8.11403 0.661865 8.22295 0.661865 8.33296C0.661865 8.44297 0.683647 8.55189 0.725954 8.65344C0.768262 8.75499 0.830257 8.84715 0.908364 8.92462C0.985833 9.00273 1.078 9.06473 1.17955 9.10703C1.2811 9.14934 1.39002 9.17112 1.50003 9.17112C1.61004 9.17112 1.71896 9.14934 1.82051 9.10703C1.92206 9.06473 2.01423 9.00273 2.0917 8.92462L6.50003 4.50796L10.075 8.09129C10.1525 8.1694 10.2447 8.23139 10.3462 8.2737C10.4478 8.31601 10.5567 8.33779 10.6667 8.33779C10.7767 8.33779 10.8856 8.31601 10.9872 8.2737C11.0887 8.23139 11.1809 8.1694 11.2584 8.09129L17.0917 2.25796C17.1698 2.18049 17.2318 2.08832 17.2741 1.98677C17.3164 1.88522 17.3382 1.7763 17.3382 1.66629C17.3382 1.55628 17.3164 1.44736 17.2741 1.34581C17.2318 1.24426 17.1698 1.15209 17.0917 1.07462Z"
+      fill="#2B3545"
+    />
+  </svg>
+</template>

package/src/assets/images/UserIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="#dfe0e4"
+      d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"
+    />
+  </svg>
+</template>

package/src/assets/scss/annotation_details.scss

@@ -0,0 +1,126 @@
+@import "./imports.scss";
+
+.label-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+
+  .annotation-details-icon {
+    display: flex;
+    padding: 0 15px;
+
+    &.animated-ripple {
+      animation: bounce 0.4s 0.1s;
+      transform: scale(1);
+    }
+
+    svg {
+      width: 25px;
+    }
+
+    &.user-icon {
+      padding: 0 18px;
+      svg {
+        width: 20px;
+      }
+    }
+  }
+}
+
+.label-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 100px;
+
+  .label-description {
+    opacity: 0.7;
+    color: $white;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    border-bottom: 1px solid $low-opacity-white;
+    padding-bottom: 8px;
+    word-wrap: break-all;
+    white-space: normal;
+    width: 216px;
+  }
+
+  .accuracy {
+    color: $white;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid $low-opacity-white;
+    padding-bottom: 8px;
+
+    .value {
+      color: $green;
+
+      &.yellow {
+        color: $yellow;
+      }
+
+      &.red {
+        color: $red;
+      }
+    }
+  }
+
+  .revision {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: $white;
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    .annotation-details-icon {
+      display: flex;
+
+      svg {
+        width: 25px;
+      }
+
+      &.user-icon {
+        padding-right: 5px;
+
+        svg {
+          width: 20px;
+        }
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(0.7);
+    opacity: 1;
+  }
+
+  20% {
+    transform: scale(0.9);
+    opacity: 0.7;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+
+  60% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/src/assets/scss/categorize_modal.scss

@@ -0,0 +1,42 @@
+@import "./imports.scss";
+
+.categorize-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;
+        }
+
+        .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;
+        }
+
+        .submit-category {
+            margin-top: 16px;
+            width: 100%;
+        }
+    }
+
+}

package/src/assets/scss/choose_label_set_modal.scss

@@ -0,0 +1,62 @@
+@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%;
+        }
+    }
+
+}

package/src/assets/scss/document_action_bar.scss

@@ -0,0 +1,37 @@
+@import "./imports.scss";
+.action-bar {
+  position: absolute;
+  width: fit-content;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 100;
+
+  .action-bar-elements {
+    background-color: $dark-blue;
+    height: 40px;
+    width: fit-content;
+    padding: 4px 4px 4px 12px;
+    border-radius: 52px;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 9px;
+
+    .action-icon {
+      .icon {
+        display: flex;
+      }
+    }
+
+    .action-text {
+      color: $white;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+}