@konfuzio/document-validation-ui 0.1.5-styles-refactor → 0.1.6-multi-ann-set

package/src/assets/scss/document_edit.scss

@@ -7,7 +7,6 @@
 
   &.split-overview-component {
     min-width: 600px;
-    flex: 0;
   }
 
   .pages-section {
@@ -15,6 +14,9 @@
     overflow-y: scroll;
     border-right: $component-border;
     border-left: $component-border;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .document-grid {
       padding: 42px;
@@ -165,85 +167,127 @@
         }
       }
     }
+
+    .info-bar {
+      position: sticky;
+      width: -moz-fit-content;
+      width: fit-content;
+      bottom: 20px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      padding: 10px;
+
+      .split-info-bar {
+        padding: 5px 13px;
+        min-height: 32px;
+        height: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 3px;
+        background-color: $text-color;
+        color: $white;
+        font-weight: 400;
+        font-size: 14px;
+        border-radius: 52px;
+        text-align: center;
+      }
+    }
   }
 
   .sidebar {
     width: 45%;
+    max-width: 300px;
+    min-width: 270px;
     background-color: $background;
 
     .edit-sidebar {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
       text-align: center;
-      height: calc(100% - 60px);
-      gap: 50px;
-
-      .sidebar-header {
-        width: 85%;
-        height: 50%;
-
-        h3 {
-          color: $text-color;
-          font-weight: 600;
-          font-size: 16px;
-          line-height: 24px;
-          padding-bottom: 15px;
-        }
-
-        .description {
-          color: $grey;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-
-          &:last-child {
-            padding-top: 12px;
-          }
-        }
-      }
+      height: 100%;
 
       .buttons-container {
         width: 85%;
         display: flex;
         flex-direction: column;
-        gap: 24px;
         color: $grey-dark;
 
         .pages-selected {
           font-weight: 400;
           font-size: 14px;
+          margin-bottom: 15px;
 
           &.disabled {
             color: $grey;
           }
         }
 
-        .rotate {
+        .edit-buttons {
           display: flex;
           flex-direction: column;
           gap: 8px;
-        }
+          border-bottom: 1px solid $grey-detail;
 
-        .rotate-button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0 !important;
-          white-space: initial;
-          line-height: 1;
-          gap: 5px;
+          .sidebar-buttons {
+            .edit-mode-btn {
+              display: flex;
+              width: 100%;
 
-          .button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
+              .button-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 9px;
+
+                .button-text {
+                  font-size: 14px;
+                  font-weight: 500;
+                  max-width: 70%;
+                }
+              }
+            }
 
-            .button-text {
-              font-size: 16px;
-              max-width: 70%;
+            &:first-child {
+              margin-top: 14px;
             }
+
+            &:last-child {
+              margin-bottom: 14px;
+            }
+          }
+
+          &:first-child {
+            margin-top: 14px;
+          }
+
+          &:last-child {
+            margin-bottom: 14px;
+          }
+        }
+      }
+
+      .smart-split {
+        .switch {
+          .control-label {
+            .switch-text {
+              font-size: 14px;
+              padding-right: 10px;
+              color: $grey-dark;
+              font-weight: 500;
+            }
+          }
+
+          .new-badge {
+            background: linear-gradient(90deg, #c1ff79 0%, #79fff7 100%);
+            border-radius: 36px;
+            font-weight: 700;
+            font-size: 11px;
+            padding: 5px;
+            color: $text-color;
           }
         }
       }

package/src/assets/scss/main.scss

@@ -37,7 +37,7 @@ body {
         }
       }
 
-      &.reject-decline-btn {
+      &.missing-decline-btn {
         font-size: 14px;
         color: $grey-blue !important;
         font-weight: 500;
@@ -56,7 +56,7 @@ body {
         }
       }
 
-      &:not(.is-text, .is-primary, .reject-btn) {
+      &:not(.is-text, .is-primary, .missing-btn) {
         background-color: $white;
         color: $text-color;
       }
@@ -83,7 +83,7 @@ body {
         padding-right: 4px;
       }
 
-      &.reject-all-btn {
+      &.all-missing-btn {
         padding-right: 4px;
       }
 
@@ -109,7 +109,7 @@ body {
         }
       }
 
-      &.rotate-button[disabled] {
+      &.edit-mode-btn[disabled] {
         border: 1px solid $detail;
       }
 
@@ -251,6 +251,10 @@ body {
         background-color: $primary;
       }
 
+      a.dropdown-item.is-disabled {
+        color: $grey-blue !important;
+      }
+
       &.dropdown-menu-animation {
         a.navbar-item {
           color: $text-color;
@@ -309,6 +313,10 @@ body {
           .modal-content {
             .modal-card-body {
               border-radius: 16px 16px 16px 16px !important;
+
+              &.split-modal {
+                padding-bottom: 0;
+              }
             }
           }
         }
@@ -356,6 +364,49 @@ body {
         background-color: $full-black;
         opacity: 0.5;
       }
+
+      &.edit-modal {
+        .modal-content {
+          max-width: 440px !important;
+
+          .header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding-bottom: 15px;
+            font-weight: 500;
+            font-size: 18px;
+          }
+
+          .content {
+            text-align: left;
+            font-weight: 400;
+            font-size: 14px;
+            color: $grey-blue;
+          }
+
+          .modal-card-foot {
+            display: flex;
+            gap: 5px;
+
+            .recommended {
+              font-weight: 600;
+              font-size: 11px;
+              background-color: rgba(255, 255, 255, 0.2);
+              padding: 2px 5px;
+              border-radius: 36px;
+            }
+
+            .button {
+              width: 100%;
+
+              &.is-primary {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
     }
 
     .invisible-parent-modal {
@@ -415,6 +466,8 @@ body {
     }
 
     .b-tooltip {
+      height: 100%;
+      align-items: center;
       .tooltip-content {
         background-color: $text-color !important;
 
@@ -423,11 +476,14 @@ body {
           text-decoration: underline;
           font-weight: 500;
         }
+        &:before {
+          border-bottom-color: $text-color !important;
+        }
       }
 
       &.left-aligned {
         .tooltip-content {
-          left: 10px !important;
+          left: -3px !important;
           transform: none !important;
           padding: 8px 10px !important;
 
@@ -492,6 +548,7 @@ body {
 
       &.bottom-aligned {
         width: 100%;
+        bottom: 10px;
 
         .tooltip-content {
           &::before {
@@ -507,47 +564,9 @@ body {
           }
         }
       }
-    }
-
-    .rejected-tag-container {
-      .tags {
-        margin: 0 !important;
-
-        .tag {
-          margin-bottom: 0 !important;
-          color: $dark;
-          font-weight: 400;
-          background-color: $detail;
-          border-style: none !important;
-
-          &:hover {
-            background-color: $detail !important;
-          }
 
-          &.is-delete {
-            cursor: pointer;
-
-            &::before {
-              height: 1.5px;
-              border-radius: 4px;
-            }
-
-            &::after {
-              width: 1.5px;
-              border-radius: 4px;
-            }
-          }
-        }
-
-        &.loading-active {
-          .is-delete {
-            display: none !important;
-          }
-
-          .tag {
-            border-radius: 4px;
-          }
-        }
+      &.split-tooltip {
+        width: 100%;
       }
     }
 
@@ -619,6 +638,9 @@ body {
     }
 
     .b-table {
+      .table-wrapper {
+        overflow: visible !important;
+      }
       &.full-height {
         height: 100%;
         .table-wrapper {
@@ -628,10 +650,34 @@ body {
           }
         }
       }
-      .table {
+
+      &.dark-header {
+        .table {
+          thead {
+            background-color: $black !important;
+            th {
+              font-weight: 400;
+              background-color: $black !important;
+            }
+          }
+        }
+      }
+
+      &.header-32 {
+        thead {
+          height: 32px;
+        }
+      }
+
+      .table,
+      .table-wrapper {
+        &.has-sticky-header {
+          max-height: 200px;
+          height: fit-content;
+        }
         cursor: text;
         thead {
-          background-color: #7b61ff;
+          background-color: $purple !important;
           font-weight: 500;
           font-size: 10px;
           line-height: 18px;
@@ -642,8 +688,8 @@ body {
                 margin: 0;
               }
             }
-            background-color: #7b61ff;
-            color: white;
+            background-color: $purple !important;
+            color: white !important;
             vertical-align: middle;
             &[draggable="true"] {
               cursor: move;
@@ -679,5 +725,18 @@ body {
         }
       }
     }
+
+    .switch {
+      input[type="checkbox"] {
+        &:checked + .check {
+          background: $primary !important;
+          box-shadow: none !important;
+        }
+
+        &:focus + .check {
+          box-shadow: none !important;
+        }
+      }
+    }
   }
 }

package/src/assets/scss/multi_ann_table_overlay.scss

@@ -0,0 +1,44 @@
+@import "./imports.scss";
+
+.multi-ann-table-overlay {
+  position: absolute;
+  bottom: 0;
+  height: fit-content;
+  z-index: 40;
+  width: 100%;
+  background-color: $background;
+
+  .multi-ann-set-table {
+    padding-bottom: 6px;
+
+    .table-wrapper {
+      overflow: visible;
+      .header-dropdown {
+        cursor: pointer;
+        overflow: visible;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        .icon.arrow {
+          margin-left: 4px;
+        }
+        .draggable {
+          margin-right: 4px;
+          cursor: move;
+        }
+
+        .delete-action {
+          color: $red;
+        }
+      }
+
+      .annotations-table {
+        height: 22px;
+        display: flex;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: visible;
+      }
+    }
+  }
+}

package/src/assets/scss/splitting_confirmation_modal.scss

@@ -0,0 +1,41 @@
+@import "./imports.scss";
+
+.splitting-confirmation-modal {
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 15px;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  .content {
+    text-align: left;
+    font-weight: 400;
+    font-size: 14px;
+    color: $text-color;
+  }
+
+  .modal-card-foot {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .recommended {
+      font-weight: 600;
+      font-size: 11px;
+      background-color: rgba(255, 255, 255, 0.2);
+      padding: 2px 5px;
+      border-radius: 36px;
+    }
+
+    .button {
+      width: 100%;
+
+      &.is-primary {
+        font-weight: 500;
+      }
+    }
+  }
+}

package/src/assets/scss/variables.scss

@@ -37,6 +37,8 @@ $yellow: #ffd600;
 $warning-yellow: #fec84b;
 
 $blue: #2f80ed;
+$purple: #7b61ff;
+$purple-low-opacity: rgba(123, 97, 255, 0.08);
 $text-color: #1a1a1a;
 
 :root {

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="action-buttons">
+    <!-- loading -->
+    <div v-if="isLoading">
+      <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>
+
+    <!-- save button -->
+    <b-button
+      v-if="saveBtn && !isLoading && !publicView"
+      :class="[
+        'annotation-save-btn text-btn',
+        actionBar && 'action-bar-save-btn',
+        actionBar ? 'tertiary-button' : 'primary-button',
+      ]"
+      type="is-primary"
+      @click.stop="save"
+    >
+      {{ $t("save") }}
+    </b-button>
+
+    <!-- cancel button -->
+    <b-button
+      v-if="cancelBtn && !isLoading"
+      class="is-small annotation-cancel-btn"
+      icon-left="xmark"
+      @click.stop="cancel"
+    />
+
+    <!-- decline button -->
+    <div
+      v-if="declineBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
+      class="missing-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-decline-btn decline-btn"
+        @click.stop="decline"
+      >
+        {{ $t("decline") }}
+      </b-button>
+    </div>
+
+    <!-- accept button -->
+    <b-button
+      v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
+      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
+      "
+      class="missing-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-decline-btn missing-btn"
+        @click.stop="markAsMissing"
+      >
+        {{ $t("missing_annotation") }}
+      </b-button>
+    </div>
+
+    <!-- Restore not found annotations -->
+    <b-button
+      v-if="restoreBtn && !isLoading && !publicView"
+      class="restore-btn"
+      type="is-primary"
+      @click.stop="restore"
+    >
+      {{ $t("restore") }}
+    </b-button>
+  </div>
+</template>
+<script>
+/* Component for showing actions for each annotation row */
+import { mapState } from "vuex";
+export default {
+  name: "AnnotationActionButtons",
+  props: {
+    saveBtn: {
+      type: Boolean,
+    },
+    cancelBtn: {
+      type: Boolean,
+    },
+    showMissingBtn: {
+      type: Boolean,
+    },
+    isLoading: {
+      type: Boolean,
+    },
+    acceptBtn: {
+      type: Boolean,
+    },
+    declineBtn: {
+      type: Boolean,
+    },
+    actionBar: {
+      type: Boolean,
+      required: false,
+    },
+    restoreBtn: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      loadingOnFullPage: false,
+    };
+  },
+  computed: {
+    ...mapState("document", ["publicView", "missingAnnotations"]),
+  },
+  methods: {
+    save() {
+      this.$emit("save");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    accept() {
+      this.$emit("accept");
+    },
+    markAsMissing() {
+      this.$emit("mark-as-missing");
+    },
+    decline() {
+      this.$emit("decline");
+    },
+    restore() {
+      this.$emit("restore");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>