Pull request #12: Ui updates

Merge in RED/ui from ui-updates to master

* commit '4c3c3fc17222c97d15b501613aeb064a69c2f829':
  Added icons & some other updates
  Text styles
This commit is contained in:
Timo Bejan 2020-10-16 12:18:10 +02:00
commit fb99d510bf
44 changed files with 330 additions and 438 deletions

View File

@ -4,6 +4,7 @@
flex: 1;
display: flex;
width: 100%;
min-width: 12px;
&.small {
.rectangle {

View File

@ -1,7 +1,7 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@NgModule({
imports: [CommonModule, MatIconModule],
@ -13,145 +13,23 @@ export class IconsModule {
private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer
) {
iconRegistry.addSvgIconInNamespace(
'red',
'calendar',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/calendar.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'files',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/files.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'user',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/user.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'stats',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/stats.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'drop-down',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/drop-down-arrow.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'plus',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/plus_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'close',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/close_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'edit',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/edit_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'delete',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/trash_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'logout',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/logout_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'preview',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/preview_icon.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'sort-asc',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-ascending.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'sort-desc',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-descending.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'menu',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/menu.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'chevron-right',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/double-chevron-right.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'info',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/info.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'refresh',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/refresh.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'arrow-down',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/arrow_down.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'arrow-up',
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/arrow_up.svg')
);
iconRegistry.addSvgIconInNamespace(
'red',
'error',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/error_icon.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'check',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/check_icon.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'idea',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/idea.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'secret',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/secret.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'pages',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/pages.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'bar-chart',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/bar_chart.svg'
)
);
const icons = [
'add', 'analyse', 'arrow-down', 'arrow-up', 'assign', 'calendar', 'check',
'close', 'document', 'double-chevron-right', 'download', 'drop-down-arrow',
'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages',
'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc',
'status', 'trash', 'user'
];
for (const icon of icons) {
iconRegistry.addSvgIconInNamespace(
'red',
icon,
sanitizer.bypassSecurityTrustResourceUrl(
`/assets/icons/general/${icon}.svg`
)
);
}
}

View File

@ -20,14 +20,14 @@
<a class="breadcrumb" routerLink="/ui/projects"
translate="top-bar.navigation-items.projects.label"></a>
<div *ngIf="appStateService.activeProject" class="breadcrumb">
<mat-icon svgIcon="red:chevron-right"></mat-icon>
<mat-icon svgIcon="red:double-chevron-right"></mat-icon>
</div>
<a *ngIf="appStateService.activeProject" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId">
{{appStateService.activeProject.project.projectName}}
</a>
<div *ngIf="appStateService.activeFile" class="breadcrumb">
<mat-icon svgIcon="red:chevron-right"></mat-icon>
<mat-icon svgIcon="red:double-chevron-right"></mat-icon>
</div>
<a *ngIf="appStateService.activeFile" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId+'/file/'+appStateService.activeFile.fileId">
@ -43,7 +43,7 @@
<div class="account-button-wrapper">
<redaction-initials-avatar color="red-white" size="small" [username]="user?.name"></redaction-initials-avatar>
<span>{{user?.name}}</span>
<mat-icon svgIcon="red:drop-down"></mat-icon>
<mat-icon svgIcon="red:drop-down-arrow"></mat-icon>
</div>
</button>
<mat-menu #menu="matMenu">

View File

@ -46,7 +46,7 @@
<!-- Quick navigation tab-->
<div class="vertical" (click)="selectTab('NAVIGATION')" [ngClass]="{ active: navigationTab}"
#navigationTabElement>
<div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'"
<div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'all-caps-label'"
translate="file-preview.tabs.quick-navigation.label">
<div>
<button color="accent" mat-button
@ -57,11 +57,11 @@
<div class="dot" *ngIf="hasActiveFilters"></div>
<mat-menu class="filter-menu" #filterMenu="matMenu" xPosition="before">
<div class="filter-menu-header">
<div class="subheading" translate="file-preview.filter-menu.filter-types.label"></div>
<div class="all-caps-label" translate="file-preview.filter-menu.filter-types.label"></div>
<div class="actions">
<div class="subheading primary pointer" translate="file-preview.filter-menu.all.label"
<div class="all-caps-label primary pointer" translate="file-preview.filter-menu.all.label"
(click)="setAllFilters(true); $event.stopPropagation();"></div>
<div class="subheading primary pointer" translate="file-preview.filter-menu.none.label"
<div class="all-caps-label primary pointer" translate="file-preview.filter-menu.none.label"
(click)="setAllFilters(false); $event.stopPropagation();"></div>
</div>
</div>
@ -84,9 +84,9 @@
[ngClass]="{ active: item.pageNumber === activeViewerPage, hidden: !showQuickNavigationItem(item) }"
(click)="selectPage(item.pageNumber)"
>
<div class="page-number subtitle">{{ item.pageNumber }}</div>
<div class="page-number small-label">{{ item.pageNumber }}</div>
<div *ngFor="let key of filterKeys"
[ngClass]="{ hidden: !showAnnotations(item, key)}" class="page-stats subtitle">
[ngClass]="{ hidden: !showAnnotations(item, key)}" class="page-stats small-label">
<div [class]="filters[key].class + ' x-small'">{{ filters[key].symbol }}</div>
{{item[key]}}
</div>
@ -97,7 +97,7 @@
<!-- Annotations tab-->
<div (click)="selectTab('ANNOTATIONS')" class="vertical" [ngClass]="{ active: annotationsTab }"
#annotationsContainer>
<div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'subheading'"
<div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'all-caps-label'"
translate="file-preview.tabs.annotations.label">
<mat-icon class="close-icon"
*ngIf="annotationsTab"
@ -118,7 +118,7 @@
<div class="annotation-actions">
<button mat-icon-button (click)="suggestRemoveAnnotation($event, annotation)">
<mat-icon svgIcon="red:delete"></mat-icon>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
</div>
</div>
@ -127,7 +127,7 @@
<!-- Info tab-->
<div class="vertical" (click)="selectTab('INFO')" [ngClass]="{ active: infoTab}">
<div class="tab-title" [ngClass]="infoTab ? 'heading' : 'subheading'"
<div class="tab-title" [ngClass]="infoTab ? 'heading' : 'all-caps-label'"
translate="file-preview.tabs.info.label">
<mat-icon class="close-icon"
*ngIf="infoTab"
@ -137,15 +137,15 @@
<div *ngIf="infoTab" class="tab-content info-container">
<redaction-status-bar [small]="true"
[labelClass]="'subtitle'"
labelClass="small-label"
[config]="[{ length: 1, label: 'Unassigned', color: 'unassigned'}]"></redaction-status-bar>
<div class="subtitle stats-subtitle mt-5">
<div class="small-label stats-subtitle mt-5">
<div>
<mat-icon svgIcon="red:pages"></mat-icon>
{{appStateService.activeFile.numberOfPages}}</div>
<div>
<mat-icon svgIcon="red:bar-chart"></mat-icon>
<mat-icon svgIcon="red:analyse"></mat-icon>
{{annotations.length}}</div>
</div>
@ -154,21 +154,21 @@
<a class="assign-reviewer" translate="file-preview.tabs.info.assign-reviewer.label"></a>
</div>
<div class="subheading mt-20" translate="file-preview.tabs.info.added-on.label">
<div class="all-caps-label mt-20" translate="file-preview.tabs.info.added-on.label">
</div>
<div class="subtitle mt-5">
<div class="small-label mt-5">
{{appStateService.activeFile.added | date:'medium'}}
</div>
<div class="subheading mt-20" translate="file-preview.tabs.info.added-by.label">
<div class="all-caps-label mt-20" translate="file-preview.tabs.info.added-by.label">
</div>
<div class="subtitle mt-5">
<div class="small-label mt-5">
{{user.name}}
</div>
<div class="subheading mt-20" translate="file-preview.tabs.info.last-modified-on.label">
<div class="all-caps-label mt-20" translate="file-preview.tabs.info.last-modified-on.label">
</div>
<div class="subtitle mt-5">
<div class="small-label mt-5">
{{appStateService.activeFile.lastUpdated | date:'medium'}}
</div>
</div>

View File

@ -1,11 +1,24 @@
<div class="page-header">
<div class="filters flex-row">
<span translate="filters.filter-by.label"></span>
<div translate="filters.status.label"></div>
<div translate="filters.people.label"></div>
<div translate="filters.due-date.label"></div>
<div translate="filters.project.label"></div>
<div translate="filters.document.label"></div>
<div translate="filters.status.label" class="icon-button">
<mat-icon svgIcon="red:status"></mat-icon>
</div>
<div translate="filters.people.label" class="icon-button">
<mat-icon svgIcon="red:user"></mat-icon>
</div>
<div translate="filters.due-date.label" class="icon-button">
<mat-icon svgIcon="red:lightning"></mat-icon>
</div>
<div translate="filters.created-on.label" class="icon-button">
<mat-icon svgIcon="red:calendar"></mat-icon>
</div>
<div translate="filters.project.label" class="icon-button">
<mat-icon svgIcon="red:folder"></mat-icon>
</div>
<div translate="filters.document.label" class="icon-button">
<mat-icon svgIcon="red:document"></mat-icon>
</div>
</div>
<button (click)="openAddProjectDialog()" color="primary" mat-flat-button class="add-project-btn">
<mat-icon svgIcon="red:plus">
@ -14,12 +27,10 @@
</button>
</div>
<div *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
<div class="flex red-content-inner">
<div class="left-container">
<div class="table-header">
<span class="subheading">
<span class="all-caps-label">
{{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
</span>
<div class="actions">
@ -34,6 +45,8 @@
</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"
@ -43,9 +56,9 @@
<div class="table-item-title table-item-title--large">
{{pw.project.projectName}}
</div>
<div class="subtitle stats-subtitle">
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:files"></mat-icon>
<mat-icon svgIcon="red:document"></mat-icon>
{{documentCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>
@ -67,18 +80,22 @@
></redaction-status-bar>
</div>
<div class="on-hover-wrapper">
<div class="on-hover">
<button mat-icon-button (click)="deleteProject($event,pw.project)">
<mat-icon svgIcon="red:delete"></mat-icon>
</button>
<button mat-icon-button (click)="editProject($event,pw.project)">
<mat-icon svgIcon="red:edit"></mat-icon>
</button>
<button mat-icon-button (click)="showDetailsDialog($event,pw)">
<mat-icon svgIcon="red:stats"></mat-icon>
</button>
</div>
<div class="action-buttons">
<button mat-icon-button color="accent" (click)="deleteProject($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)="showDetailsDialog($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)="$event.stopPropagation()" mat-icon-button
[matTooltip]="'project-listing.assign.action.label'|translate">
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
</div>
</div>
</div>
@ -93,7 +110,7 @@
<div class="project-stats-container">
<div class="project-stats-item">
<mat-icon svgIcon="red:files"></mat-icon>
<mat-icon svgIcon="red:document"></mat-icon>
<div>
<div class="heading">{{totalPages}}</div>
<div translate="project-listing.stats.analyzed-pages.label"></div>

View File

@ -1,13 +1,5 @@
@import "../../../assets/styles/red-mixins";
.stats-subtitle {
margin-top: 6px;
}
.stats-bar {
width: 160px;
}
.add-project-btn {
mat-icon {
width: 14px;
@ -16,6 +8,23 @@
}
}
.left-container {
width: calc(100vw - #{$right-container-width} - 130px);
.table-item:hover {
.stats-bar {
display: none;
}
}
.stats-subtitle {
margin-top: 6px;
}
.stats-bar, .action-buttons {
width: 160px;
}
}
.right-fixed-container {
display: flex;
@ -31,7 +40,7 @@
.project-stats-container {
width: fit-content;
.project-stats-item {
display: flex;
width: fit-content;
@ -44,13 +53,8 @@
mat-icon {
height: 16px;
width: 16px;
margin-top: 2px;
}
}
}
}
.left-container {
width: calc(100vw - #{$right-container-width} - 130px);
}

View File

@ -2,14 +2,27 @@
[innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
class="heading-l"></div>
<div *ngIf="appStateService.activeProject" class="page-header">
<div class="filters flex-row">
<span translate="filters.filter-by.label"></span>
<div translate="filters.status.label"></div>
<div translate="filters.people.label"></div>
<div translate="filters.due-date.label"></div>
<div translate="filters.document.label"></div>
<div translate="filters.status.label" class="icon-button">
<mat-icon svgIcon="red:status"></mat-icon>
</div>
<div translate="filters.people.label" class="icon-button">
<mat-icon svgIcon="red:user"></mat-icon>
</div>
<div translate="filters.due-date.label" class="icon-button">
<mat-icon svgIcon="red:lightning"></mat-icon>
</div>
<div translate="filters.created-on.label" class="icon-button">
<mat-icon svgIcon="red:calendar"></mat-icon>
</div>
<div translate="filters.project.label" class="icon-button">
<mat-icon svgIcon="red:folder"></mat-icon>
</div>
<div translate="filters.document.label" class="icon-button">
<mat-icon svgIcon="red:document"></mat-icon>
</div>
</div>
<button (click)="fileInput.click()" color="primary" mat-flat-button
translate="project-overview.upload-document.label"></button>
@ -20,8 +33,8 @@
<div class="flex red-content-inner">
<div class="left-container">
<div class="table-header">
<span class="subheading">
{{'project-overview.table-header.title.label'| translate:{length: appStateService.activeProject?.files.length || 0} }}
<span class="all-caps-label">
{{'project-overview.table-header.title.label'| translate:{ length: appStateService.activeProject?.files.length || 0 } }}
</span>
<div class="actions">
<div translate="project-overview.table-header.bulk-select.label"></div>
@ -36,80 +49,92 @@
</div>
<div class="table-col-names">
<div class="flex-3 subtitle min-width" translate="project-overview.table-col-names.name.label"></div>
<div class="flex-2 subtitle min-width" translate="project-overview.table-col-names.added-on.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.added-by.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
<div class="subtitle status-container" translate="project-overview.table-col-names.status.label"></div>
<div class="flex-6 small-label min-width" translate="project-overview.table-col-names.name.label"></div>
<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 status-container min-width" translate="project-overview.table-col-names.status.label"></div>
</div>
<div class="table-item"
[class.pointer]="fileStatus.status === 'PROCESSED'"
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
[routerLink]="fileStatus.status === 'PROCESSED' ? ['/ui/projects/'+projectId+'/file/'+fileStatus.fileId] : []">
<div class="flex-3 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
<div class="flex-6 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
{{ fileStatus.filename }}
</div>
<div class="subtitle flex-2 min-width">
<div class="small-label flex-4 min-width">
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
</div>
<div class="subtitle flex-1 min-width">
Timo Bejan
<div class="flex-2 min-width needs-work">
<div class="oval darkgray-white x-small">R</div>
<div class="oval red-white x-small">S</div>
</div>
<div class="subtitle flex-1 min-width">
<div class="small-label flex-2 assigned-to min-width">
<redaction-initials-avatar
withName="true"
></redaction-initials-avatar>
</div>
<div class=" status-container">
<div class="status-bar-wrapper">
<redaction-status-bar
[config]="[{ color: (fileStatus.status === 'PROCESSED' ? 'finished': fileStatus.status ==='ERROR'?'under-approval' : 'under-review'), length: 1 }]"
></redaction-status-bar>
</div>
<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="on-hover-wrapper">
<div class="on-hover">
<button (click)="deleteFile($event,fileStatus)" color="accent" mat-icon-button
[matTooltip]="'project-overview.delete.action.label'|translate">
<mat-icon svgIcon="red:delete"></mat-icon>
</button>
<button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button
[matTooltip]="'project-overview.reanalyse.action.label'|translate">
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
</div>
<div class="action-buttons flex-3 min-width">
<button (click)="deleteFile($event,fileStatus)" color="accent" mat-icon-button
[matTooltip]="'project-overview.delete.action.label'|translate">
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<!-- <button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button-->
<!-- [matTooltip]="'project-overview.reanalyse.action.label'|translate">-->
<!-- <mat-icon svgIcon="red:refresh"></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)="$event.stopPropagation()" color="accent" mat-icon-button
[matTooltip]="'project-overview.assign.action.label'|translate">
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button (click)="$event.stopPropagation()" color="accent" mat-icon-button
[matTooltip]="'project-overview.bar-charts.action.label'|translate">
<mat-icon svgIcon="red:analyse"></mat-icon>
</button>
</div>
</div>
</div>
<div class="project-details-container right-fixed-container">
<div class="actions-row">
<button mat-icon-button (click)="deleteProject($event)">
<mat-icon svgIcon="red:delete"></mat-icon>
<button mat-icon-button class="icon-button" (click)="deleteProject($event)">
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button mat-icon-button (click)="editProject($event)">
<button mat-icon-button class="icon-button" (click)="editProject($event)">
<mat-icon svgIcon="red:edit"></mat-icon>
</button>
<button mat-icon-button (click)="showDetailsDialog($event)">
<mat-icon svgIcon="red:stats"></mat-icon>
<button mat-icon-button class="icon-button" (click)="showDetailsDialog($event)">
<mat-icon svgIcon="red:report"></mat-icon>
</button>
</div>
<div class="subtitle stats-subtitle mt-20">
<div class="small-label stats-subtitle mt-20">
<div>
<mat-icon svgIcon="red:pages"></mat-icon> {{ appStateService.activeProject.files.length }}
<mat-icon svgIcon="red:pages"></mat-icon>
{{ appStateService.activeProject.files.length }}
</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>1
<mat-icon svgIcon="red:user"></mat-icon>
1
</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon> {{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
<mat-icon svgIcon="red:calendar"></mat-icon>
{{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
</div>
</div>
@ -130,7 +155,7 @@
</div>
<div class="project-team mt-20">
<div class="subheading" translate="project-overview.project-details.project-team.label"></div>
<div class="all-caps-label" translate="project-overview.project-details.project-team.label"></div>
<div class="flex mt-20 members-container">
<div *ngFor="let username of ['S H', 'D O', 'E G', 'D V', 'J A', 'T H', 'P B']" class="member">
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>

View File

@ -8,19 +8,27 @@
min-width: 60px;
}
.status-container {
display: flex;
justify-content: flex-end;
width: 40px;
.status-bar-wrapper {
width: 40px;
.table-item {
.needs-work {
display: flex;
flex-direction: row;
gap: 4px;
}
}
.table-header redaction-status-bar {
width: 100%;
padding-bottom: 10px;
.status-container {
display: flex;
justify-content: flex-end;
}
&:hover {
.assigned-to, .status-container {
display: none;
}
.action-buttons {
margin-left: 32px;
}
}
}
.project-details-container {

View File

@ -49,7 +49,6 @@ section {
mat-icon {
width: 16px;
height: 16px;
}
.upload-line {

View File

@ -126,6 +126,9 @@
"due-date": {
"label": "Due Date"
},
"created-on": {
"label": "Created On"
},
"project": {
"label": "Project"
},
@ -264,8 +267,8 @@
"added-on": {
"label": "Added on"
},
"added-by": {
"label": "Added by"
"needs-work": {
"label": "Needs work"
},
"assigned-to": {
"label": "Assigned to"

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>analyse</title>
<g id="analyse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M16.5,89 L16.5,100 L0,100 L0,89 L16.5,89 Z M44.5,89 L44.5,100 L28,100 L28,89 L44.5,89 Z M72,89 L72,100 L55.5,100 L55.5,89 L72,89 Z M100,89 L100,100 L83.5,100 L83.5,89 L100,89 Z M16.5,66.5 L16.5,77.5 L0,77.5 L0,66.5 L16.5,66.5 Z M44.5,66.5 L44.5,77.5 L28,77.5 L28,66.5 L44.5,66.5 Z M72,66.5 L72,77.5 L55.5,77.5 L55.5,66.5 L72,66.5 Z M100,66.5 L100,77.5 L83.5,77.5 L83.5,66.5 L100,66.5 Z M16.5,44.5 L16.5,55.5 L0,55.5 L0,44.5 L16.5,44.5 Z M44.5,44.5 L44.5,55.5 L28,55.5 L28,44.5 L44.5,44.5 Z M100,44.5 L100,55.5 L83.5,55.5 L83.5,44.5 L100,44.5 Z M44.5,22 L44.5,33 L28,33 L28,22 L44.5,22 Z M100,22 L100,33 L83.5,33 L83.5,22 L100,22 Z M44.5,0 L44.5,11 L28,11 L28,0 L44.5,0 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>assign</title>
<g id="assign" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M35,50 C54.5,50 70,65.5 70,85 L70,85 L70,100 L0,100 L0,85 C0,65.5 15.5,50 35,50 Z M35,60 C21,60 10,71 10,85 L10,85 L10,90 L60,90 L60,85 C60,71 49,60 35,60 Z M35,5 C46,5 55,14 55,25 C55,36 46,45 35,45 C24,45 15,36 15,25 C15,14 24,5 35,5 Z M85,0 L85,15 L100,15 L100,25 L85,25 L85,40 L75,40 L75,25 L60,25 L60,15 L75,15 L75,0 L85,0 Z M35,15 C29.5,15 25,19.5 25,25 C25,30.5 29.5,35 35,35 C40.5,35 45,30.5 45,25 C45,19.5 40.5,15 35,15 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 824 B

View File

@ -1,50 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<g>
<path d="M117.547,234.667H10.88c-5.888,0-10.667,4.779-10.667,10.667v256C0.213,507.221,4.992,512,10.88,512h106.667
c5.909,0,10.667-4.779,10.667-10.667v-256C128.213,239.445,123.435,234.667,117.547,234.667z M106.88,490.667H21.547V256h85.333
V490.667z"/>
<path d="M309.12,0H202.453c-5.888,0-10.667,4.779-10.667,10.667v490.667c0,5.888,4.779,10.667,10.667,10.667H309.12
c5.888,0,10.667-4.779,10.667-10.667V10.667C319.787,4.779,315.008,0,309.12,0z M298.453,490.667H213.12V21.333h85.333V490.667z"
/>
<path d="M501.12,106.667H394.453c-5.888,0-10.667,4.779-10.667,10.667v384c0,5.888,4.779,10.667,10.667,10.667H501.12
c5.888,0,10.667-4.779,10.667-10.667v-384C511.787,111.445,507.008,106.667,501.12,106.667z M490.453,490.667H405.12V128h85.333
V490.667z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,31 +1,9 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 309.49 309.49" style="enable-background:new 0 0 309.49 309.49;" xml:space="preserve">
<g>
<path d="M5.504,303.826h298.484c3.039,0,5.502-2.464,5.502-5.503V31.43c0-3.039-2.463-5.502-5.502-5.502h-60.576V11.166
c0-3.039-2.465-5.502-5.504-5.502c-3.039,0-5.502,2.463-5.502,5.502v14.762h-44.436V11.166c0-3.039-2.465-5.502-5.504-5.502
c-3.039,0-5.502,2.463-5.502,5.502v14.762h-44.436V11.166c0-3.039-2.463-5.502-5.504-5.502c-3.039,0-5.502,2.463-5.502,5.502
v14.762H77.084V11.166c0-3.039-2.463-5.502-5.502-5.502c-3.039,0-5.504,2.463-5.504,5.502v14.762H5.504
C2.465,25.928,0,28.391,0,31.43v266.894C0,301.362,2.465,303.826,5.504,303.826z M11.006,36.934h55.072v22.76
c0,3.039,2.465,5.503,5.504,5.503c3.039,0,5.502-2.464,5.502-5.503v-22.76h44.439v22.76c0,3.039,2.463,5.503,5.502,5.503
c3.041,0,5.504-2.464,5.504-5.503v-22.76h44.436v22.76c0,3.039,2.463,5.503,5.502,5.503c3.039,0,5.504-2.464,5.504-5.503v-22.76
h44.436v22.76c0,3.039,2.463,5.503,5.502,5.503c3.039,0,5.504-2.464,5.504-5.503v-22.76h55.072V292.82H11.006V36.934z"/>
<path d="M271.705,104.438H37.789c-3.039,0-5.502,2.463-5.502,5.502v163.799c0,3.039,2.463,5.503,5.502,5.503h233.916
c3.039,0,5.502-2.464,5.502-5.503V109.939C277.207,106.9,274.744,104.438,271.705,104.438z M266.201,268.235H43.293V115.443
h222.908V268.235z"/>
<path d="M56.451,225.957c-3.039,0-5.504,2.463-5.504,5.502c0,3.039,2.465,5.504,5.504,5.504h31.711v17.695
c0,3.039,2.465,5.502,5.504,5.502c3.039,0,5.502-2.463,5.502-5.502v-17.695h29.713v17.695c0,3.039,2.465,5.502,5.504,5.502
c3.039,0,5.502-2.463,5.502-5.502v-17.695h29.715v17.695c0,3.039,2.465,5.502,5.504,5.502c3.039,0,5.502-2.463,5.502-5.502v-17.695
h29.719v17.695c0,3.039,2.463,5.502,5.502,5.502c3.039,0,5.504-2.463,5.504-5.502v-17.695h31.707c3.039,0,5.504-2.465,5.504-5.504
c0-3.039-2.465-5.502-5.504-5.502h-31.707v-28.615h31.707c3.039,0,5.504-2.463,5.504-5.502c0-3.039-2.465-5.504-5.504-5.504
h-31.707v-28.614h31.707c3.039,0,5.504-2.464,5.504-5.503c0-3.039-2.465-5.503-5.504-5.503h-31.707v-17.691
c0-3.039-2.465-5.503-5.504-5.503c-3.039,0-5.502,2.464-5.502,5.503v17.691h-29.719v-17.691c0-3.039-2.463-5.503-5.502-5.503
c-3.039,0-5.504,2.464-5.504,5.503v17.691h-29.715v-17.691c0-3.039-2.463-5.503-5.502-5.503c-3.039,0-5.504,2.464-5.504,5.503
v17.691H99.168v-17.691c0-3.039-2.463-5.503-5.502-5.503c-3.039,0-5.504,2.464-5.504,5.503v17.691H56.451
c-3.039,0-5.504,2.464-5.504,5.503c0,3.039,2.465,5.503,5.504,5.503h31.711v28.614H56.451c-3.039,0-5.504,2.465-5.504,5.504
c0,3.039,2.465,5.502,5.504,5.502h31.711v28.615H56.451z M139.887,225.957v-28.615h29.715v28.615H139.887z M210.326,225.957
h-29.719v-28.615h29.719V225.957z M210.326,157.722v28.614h-29.719v-28.614H210.326z M169.602,157.722v28.614h-29.715v-28.614
H169.602z M99.168,157.722h29.713v28.614H99.168V157.722z M99.168,197.342h29.713v28.615H99.168V197.342z"/>
<path d="M71.582,90.321h166.326c3.039,0,5.504-2.464,5.504-5.503c0-3.039-2.465-5.503-5.504-5.503H71.582
c-3.039,0-5.504,2.464-5.504,5.503C66.078,87.857,68.543,90.321,71.582,90.321z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>calendar</title>
<g id="calendar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
<path d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
<path d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g id="document" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M90,0 L90,100 L10,100 L10,0 L90,0 Z M80,10 L20,10 L20,90 L80,90 L80,10 Z M50,60 L50,70 L30,70 L30,60 L50,60 Z M70,40 L70,50 L30,50 L30,40 L70,40 Z M70,20 L70,30 L30,30 L30,20 L70,20 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 581 B

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>edit</title>
<g id="edit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M97.0465218,17 L83.0398073,3 C79.0378889,-1 72.5347714,-1 69.0330928,3 L0,71.5 L0,100 L28.5136688,100 L97.0465218,31 C102.54916,25.5 99.047481,19 97.0465218,17 Z M24.0115105,90 L10.0047961,90 L10.0047961,76 L62.0297356,24 L76.03645,38 L24.0115105,90 Z M83.0398073,31 L69.0330928,17 L76.03645,10 L90.0431645,24 L83.0398073,31 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 707 B

View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg"
>
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g fill="none" fill-rule="evenodd" id="Settings" stroke="none" stroke-width="1">
<g id="Data-Sources" transform="translate(-861.000000, -417.000000)">
<path
d="M871.544734,420.06954 L873.735863,421.975203 L874.418673,421.201826 L872.227543,419.296163 L871.544734,420.06954 Z M873.261172,418.127977 L863.951984,428.622778 L863.238626,431.663236 L866.093723,430.610498 L875.429864,420.057271 L873.261172,418.127977 Z M862.697567,432.966272 C862.311527,433.111098 861.92,432.766892 862.014181,432.365479 L862.967941,428.300384 C862.987433,428.217303 863.027233,428.140356 863.083775,428.076438 L872.637992,417.27577 C872.776701,417.114993 872.974402,417.016837 873.188192,417.00176 C873.401958,416.987631 873.611804,417.058993 873.771464,417.201116 L876.285534,419.437675 C876.444382,419.57737 876.541926,419.773942 876.555853,419.98466 C876.569851,420.196445 876.49855,420.405316 876.357684,420.565503 L866.808151,431.359941 C866.752322,431.423049 866.681883,431.47152 866.606211,431.49987 C866.602701,431.501232 865.29982,431.990033 862.697567,432.966272 Z"
fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,13 +0,0 @@
<svg id="Layer_1" enable-background="new 0 0 510 510" height="512" viewBox="0 0 510 510" width="512"
xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m120 255h270v30h-270z"/>
<path d="m180 180h210v30h-210z"/>
<path
d="m360 44.906v-44.906h-210v44.906h-90v465.094h390v-465.094zm-180-14.906h150v60h-150zm240 450h-330v-405.094h60v45.094h210v-45.094h60z"/>
<path d="m120.469 180h29.063v30h-29.063z"/>
<path d="m120 405h270v30h-270z"/>
<path d="m180 330h210v30h-210z"/>
<path d="m120.469 330h29.063v30h-29.063z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 563 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>folder</title>
<g id="folder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M43,15 L38,5 L0,5 L0,95 L100,95 L100,15 L43,15 Z M32,15 L37,25 L55.5,25 L52,30 L10,30 L10,15 L32,15 Z M90,85 L10,85 L10,40 L57.5,40 L67.5,25 L90,25 L90,85 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 541 B

View File

@ -1 +0,0 @@
<svg height="511pt" viewBox="-76 1 511 511.99935" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m94.324219 336.6875v132.660156c0 .121094.058593.214844.066406.332032.042969.875.21875 1.738281.519531 2.5625.078125.1875.121094.375.199219.5625.074219.1875.058594.210937.109375.3125l17.0625 34.121093c1.429688 2.910157 4.390625 4.753907 7.632812 4.761719h119.421876c3.25.015625 6.226562-1.8125 7.679687-4.71875l17.058594-34.121094c.050781-.101562.058593-.210937.109375-.3125.050781-.105468.121094-.375.199218-.566406.300782-.820312.476563-1.683594.519532-2.558594 0-.117187.066406-.210937.066406-.332031v-132.703125c86.996094-47.109375 119.332031-155.824219 72.21875-242.820312-47.109375-86.996094-155.824219-119.328126-242.820312-72.21875-86.996094 47.109374-119.328126 155.824218-72.21875 242.820312 16.554687 30.570312 41.648437 55.664062 72.21875 72.21875zm139.738281 158.25h-108.878906l-8.527344-17.058594h125.9375zm13.804688-34.117188h-136.484376v-17.0625h119.421876v-17.058593h-119.421876v-17.0625h119.421876v-17.058594h-119.421876v-17.058594h136.484376zm-122.484376-246.746093c-2.113281-1.695313-4.90625-2.289063-7.523437-1.59375-2.109375.601562-4.285156.925781-6.476563.960937-14.085937.050782-25.542968-11.328125-25.59375-25.414062-.035156-10.917969 6.878907-20.648438 17.199219-24.203125 4.445313-1.558594 6.789063-6.425781 5.226563-10.875-.238282-.675781-.558594-1.324219-.960938-1.921875-7.90625-11.714844-4.820312-27.621094 6.894532-35.527344 8.648437-5.839844 19.980468-5.839844 28.632812 0 3.917969 2.621094 9.214844 1.570312 11.835938-2.34375.398437-.597656.722656-1.242188.960937-1.921875 4.507813-13.261719 18.910156-20.355469 32.171875-15.847656 5.785156 1.964843 10.667969 5.953125 13.746094 11.234375 2.414062 4.042968 7.648437 5.367187 11.695312 2.953125.40625-.242188.789063-.515625 1.152344-.820313 10.574219-9.160156 26.574219-8.015625 35.734375 2.5625 2.761719 3.1875 4.683594 7.015625 5.59375 11.136719.730469 3.191406 3.222656 5.683594 6.414063 6.414063 13.664062 3.011718 22.300781 16.527343 19.289062 30.191406-.863281 3.914062-2.640625 7.566406-5.191406 10.660156-2.519532 3.125-2.519532 7.585938 0 10.714844 3.71875 4.488281 5.769531 10.121094 5.800781 15.949218 0 14.132813-11.457031 25.589844-25.589844 25.589844-2.355469-.042968-4.699219-.421875-6.949219-1.117187-4.53125-1.289063-9.25 1.339843-10.539062 5.871093-.054688.1875-.101562.378907-.144531.570313-2.542969 11.792969-12.953125 20.226563-25.015625 20.265625-4.511719-.019531-8.929688-1.253906-12.796875-3.570312-4.078125-2.359376-9.296875-.960938-11.652344 3.121093-.746094 1.289063-1.140625 2.753907-1.144531 4.246094v107.097656h-17.058594v-103.574219c-.003906-4.710937-3.828125-8.527343-8.539062-8.519531-.71875 0-1.433594.089844-2.132813.269531-13.40625 3.742188-27.3125-4.09375-31.050781-17.503906-.601563-2.15625-.914063-4.386718-.925782-6.625 0-.292968.125-1.144531.132813-1.433594.105469-2.707031-1.078125-5.304687-3.195313-6.996093zm54.242188-196.824219c89.457031-.050781 162.019531 72.429688 162.070312 161.890625.03125 61.226563-34.457031 117.238281-89.144531 144.769531-2.875 1.453125-4.6875 4.398438-4.683593 7.617188v26.929687h-42.652344v-94.683593c2.808594.578124 5.664062.863281 8.53125.851562 17-.066406 32.359375-10.171875 39.144531-25.761719 23.332031 2.070313 43.921875-15.167969 45.992187-38.5.117188-1.324219.171876-2.652343.164063-3.980469.007813-7.507812-2.011719-14.875-5.851563-21.324218 3.839844-6.453125 5.859376-13.820313 5.851563-21.328125.078125-17.984375-11.207031-34.058594-28.148437-40.089844-7.820313-22.03125-32.019532-33.546875-54.046876-25.726563-2.085937.738282-4.105468 1.640626-6.050781 2.695313-8-8.746094-19.324219-13.703125-31.175781-13.648437-14.585938.035156-28.140625 7.539062-35.910156 19.882812-21.996094-8.4375-46.664063 2.554688-55.097656 24.546875-3.773438 9.835937-3.773438 20.714844 0 30.550781-19.890626 12.519532-25.867188 38.792969-13.347657 58.683594 7.96875 12.664062 22.007813 20.210938 36.964844 19.878906 4.082031 19.84375 21.539063 34.09375 41.800781 34.121094v93.828125h-42.652344v-26.929687c0-3.21875-1.808593-6.164063-4.683593-7.617188-79.90625-40.222656-112.070313-137.609375-71.84375-217.515625 27.53125-54.683594 83.542969-89.175781 144.769531-89.140625zm0 0"/></svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>due</title>
<g id="due" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M70.4893515,-9.9475983e-14 L62.4015412,33.8688525 L83,33.8688525 L43.936,99.999 L25.137,99.999 L32.8329308,67.7704918 L17,67.7704918 L33.1807168,-9.9475983e-14 L70.4893515,-9.9475983e-14 Z M57.9505865,9.83606557 L41.0222871,9.83606557 L29.5384402,57.9344262 L45.3723404,57.9344262 L37.2849872,91.8032787 L65.6971335,43.704918 L49.8632333,43.704918 L57.9505865,9.83606557 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 760 B

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>report</title>
<g id="report" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M90,0 C95.5,0 100,4.5 100,10 L100,10 L100,90 C100,95.5 95.5,100 90,100 L90,100 L10,100 C4.5,100 0,95.5 0,90 L0,90 L0,10 C0,4.5 4.5,0 10,0 L10,0 Z M90,10 L10,10 L10,90 L90,90 L90,10 Z M35,60 L35,80 L25,80 L25,60 L35,60 Z M55,30 L55,80 L45,80 L45,30 L55,30 Z M75,50 L75,80 L65,80 L65,50 L75,50 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 687 B

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,14 +0,0 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"
xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="437" cy="86.281" r="15"/>
<circle cx="377" cy="86.281" r="15"/>
<circle cx="317" cy="86.281" r="15"/>
<path
d="m15 497h482c8.284 0 15-6.716 15-15v-332-120c0-8.284-6.716-15-15-15h-482c-8.284 0-15 6.716-15 15v120 332c0 8.284 6.716 15 15 15zm15-452h452v90h-452zm0 120h452v302h-452z"/>
<path
d="m437 407h-16v-91c0-8.284-6.716-15-15-15h-60c-8.284 0-15 6.716-15 15v91h-30v-197c0-8.284-6.716-15-15-15h-60c-8.284 0-15 6.716-15 15v197h-30v-148.764c0-8.284-6.716-15-15-15h-60c-8.284 0-15 6.716-15 15v148.764h-16c-8.284 0-15 6.716-15 15s6.716 15 15 15h362c8.284 0 15-6.716 15-15s-6.716-15-15-15zm-286 0h-30v-133.764h30zm120 0h-30v-182h30zm120 0h-30v-76h30z"/>
<path
d="m173.343 71.282h-98.343c-8.284 0-15 6.716-15 15s6.716 15 15 15h98.343c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 986 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>status</title>
<g id="status" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M60.2247499,90 L60.2247499,100 L40.2247499,100 L40.2247499,90 L60.2247499,90 Z M50.2247499,0 C69.7247499,0 85.2247499,15.5 85.2247499,35 C85.2247499,45.5 80.7247499,55 72.7247499,62 C67.7247499,66 65.2247499,71.5 65.2247499,77.5 L65.2247499,77.5 L65.2247499,85 L35.2247499,85 L35.2247499,77.5 C35.2247499,71.5 32.2247499,66 27.2247499,61.5 C17.2247499,53 13.2247499,40.5 15.7247499,28 C18.7247499,14.5 31.2247499,0 50.2247499,0 Z M50.2247499,10 C37.2247499,10 27.7247499,20.5 25.7247499,30 C23.7247499,39 26.7247499,48 33.7247499,54 C40.7247499,59.5 44.7247499,67 45.2247499,75 L45.2247499,75 L55.2247499,75 C56.2247499,66.5 59.7247499,59 66.2247499,54 C71.7247499,49.5 75.2247499,42.5 75.2247499,35 C75.2247499,21 64.2247499,10 50.2247499,10 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>trash</title>
<g id="trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 646 B

View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg"
>
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1"
transform="translate(-1139.000000, -1344.000000)">
<path
d="M1145.96897,1356.87415 L1145.96897,1349.10873 C1145.96897,1348.86715 1145.76161,1348.67108 1145.50611,1348.67108 C1145.25062,1348.67108 1145.04326,1348.86715 1145.04326,1349.10873 L1145.04326,1356.87415 C1145.04326,1357.11574 1145.25062,1357.31181 1145.50611,1357.31181 C1145.76161,1357.31181 1145.96897,1357.11574 1145.96897,1356.87415 Z M1148.9551,1356.87415 L1148.9551,1349.10873 C1148.9551,1348.86715 1148.74774,1348.67108 1148.49224,1348.67108 C1148.23675,1348.67108 1148.02939,1348.86715 1148.02939,1349.10873 L1148.02939,1356.87415 C1148.02939,1357.11574 1148.23675,1357.31181 1148.49224,1357.31181 C1148.74774,1357.31181 1148.9551,1357.11574 1148.9551,1356.87415 Z M1152.08234,1348.67108 C1151.82685,1348.67108 1151.61949,1348.86715 1151.61949,1349.10873 L1151.61949,1358.48668 C1151.61949,1358.83914 1151.3175,1359.12468 1150.9464,1359.12468 L1143.05525,1359.12468 C1142.6825,1359.12468 1142.3801,1358.83914 1142.3801,1358.48668 L1142.3801,1349.10873 C1142.3801,1348.86715 1142.17315,1348.67108 1141.91724,1348.67108 C1141.66175,1348.67108 1141.45439,1348.86715 1141.45439,1349.10873 L1141.45439,1358.48668 C1141.45439,1359.32075 1142.17315,1360 1143.05525,1360 L1150.9464,1360 C1151.82849,1360 1152.5452,1359.32075 1152.5452,1358.48668 L1152.5452,1349.10873 C1152.5452,1348.86559 1152.33825,1348.67108 1152.08234,1348.67108 Z M1153.53715,1346.73993 L1150.37904,1346.73993 L1150.37904,1344.43766 C1150.37904,1344.19607 1150.17168,1344 1149.91619,1344 L1144.08546,1344.00156 C1143.82996,1344.00156 1143.6226,1344.19724 1143.6226,1344.43883 L1143.6226,1346.7411 L1140.46285,1346.7411 C1140.20736,1346.7411 1140,1346.93717 1140,1347.17876 C1140,1347.42074 1140.20736,1347.61642 1140.46285,1347.61642 L1153.53715,1347.61642 C1153.79264,1347.61642 1154,1347.42074 1154,1347.17876 C1154,1346.93562 1153.79264,1346.73993 1153.53715,1346.73993 Z M1149.45333,1346.73993 L1144.54831,1346.73993 L1144.54831,1344.87532 L1149.45333,1344.87532 L1149.45333,1346.73993 Z"
fill="currentColor" id="trash_icon"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -1,10 +1,7 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 19.738 19.738" style="enable-background:new 0 0 19.738 19.738;" xml:space="preserve">
<g>
<path style="fill:#010002;" d="M18.18,19.738h-2c0-3.374-2.83-6.118-6.311-6.118s-6.31,2.745-6.31,6.118h-2
c0-4.478,3.729-8.118,8.311-8.118C14.451,11.62,18.18,15.26,18.18,19.738z"/>
<path style="fill:#010002;" d="M9.87,10.97c-3.023,0-5.484-2.462-5.484-5.485C4.385,2.461,6.846,0,9.87,0
c3.025,0,5.486,2.46,5.486,5.485S12.895,10.97,9.87,10.97z M9.87,2C7.948,2,6.385,3.563,6.385,5.485S7.948,8.97,9.87,8.97
c1.923,0,3.486-1.563,3.486-3.485S11.791,2,9.87,2z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>user</title>
<g id="user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,60 C37.5,60 27,69.5 25.5,81.5 C32,87 40.5,90 50,90 C59.5,90 68,87 74.5,81.5 C73,69.5 62.5,60 50,60 Z M50,10 C28,10 10,28 10,50 C10,58.5 12.5,66.5 17,73 C22,59.5 35,50 50,50 C65,50 78,59.5 83,73 C87.5,66.5 90,58.5 90,50 C90,28 72,10 50,10 Z M50,15 C58.5,15 65,21.5 65,30 C65,38.5 58.5,45 50,45 C41.5,45 35,38.5 35,30 C35,21.5 41.5,15 50,15 Z M50,25 C47,25 45,27 45,30 C45,33 47,35 50,35 C53,35 55,33 55,30 C55,27 53,25 50,25 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 665 B

After

Width:  |  Height:  |  Size: 919 B

View File

@ -2,8 +2,19 @@
.mat-button, .mat-flat-button {
font-family: Inter, sans-serif !important;
font-weight: 400 !important;
border-radius: 25px !important;
border-radius: 17px !important;
font-size: 13px !important;
height: 34px;
display: flex !important;
align-items: center;
&.mat-primary {
font-weight: 500 !important;
}
&:not(.mat-primary) {
font-weight: 400 !important;
}
.mat-button-wrapper {
display: flex;
@ -18,3 +29,16 @@
.mat-button[aria-expanded="true"], .mat-button.overlay {
background: rgba($primary, 0.1);
}
.icon-button {
display: flex;
flex-direction: row-reverse;
gap: 6px;
align-items: center;
cursor: pointer;
mat-icon {
width: 14px;
color: $accent;
}
}

View File

@ -72,7 +72,6 @@
mat-icon {
width: 10px;
height: 10px;
margin-right: 4px;
}
}

View File

@ -9,7 +9,6 @@
mat-icon {
width: 12px;
height: 12px;
}
}

View File

@ -47,8 +47,7 @@ html, body {
mat-icon {
cursor: pointer;
width: 20px;
height: 20px;
width: 14px;
&:hover {
color: $primary;
@ -85,6 +84,18 @@ html, body {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
.flex-6 {
flex: 6;
}
.mt-5 {
margin-top: 5px;
}

View File

@ -21,7 +21,7 @@
text-transform: uppercase;
> div {
padding: 8px 24px;
padding: 8px 16px;
font-weight: 600;
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
}
@ -33,8 +33,8 @@
height: 80px;
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
> div:not(.on-hover) {
padding: 0 24px;
> div {
padding: 0 16px;
}
.table-item-title {
@ -42,38 +42,21 @@
@include line-clamp(1);
}
.on-hover-wrapper {
width: 0;
height: 0;
padding: 0 !important;
align-self: flex-start;
.on-hover {
position: relative;
right: 142px;
height: 80px;
width: 142px;
background: linear-gradient(90deg, rgba(249, 250, 251, 0) 0%, #F9FAFB 100%);
display: none;
justify-content: flex-end;
align-items: center;
div {
margin-right: 12px;
}
}
.action-buttons {
display: none;
}
&:hover {
background-color: #F9FAFB;
.on-hover {
.action-buttons {
display: flex;
}
align-items: center;
justify-content: flex-end;
.rectangle {
background-color: $grey-4 !important;
mat-icon {
width: 14px;
}
}
}
}

View File

@ -29,7 +29,7 @@ a {
font-weight: 600;
}
.subheading {
.all-caps-label {
text-transform: uppercase;
opacity: 0.7;
font-size: 11px;
@ -38,12 +38,18 @@ a {
line-height: 14px;
}
.subtitle {
.small-label {
opacity: 0.7;
font-size: 11px;
line-height: 14px;
}
.medium-label {
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
.clamp-1 {
@include line-clamp(1);
}