Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

sticky header fix

Browse Source
This commit is contained in:
Timo Bejan 2020-11-06 20:40:10 +02:00
parent b33b66ce8e
commit fd3b738ecc
11 changed files with 96 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="displayed" class="needs-work">
<div class="needs-work">
<redaction-annotation-icon
*ngIf="needsWorkInput.hasRedactions"
[typeValue]="appStateService.getDictionaryTypeValue('redaction')"

1
apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts
View File

@ -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) {}

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -30,7 +30,6 @@
: 'report.unavailable-single'
) | translate
"
[matTooltipHideDelay]="400000"
[matTooltipPosition]="'above'"
>
<button

61
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -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>

11
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -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) {

60
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -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">

1
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -35,7 +35,6 @@ import {
})
export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
private _selectedFileIds: string[] = [];
public bulkSelectActive = false;
public statusFilters: FilterModel[];
public peopleFilters: FilterModel[];

7
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -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;
}
}

26
apps/red-ui/src/assets/styles/red-grid.scss Normal file
View File

@ -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;
}
}

23
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -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;
}

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -19,3 +19,4 @@
@import 'red-logo';
@import 'red-toasts';
@import 'red-tooltips';
@import 'red-grid';