Redo tables layout with grid
This commit is contained in:
Adina Țeudan
parent
b78f8493d9
commit
f80639def1
@ -31,7 +31,7 @@
|
||||
<div class="left-container">
|
||||
<div class="table-header">
|
||||
<span class="all-caps-label">
|
||||
{{'project-listing.table-header.title.label'| translate:{length: appStateService.allProjects?.length || 0} }}
|
||||
{{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
|
||||
</span>
|
||||
<div class="actions">
|
||||
<div translate="project-listing.table-header.bulk-select.label"></div>
|
||||
@ -45,70 +45,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-col-names">
|
||||
<div class="flex-2 small-label min-width" translate="project-listing.table-col-names.name.label"></div>
|
||||
<div class="flex-1 small-label min-width" translate="project-listing.table-col-names.owner.label"></div>
|
||||
<div class="status small-label flex-end min-width"
|
||||
translate="project-listing.table-col-names.status.label"></div>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<div class="table-col-name">
|
||||
<span class="small-label" translate="project-listing.table-col-names.name.label"></span>
|
||||
</div>
|
||||
<div class="table-col-name">
|
||||
<span class="small-label" translate="project-listing.table-col-names.owner.label"></span>
|
||||
</div>
|
||||
<div class="table-col-name flex-end">
|
||||
<span class="small-label" translate="project-listing.table-col-names.status.label"></span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
|
||||
<div class="no-data" *ngIf="appStateService.allProjects?.length === 0 "
|
||||
translate="project-listing.no-projects.label"></div>
|
||||
|
||||
<div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
|
||||
[routerLink]="'/ui/projects/'+pw.project.projectId"
|
||||
class="table-item pointer"
|
||||
>
|
||||
<div class="flex-2">
|
||||
<div class="table-item-title table-item-title--large">
|
||||
{{pw.project.projectName}}
|
||||
</div>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:document"></mat-icon>
|
||||
{{documentCount(pw)}}</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:user"></mat-icon>
|
||||
{{userCount(pw)}}</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:calendar"></mat-icon>
|
||||
{{pw.project.date | date:'mediumDate'}}
|
||||
<div class="table-item pointer"
|
||||
[routerLink]="'/ui/projects/'+pw.project.projectId"
|
||||
*ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
|
||||
>
|
||||
<div>
|
||||
<div class="table-item-title table-item-title--large">
|
||||
{{pw.project.projectName}}
|
||||
</div>
|
||||
<div *ngIf="pw.project.dueDate">
|
||||
<mat-icon svgIcon="red:lightning"></mat-icon>
|
||||
{{pw.project.dueDate | date:'mediumDate'}}
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:document"></mat-icon>
|
||||
{{documentCount(pw)}}</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:user"></mat-icon>
|
||||
{{userCount(pw)}}</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:calendar"></mat-icon>
|
||||
{{pw.project.date | date:'mediumDate'}}
|
||||
</div>
|
||||
<div *ngIf="pw.project.dueDate">
|
||||
<mat-icon svgIcon="red:lightning"></mat-icon>
|
||||
{{pw.project.dueDate | date:'mediumDate'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<redaction-initials-avatar [username]="getOwnerName(pw)"
|
||||
color="lightgray-red"
|
||||
withName="true"
|
||||
></redaction-initials-avatar>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<redaction-status-bar
|
||||
[config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
|
||||
></redaction-status-bar>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
|
||||
[matTooltip]="'project-listing.delete.action.label'|translate">
|
||||
<mat-icon svgIcon="red:trash"></mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
|
||||
[matTooltip]="'project-listing.report.action.label'|translate">
|
||||
<mat-icon svgIcon="red:report"></mat-icon>
|
||||
</button>
|
||||
<button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
|
||||
[matTooltip]="'project-listing.assign.action.label'|translate">
|
||||
<mat-icon svgIcon="red:assign"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<redaction-initials-avatar [username]="getOwnerName(pw)"
|
||||
color="lightgray-red"
|
||||
withName="true"
|
||||
></redaction-initials-avatar>
|
||||
</div>
|
||||
<div class="status">
|
||||
<redaction-status-bar
|
||||
[config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
|
||||
></redaction-status-bar>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
|
||||
[matTooltip]="'project-listing.delete.action.label'|translate">
|
||||
<mat-icon svgIcon="red:trash"></mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
|
||||
[matTooltip]="'project-listing.report.action.label'|translate">
|
||||
<mat-icon svgIcon="red:report"></mat-icon>
|
||||
</button>
|
||||
<!-- <button mat-icon-button (click)="editProject($event,pw.project)">-->
|
||||
<!-- <mat-icon svgIcon="red:edit"></mat-icon>-->
|
||||
<!-- </button>-->
|
||||
<button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
|
||||
[matTooltip]="'project-listing.assign.action.label'|translate">
|
||||
<mat-icon svgIcon="red:assign"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right-fixed-container">
|
||||
|
||||
@ -11,19 +11,15 @@
|
||||
.left-container {
|
||||
width: calc(100vw - #{$right-container-width} - 130px);
|
||||
|
||||
.table-item {
|
||||
&:hover {
|
||||
.status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-subtitle {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.grid-container {
|
||||
grid-template-columns: 2fr 1fr auto;
|
||||
}
|
||||
|
||||
.status, .action-buttons {
|
||||
.stats-subtitle {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.status-container {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,75 +51,92 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-container">
|
||||
<!-- Table column names-->
|
||||
<div class="table-col-name"></div>
|
||||
|
||||
<div class="table-col-names">
|
||||
<div class="select-oval placeholder"></div>
|
||||
<div class="flex-6 small-label min-width" translate="project-overview.table-col-names.name.label"></div>
|
||||
<div class="flex-4 min-width pointer" (click)="toggleSortByAddedOn()">
|
||||
<div class="table-col-name">
|
||||
<span class="small-label" translate="project-overview.table-col-names.name.label"></span>
|
||||
</div>
|
||||
|
||||
<div class="table-col-name pointer" (click)="toggleSortByAddedOn()">
|
||||
<span class="small-label" translate="project-overview.table-col-names.added-on.label"></span>
|
||||
<div class="sort-arrows-container">
|
||||
<mat-icon svgIcon="red:arrow-up" [color]="sortingOption === sortingOptions[0] ? 'primary' : 'currentColor'"></mat-icon>
|
||||
<mat-icon svgIcon="red:arrow-down" [color]="sortingOption === sortingOptions[1] ? 'primary' : 'currentColor'"></mat-icon>
|
||||
<mat-icon svgIcon="red:arrow-up"
|
||||
[color]="sortingOption === sortingOptions[0] ? 'primary' : 'currentColor'"></mat-icon>
|
||||
<mat-icon svgIcon="red:arrow-down"
|
||||
[color]="sortingOption === sortingOptions[1] ? 'primary' : 'currentColor'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
|
||||
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
|
||||
<div class="flex-1 small-label flex-end min-width"
|
||||
translate="project-overview.table-col-names.status.label"></div>
|
||||
</div>
|
||||
|
||||
<div class="table-item"
|
||||
[class.pointer]="canOpenFile(fileStatus.status)"
|
||||
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
|
||||
[routerLink]="canOpenFile(fileStatus.status) ? ['/ui/projects/'+activeProject.projectId+'/file/'+fileStatus.fileId] : []">
|
||||
|
||||
<div class="select-oval"
|
||||
[class.active]="isFileSelected(fileStatus)"
|
||||
(click)="toggleFileSelected($event, fileStatus)"></div>
|
||||
|
||||
<div class="flex-6 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
|
||||
{{ fileStatus.filename }}
|
||||
<div class="table-col-name">
|
||||
<span class="small-label" translate="project-overview.table-col-names.needs-work.label"></span>
|
||||
</div>
|
||||
|
||||
<div class="small-label flex-4 min-width">
|
||||
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
|
||||
<div class="table-col-name">
|
||||
<span class="small-label" translate="project-overview.table-col-names.assigned-to.label"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex-2 min-width needs-work">
|
||||
<redaction-annotation-icon type="redaction"></redaction-annotation-icon>
|
||||
<redaction-annotation-icon type="hint"></redaction-annotation-icon>
|
||||
<div class="table-col-name flex-end">
|
||||
<span class="small-label" translate="project-overview.table-col-names.status.label"></span>
|
||||
</div>
|
||||
|
||||
<div class="small-label flex-2 assigned-to min-width">
|
||||
<redaction-initials-avatar
|
||||
withName="true"
|
||||
[username]="getFileOwnerUsername(fileStatus)"
|
||||
></redaction-initials-avatar>
|
||||
</div>
|
||||
<div class="table-item"
|
||||
[class.pointer]="canOpenFile(fileStatus.status)"
|
||||
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
|
||||
[routerLink]="canOpenFile(fileStatus.status) ? ['/ui/projects/'+activeProject.projectId+'/file/'+fileStatus.fileId] : []">
|
||||
|
||||
<div class="status-container flex-1 min-width">
|
||||
<redaction-status-bar
|
||||
[config]="[{ color: (fileStatus.status === 'PROCESSED' ? 'finished': fileStatus.status ==='ERROR'?'under-approval' : 'under-review'), length: 1 }]"
|
||||
></redaction-status-bar>
|
||||
</div>
|
||||
<div class="pr-0">
|
||||
<div class="select-oval"
|
||||
[class.active]="isFileSelected(fileStatus)"
|
||||
(click)="toggleFileSelected($event, fileStatus)"></div>
|
||||
</div>
|
||||
|
||||
<div class="table-item-title" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
|
||||
{{ fileStatus.filename }}
|
||||
</div>
|
||||
|
||||
<div class="small-label">
|
||||
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
|
||||
</div>
|
||||
|
||||
<div class="needs-work">
|
||||
<redaction-annotation-icon type="redaction"></redaction-annotation-icon>
|
||||
<redaction-annotation-icon type="hint"></redaction-annotation-icon>
|
||||
</div>
|
||||
|
||||
<div class="assigned-to">
|
||||
<redaction-initials-avatar
|
||||
withName="true"
|
||||
[username]="getFileOwnerUsername(fileStatus)"
|
||||
></redaction-initials-avatar>
|
||||
</div>
|
||||
|
||||
<div class="status-container">
|
||||
<redaction-status-bar
|
||||
[config]="[{ color: (fileStatus.status === 'PROCESSED' ? 'finished': fileStatus.status ==='ERROR'?'under-approval' : 'under-review'), length: 1 }]"
|
||||
></redaction-status-bar>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button (click)="openDeleteFileDialog($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.delete.action.label'|translate">
|
||||
<mat-icon svgIcon="red:trash"></mat-icon>
|
||||
</button>
|
||||
<button (click)="$event.stopPropagation()" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.report.action.label'|translate">
|
||||
<mat-icon svgIcon="red:report"></mat-icon>
|
||||
</button>
|
||||
<button (click)="openAssignFileOwnerDialog($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.assign.action.label'|translate">
|
||||
<mat-icon svgIcon="red:assign"></mat-icon>
|
||||
</button>
|
||||
<button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.bar-charts.action.label'|translate">
|
||||
<mat-icon svgIcon="red:analyse"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons flex-3 min-width">
|
||||
<button (click)="openDeleteFileDialog($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.delete.action.label'|translate">
|
||||
<mat-icon svgIcon="red:trash"></mat-icon>
|
||||
</button>
|
||||
<button (click)="$event.stopPropagation()" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.report.action.label'|translate">
|
||||
<mat-icon svgIcon="red:report"></mat-icon>
|
||||
</button>
|
||||
<button (click)="openAssignFileOwnerDialog($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.assign.action.label'|translate">
|
||||
<mat-icon svgIcon="red:assign"></mat-icon>
|
||||
</button>
|
||||
<button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button
|
||||
[matTooltip]="'project-overview.bar-charts.action.label'|translate">
|
||||
<mat-icon svgIcon="red:analyse"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.min-width {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.select-all-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@ -18,14 +14,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.select-oval {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $grey-5;
|
||||
background-color: $white;
|
||||
padding: 0;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
@ -37,25 +35,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.table-item {
|
||||
.needs-work {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
.grid-container {
|
||||
grid-template-columns: auto 3fr 2fr 1fr 2fr auto;
|
||||
|
||||
.status-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.assigned-to, .status-container {
|
||||
display: none;
|
||||
.table-item {
|
||||
.table-item-title {
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-left: 32px;
|
||||
.needs-work {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,59 +16,83 @@
|
||||
}
|
||||
}
|
||||
|
||||
.table-col-names {
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
|
||||
align-items: center;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
padding: 8px 16px;
|
||||
.no-data {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.table-col-name {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
text-transform: uppercase;
|
||||
|
||||
.sort-arrows-container {
|
||||
mat-icon {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 11px;
|
||||
.sort-arrows-container {
|
||||
mat-icon {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
|
||||
.table-item {
|
||||
display: contents;
|
||||
|
||||
> div {
|
||||
padding: 0 16px;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-item-title {
|
||||
font-weight: 600;
|
||||
@include line-clamp(1);
|
||||
}
|
||||
.table-item-title {
|
||||
font-weight: 600;
|
||||
@include line-clamp(1);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: none;
|
||||
}
|
||||
> div {
|
||||
height: 80px;
|
||||
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F9FAFB;
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: fit-content;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-left: 100px;
|
||||
padding-right: 8px;
|
||||
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, #F4F5F7 35%);
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> div {
|
||||
background-color: #F9FAFB;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user