@konfuzio/document-validation-ui 0.1.51-dev.0 → 0.1.51-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/LICENSE +661 -21
  2. package/README.md +9 -0
  3. package/dist/css/app.css +1 -1
  4. package/dist/index.html +1 -1
  5. package/dist/js/app.js +1 -1
  6. package/dist/js/app.js.map +1 -1
  7. package/dist/js/chunk-vendors.js +8 -6
  8. package/dist/js/chunk-vendors.js.map +1 -1
  9. package/package.json +2 -1
  10. package/src/assets/scss/annotation_action_buttons.scss +82 -0
  11. package/src/assets/scss/document_annotations.scss +331 -419
  12. package/src/assets/scss/document_dashboard.scss +0 -7
  13. package/src/assets/scss/document_edit.scss +3 -1
  14. package/src/assets/scss/document_top_bar.scss +72 -68
  15. package/src/assets/scss/theme.scss +89 -70
  16. package/src/components/DocumentAnnotations/AnnotationActionButtons.vue +153 -106
  17. package/src/components/DocumentAnnotations/AnnotationRow.vue +72 -19
  18. package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue +4 -4
  19. package/src/components/DocumentAnnotations/DocumentAnnotations.vue +7 -3
  20. package/src/components/DocumentAnnotations/DocumentLabel.vue +42 -59
  21. package/src/components/DocumentAnnotations/ExtractingData.vue +1 -7
  22. package/src/components/DocumentCategory.vue +0 -5
  23. package/src/components/DocumentDashboard.vue +12 -3
  24. package/src/components/DocumentEdit/EditSidebar.vue +1 -1
  25. package/src/components/DocumentPage/DocumentPage.vue +2 -1
  26. package/src/components/DocumentPage/EditAnnotation.vue +21 -15
  27. package/src/components/DocumentPage/ScrollingDocument.vue +1 -13
  28. package/src/components/DocumentTopBar/DocumentTopBar.vue +42 -40
  29. package/src/icons.js +6 -0
  30. package/src/locales/de.json +3 -2
  31. package/src/locales/en.json +3 -2
  32. package/src/locales/es.json +3 -2
  33. package/src/main.js +2 -0
  34. package/src/store/display.js +12 -10
  35. package/src/store/document.js +3 -0
  36. package/src/components/DocumentPage/ActionBar.vue +0 -48
package/src/assets/scss/document_annotations.scss CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  #document-annotations {
4
4
  font-family: $font-family;
5
- flex: 1;
6
5
  background-color: $background;
7
6
  position: relative;
8
7
  display: flex;
@@ -68,514 +67,427 @@
68
67
  }
69
68
  }
70
69
 
71
- .annotation-set-group {
72
- .label-set-header {
73
- cursor: pointer;
74
- display: flex;
75
- align-items: center;
76
- justify-content: space-between;
77
- height: 32px;
78
- margin: 24px 16px 8px 16px;
79
-
80
- &:hover {
81
- background-color: $background;
70
+ .annotation-sets-accordions {
71
+ margin-top: 16px;
72
+ .annotation-set-group {
73
+ .annotation-sets-list {
74
+ position: relative;
82
75
  }
83
-
84
- .label-set-name {
85
- font-weight: 600;
86
- font-size: 14px;
87
- line-height: 20px;
88
- color: $text;
76
+ &.no-top-margin {
77
+ margin-top: 0px;
78
+ }
79
+ margin: 24px 16px 8px 16px;
80
+ .label-set-header {
81
+ cursor: pointer;
89
82
  display: flex;
90
83
  align-items: center;
91
- gap: 8px;
84
+ justify-content: space-between;
92
85
 
93
- .icon {
94
- width: 12px;
95
- height: 12px;
86
+ &:hover {
87
+ background-color: $background;
96
88
  }
97
- }
98
- }
99
89
 
100
- .ann-set-table {
101
- display: flex;
102
- align-items: center;
103
- width: fit-content;
104
- cursor: pointer;
105
- &:not(:last-child) {
106
- padding-bottom: 12px;
90
+ .label-set-name {
91
+ font-weight: 600;
92
+ font-size: 14px;
93
+ line-height: 20px;
94
+ color: $text;
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 8px;
98
+
99
+ .icon {
100
+ width: 12px;
101
+ height: 12px;
102
+ }
103
+ }
107
104
  }
108
105
 
109
- .ann-set-table-icon {
110
- padding: 4px 8px;
111
- border-radius: 32px;
112
- margin-left: 14px;
113
- background: $purple-low-opacity;
106
+ .ann-set-table {
114
107
  display: flex;
115
- width: fit-content;
116
108
  align-items: center;
117
- .ann-set-number {
118
- font-weight: 400;
119
- font-size: 14px;
120
- line-height: 20px;
121
- margin-left: 4px;
109
+ width: fit-content;
110
+ cursor: pointer;
111
+ &:not(:last-child) {
112
+ padding-bottom: 12px;
122
113
  }
123
- }
124
- .ann-set-table-label-set-name {
125
- margin-left: 8px;
126
- font-size: 14px;
127
- line-height: 20px;
128
- }
129
- }
130
114
 
131
- .labels {
132
- .label {
133
- .label-group {
115
+ .ann-set-table-icon {
116
+ padding: 4px 8px;
117
+ border-radius: 32px;
118
+ margin-left: 14px;
119
+ background: $purple-low-opacity;
134
120
  display: flex;
135
- flex-direction: row;
136
- justify-content: space-between;
121
+ width: fit-content;
137
122
  align-items: center;
138
- border-bottom: 1px solid $grey-lightest;
139
- min-height: 44px;
140
- cursor: pointer;
123
+ .ann-set-number {
124
+ font-weight: 400;
125
+ font-size: 14px;
126
+ line-height: 20px;
127
+ margin-left: 4px;
128
+ }
129
+ }
130
+ .ann-set-table-label-set-name {
131
+ margin-left: 8px;
132
+ font-size: 14px;
133
+ line-height: 20px;
134
+ }
135
+ }
141
136
 
142
- .label-group-left {
137
+ .labels {
138
+ .label {
139
+ .label-group {
143
140
  display: flex;
144
141
  flex-direction: row;
145
- padding-left: 28px;
146
- color: $text-lighter;
142
+ justify-content: space-between;
147
143
  align-items: center;
144
+ border-bottom: 1px solid $grey-lightest;
145
+ min-height: 44px;
146
+ cursor: pointer;
148
147
 
149
- .label-name {
150
- padding-left: 20px;
151
- }
152
- }
148
+ .label-group-left {
149
+ display: flex;
150
+ flex-direction: row;
151
+ padding-left: 16px;
152
+ color: $text-lighter;
153
+ align-items: center;
153
154
 
154
- .label-group-right {
155
- display: flex;
156
- flex-direction: row;
157
- font-weight: 400;
158
- font-size: 14px;
159
- line-height: 20px;
160
- padding-right: 16px;
161
- cursor: default;
155
+ icon {
156
+ width: 26px;
157
+ }
162
158
 
163
- .label-annotations-pending {
164
- padding: 0px 8px;
165
- border-radius: 20px;
166
- background: $grey-lighter-low-opacity;
167
- color: $text-lighter;
168
- margin-right: 4px;
159
+ .label-name {
160
+ padding-left: 20px;
161
+ }
169
162
  }
170
163
 
171
- .label-annotations-accepted {
172
- padding: 0px 8px;
173
- border-radius: 20px;
174
- background: $green-low-opacity;
175
- color: $green;
164
+ .label-group-right {
165
+ display: flex;
166
+ flex-direction: row;
167
+ font-weight: 400;
168
+ font-size: 14px;
169
+ line-height: 20px;
170
+ cursor: default;
171
+
172
+ .label-annotations-pending {
173
+ padding: 0px 8px;
174
+ border-radius: 20px;
175
+ background: $grey-lighter-low-opacity;
176
+ color: $text-lighter;
177
+ margin-right: 4px;
178
+ }
179
+
180
+ .label-annotations-accepted {
181
+ padding: 0px 8px;
182
+ border-radius: 20px;
183
+ background: $green-low-opacity;
184
+ color: $green;
185
+ }
176
186
  }
177
187
  }
178
- }
179
188
 
180
- .label-group-annotation-list {
181
- background-color: $grey-hover;
189
+ .label-group-annotation-list {
190
+ background-color: $grey-hover;
182
191
 
183
- .annotation-row {
184
- padding-left: 16px;
192
+ .annotation-row {
193
+ padding-left: 16px;
194
+ }
185
195
  }
186
- }
187
-
188
- .label-name {
189
- color: $text-lighter;
190
- word-break: break-word;
191
- font-size: 14px;
192
- line-height: 20px;
193
- font-weight: 400;
194
- }
195
-
196
- .annotation-row {
197
- width: 100%;
198
- border-bottom: 1px solid $grey-lightest;
199
- transition: background-color 0.2s ease-out;
200
- display: flex;
201
- align-items: center;
202
- padding-right: 5px;
203
196
 
204
- &.clickable-cursor {
205
- cursor: pointer;
197
+ .label-name {
198
+ color: $text-lighter;
199
+ word-break: break-word;
200
+ font-size: 14px;
201
+ line-height: 20px;
202
+ font-weight: 400;
203
+ user-select: none;
206
204
  }
207
205
 
208
- .annotation-row-left {
209
- flex: 1;
210
- padding-left: 8px;
211
- display: flex;
206
+ .annotation-row {
207
+ width: 100%;
208
+ border-bottom: 1px solid $grey-lightest;
209
+ transition: background-color 0.2s ease-out;
212
210
  align-items: center;
213
-
214
- .annotation-icon {
215
- height: 40px;
216
- padding: 0 15px;
211
+ height: 100%;
212
+ padding: 0 16px;
213
+ position: relative;
214
+ .annotations-width-slider {
215
+ background-color: transparent;
216
+ top: 0px;
217
+ bottom: 0px;
218
+ left: 4px;
219
+ right: 16px;
220
+ padding: 0 20%;
221
+ display: flex;
222
+ align-items: center;
223
+ border-radius: 8px;
224
+ position: absolute;
217
225
  }
218
226
 
219
- .label-name {
220
- padding: 10px 0;
221
- padding-right: 4px;
227
+ &.clickable-cursor {
228
+ cursor: pointer;
222
229
  }
223
230
 
224
- .annotation-translation {
231
+ .annotation-row-left {
225
232
  display: flex;
226
- padding-left: 20px;
233
+ align-items: center;
227
234
 
228
- &.pointer {
229
- cursor: pointer;
235
+ .annotation-icon {
236
+ height: 40px;
237
+ padding-right: 16px;
230
238
  }
231
239
 
232
- .icon {
233
- display: flex;
240
+ .label-name {
241
+ padding: 10px 0;
242
+ padding-right: 6px;
234
243
  }
235
244
 
236
- .translation-details {
245
+ .annotation-translation {
237
246
  display: flex;
238
- flex-direction: column;
239
- gap: 8px;
240
- min-width: 216px;
241
- text-align: left;
242
- border-bottom: 1px solid $low-opacity-white;
243
- padding-bottom: 8px;
244
- word-wrap: break-all;
245
- white-space: normal;
246
-
247
- .translation-title {
248
- color: $white;
249
- font-weight: 400;
250
- font-size: 12px;
251
- line-height: 18px;
247
+ padding-left: 20px;
248
+
249
+ &.pointer {
250
+ cursor: pointer;
251
+ }
252
+
253
+ .icon {
252
254
  display: flex;
253
- flex-direction: row;
254
- justify-content: space-between;
255
- .translated-string {
256
- font-weight: 500;
257
- text-align: right;
258
- &.no-translation {
259
- color: $red;
260
- font-weight: 400;
255
+ }
256
+
257
+ .translation-details {
258
+ display: flex;
259
+ flex-direction: column;
260
+ gap: 8px;
261
+ min-width: 216px;
262
+ text-align: left;
263
+ border-bottom: 1px solid $low-opacity-white;
264
+ padding-bottom: 8px;
265
+ word-wrap: break-all;
266
+ white-space: normal;
267
+
268
+ .translation-title {
269
+ color: $white;
270
+ font-weight: 400;
271
+ font-size: 12px;
272
+ line-height: 18px;
273
+ display: flex;
274
+ flex-direction: row;
275
+ justify-content: space-between;
276
+ .translated-string {
277
+ font-weight: 500;
278
+ text-align: right;
279
+ &.no-translation {
280
+ color: $red;
281
+ font-weight: 400;
282
+ }
261
283
  }
262
284
  }
263
285
  }
264
- }
265
- .translation-info {
266
- padding-top: 8px;
267
- line-height: 18px;
268
- font-size: 12px;
269
- opacity: 0.7;
270
- color: $white;
271
- font-weight: 400;
286
+ .translation-info {
287
+ padding-top: 8px;
288
+ line-height: 18px;
289
+ font-size: 12px;
290
+ opacity: 0.7;
291
+ color: $white;
292
+ font-weight: 400;
293
+ }
272
294
  }
273
295
  }
274
- }
275
296
 
276
- .annotation-row-right {
277
- width: 60%;
278
- display: flex;
279
- align-items: center;
280
- padding-right: 12px;
297
+ .annotation-row-right {
298
+ display: flex;
299
+ align-items: center;
300
+ justify-content: center;
301
+ height: 100%;
302
+ position: relative;
281
303
 
282
- .notification {
283
- background-color: transparent;
284
- }
304
+ .notification {
305
+ background-color: transparent;
306
+ }
285
307
 
286
- .annotation-content {
287
- width: 100%;
288
- font-size: 14px;
289
- line-height: 20px;
290
- font-weight: 400;
291
- padding: 0 8px;
308
+ .annotation-content {
309
+ width: 100%;
310
+ height: 100%;
311
+ font-size: 14px;
312
+ line-height: 20px;
313
+ font-weight: 400;
314
+ padding: 6px 0 6px 0;
292
315
 
293
- .annotation,
294
- .empty-annotation {
295
- min-height: 36px;
296
- display: flex;
297
- align-items: center;
316
+ .annotation,
317
+ .empty-annotation {
318
+ min-height: 36px;
319
+ display: flex;
320
+ align-items: center;
298
321
 
299
- .annotation-checkbox {
300
- margin-right: 0px;
322
+ .annotation-checkbox {
323
+ margin-right: 0px;
324
+ }
301
325
  }
302
- }
303
326
 
304
- .loading-container {
305
- height: 20px;
306
- display: flex;
307
- align-items: center;
327
+ .loading-container {
328
+ height: 20px;
329
+ display: flex;
330
+ align-items: center;
331
+
332
+ .loading-icon-size {
333
+ width: 13px;
334
+ height: 13px;
335
+ }
336
+ }
308
337
 
309
- .loading-icon-size {
310
- width: 13px;
311
- height: 13px;
338
+ .spinner {
339
+ color: $grey;
312
340
  }
313
- }
314
341
 
315
- .spinner {
316
- color: $grey;
342
+ .annotation-items {
343
+ display: flex;
344
+ flex-direction: row;
345
+ }
317
346
  }
318
347
 
319
- .annotation-items {
348
+ .buttons-container {
320
349
  display: flex;
321
- flex-direction: row;
350
+ height: 100%;
351
+ gap: 8px;
352
+ position: absolute;
353
+ right: -16px;
354
+ padding: 0 16px;
355
+ background-image: linear-gradient(
356
+ to right,
357
+ transparent,
358
+ $grey-hover 20%
359
+ );
360
+
361
+ &.is-ann-editing {
362
+ position: relative;
363
+ background-image: none;
364
+ }
322
365
  }
323
- }
324
-
325
- .buttons-container {
326
- display: flex;
327
- gap: 8px;
328
- }
329
-
330
- .annotation-value {
331
- display: inline-block;
332
- color: $text;
333
- padding: 0;
334
- border: none;
335
- background-color: transparent;
336
- inline-size: 100%;
337
- overflow-wrap: break-word;
338
- word-break: break-all;
339
366
 
340
- &:focus {
341
- outline: none;
342
- }
367
+ .annotation-value {
368
+ display: inline-block;
369
+ color: $text;
370
+ padding: 0;
371
+ border: none;
372
+ background-color: transparent;
373
+ inline-size: 100%;
374
+ overflow-wrap: break-word;
375
+ word-break: break-all;
376
+ user-select: none;
377
+
378
+ &:focus {
379
+ outline: none;
380
+ }
343
381
 
344
- &.label-empty {
345
- font-weight: 500;
346
- font-size: 14px;
347
- color: $primary;
382
+ &.label-empty {
383
+ font-weight: 500;
384
+ font-size: 14px;
385
+ color: $primary;
348
386
 
349
- &.clicked-ann {
350
- font-weight: 400;
351
- color: $text-lighter;
387
+ &.clicked-ann {
388
+ user-select: auto;
389
+ font-weight: 400;
390
+ color: $text-lighter;
391
+ }
352
392
  }
353
393
  }
354
394
  }
355
- }
356
-
357
- .empty-annotation {
358
- display: flex;
359
- width: 100%;
360
- justify-content: space-between;
361
- }
362
-
363
- &:hover {
364
- background-color: $grey-hover !important;
365
- }
366
- &.selected {
367
- background-color: $grey-lightest;
368
- }
369
395
 
370
- &.hovered-empty-labels {
371
- background-color: $grey-lightest;
372
- border-bottom-color: $grey-detail;
373
- }
374
-
375
- &.hovered-pending-annotations {
376
- position: relative;
377
- border-bottom-color: $primary;
378
-
379
- &:before {
380
- display: block;
381
- content: "";
396
+ .empty-annotation {
397
+ display: flex;
382
398
  width: 100%;
383
- height: 100%;
384
- background: $primary;
385
- opacity: 0.1;
386
- position: absolute;
387
- top: 0;
388
- left: 0;
399
+ justify-content: space-between;
389
400
  }
390
- }
391
-
392
- &.editing {
393
- background-color: $background;
394
- border-bottom: 1px solid $primary;
395
- }
396
-
397
- .not-found-text {
398
- color: $grey;
399
- opacity: 0.3;
400
- }
401
-
402
- .saving-changes {
403
- color: $grey;
404
- }
405
401
 
406
- .error-editing {
407
- color: $red;
408
- animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
409
- transform: translate3d(0, 0, 0);
410
- }
411
-
412
- @keyframes shake {
413
- 10%,
414
- 90% {
415
- transform: translate3d(-1px, 0, 0);
402
+ &:hover {
403
+ background-color: $grey-hover !important;
416
404
  }
417
-
418
- 20%,
419
- 80% {
420
- transform: translate3d(2px, 0, 0);
405
+ &.selected {
406
+ background-color: $grey-lightest;
421
407
  }
422
408
 
423
- 30%,
424
- 50%,
425
- 70% {
426
- transform: translate3d(-4px, 0, 0);
409
+ &.hovered-empty-labels {
410
+ background-color: $grey-lightest;
411
+ border-bottom-color: $grey-detail;
427
412
  }
428
413
 
429
- 40%,
430
- 60% {
431
- transform: translate3d(4px, 0, 0);
414
+ &.hovered-pending-annotations {
415
+ position: relative;
416
+ border-bottom-color: $primary;
417
+
418
+ &:before {
419
+ display: block;
420
+ content: "";
421
+ width: 100%;
422
+ height: 100%;
423
+ background: $primary;
424
+ opacity: 0.1;
425
+ position: absolute;
426
+ top: 0;
427
+ left: 0;
428
+ }
432
429
  }
433
- }
434
- }
435
- }
436
- }
437
-
438
- .no-labels {
439
- display: flex;
440
- gap: 5px;
441
- padding-left: 28px;
442
- color: $text-lighter;
443
- font-size: 14px;
444
- line-height: 20px;
445
- min-height: 44px;
446
-
447
- a {
448
- color: $white;
449
- text-decoration: underline;
450
- font-weight: 500;
451
- }
452
- }
453
- }
454
- }
455
430
 
456
- .action-buttons {
457
- display: flex;
458
- gap: 6px;
459
- button {
460
- height: 32px;
461
-
462
- &.link-button {
463
- color: $grey-blue;
464
- padding: 8px;
465
- .icon {
466
- vertical-align: middle;
467
- }
468
- }
469
-
470
- &.annotation-save-btn {
471
- cursor: pointer;
472
- padding: 6px 14px 6px 14px;
473
- border-radius: 8px;
474
- font-weight: 500;
475
- font-size: 14px;
476
- line-height: 20px;
477
- width: auto;
478
- }
479
-
480
- &.annotation-cancel-btn {
481
- padding-top: 8px !important;
482
- border: none !important;
483
- background-color: transparent !important;
484
- width: 32px;
485
- }
486
-
487
- &.accept-all-btn,
488
- &.restore-btn {
489
- color: $primary !important;
490
- font-size: 14px !important;
491
- font-weight: 500;
492
- background-color: transparent !important;
493
- width: auto;
494
-
495
- &:hover {
496
- text-decoration: none !important;
497
- color: $primary !important;
498
- filter: $hover-style;
499
- }
500
-
501
- &:focus {
502
- box-shadow: none !important;
503
- }
504
- }
505
-
506
- &.finish-review-btn {
507
- height: 40px;
431
+ &.editing {
432
+ background-color: $background;
433
+ border-bottom: 1px solid $primary;
434
+ }
508
435
 
509
- .icon:last-child:not(:first-child) {
510
- margin: 0;
511
- }
512
- }
436
+ .not-found-text {
437
+ color: $grey;
438
+ opacity: 0.3;
439
+ }
513
440
 
514
- &.text-btn {
515
- border-radius: 8px;
516
- font-weight: 500;
517
- font-size: 14px;
518
- line-height: 20px;
519
- }
441
+ .saving-changes {
442
+ color: $grey;
443
+ }
520
444
 
521
- &.annotation-save-btn {
522
- padding: 6px 14px 6px 14px;
523
- }
445
+ .error-editing {
446
+ color: $red;
447
+ animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
448
+ transform: translate3d(0, 0, 0);
449
+ }
524
450
 
525
- &.annotation-cancel-btn {
526
- border: none !important;
527
- background-color: transparent !important;
528
- width: 32px;
529
- }
530
- }
451
+ @keyframes shake {
452
+ 10%,
453
+ 90% {
454
+ transform: translate3d(-1px, 0, 0);
455
+ }
531
456
 
532
- .button-icon {
533
- height: 24px;
534
- width: 24px;
535
- padding: 6px;
536
- }
457
+ 20%,
458
+ 80% {
459
+ transform: translate3d(2px, 0, 0);
460
+ }
537
461
 
538
- .accept-decline-container {
539
- display: flex;
540
- flex-direction: row;
541
- gap: 6px;
542
- justify-content: center;
543
- button {
544
- padding: 0px;
545
-
546
- .decline-icon {
547
- color: $red;
548
- vertical-align: middle;
549
- }
462
+ 30%,
463
+ 50%,
464
+ 70% {
465
+ transform: translate3d(-4px, 0, 0);
466
+ }
550
467
 
551
- svg {
552
- vertical-align: middle;
553
- height: 24px;
468
+ 40%,
469
+ 60% {
470
+ transform: translate3d(4px, 0, 0);
471
+ }
472
+ }
473
+ }
474
+ }
554
475
  }
555
- }
556
- }
557
476
 
558
- .missing-button-container {
559
- background-color: transparent;
560
- display: flex;
561
- flex-direction: row;
562
-
563
- .missing-btn,
564
- .search-btn {
565
- padding: 6px;
566
- color: $grey-blue !important;
567
- font-size: 14px !important;
568
- font-weight: 500;
569
- background-color: transparent !important;
570
- width: auto;
571
-
572
- &:hover {
573
- text-decoration: none !important;
574
- color: $text-color !important;
575
- }
477
+ .no-labels {
478
+ display: flex;
479
+ gap: 5px;
480
+ padding-left: 28px;
481
+ color: $text-lighter;
482
+ font-size: 14px;
483
+ line-height: 20px;
484
+ min-height: 44px;
576
485
 
577
- &:focus {
578
- box-shadow: none !important;
486
+ a {
487
+ color: $white;
488
+ text-decoration: underline;
489
+ font-weight: 500;
490
+ }
579
491
  }
580
492
  }
581
493
  }