diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html index 93aff27aa..29c67c267 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html @@ -89,6 +89,8 @@
+ +
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index 52aad4807..805efd4e7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -13,141 +13,141 @@
-
- -
- - +
+
+
+ + +
+ + + {{ 'dictionary-listing.table-header.title' | translate: { length: displayedDictionaries.length } }} + + +
+ +
+ +
+
- -
-
-
- - +
+
+ + + + + + +
+
+
+ + + + +
+
+
+
- - {{ 'dictionary-listing.table-header.title' | translate: { length: displayedDictionaries.length } }} - - -
- -
- +
+
+
+
+ {{ dict.label }} +
+
+
+ + {{ dict.entries?.length }} +
+
+ + {{ 'dictionary-listing.case-sensitive' | translate }} +
+
-
-
-
+
+ {{ dict.rank }} +
- +
+ +
- +
+
+ + - -
+ + +
+
- - -
-
-
- -
- -
-
-
-
- {{ dict.label }} -
-
-
- - {{ dict.entries?.length }} -
-
- - {{ 'dictionary-listing.case-sensitive' | translate }} -
-
-
-
- -
- {{ dict.rank }} -
- -
- -
- -
-
- - - - - -
-
-
-
- - +
+ +
.content-container { - width: 100%; + width: calc(100% - 527px); redaction-table-col-name::ng-deep { > div { diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index 3c9952da7..345bea46d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -63,7 +63,10 @@ export class FileAttributesCsvImportDialogComponent implements OnInit { ngOnInit(): void { setTimeout(() => { - this.cdkVirtualScrollViewport.checkViewportSize(); + // Calculate viewport size after dialog is completely expanded + if (this.cdkVirtualScrollViewport) { + this.cdkVirtualScrollViewport.checkViewportSize(); + } }, 500); } diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index 2ceed9c98..b03f0ab33 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -58,7 +58,7 @@
-
+
-
+ diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index d257cb335..e94ea6dc5 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -56,10 +56,6 @@ export class FileAttributesListingScreenComponent implements OnInit { } } - public get noData(): boolean { - return this.displayedAttributes.length === 0; - } - public get sortingOption(): SortingOption { return this._sortingService.getSortingOption('file-attributes-listing'); } diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html index c940ccbc6..306030a1f 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -96,7 +96,6 @@
-
+
+ +
- +
+ +
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 538f480ac..c6c6a9291 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -19,6 +19,7 @@ export class IconsModule { 'arrow-up', 'assign', 'assign-me', + 'attribute', 'calendar', 'case-sensitive', 'check', diff --git a/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.scss b/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.scss deleted file mode 100644 index 2c2b5c84c..000000000 --- a/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '../../../../../assets/styles/red-mixins'; - -:host { - display: block; - position: absolute; - height: 100%; - background: white; - z-index: 1; - width: 100%; - @include inset-shadow; -} - -.section { - padding: 40px; - - flex-direction: column; - - &:not(:last-child) { - border-bottom: 1px solid $separator; - } -} - -p { - height: 48px; - width: 234px; - text-align: center; - color: #9398a0; -} - -mat-icon { - width: 60px; - height: 60px; - opacity: 10%; -} diff --git a/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.ts b/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.ts deleted file mode 100644 index e3fc293e5..000000000 --- a/apps/red-ui/src/app/modules/projects/components/disabled-for-redaction/disabled-for-redaction.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'redaction-disabled-for-redaction', - template: - "
\n" + - ' \n' + - "

{{'file-preview.tabs.is-excluded' | translate}}

\n" + - '
', - styleUrls: ['./disabled-for-redaction.component.scss'] -}) -export class DisabledForRedactionComponent {} diff --git a/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.html b/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.html deleted file mode 100644 index a89955182..000000000 --- a/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
- -
diff --git a/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.scss b/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.ts b/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.ts deleted file mode 100644 index 19a09cd23..000000000 --- a/apps/red-ui/src/app/modules/projects/components/empty-states/project-listing-empty/project-listing-empty.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component, EventEmitter, Output } from '@angular/core'; -import { UserService } from '../../../../../services/user.service'; - -@Component({ - selector: 'redaction-project-listing-empty', - templateUrl: './project-listing-empty.component.html', - styleUrls: ['./project-listing-empty.component.scss'] -}) -export class ProjectListingEmptyComponent { - @Output() addProjectRequest = new EventEmitter(); - - constructor(public userService: UserService) {} -} diff --git a/apps/red-ui/src/app/modules/projects/projects.module.ts b/apps/red-ui/src/app/modules/projects/projects.module.ts index b119686c6..46f6b10d9 100644 --- a/apps/red-ui/src/app/modules/projects/projects.module.ts +++ b/apps/red-ui/src/app/modules/projects/projects.module.ts @@ -14,7 +14,6 @@ import { CommentsComponent } from './components/comments/comments.component'; import { ProjectDetailsComponent } from './components/project-details/project-details.component'; import { PageIndicatorComponent } from './components/page-indicator/page-indicator.component'; import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component'; -import { ProjectListingEmptyComponent } from './components/empty-states/project-listing-empty/project-listing-empty.component'; import { AnnotationActionsComponent } from './components/annotation-actions/annotation-actions.component'; import { ProjectListingDetailsComponent } from './components/project-listing-details/project-listing-details.component'; import { FileActionsComponent } from './components/file-actions/file-actions.component'; @@ -35,7 +34,6 @@ import { PdfViewerDataService } from './services/pdf-viewer-data.service'; import { ManualAnnotationService } from './services/manual-annotation.service'; import { AnnotationDrawService } from './services/annotation-draw.service'; import { AnnotationProcessingService } from './services/annotation-processing.service'; -import { DisabledForRedactionComponent } from './components/disabled-for-redaction/disabled-for-redaction.component'; const screens = [ProjectListingScreenComponent, ProjectOverviewScreenComponent, FilePreviewScreenComponent]; @@ -55,7 +53,6 @@ const components = [ PageIndicatorComponent, NeedsWorkBadgeComponent, AnnotationActionsComponent, - ProjectListingEmptyComponent, ProjectListingDetailsComponent, TypeAnnotationIconComponent, TypeFilterComponent, @@ -65,7 +62,6 @@ const components = [ ProjectListingActionsComponent, DocumentInfoComponent, FileWorkloadComponent, - DisabledForRedactionComponent, ...screens, ...dialogs diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html index 5adc3ea96..d1391ea97 100644 --- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html @@ -208,7 +208,12 @@
- + +
@@ -52,7 +52,7 @@
-
+
-
+ + +
- + diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts index d44bd270d..ba7d43e8f 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts @@ -109,7 +109,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { } public get noData() { - return this.displayedProjects?.length === 0; + return this.appStateService.allProjects?.length === 0; } public resetFilters() { diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html index 8a66a3fc2..e0b80de48 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html @@ -83,172 +83,171 @@
-
- -
- - +
+
+
+ + +
+ + + {{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }} + + +
- -
-
-
- - +
+ +
+ + + + + + + + + + + + +
+
+ + + +
+ + +
+
+
+
- - {{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }} - +
+
+
+ {{ fileStatus.filename }} +
+ +
+
- -
+
+
+ {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }} +
+
-
- -
+ +
+ +
- +
+ +
+
+ +
- +
+
+ + {{ fileStatus.numberOfPages }} +
+
- +
+
+
+
+ - - - - - + +
- -
- - -
-
-
- -
- -
-
-
- {{ fileStatus.filename }} -
- -
-
- -
-
- {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }} -
-
- - -
- -
- -
- -
-
- -
- -
-
- - {{ fileStatus.numberOfPages }} -
-
- -
-
-
-
- - - -
-
-
- - +
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts index 8bd41af50..db759f691 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts @@ -143,10 +143,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { return [FileStatus.StatusEnum.REPROCESS, FileStatus.StatusEnum.FULLREPROCESS, FileStatus.StatusEnum.PROCESSING].includes(fileStatusWrapper.status); } - public get noData() { - return this.displayedFiles?.length === 0; - } - public get sortingOption(): SortingOption { return this._sortingService.getSortingOption('project-overview'); } @@ -179,6 +175,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { } calculateData(): void { + if (!this.appStateService.activeProjectId) { + return; + } this._computeAllFilters(); this._filterFiles(); this._projectDetailsComponent?.calculateChartConfig(); diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts index 91595c0d9..6f6437899 100644 --- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts @@ -29,7 +29,7 @@ export class CircleButtonComponent implements OnInit { if (!this.disabled) { if (this.removeTooltip) { this.matTooltip.hide(); - // Timeout to allow tooltip to disappear first + // Timeout to allow tooltip to disappear first, useful when removing an item from the list without a confirmation dialog setTimeout(() => { this.action.emit($event); }, 0); diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html new file mode 100644 index 000000000..abe0454a8 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html @@ -0,0 +1,6 @@ +
+ +
+ + +
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss new file mode 100644 index 000000000..ea3dea645 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss @@ -0,0 +1,24 @@ +@import '../../../../../assets/styles/red-mixins'; + +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 120px; + text-align: center; + + > mat-icon { + height: 60px; + width: 60px; + opacity: 0.1; + } + + .heading-l { + color: $grey-7; + } + + > .heading-l, + redaction-icon-button { + margin-top: 24px; + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts new file mode 100644 index 000000000..b94baa062 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts @@ -0,0 +1,22 @@ +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; + +@Component({ + selector: 'redaction-empty-state', + templateUrl: './empty-state.component.html', + styleUrls: ['./empty-state.component.scss'] +}) +export class EmptyStateComponent implements OnInit { + @Input() screen: string; + @Input() text: string; + @Input() icon: string; + @Input() showButton = true; + @Input() buttonIcon = 'red:plus'; + @Input() horizontalPadding = 100; + @Output() action = new EventEmitter(); + + constructor() {} + + ngOnInit(): void { + this.showButton = this.showButton && this.action.observers.length > 0; + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html index 21a46b5db..aa30c85eb 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html @@ -1,5 +1,9 @@
-
+
{{ initials }}
diff --git a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts index f49b0d41e..f058fbd10 100644 --- a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts +++ b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts @@ -25,12 +25,14 @@ export class SyncWidthDirective implements AfterViewInit, OnDestroy { @debounce(10) matchWidth() { const headerItems = this.el.nativeElement.children; - const tableRows = document.getElementsByClassName(this.redactionSyncWidth); + const tableRows = this.el.nativeElement.parentElement.getElementsByClassName(this.redactionSyncWidth); if (!tableRows || !tableRows.length) { return; } + this.el.nativeElement.setAttribute('synced', true); + const { tableRow, length } = this._sampleRow; const hasExtraColumns = headerItems.length !== length ? 1 : 0; diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 4443b1a9e..a07531dda 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -26,6 +26,7 @@ import { DictionaryAnnotationIconComponent } from './components/dictionary-annot import { HiddenActionComponent } from './components/hidden-action/hidden-action.component'; import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component'; import { FilterComponent } from './components/filter/filter.component'; +import { EmptyStateComponent } from './components/empty-state/empty-state.component'; const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent]; @@ -42,6 +43,7 @@ const components = [ HiddenActionComponent, FilterComponent, ConfirmationDialogComponent, + EmptyStateComponent, ...buttons ]; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 92ff0c8e5..c1e6f5a9e 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -126,6 +126,11 @@ "total-documents": "Total Document(s)" } }, + "no-data": { + "title": "You currently have no projects.", + "action": "New Project" + }, + "add-new": "New Project", "add-edit-dialog": { "header-new": "Create Project", "header-edit": "Edit Project", @@ -158,8 +163,6 @@ "action": "Delete Project", "delete-failed": "Failed to delete project: {{projectName}}" }, - "add-new": "New Project", - "no-projects": "You currently have no projects.", "no-projects-match": "No Projects match your current filters" }, "project-details": { @@ -737,6 +740,9 @@ "created-by": "Created by", "created-on": "Created on", "modified-on": "Modified on" + }, + "no-data": { + "title": "There are no project templates yet." } }, "file-attributes-listing": { @@ -750,7 +756,9 @@ "created-by": "Created by", "read-only": "Read-Only" }, - "no-data": "No file attributes.", + "no-data": { + "title": "There are no file attributes yet." + }, "read-only": "Read-only", "action": { "edit": "Edit attribute", @@ -955,7 +963,10 @@ }, "all-categories": "All Categories", "all-users": "All Users", - "to": "to" + "to": "to", + "no-data": { + "title": "No available logs." + } }, "pagination": { "previous": "Prev", @@ -1148,6 +1159,9 @@ "save-name": "Save", "cancel-edit-name": "Cancel", "remove": "Remove" + }, + "no-data": { + "title": "No file attributes defined. Select a column from the left panel to start defining file attributes." } } } diff --git a/apps/red-ui/src/assets/icons/general/attribute.svg b/apps/red-ui/src/assets/icons/general/attribute.svg new file mode 100644 index 000000000..a37866ac1 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/attribute.svg @@ -0,0 +1,13 @@ + + + status + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index a97309330..cbe6ca36e 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -79,126 +79,103 @@ body { height: calc(100% - 110px); z-index: 1; transition: height ease-in-out 0.2s; +} - .content-container { - .overlay-shadow { - @include inset-shadow; - position: fixed; - width: 100%; - height: 4px; - z-index: 1; +.content-container { + .overlay-shadow { + @include inset-shadow; + position: fixed; + width: 100%; + height: 4px; + z-index: 1; + } + + overflow: hidden; + transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; + position: relative; + + &.extended { + width: calc(100vw - 60px) !important; + } + + .dialog { + border-radius: 8px; + margin-top: 40px; + margin-bottom: 70px; + background-color: $white; + max-width: 650px; + height: fit-content; + box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + position: unset; + + .heading-l { + margin-bottom: 16px; } - overflow: hidden; - transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; - position: relative; - - &.extended { - width: calc(100vw - 60px) !important; - } - - .empty-state { + .dialog-content { display: flex; - flex-direction: column; - align-items: center; - padding-top: 120px; - @include inset-shadow; - > mat-icon { - height: 60px; - width: 60px; - opacity: 0.1; + .dialog-content-left { + min-width: 300px; + margin-right: 64px; } - .heading-l { - color: $grey-7; - } - - > mat-icon, - .heading-l { - margin-bottom: 24px; - } - } - - .dialog { - border-radius: 8px; - margin-top: 40px; - margin-bottom: 70px; - background-color: $white; - max-width: 650px; - height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); - position: unset; - - .heading-l { - margin-bottom: 16px; - } - - .dialog-content { - display: flex; - - .dialog-content-left { - min-width: 300px; - margin-right: 64px; - } - - .link-action { - margin-top: 8px; - } - } - } - - @media only screen and (max-width: 1600px) { - redaction-initials-avatar .username:not(.always-visible) { - display: none; + .link-action { + margin-top: 8px; } } } - .right-container { - border-left: 1px solid $grey-4; - box-sizing: border-box; - background: $white; - z-index: 1; - overflow: hidden; - @include inset-shadow; - transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; - - &:hover { - overflow-y: auto; - @include scroll-bar; + @media only screen and (max-width: 1600px) { + redaction-initials-avatar .username:not(.always-visible) { + display: none; } + } +} - .collapsed-wrapper { +.right-container { + border-left: 1px solid $grey-4; + box-sizing: border-box; + background: $white; + z-index: 1; + overflow: hidden; + @include inset-shadow; + transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; + + &:hover { + overflow-y: auto; + @include scroll-bar; + } + + .collapsed-wrapper { + display: none; + } + + &.collapsed { + padding-left: 0 !important; + padding-right: 0 !important; + width: 60px !important; + min-width: 60px !important; + display: flex; + + div:not(.collapsed-wrapper) { display: none; } - &.collapsed { - padding-left: 0 !important; - padding-right: 0 !important; - width: 60px !important; - min-width: 60px; + .collapsed-wrapper { display: flex; + flex-direction: column; + align-items: center; + width: 60px; - div:not(.collapsed-wrapper) { - display: none; + div { + display: initial; } - .collapsed-wrapper { - display: flex; - flex-direction: column; - align-items: center; - width: 60px; - - div { - display: initial; - } - - .all-caps-label { - transform: rotate(90deg) translateX(50%); - white-space: nowrap; - margin-top: 10px; - } + .all-caps-label { + transform: rotate(90deg) translateX(50%); + white-space: nowrap; + margin-top: 10px; } } } @@ -337,19 +314,6 @@ body { margin-right: 8px !important; } -.empty-state-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - height: calc(100vh - 61px); - position: relative; - - > *:not(:last-child) { - margin-bottom: 2px; - } -} - .fit-content { width: fit-content; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 62089f254..cd1f8b040 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -12,17 +12,12 @@ } } -.no-data { - padding: 24px; -} - .table-header { display: flex; border-bottom: 1px solid $separator; - &.no-data { - justify-content: space-between; - padding: initial; + &.no-data:not([synced='true']) { + padding-left: 30px; } redaction-table-col-name:last-of-type {