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

Project listing table col names

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-22 21:34:50 +03:00
parent ebf8833ce3
commit 13a396c5e2
6 changed files with 73 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,58 +45,63 @@
</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 *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
<div class="table-content">
<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>
</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="flex-1">
<redaction-initials-avatar [username]="getOwnerName(pw)"
color="lightgray-red"
withName="true"
></redaction-initials-avatar>
</div>
<div class="stats-bar">
<redaction-status-bar
[config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
></redaction-status-bar>
<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>
</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 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>

8
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -13,7 +13,7 @@
.table-item {
&:hover {
.stats-bar {
.status {
display: none;
}
}
@ -21,10 +21,10 @@
.stats-subtitle {
margin-top: 6px;
}
}
.stats-bar, .action-buttons {
width: 160px;
}
.status, .action-buttons {
width: 160px;
}
}

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

@ -57,7 +57,7 @@
<div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></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 header-flex-end min-width"
<div class="flex-1 small-label flex-end min-width"
translate="project-overview.table-col-names.status.label"></div>
</div>

5
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -8,11 +8,6 @@
min-width: 60px;
}
.header-flex-end {
display: flex;
justify-content: flex-end;
}
.select-all-container {
display: flex;
gap: 16px;

11
apps/red-ui/src/assets/i18n/en.json
View File

@ -176,6 +176,17 @@
"label": "Recent"
}
},
"table-col-names": {
"name": {
"label": "Name"
},
"owner": {
"label": "Owner"
},
"status": {
"label": "Status"
}
},
"stats": {
"analyzed-pages": {
"label": "Analyzed pages"

5
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -76,6 +76,11 @@ html, body {
display: flex !important;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-1 {
flex: 1;
}