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

Style tooltips

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-03 13:38:12 +02:00
parent ca07790597
commit 6733c4e7a8
7 changed files with 118 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
View File

@ -1,4 +1,4 @@
<div class="flex-row" [matTooltip]="username">
<div [matTooltipPosition]="'above'" [matTooltip]="username" class="flex-row">
<div [className]="colorClass + ' oval ' + size">{{ initials }}</div>
<div *ngIf="withName" class="clamp-2">
{{ username || ('initials-avatar.unassigned.label' | translate) }}

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

@ -47,6 +47,7 @@
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>

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

@ -167,6 +167,7 @@
<button
(click)="openDeleteProjectDialog($event, pw.project)"
[matTooltip]="'project-listing.delete.action.label' | translate"
[matTooltipPosition]="'above'"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -178,6 +179,7 @@
(click)="downloadRedactionReport($event, pw.project)"
*ngIf="userService.isManager(user)"
[matTooltip]="'project-listing.report.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
>
<mat-icon svgIcon="red:report"></mat-icon>
@ -185,6 +187,7 @@
<button
(click)="openAssignProjectOwnerDialog($event, pw.project)"
[matTooltip]="'project-listing.assign.action.label' | translate"
[matTooltipPosition]="'above'"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -197,6 +200,7 @@
(click)="reanalyseProject($event, pw.project)"
mat-icon-button
[matTooltip]="'project-listing.reanalyse.action.label' | translate"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>

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

@ -11,28 +11,28 @@
<div class="filters flex-row">
<div translate="filters.filter-by.label"></div>
<redaction-filter
[filters]="statusFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status.label'"
[filters]="statusFilters"
[hasArrow]="false"
[icon]="'red:status'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<redaction-filter
[filters]="peopleFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.people.label'"
[filters]="peopleFilters"
[hasArrow]="false"
[icon]="'red:user'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<!-- <button mat-button translate="filters.due-date.label">-->
<!-- <mat-icon svgIcon="red:lightning"></mat-icon>-->
<!-- </button>-->
<redaction-filter
[filters]="addedDateFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.created-on.label'"
[filters]="addedDateFilters"
[hasArrow]="false"
[icon]="'red:calendar'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<!-- <button mat-button translate="filters.project.label">-->
<!-- <mat-icon svgIcon="red:folder"></mat-icon>-->
@ -61,10 +61,10 @@
<div class="table-header">
<div class="select-all-container">
<div
*ngIf="bulkSelectActive"
class="select-oval"
[class.active]="areAllFilesSelected()"
(click)="toggleSelectAll()"
*ngIf="bulkSelectActive"
[class.active]="areAllFilesSelected()"
class="select-oval"
></div>
<span class="all-caps-label">
{{
@ -76,10 +76,10 @@
</div>
<div class="actions">
<div
translate="project-overview.table-header.bulk-select.label"
class="pointer"
[class.active]="bulkSelectActive"
(click)="toggleBulkSelect()"
[class.active]="bulkSelectActive"
class="pointer"
translate="project-overview.table-header.bulk-select.label"
></div>
<redaction-sorting
#sortingComponent
@ -89,24 +89,24 @@
</div>
</div>
<div class="grid-container" [class.bulk-select]="bulkSelectActive">
<div [class.bulk-select]="bulkSelectActive" class="grid-container">
<!-- Table column names-->
<div class="select-oval-placeholder" *ngIf="bulkSelectActive"></div>
<div *ngIf="bulkSelectActive" class="select-oval-placeholder"></div>
<redaction-table-col-name
label="project-overview.table-col-names.name.label"
column="filename"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
column="filename"
label="project-overview.table-col-names.name.label"
></redaction-table-col-name>
<redaction-table-col-name
label="project-overview.table-col-names.added-on.label"
column="added"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
column="added"
label="project-overview.table-col-names.added-on.label"
></redaction-table-col-name>
<redaction-table-col-name
@ -118,12 +118,12 @@
></redaction-table-col-name>
<redaction-table-col-name
label="project-overview.table-col-names.status.label"
class="flex-end"
column="status"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
class="flex-end"
column="status"
label="project-overview.table-col-names.status.label"
></redaction-table-col-name>
<div
@ -133,12 +133,11 @@
></div>
<div
class="table-item"
[class.pointer]="canOpenFile(fileStatus)"
*ngFor="
let fileStatus of displayedFiles
| sortBy: sortingOption.order:sortingOption.column
"
[class.pointer]="canOpenFile(fileStatus)"
[routerLink]="
canOpenFile(fileStatus)
? [
@ -149,21 +148,25 @@
]
: []
"
class="table-item"
>
<div class="pr-0" *ngIf="bulkSelectActive">
<div *ngIf="bulkSelectActive" class="pr-0">
<div
class="select-oval"
[class.active]="isFileSelected(fileStatus)"
(click)="toggleFileSelected($event, fileStatus)"
[class.active]="isFileSelected(fileStatus)"
class="select-oval"
></div>
</div>
<div [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename">
<div
[matTooltipPosition]="'above'"
[matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename"
>
<div class="filename-wrapper">
<div
class="table-item-title"
[class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
[class.error]="isError(fileStatus)"
class="table-item-title"
>
{{ fileStatus.filename }}
</div>
@ -182,12 +185,12 @@
</div>
<div>
<div class="small-label" [class.error]="isError(fileStatus)">
<div [class.error]="isError(fileStatus)" class="small-label">
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
<div class="needs-work" *ngIf="!isError(fileStatus)">
<div *ngIf="!isError(fileStatus)" class="needs-work">
<redaction-annotation-icon
*ngIf="fileStatus.hasRedactions"
[typeValue]="appStateService.getDictionaryTypeValue('redaction')"
@ -202,27 +205,27 @@
></redaction-annotation-icon>
</div>
<div class="assigned-to" *ngIf="!isError(fileStatus)">
<div *ngIf="!isError(fileStatus)" class="assigned-to">
<redaction-initials-avatar
withName="true"
[userId]="fileStatus.currentReviewer"
withName="true"
></redaction-initials-avatar>
</div>
<div class="status-container" [class.extend-cols]="isError(fileStatus)">
<div [class.extend-cols]="isError(fileStatus)" class="status-container">
<div
*ngIf="isError(fileStatus)"
class="small-label error"
translate="project-overview.file-listing.file-entry.file-error.label"
></div>
<div
class="small-label"
*ngIf="isPending(fileStatus)"
class="small-label"
translate="project-overview.file-listing.file-entry.file-pending.label"
></div>
<div
class="small-label"
*ngIf="isProcessing(fileStatus)"
class="small-label"
translate="processing"
></div>
<redaction-status-bar
@ -242,58 +245,63 @@
<div class="action-buttons">
<button
(click)="openDeleteFileDialog($event, fileStatus)"
color="accent"
*ngIf="
userService.isManager(user) || appStateService.isActiveProjectOwner
"
mat-icon-button
[matTooltip]="'project-overview.delete.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button
(click)="downloadFileRedactionReport($event, fileStatus)"
[matTooltip]="'project-overview.report.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
[matTooltip]="'project-overview.report.action.label' | translate"
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button
(click)="assignReviewer($event, fileStatus)"
color="accent"
*ngIf="
appStateService.isActiveProjectMember &&
!isApprovedOrUnderApproval(fileStatus)
"
mat-icon-button
[matTooltip]="'project-overview.assign.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
*ngIf="!isApprovedOrUnderApproval(fileStatus)"
(click)="reanalyseFile($event, fileStatus)"
*ngIf="!isApprovedOrUnderApproval(fileStatus)"
[matTooltip]="'project-overview.reanalyse.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
[matTooltip]="'project-overview.reanalyse.action.label' | translate"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
<button
(click)="requestApprovalOrApproveFile($event, fileStatus)"
*ngIf="
canApprove(fileStatus) &&
appStateService.isActiveProjectOwnerAndManager
"
(click)="requestApprovalOrApproveFile($event, fileStatus)"
color="accent"
mat-icon-button
[matTooltip]="
(fileStatus.status === 'UNDER_APPROVAL'
? 'project-overview.approve'
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>

43
apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
View File

@ -1,12 +1,12 @@
<section class="red-upload-overlay mat-elevation-z4">
<div class="red-upload-header" (click)="collapsed = !collapsed">
<div (click)="collapsed = !collapsed" class="red-upload-header">
<div class="title">
{{ 'upload-status.dialog.title.label' | translate: { p1: uploadService.files.length } }}
</div>
<div class="collapse-icon" *ngIf="!collapsed">
<div *ngIf="!collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</div>
<div class="collapse-icon" *ngIf="collapsed">
<div *ngIf="collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-up"></mat-icon>
</div>
<div (click)="closeDialog()" class="close-icon">
@ -17,49 +17,60 @@
<div class="upload-list">
<div *ngFor="let model of uploadService.files" class="upload-list-item">
<div class="upload-line">
<div class="upload-file-name" [matTooltip]="model.file?.name">
<div
[matTooltipPosition]="'above'"
[matTooltip]="model.file?.name"
class="upload-file-name"
>
{{ model.file?.name }}
</div>
<div class="upload-progress" *ngIf="!model.completed && model.progress < 100">
<div *ngIf="!model.completed && model.progress < 100" class="upload-progress">
{{ model.progress }}%
</div>
<div class="upload-progress error" *ngIf="model.completed && model.error">
<div *ngIf="model.completed && model.error" class="upload-progress error">
<mat-icon svgIcon="red:error"></mat-icon>
</div>
<div class="upload-progress ok" *ngIf="model.completed && !model.error">
<div *ngIf="model.completed && !model.error" class="upload-progress ok">
<mat-icon svgIcon="red:check"></mat-icon>
</div>
</div>
<div class="upload-line" *ngIf="model.completed && model.error">
<div class="upload-file-name error" [matTooltip]="model.error.message">
<div *ngIf="model.completed && model.error" class="upload-line">
<div
[matTooltipPosition]="'above'"
[matTooltip]="model.error.message"
class="upload-file-name error"
>
{{ model.error.message }}
</div>
<div class="upload-progress">
<div
class="error-action"
(click)="uploadItem(model)"
[matTooltip]="
'upload-status.dialog.actions.re-upload.label' | translate
"
[matTooltipPosition]="'above'"
class="error-action"
>
<mat-icon svgIcon="red:refresh"></mat-icon>key
<mat-icon svgIcon="red:refresh"></mat-icon>
key
</div>
<div
class="error-action"
(click)="cancelItem(model)"
[matTooltip]="'upload-status.dialog.actions.cancel.label' | translate"
[matTooltipPosition]="'above'"
class="error-action"
>
<mat-icon svgIcon="red:close"></mat-icon>
</div>
</div>
</div>
<div mat-line *ngIf="!model.completed" class="upload-progress">
<div *ngIf="!model.completed" class="upload-progress" mat-line>
<mat-progress-bar
mode="determinate"
color="primary"
[value]="model.progress"
*ngIf="model.progress !== 100"
[value]="model.progress"
color="primary"
mode="determinate"
></mat-progress-bar>
</div>
</div>

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

@ -18,3 +18,4 @@
@import 'red-controls';
@import 'red-logo';
@import 'red-toasts';
@import 'red-tooltips';

28
apps/red-ui/src/assets/styles/red-tooltips.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'red-variables';
.mat-tooltip {
background-color: $accent;
border-radius: 3px;
padding: 10px;
font-family: Inter, sans-serif;
font-size: 11px;
line-height: 14px;
color: white;
position: relative;
overflow: visible !important;
text-align: center;
}
.mat-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-top: solid 6px $accent;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
z-index: 3000;
}