@konfuzio/document-validation-ui 0.1.14 → 0.1.15

package/src/assets/scss/document_annotations.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.labels-sidebar {
+#labels-sidebar {
   font-family: $font-family;
   flex: 1;
   background-color: $background;
@@ -49,11 +49,6 @@
     overflow: auto;
     max-height: 100%;
 
-    &.showing-rejected {
-      height: calc(100% - 56px);
-      padding-bottom: 130px;
-    }
-
     .annotation-set-group {
       .label-set-header {
         display: flex;
@@ -73,235 +68,292 @@
           color: $text;
         }
       }
-    }
 
-    .labels {
-      .label {
-        .label-group {
+      .ann-set-table {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        cursor: pointer;
+        &:not(:last-child) {
+          padding-bottom: 12px;
+        }
+
+        .ann-set-table-icon {
+          padding: 4px 8px;
+          border-radius: 32px;
+          margin-left: 14px;
+          background: $purple-low-opacity;
           display: flex;
-          flex-direction: row;
-          justify-content: space-between;
+          width: fit-content;
           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;
+          .ann-set-number {
             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;
-            }
+            margin-left: 4px;
           }
         }
-
-        .label-group-annotation-list {
-          background-color: $grey-hover;
-
-          .annotation-row {
-            padding-left: 16px;
-          }
-        }
-
-        .label-name {
-          color: $text-lighter;
-          word-break: break-word;
+        .ann-set-table-label-set-name {
+          margin-left: 8px;
           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;
+      .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-name {
-              padding: 10px 0;
-              padding-right: 4px;
-            }
-          }
-
-          .annotation-row-right {
-            width: 60%;
-            display: flex;
-            align-items: center;
+            .label-group-left {
+              display: flex;
+              flex-direction: row;
+              padding-left: 28px;
+              color: $text-lighter;
+              align-items: center;
 
-            .notification {
-              background-color: transparent;
+              .label-name {
+                padding-left: 20px;
+              }
             }
 
-            .annotation-content {
-              width: 100%;
+            .label-group-right {
+              display: flex;
+              flex-direction: row;
+              font-weight: 400;
               font-size: 14px;
               line-height: 20px;
-              font-weight: 400;
+              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;
+              }
 
-              .annotation,
-              .empty-annotation {
-                min-height: 36px;
-                display: flex;
-                align-items: center;
+              .label-annotations-accepted {
+                padding: 0px 8px;
+                border-radius: 20px;
+                background: $green-low-opacity;
+                color: $green;
               }
+            }
+          }
 
-              .loading-container {
-                height: 20px;
-                display: flex;
-                align-items: center;
+          .label-group-annotation-list {
+            background-color: $grey-hover;
 
-                .loading-icon-size {
-                  width: 13px;
-                  height: 13px;
-                }
+            .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;
+
+              .annotation-icon {
+                height: 40px;
+                padding: 0 15px;
               }
 
-              .spinner {
-                color: $grey;
+              .label-name {
+                padding: 10px 0;
+                padding-right: 4px;
               }
             }
 
-            .buttons-container {
+            .annotation-row-right {
+              width: 60%;
               display: flex;
-              gap: 8px;
-            }
+              align-items: center;
 
-            .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;
+              .notification {
+                background-color: transparent;
               }
 
-              &.label-empty {
-                font-weight: 500;
+              .annotation-content {
+                width: 100%;
                 font-size: 14px;
-                color: $primary;
+                line-height: 20px;
+                font-weight: 400;
+
+                .annotation,
+                .empty-annotation {
+                  min-height: 36px;
+                  display: flex;
+                  align-items: center;
+                }
 
-                &.clicked {
-                  font-weight: 400;
-                  color: $text-lighter;
+                .loading-container {
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+
+                  .loading-icon-size {
+                    width: 13px;
+                    height: 13px;
+                  }
+                }
+
+                .spinner {
+                  color: $grey;
                 }
               }
-            }
-          }
 
-          .empty-annotation {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-          }
+              .buttons-container {
+                display: flex;
+                gap: 8px;
+              }
 
-          &:hover,
-          &.selected {
-            background-color: $grey-lightest;
-          }
+              .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;
+                }
 
-          &.hovered-empty-labels {
-            background-color: $grey-lightest;
-            border-bottom-color: $grey-detail;
-          }
+                &.label-empty {
+                  font-weight: 500;
+                  font-size: 14px;
+                  color: $primary;
 
-          &.hovered-pending-annotations {
-            position: relative;
-            border-bottom-color: $primary;
+                  &.clicked-ann {
+                    font-weight: 400;
+                    color: $text-lighter;
+                  }
+                }
+              }
+            }
 
-            &:before {
-              display: block;
-              content: "";
+            .empty-annotation {
+              display: flex;
               width: 100%;
-              height: 100%;
-              background: $primary;
-              opacity: 0.1;
-              position: absolute;
-              top: 0;
-              left: 0;
+              justify-content: space-between;
             }
-          }
 
-          &.editing {
-            background-color: $background;
-            border-bottom: 1px solid $primary;
-          }
+            &:hover,
+            &.selected {
+              background-color: $grey-lightest;
+            }
 
-          .saving-changes {
-            color: $grey;
-          }
+            &.hovered-empty-labels {
+              background-color: $grey-lightest;
+              border-bottom-color: $grey-detail;
+            }
 
-          .error-editing {
-            color: $red;
-            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-            transform: translate3d(0, 0, 0);
-          }
+            &.hovered-pending-annotations {
+              position: relative;
+              border-bottom-color: $primary;
+
+              &:before {
+                display: block;
+                content: "";
+                width: 100%;
+                height: 100%;
+                background: $primary;
+                opacity: 0.1;
+                position: absolute;
+                top: 0;
+                left: 0;
+              }
+            }
+
+            &.editing {
+              background-color: $background;
+              border-bottom: 1px solid $primary;
+            }
 
-          @keyframes shake {
-            10%,
-            90% {
-              transform: translate3d(-1px, 0, 0);
+            .not-found-text {
+              color: $grey;
+              opacity: 0.3;
             }
 
-            20%,
-            80% {
-              transform: translate3d(2px, 0, 0);
+            .saving-changes {
+              color: $grey;
             }
 
-            30%,
-            50%,
-            70% {
-              transform: translate3d(-4px, 0, 0);
+            .error-editing {
+              color: $red;
+              animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+              transform: translate3d(0, 0, 0);
             }
 
-            40%,
-            60% {
-              transform: translate3d(4px, 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);
+              }
             }
           }
         }
       }
+
+      .no-labels {
+        display: flex;
+        gap: 5px;
+        padding-left: 28px;
+        color: $text-lighter;
+        font-size: 14px;
+        line-height: 20px;
+        min-height: 44px;
+
+        a {
+          color: $white;
+          text-decoration: underline;
+          font-weight: 500;
+        }
+      }
     }
   }
 
@@ -329,7 +381,8 @@
         width: 32px;
       }
 
-      &.accept-all-btn {
+      &.accept-all-btn,
+      &.restore-btn {
         color: $primary !important;
         font-size: 14px !important;
         font-weight: 500;
@@ -373,10 +426,10 @@
       }
     }
 
-    .reject-decline-button-container {
+    .missing-button-container, .decline-button-container {
       background-color: transparent;
 
-      .reject-decline-btn {
+      .missing-btn, .decline-btn {
         color: $grey-blue !important;
         font-size: 14px !important;
         font-weight: 500;
@@ -394,56 +447,16 @@
       }
     }
   }
+}
 
-  .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: $text-color;
-        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;
-          }
-        }
-      }
-    }
+.annotation-row {
+  display: flex;
+  align-items: center;
+  .annotation-icon {
+    display: flex;
+  }
+  .annotation-value {
+    outline: none;
   }
 }
 

package/src/assets/scss/document_category.scss

@@ -2,27 +2,33 @@
 
 .category-chooser {
   cursor: pointer;
+  height: 100%;
 
   &.split-mode {
-    border: 1px solid $grey-detail;
+    border: 1px solid $grey-outline;
     border-radius: 4px;
     background-color: $white;
+
+    &:hover {
+      border-color: $grey-outline-dark;
+      background-color: transparent;
+    }
   }
 
   &.disabled {
     cursor: not-allowed;
   }
 
+  &:not(.split-mode) {
+    .category-drop-down {
+      border-right: $component-border;
+    }
+  }
   .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;
@@ -42,7 +48,6 @@
 
     .category-info {
       min-width: 100px;
-      width: 100px;
       margin-left: 5px;
       margin-right: 5px;
 

package/src/assets/scss/document_dashboard.scss

@@ -17,14 +17,19 @@
 
     .dashboard-document {
       height: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
+      overflow: auto;
       position: relative;
       flex: 1;
       background-image: radial-gradient(#bfc1c9 0.8px, #ededed 0.1px);
       background-size: 9px 9px;
     }
 
+    &.edit-mode {
+      .dashboard-document {
+        flex: 1.5;
+      }
+    }
+
     @media print {
       .dashboard-document {
         position: static;