@konfuzio/document-validation-ui 0.1.6-pre-release-2 → 0.1.7-pre-release-1

package/package.json

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

package/src/assets/scss/document_dashboard.scss

@@ -17,7 +17,7 @@
 
     .dashboard-document {
       height: 100%;
-      overflow: visible;
+      overflow: auto;
       position: relative;
       flex: 1;
       background-image: radial-gradient(#bfc1c9 0.8px, #ededed 0.1px);

package/src/assets/scss/document_edit.scss

@@ -5,10 +5,6 @@
   flex: 1;
   background-color: $background;
 
-  &.split-overview-component {
-    min-width: 600px;
-  }
-
   .pages-section {
     width: 100%;
     overflow-y: scroll;
@@ -19,59 +15,55 @@
     justify-content: space-between;
 
     .document-grid {
-      padding: 42px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(138px, 138px));
-      justify-items: center;
-      gap: 20px;
+      padding: 32px;
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: 16px;
 
       .image-section {
         cursor: grab;
-        width: 138px;
-        height: 138px;
         display: flex;
         align-items: center;
+        flex-direction: column;
 
-        .img-container {
-          cursor: pointer;
-
-          .img-thumbnail {
-            border: $component-border;
-            border-radius: 2px;
-          }
+        .top-section {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+        .bottom-section {
+          text-align: center;
+        }
 
-          &.selected {
-            .img-thumbnail {
-              border-color: $text-color;
-              filter: contrast(0.7);
-            }
-          }
+        .page-number {
+          margin-top: 8px;
+          color: $text-lighter;
+          font-size: 12px;
+          line-height: 12px;
+          font-weight: 400;
+          align-self: center;
+          padding-right: 60px;
         }
 
         .splitting-lines {
           cursor: pointer;
           position: relative;
-          height: 130px;
           display: flex;
           align-items: center;
-          padding-bottom: 20px;
+          justify-content: center;
+          width: 54px;
 
           .lines {
             display: flex;
-            margin-left: 6px;
-            padding-right: 19px;
-            width: 25px;
             align-items: center;
             justify-content: center;
           }
 
           .scissors-icon {
             display: none;
-            transform: rotate(-90deg);
+            transform: translate(10%) rotate(-90deg);
             position: absolute;
             z-index: 999;
-            top: 42px;
-            left: 3.3px;
           }
 
           &:hover {
@@ -99,69 +91,8 @@
           .splitting-lines {
             display: none;
           }
-        }
-
-        .image-container {
-          width: fit-content;
-          display: flex;
-          flex-direction: column;
-
-          .thumbnail {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 130px;
-            width: 138px;
-
-            &:hover {
-              .icon-container {
-                display: flex;
-              }
-            }
-
-            .icon-container {
-              position: absolute;
-              width: auto;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 6px;
-              display: none;
-
-              .action-icon {
-                border-radius: 60px;
-                background-color: $text-color;
-                width: 32px;
-                height: 32px;
-                color: $white;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-
-                svg {
-                  height: 21px;
-                }
-              }
-            }
-          }
-
           .page-number {
-            color: $text-lighter;
-            font-size: 12px;
-            line-height: 12px;
-            font-weight: 400;
-            align-self: center;
-            padding-bottom: 10px;
-          }
-
-          &.split-overview {
-            img {
-              height: 30px !important;
-              width: 30px !important;
-            }
+            padding-right: 0px;
           }
         }
       }
@@ -307,6 +238,7 @@
 
   &.split-overview-component {
     background-color: $background;
+    min-width: 600px;
 
     .split-overview-section {
       padding-left: 30px;
@@ -317,6 +249,10 @@
 
     .split-overview {
       margin-top: 20px;
+      img {
+        height: 30px !important;
+        width: 30px !important;
+      }
 
       .back-section {
         display: flex;
@@ -384,33 +320,6 @@
                   }
                 }
               }
-
-              .icon-container {
-                position: absolute;
-                display: none;
-
-                .action-icon {
-                  border-radius: 60px;
-                  background-color: $text-color;
-                  width: 28px;
-                  height: 28px;
-                  color: $white;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  cursor: pointer;
-
-                  svg {
-                    height: 21px;
-                  }
-                }
-              }
-
-              &:hover {
-                .icon-container {
-                  display: flex;
-                }
-              }
             }
           }
 

package/src/assets/scss/document_toolbar.scss

@@ -83,6 +83,14 @@
           background: $low-opacity-white;
           border-radius: 4px;
         }
+        &.zoom-disabled {
+          opacity: 30%;
+
+          &:hover {
+            cursor: not-allowed !important;
+            background: inherit;
+          }
+        }
       }
     }
   }

package/src/assets/scss/edit_page_thumbnail.scss

@@ -0,0 +1,53 @@
+@import "./imports.scss";
+
+.edit-page-thumbnail {
+  width: 80px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 6px;
+
+  .action-checkbox {
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999;
+  }
+
+  .page-thumbnail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: $component-border;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+
+    &.visible {
+      border: 1px solid $text-color;
+    }
+
+    &.selected {
+      border: 2px solid $primary;
+    }
+
+    .action-icon {
+      position: absolute;
+      background-color: $text-color;
+      left: 0;
+      bottom: 0;
+      width: 22px;
+      height: 22px;
+      color: $white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        height: 16px;
+      }
+    }
+  }
+}

package/src/assets/scss/main.scss

@@ -275,6 +275,9 @@ body {
     }
 
     .b-checkbox.checkbox {
+      .check {
+        background-color: $white;
+      }
       &:hover input[type="checkbox"]:not(:disabled) + .check {
         border-color: $primary !important;
       }

package/src/assets/scss/scrolling_document.scss

@@ -6,7 +6,7 @@
   scroll-behavior: smooth;
 
   .scrolling-page {
-    margin: 8px 0;
+    padding: 8px 0;
   }
 
   .loading-page {

package/src/components/{DocumentPage → DocumentAnnotations}/MultiAnnotationTableOverlay.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="multi-ann-table-overlay">
+  <div
+    class="multi-ann-table-overlay"
+    :style="{
+      left: `${left}px`,
+      width: `${width === 0 ? '100%' : `${width}px`}`,
+    }"
+  >
     <b-table
       ref="table"
       class="multi-ann-set-table dark-header header-32"
@@ -94,6 +100,18 @@ export default {
     AnnotationRow,
     DraggableIcon,
   },
+  props: {
+    left: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
   data() {
     return {
       rows: [],

package/src/components/DocumentAnnotations/index.js

@@ -5,3 +5,4 @@ export { default as DocumentLabel } from "./DocumentLabel";
 export { default as AnnotationDetails } from "./AnnotationDetails";
 export { default as ChooseLabelSetModal } from "./ChooseLabelSetModal";
 export { default as AnnotationRow } from "./AnnotationRow";
+export { default as MultiAnnotationTableOverlay } from "./MultiAnnotationTableOverlay";

package/src/components/DocumentCategory.vue

@@ -87,10 +87,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters("category", {
-      categoryName: "categoryName",
-      projectHasSingleCategory: "projectHasSingleCategory",
-    }),
+    ...mapGetters("category", ["categoryName", "projectHasSingleCategory"]),
     ...mapGetters("document", [
       "documentCannotBeEdited",
       "documentHasCorrectAnnotations",
@@ -112,17 +109,8 @@ export default {
     },
   },
   watch: {
-    categories(newValue) {
-      newValue.map((category) => {
-        if (category.project === this.selectedDocument.project) {
-          const found = this.currentProjectCategories.find(
-            (cat) => cat.id === category.id
-          );
-          if (found) return;
-
-          this.currentProjectCategories.push(category);
-        }
-      });
+    categories() {
+      this.handleCategories();
     },
     annotations() {
       this.checkIfDropdownIsDisabled();
@@ -131,31 +119,29 @@ export default {
   },
   mounted() {
     if (this.categories) {
-      this.categories.map((category) => {
-        if (category.project === this.selectedDocument.project) {
-          const found = this.currentProjectCategories.find(
-            (cat) => cat.id === category.id
-          );
-          if (found) return;
-
-          this.currentProjectCategories.push(category);
-        }
-      });
+      this.handleCategories();
     }
 
     if (this.projectHasSingleCategory()) {
       this.tooltipIsShown = true;
     }
-
-    this.$nextTick(() => {
-      this.setTooltipText();
-      this.checkIfDropdownIsDisabled();
-    });
   },
   updated() {
     this.setTooltipText();
+    this.checkIfDropdownIsDisabled();
   },
   methods: {
+    handleCategories() {
+      this.categories.map((category) => {
+        if (category.project === this.selectedDocument.project) {
+          const found = this.currentProjectCategories.find(
+            (cat) => cat.id === category.id
+          );
+          if (found) return;
+          this.currentProjectCategories.push(category);
+        }
+      });
+    },
     checkIfDropdownIsDisabled() {
       if (
         this.projectHasSingleCategory() ||
@@ -218,7 +204,7 @@ export default {
         tooltipText = this.$t("approved_annotations");
       } else if (this.projectHasSingleCategory()) {
         tooltipText = this.$t("single_category_in_project");
-        this.tooltipCloseDelay = 5000;
+        tooltipDelay = 5000;
       }
 
       this.tooltipCloseDelay = tooltipDelay;

package/src/components/DocumentDashboard.vue

@@ -7,6 +7,12 @@
       <DocumentAnnotations v-if="!editMode" ref="annotations" />
       <DocumentEdit v-else ref="editView" />
 
+      <MultiAnnotationTableOverlay
+        v-if="showAnnSetTable"
+        :left="documentContainerLeftPadding"
+        :width="documentContainerWidth"
+      />
+
       <transition name="slide-fade">
         <div
           v-if="showActionError"
@@ -43,7 +49,10 @@ import { mapGetters, mapState } from "vuex";
 import { DocumentTopBar } from "./DocumentTopBar";
 import { ScrollingDocument } from "./DocumentPage";
 import { DocumentThumbnails } from "./DocumentThumbnails";
-import { DocumentAnnotations } from "./DocumentAnnotations";
+import {
+  DocumentAnnotations,
+  MultiAnnotationTableOverlay,
+} from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
@@ -66,11 +75,14 @@ export default {
     NotOptimizedViewportModal,
     DocumentErrorModal,
     SplittingSuggestionsModal,
+    MultiAnnotationTableOverlay,
   },
   data() {
     return {
       resizeObserver: null,
       unwatchSelectedDocument: null,
+      documentContainerLeftPadding: 0,
+      documentContainerWidth: 0,
     };
   },
   computed: {
@@ -80,6 +92,7 @@ export default {
       "optimalResolution",
       "pageWidthScale",
       "currentPage",
+      "showAnnSetTable",
     ]),
     ...mapState("document", [
       "showActionError",
@@ -125,6 +138,10 @@ export default {
       return elementsWidth;
     },
     onDocumentResize() {
+      this.documentContainerLeftPadding =
+        this.$refs.scrollingDocument.$el.getBoundingClientRect().left;
+      this.documentContainerWidth =
+        this.$refs.scrollingDocument.$el.offsetWidth;
       this.$store.dispatch(
         "display/updateOptimalResolution",
         this.$el.offsetWidth

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -4,7 +4,6 @@
       <EditPages
         :splitting-lines="splittingLines"
         :split-suggestions-enabled="splitSuggestionsEnabled"
-        @change-page="changePage"
         @handle-splitting-lines="handleSplittingLines"
         @check-move="checkMove"
         @handle-drag-end="handleDragEnd"

package/src/components/DocumentEdit/EditPageThumbnail.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="edit-page-thumbnail"
+    :tabindex="index"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div
+      :class="[
+        'page-thumbnail',
+        isVisible && 'visible',
+        checkboxValue && 'selected',
+      ]"
+      :style="{
+        transform: `rotate(${rotation}deg)`,
+      }"
+      @click="selectPage()"
+    >
+      <ServerImage :image-url="`${page.thumbnail_url}?${page.updated_at}`">
+        <b-skeleton width="80px" height="80px" />
+      </ServerImage>
+
+      <div v-if="isVisible" class="action-icon">
+        <EyeIcon />
+      </div>
+    </div>
+    <b-checkbox
+      v-show="isHover || checkboxValue"
+      v-model="checkboxValue"
+      class="action-checkbox"
+      @input="checkboxInput"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import ServerImage from "../../assets/images/ServerImage";
+import EyeIcon from "../../assets/images/EyeIcon";
+
+export default {
+  name: "EditPageThumbnail",
+  components: {
+    ServerImage,
+    EyeIcon,
+  },
+  props: {
+    page: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+    index: {
+      required: true,
+      type: Number,
+      default: 0,
+    },
+    rotation: {
+      required: false,
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isHover: false,
+      checkboxValue: false,
+    };
+  },
+  computed: {
+    ...mapState("display", ["currentPage"]),
+    ...mapState("edit", ["selectedPages"]),
+    ...mapGetters("edit", ["isPageSelected"]),
+    isVisible() {
+      return this.currentPage === this.page.number;
+    },
+    isSelected() {
+      return this.isPageSelected(this.page.id) !== undefined;
+    },
+  },
+  watch: {
+    isSelected() {
+      this.checkboxValue = this.isSelected;
+    },
+  },
+  mounted() {
+    this.checkboxValue = this.isSelected;
+  },
+  methods: {
+    selectPage(value = !this.isSelected) {
+      this.changePage();
+      this.$store.dispatch(
+        value ? "edit/selectPage" : "edit/unselectPage",
+        this.page
+      );
+    },
+    checkboxInput(value) {
+      this.selectPage(value);
+    },
+    changePage() {
+      if (!this.isVisible) {
+        this.$store.dispatch(
+          "display/updateCurrentPage",
+          parseInt(this.page.number, 10)
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/edit_page_thumbnail.scss"
+></style>