From 9e0f25bc700453330c2405a1b5961e3bda93d43e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 2 Dec 2020 01:23:20 +0200 Subject: [PATCH] Scrollbar --- .../dictionary-listing-screen.component.html | 8 ++- .../dictionary-listing-screen.component.scss | 40 +++++++---- .../project-listing-screen.component.html | 8 ++- .../project-listing-screen.component.scss | 25 +++++-- .../project-listing-screen.component.ts | 4 ++ .../project-overview-screen.component.html | 14 ++-- .../project-overview-screen.component.scss | 6 +- .../project-overview-screen.component.ts | 4 ++ .../src/app/utils/sync-width.directive.ts | 2 +- apps/red-ui/src/assets/styles/red-grid.scss | 12 ---- apps/red-ui/src/assets/styles/red-tables.scss | 71 +++++++++++++++---- 11 files changed, 134 insertions(+), 60 deletions(-) diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 3aa4233b3..ad6120c18 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -5,7 +5,7 @@
-
+
-
+
+
@@ -50,7 +51,7 @@
-
+
{{ dict.label }}
@@ -66,6 +67,7 @@
+
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index c2006dacc..0d3886872 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -12,34 +12,44 @@ redaction-table-col-name::ng-deep { } .left-container { + width: calc(100vw - 353px); + .grid-container { - grid-template-columns: auto 1fr 1fr 2fr; + grid-template-columns: auto 1fr 1fr 2fr 11px; + + &:hover { + grid-template-columns: auto 1fr 1fr 2fr; + } .table-item { - > div { + > div:not(.scrollbar-placeholder) { display: flex; flex-direction: row; padding-left: 10px; align-items: center; justify-content: flex-start; - } - .color-square { - width: 16px; - height: 16px; - margin-right: 16px; - } + &.analyzed { + justify-content: center; + } - .analyzed { - justify-content: center; - } - } + .color-square { + width: 16px; + height: 16px; + min-width: 16px; + margin-right: 16px; + } - .stats-subtitle { - margin-top: 4px; + .dict-name { + max-width: 100%; + } + + .stats-subtitle { + margin-top: 4px; + } + } } } - width: calc(100vw - 353px); } .right-container { diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 754840b9e..14c16704e 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -45,7 +45,7 @@
-
+
+
-
+
+
- +
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index cb88f0546..a234f7422 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -3,15 +3,26 @@ .left-container { .grid-container { - grid-template-columns: 2fr 1fr 1fr auto; - } + grid-template-columns: 2fr 1fr 1fr auto 11px; - .stats-subtitle { - margin-top: 6px; - } + &:hover { + grid-template-columns: 2fr 1fr 1fr auto; + } - .status-container { - width: 160px; + .table-item { + > div { + padding: 0 24px; + } + + .status-container { + width: 160px; + padding-right: 13px; + } + } + + .stats-subtitle { + margin-top: 6px; + } } width: calc(100vw - 466px); diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index bae580725..578d4510d 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -88,6 +88,10 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { this.projectAutoUpdateTimer.unsubscribe(); } + public get noData() { + return this.displayedProjects?.length === 0; + } + private _calculateData() { this._computeAllFilters(); this._filterProjects(); diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 81a6a466d..04a9c8f86 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -114,7 +114,7 @@
-
+
@@ -160,9 +160,10 @@ column="statusSort" label="project-overview.table-col-names.status" > +
-
+
-
- - {{ fileStatus.numberOfPages }} +
+
+ + {{ fileStatus.numberOfPages }} +
@@ -235,6 +238,7 @@ >
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index b941b8db7..e7517fdb7 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -16,7 +16,11 @@ redaction-table-col-name::ng-deep { } .grid-container { - grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto; + grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px; + + &:hover { + grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto; + } .table-item { > div { diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 2c442625f..8ea6a0c19 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -121,6 +121,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { return [FileStatus.StatusEnum.REPROCESS, FileStatus.StatusEnum.PROCESSING].includes(fileStatusWrapper.status); } + public get noData() { + return this.displayedFiles?.length === 0; + } + public get sortingOption(): SortingOption { return this._sortingService.getSortingOption('project-overview'); } diff --git a/apps/red-ui/src/app/utils/sync-width.directive.ts b/apps/red-ui/src/app/utils/sync-width.directive.ts index 18a0399df..1f389a8c6 100644 --- a/apps/red-ui/src/app/utils/sync-width.directive.ts +++ b/apps/red-ui/src/app/utils/sync-width.directive.ts @@ -25,7 +25,7 @@ export class SyncWidthDirective implements AfterViewChecked { const tableRow = tableRows[0]; if (tableRow.children.length !== headerItems.length) return; - for (let idx = 0; idx < headerItems.length; ++idx) { + for (let idx = 0; idx < headerItems.length - 1; ++idx) { headerItems[idx].style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`; headerItems[idx].style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`; } diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 3e64d6327..ee3357078 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -19,18 +19,6 @@ gap: 25px; } - &.span-3 { - grid-column-end: span 3; - } - - &.span-4 { - grid-column-end: span 4; - } - - &.span-7 { - grid-column-end: span 7; - } - &.justify-end { justify-content: flex-end; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 7d46b8916..455e298cd 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -7,15 +7,55 @@ .table-header { display: flex; - justify-content: space-between; border-bottom: 1px solid $separator; + + &.no-data { + justify-content: space-between; + padding: initial; + } + + redaction-table-col-name:last-of-type { + > div { + padding-right: 13px; + } + } } .grid-container { display: grid; max-height: calc(100vh - 50px - 30px - 111px); - overflow-y: scroll; - @include no-scroll-bar(); + overflow-y: hidden; + + &:hover { + overflow-y: scroll; + + scrollbar-color: $grey-5 $grey-2; + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: 11px; + } + + /* Track */ + &::-webkit-scrollbar-track { + background: $grey-2; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: $grey-5; + } + + .table-item { + .action-buttons { + right: 0; + } + } + + .table-item > .scrollbar-placeholder { + display: none; + } + } .table-item { display: contents; @@ -24,10 +64,15 @@ display: flex; flex-direction: column; justify-content: center; - height: 100%; - width: 100%; position: relative; box-sizing: border-box; + height: 80px; + border-bottom: 1px solid $separator; + padding: 0 13px; + + &:not(.scrollbar-placeholder):not(.pr-0) { + min-width: 110px; + } } .table-item-title { @@ -35,23 +80,18 @@ @include line-clamp(1); } - > div { - height: 80px; - border-bottom: 1px solid $separator; - padding: 0 24px; - } - .action-buttons { position: absolute; display: none; - right: 0; + right: -11px; top: 0; height: 100%; width: fit-content; flex-direction: row; align-items: center; padding-left: 100px; - padding-right: 24px; + padding-right: 13px; + z-index: 1; background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, #f4f5f7 35%); mat-icon { @@ -74,3 +114,8 @@ } } } + +.scrollbar-placeholder { + width: 11px; + padding: 0 !important; +}