@konfuzio/document-validation-ui 0.1.59-dev.3 → 0.1.60-dev.0

package/src/assets/scss/edit_page_thumbnail.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .edit-page-thumbnail {
   width: 80px;
@@ -20,27 +20,27 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: variables.$component-border;
+    border: $component-border;
     border-radius: 2px;
     cursor: pointer;
     position: relative;
 
     &.visible {
-      border: 1px solid variables.$text-color;
+      border: 1px solid $text-color;
     }
 
     &.selected {
-      border: 2px solid variables.$primary;
+      border: 2px solid $primary;
     }
 
     .action-icon {
       position: absolute;
-      background-color: variables.$text-color;
+      background-color: $text-color;
       left: 0;
       bottom: 0;
       width: 22px;
       height: 22px;
-      color: variables.$white;
+      color: $white;
       display: flex;
       align-items: center;
       justify-content: center;

package/src/assets/scss/empty_state.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .empty-container {
   width: 100%;
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  font-family: variables.$font-family;
+  font-family: $font-family;
 
   svg {
     align-self: center;
@@ -17,7 +17,7 @@
 
     .title {
       font-size: 16px;
-      color: variables.$text;
+      color: $text;
       font-weight: 500;
       text-align: center;
       margin: 0;
@@ -26,7 +26,7 @@
     .description {
       font-size: 14px;
       line-height: 20px;
-      color: variables.$text-lighter;
+      color: $text-lighter;
       font-weight: 400;
       text-align: center;
     }

package/src/assets/scss/error_page.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .error-page {
   width: 100vw;
@@ -9,6 +9,6 @@
   flex-direction: column;
   gap: 16px;
   .error-icon {
-    color: variables.$red;
+    color: $red;
   }
 }

package/src/assets/scss/extracting_data.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .data-extraction-container {
   display: flex;
@@ -22,14 +22,14 @@
       font-size: 16px;
       font-weight: 500;
       line-height: 24px;
-      color: variables.$text-color;
+      color: $text-color;
       margin-bottom: 3px;
     }
 
     .description {
       font-size: 14px;
       line-height: 20px;
-      color: variables.$grey;
+      color: $grey;
     }
   }
 }

package/src/assets/scss/imports.scss

@@ -0,0 +1 @@
+@import "./variables.scss";

package/src/assets/scss/multi_ann_table_overlay.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .multi-ann-table-overlay {
   position: absolute;
@@ -6,7 +6,7 @@
   height: fit-content;
   z-index: 40;
   width: 100%;
-  background-color: variables.$background;
+  background-color: $background;
 
   .multi-ann-set-table {
     padding-bottom: 6px;
@@ -25,7 +25,7 @@
         }
 
         .delete-action {
-          color: variables.$red;
+          color: $red;
         }
       }
 

package/src/assets/scss/multi_ann_table_popup.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .multi-ann-table-popup {
   position: absolute;

package/src/assets/scss/new_annotation.scss

@@ -1,21 +1,26 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .annotation-popup {
   border-radius: 12px;
-  background-color: variables.$text-color;
+  background-color: $text-color;
   display: flex;
   flex-direction: column;
   gap: 8px;
   position: absolute;
   width: 205px;
+  height: 192px;
   z-index: 40;
-  color: variables.$white;
+  color: $white;
   padding: 8px;
   cursor: default;
 
+  &.small {
+    height: 142px;
+  }
+
   .popup-input {
-    background-color: variables.$text-color;
-    color: variables.$white;
+    background-color: $text-color;
+    color: $white;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -23,24 +28,13 @@
     box-shadow: none;
     padding: 8px;
     border-radius: 12px;
-    border: 1px solid variables.$grey-low-opacity;
+    border: 1px solid $grey-low-opacity;
     width: 100%;
     justify-content: space-between;
     position: relative;
     text-wrap: wrap;
     text-align: left;
 
-    > span {
-      white-space: nowrap;
-      width: 100%;
-      overflow: hidden;
-      margin-right: 24px;
-    }
-
-    .spinner {
-      width: fit-content;
-    }
-
     .caret-icon {
       position: absolute;
       right: 18px;
@@ -49,16 +43,16 @@
   }
 
   .not-selected {
-    color: variables.$grey-detail;
+    color: $grey-detail;
   }
 
   .add-ann-set {
     &.has-border {
-      border-top: 1px solid variables.$grey-detail;
+      border-top: 1px solid $grey-detail;
     }
 
     width: 100%;
-    color: variables.$primary !important;
+    color: $primary !important;
     font-size: 14px;
     line-height: 24px;
     font-weight: 500;
@@ -74,11 +68,11 @@
 
   .annotation-dropdown {
     border-radius: 12px;
-    border: 1px solid variables.$grey-low-opacity !important;
+    border: 1px solid $grey-low-opacity !important;
 
     .button.is-text {
       box-shadow: none !important;
-      color: variables.$white !important;
+      color: $white !important;
       background-color: transparent !important;
       text-decoration: none;
     }
@@ -91,15 +85,15 @@
     gap: 2px;
 
     .button.is-text {
-      color: variables.$white !important;
+      color: $white !important;
       text-decoration: none;
     }
 
     .cancel-button {
-      color: variables.$white;
+      color: $white;
 
       &:hover {
-        border: 1px solid variables.$grey-low-opacity;
+        border: 1px solid $grey-low-opacity;
         background: transparent;
       }
     }

package/src/assets/scss/scrolling_document.scss

@@ -1,4 +1,4 @@
-@use "variables.scss";
+@import "./imports.scss";
 
 .scrolling-document {
   overflow: auto;

package/src/assets/scss/theme.scss

@@ -1,8 +1,6 @@
-@use "variables";
-
 @use "sass:meta";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
-@include meta.load-css("variables.scss");
+@import "./imports.scss";
 
 :root {
   --konfuzio-green: #41af85;
@@ -32,7 +30,8 @@
 }
 
 .dv-ui-theme {
-  font-family: variables.$font-family;
+  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
+  font-family: $font-family;
 
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -42,34 +41,30 @@
   text-size-adjust: 100%;
   box-sizing: border-box;
 
-  & {
-    @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
-  }
-
   h1 {
     font-size: 48px;
-    color: variables.$text-color;
+    color: $text-color;
   }
   h2 {
     font-size: 24px;
-    color: variables.$text-color;
+    color: $text-color;
   }
 
   a {
-    color: variables.$primary;
+    color: $primary;
   }
 
   button {
     &.is-primary {
-      background-color: variables.$primary !important;
-      color: variables.$white !important;
+      background-color: $primary !important;
+      color: $white !important;
 
       &:hover:enabled {
-        filter: variables.$hover-style;
+        filter: $hover-style;
       }
 
       &:disabled {
-        background-color: variables.$grey;
+        background-color: $grey;
       }
     }
 
@@ -78,7 +73,7 @@
 
       &:focus {
         box-shadow: none;
-        outline: 3px solid variables.$grey-dark;
+        outline: 3px solid $grey-dark;
         border: 2px solid;
         margin-right: 1px;
       }
@@ -89,7 +84,7 @@
     }
 
     &.edit-mode-btn[disabled] {
-      border: 1px solid variables.$detail;
+      border: 1px solid $detail;
     }
 
     &[disabled] {
@@ -147,7 +142,7 @@
         .b-slider-thumb-wrapper {
           .tooltip-trigger {
             .b-slider-thumb {
-              background-color: variables.$grey-lightest;
+              background-color: $grey-lightest;
               background-image: none;
             }
           }
@@ -166,7 +161,7 @@
       }
       .b-slider-track {
         cursor: col-resize;
-        color: variables.$white;
+        color: $white;
         background: transparent !important;
       }
       .b-slider-fill {
@@ -199,10 +194,10 @@
 
     .carousel-arrow {
       .icon {
-        color: variables.$primary;
+        color: $primary;
 
         &:hover {
-          border: 1px solid variables.$primary;
+          border: 1px solid $primary;
         }
 
         svg {
@@ -221,8 +216,8 @@
     }
 
     .message-body {
-      background-color: variables.$error-background;
-      color: variables.$white;
+      background-color: $error-background;
+      color: $white;
       font-size: 14px;
       border: 0;
       border-radius: 0%;
@@ -325,22 +320,22 @@
       padding-right: 16px;
 
       &.is-active {
-        background-color: variables.$primary;
+        background-color: $primary;
       }
 
       &.is-disabled {
-        color: variables.$grey-blue !important;
+        color: $grey-blue !important;
       }
     }
 
     &.dropdown-menu-animation {
       a.navbar-item {
-        color: variables.$text-color;
+        color: $text-color;
         font-size: 16px;
         line-height: 24px;
 
         &:hover {
-          color: variables.$primary;
+          color: $primary;
           background: none;
           border: none;
         }
@@ -354,7 +349,7 @@
   .taginput-container {
     &.is-focused {
       box-shadow: none !important;
-      border-color: variables.$primary !important;
+      border-color: $primary !important;
     }
 
     .tag {
@@ -365,7 +360,7 @@
     input {
       box-shadow: none !important;
       &:focus {
-        border-color: variables.$primary;
+        border-color: $primary;
       }
     }
     .control.has-icons-left {
@@ -380,15 +375,15 @@
 
   .b-checkbox.checkbox {
     input[type="checkbox"] + .check {
-      background-color: variables.$white;
+      background-color: $white;
     }
     &:hover input[type="checkbox"]:not(:disabled) + .check {
-      border-color: variables.$primary !important;
+      border-color: $primary !important;
     }
 
     input[type="checkbox"]:checked + .check {
-      border-color: variables.$primary !important;
-      background-color: variables.$primary;
+      border-color: $primary !important;
+      background-color: $primary;
     }
   }
 
@@ -451,16 +446,16 @@
 
           &::before,
           &::after {
-            background-color: variables.$grey;
+            background-color: $grey;
           }
 
           &:hover {
-            background-color: variables.$white;
+            background-color: $white;
           }
         }
 
         .modal-card-body {
-          background: variables.$white;
+          background: $white;
           border-radius: 16px 16px 0 0 !important;
         }
 
@@ -468,7 +463,7 @@
           display: flex;
           justify-content: center;
           border: none;
-          background: variables.$white;
+          background: $white;
           border-radius: 0 0 16px 16px;
         }
       }
@@ -479,7 +474,7 @@
     }
 
     .modal-background {
-      background-color: variables.$full-black;
+      background-color: $full-black;
       opacity: 0.5;
     }
 
@@ -501,7 +496,7 @@
           text-align: left;
           font-weight: 400;
           font-size: 14px;
-          color: variables.$grey-blue;
+          color: $grey-blue;
         }
 
         .modal-card-foot {
@@ -552,7 +547,7 @@
 
   .notices {
     .snackbar {
-      background-color: variables.$text-color;
+      background-color: $text-color;
       min-height: 40px;
 
       .text {
@@ -581,15 +576,15 @@
     align-items: center;
 
     .tooltip-content {
-      background-color: variables.$text-color !important;
+      background-color: $text-color !important;
 
       a {
-        color: variables.$white;
+        color: $white;
         text-decoration: underline;
         font-weight: 500;
       }
       &:before {
-        border-bottom-color: variables.$text-color !important;
+        border-bottom-color: $text-color !important;
       }
     }
 
@@ -602,8 +597,8 @@
         &::before {
           left: 16px !important;
           right: auto !important;
-          border-top-color: variables.$text-color !important;
-          border-bottom-color: variables.$text-color !important;
+          border-top-color: $text-color !important;
+          border-bottom-color: $text-color !important;
         }
       }
     }
@@ -618,7 +613,7 @@
         &::before {
           right: 16px !important;
           left: auto !important;
-          border-bottom-color: variables.$text-color !important;
+          border-bottom-color: $text-color !important;
         }
       }
 
@@ -654,12 +649,12 @@
         font-size: 14px;
         padding: 12px 12px;
         top: 45px;
-        background-color: variables.$text-color;
+        background-color: $text-color;
         border-radius: 4px !important;
 
         &::before {
           top: 17px;
-          border-left-color: variables.$text-color !important;
+          border-left-color: $text-color !important;
         }
       }
     }
@@ -669,7 +664,7 @@
 
       .tooltip-content {
         &::before {
-          border-bottom-color: variables.$text-color !important;
+          border-bottom-color: $text-color !important;
         }
       }
     }
@@ -677,7 +672,7 @@
     &.top-aligned {
       .tooltip-content {
         &::before {
-          border-top-color: variables.$text-color !important;
+          border-top-color: $text-color !important;
         }
       }
     }
@@ -745,7 +740,7 @@
 
       &.split-mode-caret {
         svg {
-          color: variables.$grey;
+          color: $grey;
         }
       }
     }
@@ -755,7 +750,7 @@
       height: 10px;
 
       &.error-icon {
-        color: variables.$white;
+        color: $white;
         padding-right: 20px;
         padding-left: 20px;
 
@@ -809,10 +804,10 @@
     &.dark-header {
       .table {
         thead {
-          background-color: variables.$black !important;
+          background-color: $black !important;
           th {
             font-weight: 400;
-            background-color: variables.$black !important;
+            background-color: $black !important;
           }
         }
       }
@@ -832,7 +827,7 @@
       }
       cursor: text;
       thead {
-        background-color: variables.$purple !important;
+        background-color: $purple !important;
         th {
           font-weight: 500;
           font-size: 10px;
@@ -843,7 +838,7 @@
               margin: 0;
             }
           }
-          background-color: variables.$purple !important;
+          background-color: $purple !important;
           color: white !important;
           vertical-align: middle;
           &[draggable="true"] {
@@ -885,7 +880,7 @@
   .switch {
     input[type="checkbox"] {
       &:checked + .check {
-        background: variables.$primary !important;
+        background: $primary !important;
         box-shadow: none !important;
       }
 
@@ -906,11 +901,4 @@
       }
     }
   }
-  .splitpanes--vertical > .splitpanes__splitter {
-    background: variables.$grey-lighter-low-opacity;
-  }
-
-  .splitpanes--horizontal > .splitpanes__splitter {
-    background: variables.$grey-lighter-low-opacity;
-  }
 }

package/src/assets/scss/variables.scss

@@ -65,5 +65,3 @@ $black: $dark;
 $input-shadow: none;
 $top-bar-height: 56px;
 $component-border: 1px solid $detail;
-
-$documents-list-height: 52px;

package/src/components/App.vue

@@ -20,7 +20,6 @@ import {
 import { Integrations } from "@sentry/tracing";
 import API from "../api";
 import { initKeycloak } from "../utils/keycloak";
-import { debounce } from "../utils/utils";
 
 export default {
   name: "App",
@@ -430,14 +429,20 @@ export default {
       this.$store.dispatch("document/fetchDocument");
     });
 
-    // Stop error resizeObserver
-    const _ = window.ResizeObserver;
-    window.ResizeObserver = class ResizeObserver extends _ {
-      constructor(callback) {
-        callback = debounce(callback, 20);
-        super(callback);
-      }
-    };
+    // Add observer for class added to HTML tag when Buefy modals are mounted
+    // TODO: check defaultModalScroll property in Buefy constructor https://buefy.org/documentation/constructor-options
+    const htmlTag = document.documentElement;
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (mutation.attributeName === "class") {
+          const classToRemove = "is-clipped";
+          if (mutation.target.classList.contains(classToRemove)) {
+            htmlTag.classList.remove(classToRemove);
+          }
+        }
+      });
+    });
+    observer.observe(htmlTag, { attributes: true });
   },
 };
 </script>