From fd3b738eccbf6adf80b16690a1cd80f74de0b8aa Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Fri, 6 Nov 2020 20:40:10 +0200
Subject: [PATCH] sticky header fix

---
 .../needs-work-badge.component.html           |  2 +-
 .../needs-work-badge.component.ts             |  1 -
 .../file-preview-screen.component.html        |  1 -
 .../project-listing-screen.component.html     | 61 ++++++++-----------
 .../project-listing-screen.component.ts       | 11 ++--
 .../project-overview-screen.component.html    | 60 ++++++++----------
 .../project-overview-screen.component.ts      |  1 -
 .../src/assets/styles/red-components.scss     |  7 +++
 apps/red-ui/src/assets/styles/red-grid.scss   | 26 ++++++++
 apps/red-ui/src/assets/styles/red-tables.scss | 23 ++-----
 apps/red-ui/src/assets/styles/red-theme.scss  |  1 +
 11 files changed, 96 insertions(+), 98 deletions(-)
 create mode 100644 apps/red-ui/src/assets/styles/red-grid.scss

diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html
index 5568ae75e..b897522d6 100644
--- a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html
+++ b/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="displayed" class="needs-work">
+<div class="needs-work">
     <redaction-annotation-icon
         *ngIf="needsWorkInput.hasRedactions"
         [typeValue]="appStateService.getDictionaryTypeValue('redaction')"
diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts
index 44f29a334..6c5fb493f 100644
--- a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts
+++ b/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts
@@ -13,7 +13,6 @@ export interface NeedsWorkInput {
     styleUrls: ['./needs-work-badge.component.scss']
 })
 export class NeedsWorkBadgeComponent implements OnInit {
-    @Input() displayed: boolean;
     @Input() needsWorkInput: NeedsWorkInput;
 
     constructor(public appStateService: AppStateService) {}
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index f53c916f6..19929d5eb 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -30,7 +30,6 @@
                         : 'report.unavailable-single'
                     ) | translate
                 "
-                [matTooltipHideDelay]="400000"
                 [matTooltipPosition]="'above'"
             >
                 <button
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 c5534ff29..40dbacb45 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,41 +45,33 @@
 
     <div class="flex red-content-inner">
         <div class="left-container">
-            <div class="table-header">
-                <div class="select-all-container">
-                    <div
-                        *ngIf="bulkSelectActive"
-                        class="select-oval"
-                        [class.active]="areAllProjectsSelected()"
-                        (click)="toggleSelectAll()"
-                    ></div>
-                    <span class="all-caps-label">
-                        {{
-                            'project-listing.table-header.title'
-                                | translate: { length: displayedProjects.length || 0 }
-                        }}
-                    </span>
+            <div class="grid-container bulk-select">
+                <div class="header-item span-5">
+                    <div class="select-all-container">
+                        <div
+                            class="select-oval always-visible"
+                            [class.active]="areAllProjectsSelected()"
+                            (click)="toggleSelectAll()"
+                        ></div>
+                        <span class="all-caps-label">
+                            {{
+                                'project-listing.table-header.title'
+                                    | translate: { length: displayedProjects.length || 0 }
+                            }}
+                        </span>
+                    </div>
+
+                    <div class="actions">
+                        <redaction-sorting
+                            #sortingComponent
+                            [initialOption]="sortingOption"
+                            (optionChanged)="sortingOptionChanged($event)"
+                            type="project-listing"
+                        ></redaction-sorting>
+                    </div>
                 </div>
 
-                <div class="actions">
-                    <div
-                        translate="project-listing.table-header.bulk-select"
-                        class="pointer"
-                        [class.active]="bulkSelectActive"
-                        (click)="toggleBulkSelect()"
-                    ></div>
-
-                    <redaction-sorting
-                        #sortingComponent
-                        [initialOption]="sortingOption"
-                        (optionChanged)="sortingOptionChanged($event)"
-                        type="project-listing"
-                    ></redaction-sorting>
-                </div>
-            </div>
-
-            <div class="grid-container" [class.bulk-select]="bulkSelectActive">
-                <div class="select-oval-placeholder" *ngIf="bulkSelectActive"></div>
+                <div class="select-oval-placeholder"></div>
 
                 <redaction-table-col-name
                     label="project-listing.table-col-names.name"
@@ -119,7 +111,7 @@
                     class="table-item"
                     [class.pointer]="canOpenProject(pw)"
                 >
-                    <div class="pr-0" *ngIf="bulkSelectActive">
+                    <div class="pr-0">
                         <div
                             class="select-oval"
                             [class.active]="isProjectSelected(pw)"
@@ -157,7 +149,6 @@
                     <div>
                         <redaction-needs-work-badge
                             [needsWorkInput]="pw"
-                            [displayed]="true"
                         ></redaction-needs-work-badge>
                     </div>
                     <div>
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 6ac3f623b..fd66f0d44 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
@@ -29,8 +29,6 @@ export class ProjectListingScreenComponent implements OnInit {
     public projectsChartData: DoughnutChartConfig[] = [];
     public documentsChartData: DoughnutChartConfig[] = [];
 
-    public bulkSelectActive = false;
-
     public statusFilters: FilterModel[];
     public dueDateFilters: FilterModel[];
     public peopleFilters: FilterModel[];
@@ -116,12 +114,13 @@ export class ProjectListingScreenComponent implements OnInit {
         });
     }
 
-    public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
-        this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
+    public downloadRedactionReport($event: MouseEvent, project: Project) {
+        $event.preventDefault();
+        this.appStateService.downloadRedactionReport(project);
     }
 
-    public toggleBulkSelect() {
-        this.bulkSelectActive = !this.bulkSelectActive;
+    public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
+        this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
     }
 
     public sortingOptionChanged(option: SortingOption) {
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 0372bd713..bbd7ff889 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
@@ -54,40 +54,33 @@
 
     <div class="flex red-content-inner">
         <div class="left-container">
-            <div class="table-header">
-                <div class="select-all-container">
-                    <div
-                        (click)="toggleSelectAll()"
-                        *ngIf="bulkSelectActive"
-                        [class.active]="areAllFilesSelected()"
-                        class="select-oval"
-                    ></div>
-                    <span class="all-caps-label">
-                        {{
-                            'project-overview.table-header.title'
-                                | translate: { length: displayedFiles.length || 0 }
-                        }}
-                    </span>
+            <div class="grid-container bulk-select">
+                <div class="header-item span-7">
+                    <div class="select-all-container">
+                        <div
+                            (click)="toggleSelectAll()"
+                            [class.active]="areAllFilesSelected()"
+                            class="select-oval always-visible"
+                        ></div>
+                        <span class="all-caps-label">
+                            {{
+                                'project-overview.table-header.title'
+                                    | translate: { length: displayedFiles.length || 0 }
+                            }}
+                        </span>
+                    </div>
+                    <div class="actions">
+                        <redaction-sorting
+                            #sortingComponent
+                            [initialOption]="sortingOption"
+                            (optionChanged)="sortingOptionChanged($event)"
+                            type="project-overview"
+                        ></redaction-sorting>
+                    </div>
                 </div>
-                <div class="actions">
-                    <div
-                        (click)="toggleBulkSelect()"
-                        [class.active]="bulkSelectActive"
-                        class="pointer"
-                        translate="project-overview.table-header.bulk-select"
-                    ></div>
-                    <redaction-sorting
-                        #sortingComponent
-                        [initialOption]="sortingOption"
-                        (optionChanged)="sortingOptionChanged($event)"
-                        type="project-overview"
-                    ></redaction-sorting>
-                </div>
-            </div>
 
-            <div [class.bulk-select]="bulkSelectActive" class="grid-container">
                 <!--      Table column names-->
-                <div *ngIf="bulkSelectActive" class="select-oval-placeholder"></div>
+                <div class="select-oval-placeholder"></div>
 
                 <redaction-table-col-name
                     (toggleSort)="sortingComponent.toggleSort($event)"
@@ -158,7 +151,7 @@
                     "
                     class="table-item"
                 >
-                    <div *ngIf="bulkSelectActive" class="pr-0">
+                    <div class="pr-0">
                         <div
                             (click)="toggleFileSelected($event, fileStatus)"
                             [class.active]="isFileSelected(fileStatus)"
@@ -192,10 +185,9 @@
                         </div>
                     </div>
 
-                    <div>
+                    <div *ngIf="!isError(fileStatus)">
                         <redaction-needs-work-badge
                             [needsWorkInput]="fileStatus"
-                            [displayed]="!isError(fileStatus)"
                         ></redaction-needs-work-badge>
                     </div>
                     <div *ngIf="!isError(fileStatus)" class="assigned-to">
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 cc0908d4b..69ca9ab1a 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
@@ -35,7 +35,6 @@ import {
 })
 export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     private _selectedFileIds: string[] = [];
-    public bulkSelectActive = false;
 
     public statusFilters: FilterModel[];
     public peopleFilters: FilterModel[];
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index 5a91266b3..4a8d0e079 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -138,8 +138,15 @@
     border: 1px solid $grey-5;
     background-color: $white;
     cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &.always-visible {
+        opacity: 1;
+    }
 
     &.active {
+        opacity: 1;
         background-color: $primary;
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
new file mode 100644
index 000000000..9fe4c1e28
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -0,0 +1,26 @@
+@import 'red-variables';
+
+.header-item {
+    background-color: $grey-6;
+    height: 50px;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;
+    position: sticky;
+    top: 50px;
+
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: 25px;
+    }
+
+    &.span-7 {
+        grid-column-end: span 7;
+    }
+    &.span-5 {
+        grid-column-end: span 5;
+    }
+}
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index b5c5c0033..20354ada4 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -1,24 +1,6 @@
 @import 'red-variables';
 @import 'red-mixins';
 
-.table-header {
-    background-color: $grey-6;
-    height: 50px;
-    padding: 0 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: sticky;
-    top: 50px;
-    z-index: 1;
-
-    .actions {
-        display: flex;
-        align-items: center;
-        gap: 25px;
-    }
-}
-
 redaction-table-col-name,
 .select-oval-placeholder {
     background-color: $white;
@@ -34,7 +16,6 @@ redaction-table-col-name,
 
 .grid-container {
     display: grid;
-    position: relative;
 
     .select-oval-placeholder {
         border-bottom: 1px solid $separator;
@@ -87,6 +68,10 @@ redaction-table-col-name,
                 background-color: #f9fafb;
             }
 
+            .select-oval {
+                opacity: 1;
+            }
+
             .action-buttons {
                 display: flex;
             }
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index 8c13d84fc..d4e14ead6 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -19,3 +19,4 @@
 @import 'red-logo';
 @import 'red-toasts';
 @import 'red-tooltips';
+@import 'red-grid';