@konfuzio/document-validation-ui 0.1.1

package/src/assets/scss/document_annotations.scss

@@ -0,0 +1,472 @@
+@import "./imports.scss";
+
+.labels-sidebar {
+  font-family: $font-family;
+  flex: 1;
+  background-color: $background;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  .annotations-skeleton {
+    .label-set-name-skeleton {
+      margin: 24px 16px 8px 16px;
+    }
+
+    .label-properties-skeleton {
+      padding-left: 16px;
+      padding-right: 16px;
+      padding-bottom: 8px;
+      width: 100%;
+      box-shadow: 0px 1px 0px $grey-lightest;
+      display: flex;
+      align-items: center;
+
+      .loading-left {
+        display: flex;
+        width: 80%;
+        align-items: center;
+        gap: 10px;
+
+        .label-skeleton {
+          padding-top: 1px;
+          width: 100%;
+        }
+      }
+
+      .loading-right {
+        width: 100%;
+      }
+    }
+  }
+
+  .annotation-set-list {
+    padding-bottom: 16px;
+    overflow: auto;
+    max-height: 100%;
+
+    &.showing-rejected {
+      height: calc(100% - 56px);
+      padding-bottom: 130px;
+    }
+
+    .annotation-set-group {
+      .label-set-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 32px;
+        margin: 24px 16px 8px 16px;
+
+        &:hover {
+          background-color: $background;
+        }
+
+        .label-set-name {
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 20px;
+          color: $text;
+        }
+      }
+    }
+
+    .labels {
+      .label {
+        .label-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid $grey-lightest;
+          min-height: 44px;
+          cursor: pointer;
+
+          .label-group-left {
+            display: flex;
+            flex-direction: row;
+            padding-left: 28px;
+            color: $text-lighter;
+            align-items: center;
+
+            .label-name {
+              padding-left: 20px;
+            }
+          }
+
+          .label-group-right {
+            display: flex;
+            flex-direction: row;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            padding-right: 16px;
+            cursor: default;
+
+            .label-annotations-pending {
+              padding: 0px 8px;
+              border-radius: 20px;
+              background: $grey-lighter-low-opacity;
+              color: $text-lighter;
+              margin-right: 4px;
+            }
+
+            .label-annotations-accepted {
+              padding: 0px 8px;
+              border-radius: 20px;
+              background: $green-low-opacity;
+              color: $green;
+            }
+          }
+        }
+
+        .label-group-annotation-list {
+          background-color: $grey-hover;
+
+          .annotation-row {
+            padding-left: 16px;
+          }
+        }
+
+        .label-name {
+          color: $text-lighter;
+          word-break: break-word;
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 400;
+        }
+
+        .annotation-row {
+          width: 100%;
+          border-bottom: 1px solid $grey-lightest;
+          transition: background-color 0.2s ease-out;
+          display: flex;
+          align-items: center;
+          padding-right: 5px;
+
+          .annotation-row-left {
+            flex: 1;
+            padding-left: 8px;
+            display: flex;
+            align-items: center;
+
+            .label-name {
+              padding: 10px 0;
+              padding-right: 4px;
+            }
+          }
+
+          .annotation-row-right {
+            width: 60%;
+            display: flex;
+            align-items: center;
+
+            .notification {
+              background-color: transparent;
+            }
+
+            .annotation-content {
+              width: 100%;
+              font-size: 14px;
+              line-height: 20px;
+              font-weight: 400;
+
+              .annotation,
+              .empty-annotation {
+                min-height: 36px;
+                display: flex;
+                align-items: center;
+              }
+
+              .loading-container {
+                height: 20px;
+                display: flex;
+                align-items: center;
+
+                .loading-icon-size {
+                  width: 13px;
+                  height: 13px;
+                }
+              }
+
+              .spinner {
+                color: $grey;
+              }
+            }
+
+            .buttons-container {
+              display: flex;
+              gap: 8px;
+            }
+
+            .annotation-value {
+              display: inline-block;
+              color: $text;
+              padding: 0 8px;
+              border: none;
+              background-color: transparent;
+              inline-size: 100%;
+              overflow-wrap: break-word;
+              word-break: break-all;
+
+              &:focus {
+                outline: none;
+              }
+
+              &.label-empty {
+                font-weight: 500;
+                font-size: 14px;
+                color: $primary;
+
+                &.clicked {
+                  font-weight: 400;
+                  color: $text-lighter;
+                }
+              }
+            }
+          }
+
+          .empty-annotation {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+          }
+
+          &:hover,
+          &.selected {
+            background-color: $grey-lightest;
+          }
+
+          &.hovered-empty-labels {
+            background-color: $grey-lightest;
+            outline: 1px solid $grey-detail;
+            margin-bottom: 1px;
+          }
+
+          &.hovered-pending-annotations {
+            background-color: $green-hover-background;
+            outline: 1px solid $green-border;
+            margin-bottom: 1px;
+
+            .annotation-row-right {
+              .annotation-content {
+                .annotation {
+                  min-height: 43px;
+                  padding-top: 1px;
+                }
+              }
+            }
+
+            .annotation-row-left {
+              .annotation-details,
+              .label-name {
+                margin-bottom: -1px;
+              }
+            }
+          }
+
+          &.editing {
+            background-color: $background;
+            border-bottom: 1px solid $primary;
+          }
+
+          .saving-changes {
+            color: $grey;
+          }
+
+          .error-editing {
+            color: $red;
+            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+            transform: translate3d(0, 0, 0);
+          }
+
+          @keyframes shake {
+            10%,
+            90% {
+              transform: translate3d(-1px, 0, 0);
+            }
+
+            20%,
+            80% {
+              transform: translate3d(2px, 0, 0);
+            }
+
+            30%,
+            50%,
+            70% {
+              transform: translate3d(-4px, 0, 0);
+            }
+
+            40%,
+            60% {
+              transform: translate3d(4px, 0, 0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 6px;
+
+    button {
+      height: 32px;
+
+      &.annotation-save-btn,
+      &.annotation-accept-btn {
+        padding: 6px 14px 6px 14px;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        width: auto;
+      }
+
+      &.annotation-cancel-btn {
+        padding-top: 8px !important;
+        border: none !important;
+        background-color: transparent !important;
+        width: 32px;
+      }
+
+      &.accept-all-btn {
+        color: $primary !important;
+        font-size: 14px !important;
+        font-weight: 500;
+        background-color: transparent !important;
+        width: auto;
+
+        &:hover {
+          text-decoration: none !important;
+          color: $primary-dark !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      &.finish-review-btn {
+        height: 40px;
+
+        .icon:last-child:not(:first-child) {
+          margin: 0;
+        }
+      }
+
+      &.text-btn {
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      &.annotation-save-btn {
+        padding: 6px 14px 6px 14px;
+      }
+
+      &.annotation-cancel-btn {
+        border: none !important;
+        background-color: transparent !important;
+        width: 32px;
+      }
+    }
+
+    .reject-decline-button-container {
+      background-color: transparent;
+
+      .reject-decline-btn {
+        color: $grey-blue !important;
+        font-size: 14px !important;
+        font-weight: 500;
+        background-color: transparent !important;
+        width: auto;
+
+        &:hover {
+          text-decoration: none !important;
+          color: $dark-blue !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+  }
+
+  .rejected-labels-list {
+    position: absolute;
+    bottom: 0;
+    background-color: $background;
+    max-height: 120px;
+    width: 100%;
+    border-top: $component-border;
+
+    .rejected-label-container {
+      margin-top: 15px;
+      margin-bottom: 5px;
+
+      .title {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: $dark-blue;
+        padding-bottom: 15px;
+        margin: 0;
+        padding-left: 15px;
+      }
+
+      .rejected-tag-container {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        overflow-y: scroll;
+        max-height: 60px;
+        padding-left: 15px;
+        padding-right: 35px;
+        padding-bottom: 15px;
+
+        .label-name {
+          &.loading {
+            margin-right: 24px;
+          }
+        }
+
+        .tag-loading-container {
+          position: relative;
+          right: 25px;
+          width: 20px;
+
+          .loading-background {
+            padding: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.message {
+  .message-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 15px;
+    font-size: 14px !important;
+  }
+
+  .btn-container {
+    display: flex;
+  }
+}
+
+.hidden {
+  display: none !important;
+}

package/src/assets/scss/document_category.scss

@@ -0,0 +1,80 @@
+@import "./imports.scss";
+
+.category-chooser {
+  cursor: pointer;
+
+  &.split-mode {
+    border: 1px solid $grey-detail;
+    border-radius: 4px;
+    background-color: $white;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  .category-drop-down {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 8px 0 14px;
+    border-right: $component-border;
+
+    &:hover {
+      background-color: $background;
+    }
+
+    .caret-section {
+      padding-top: 5px;
+    }
+
+    .caret,
+    .icon {
+      text-align: center;
+      margin-right: 4px;
+
+      &.split-mode-caret {
+        padding-left: 8px;
+        padding-right: 8px;
+        padding-top: 10px;
+      }
+    }
+
+    .category-info {
+      min-width: 100px;
+      width: 100px;
+      margin-left: 5px;
+      margin-right: 5px;
+
+      .category-title {
+        font-size: 12px;
+        color: $grey;
+      }
+
+      .category-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .left-bar-options {
+        display: flex;
+      }
+
+      .category-drop-down {
+        width: 155px;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        border-right: $component-border;
+
+        .category-info {
+          p {
+            font-size: 12px;
+            color: $grey;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/document_dashboard.scss

@@ -0,0 +1,47 @@
+@import "./imports.scss";
+
+.dashboard {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  .dashboard-viewer {
+    display: flex;
+    min-height: 0;
+    height: 100%;
+
+    &.loading-skeleton {
+      overflow: hidden;
+    }
+
+    .dashboard-document {
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      position: relative;
+      flex: 1;
+      background-image: radial-gradient(#bfc1c9 0.8px, #ededed 0.1px);
+      background-size: 9px 9px;
+    }
+
+    @media print {
+      .dashboard-document {
+        position: static;
+      }
+    }
+  }
+
+  .not-supported {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+  }
+}

package/src/assets/scss/document_dataset_status.scss

@@ -0,0 +1,46 @@
+@import "./imports.scss";
+
+.dataset-status-chooser {
+  margin-left: 0 !important;
+  cursor: pointer;
+
+  .dataset-status-drop-down {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 8px 0 16px;
+
+    .caret,
+    .icon {
+      text-align: center;
+      margin-right: 8px;
+    }
+
+    .dataset-status-info {
+      min-width: 100px;
+      width: 100px;
+
+      .dataset-status-title {
+        font-size: 12px;
+        color: $grey;
+      }
+
+      .dataset-status-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .dropdown-menu-title {
+    padding-left: 16px;
+    font-weight: 400;
+    font-size: 12px;
+  }
+
+  p {
+    font-size: 12px;
+    color: $grey;
+  }
+}