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

Updated annotation actions icons

Browse Source
This commit is contained in:
Adina Țeudan 2021-06-15 15:57:36 +03:00
parent b2f5e02673
commit 87bdcb26fe
10 changed files with 143 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
View File

@ -1,14 +1,4 @@
<div *ngIf="canPerformAnnotationActions" [class.visible]="menuOpen" class="annotation-actions">
<redaction-circle-button
(action)="annotationActionsService.forceRedaction($event, [annotation], annotationsChanged)"
*ngIf="annotationPermissions.canForceRedaction"
icon="red:thumb-up"
tooltip="annotation-actions.force-redaction.label"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<div *ngIf="canPerformAnnotationActions" class="annotation-actions">
<redaction-circle-button
(action)="
annotationActionsService.convertRecommendationToAnnotation(
@ -25,21 +15,6 @@
>
</redaction-circle-button>
<redaction-circle-button
(action)="
annotationActionsService.markAsFalsePositive($event, [annotation], annotationsChanged)
"
*ngIf="
annotationPermissions.canMarkTextOnlyAsFalsePositive &&
!annotationPermissions.canPerformMultipleRemoveActions
"
icon="red:thumb-down"
tooltip="annotation-actions.remove-annotation.false-positive"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<redaction-circle-button
(action)="
annotationActionsService.acceptSuggestion($event, [annotation], annotationsChanged)
@ -64,6 +39,43 @@
>
</redaction-circle-button>
<redaction-circle-button
(action)="
annotationActionsService.rejectSuggestion($event, [annotation], annotationsChanged)
"
*ngIf="annotationPermissions.canRejectSuggestion"
icon="red:trash"
tooltip="annotation-actions.reject-suggestion"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<redaction-circle-button
(action)="
annotationActionsService.markAsFalsePositive($event, [annotation], annotationsChanged)
"
*ngIf="
annotationPermissions.canMarkTextOnlyAsFalsePositive &&
!annotationPermissions.canPerformMultipleRemoveActions
"
icon="red:thumb-down"
tooltip="annotation-actions.remove-annotation.false-positive"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<redaction-circle-button
(action)="annotationActionsService.forceRedaction($event, [annotation], annotationsChanged)"
*ngIf="annotationPermissions.canForceRedaction"
icon="red:thumb-up"
tooltip="annotation-actions.force-redaction.label"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<redaction-circle-button
(action)="hideAnnotation($event)"
*ngIf="annotation.isImage && viewerAnnotation?.isVisible()"
@ -84,20 +96,7 @@
>
</redaction-circle-button>
<redaction-circle-button
(action)="
annotationActionsService.rejectSuggestion($event, [annotation], annotationsChanged)
"
*ngIf="annotationPermissions.canRejectSuggestion"
icon="red:close"
tooltip="annotation-actions.reject-suggestion"
tooltipPosition="before"
type="dark-bg"
>
</redaction-circle-button>
<redaction-annotation-remove-actions
[(menuOpen)]="menuOpen"
[annotationsChanged]="annotationsChanged"
[annotations]="[annotation]"
></redaction-annotation-remove-actions>

9
apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
View File

@ -11,16 +11,7 @@
background-color: $grey-2;
}
&.visible {
display: flex;
}
> *:not(:last-child) {
margin-right: 2px;
}
}
.false-positive-icon {
height: 16px;
width: 16px;
}

1
apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
View File

@ -18,7 +18,6 @@ export class AnnotationActionsComponent implements OnInit {
@Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
menuOpen: boolean;
annotationPermissions: AnnotationPermissions;
constructor(

77
apps/red-ui/src/app/modules/dossier/components/annotation-remove-actions/annotation-remove-actions.component.html
View File

@ -1,60 +1,29 @@
<redaction-circle-button
(action)="suggestRemoveAnnotations($event, true)"
*ngIf="permissions.canRemoveOrSuggestToRemoveFromDictionary"
[tooltipPosition]="tooltipPosition"
[type]="btnType"
icon="red:remove-from-dict"
tooltip="annotation-actions.remove-annotation.remove-from-dict"
>
</redaction-circle-button>
<redaction-circle-button
(action)="markAsFalsePositive($event)"
*ngIf="permissions.canMarkAsFalsePositive"
[tooltipPosition]="tooltipPosition"
[type]="btnType"
icon="red:thumb-down"
tooltip="annotation-actions.remove-annotation.false-positive"
>
</redaction-circle-button>
<redaction-circle-button
(action)="suggestRemoveAnnotations($event, false)"
*ngIf="
permissions.canRemoveOrSuggestToRemoveOnlyHere &&
permissions.canNotPerformMultipleRemoveActions
"
*ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere"
[tooltipPosition]="tooltipPosition"
[type]="btnType"
icon="red:close"
tooltip="annotation-actions.suggest-remove-annotation"
icon="red:trash"
tooltip="annotation-actions.remove-annotation.only-here"
>
</redaction-circle-button>
<redaction-circle-button
(action)="openMenu($event)"
*ngIf="permissions.canPerformMultipleRemoveActions"
[class.active]="menuOpen"
[matMenuTriggerFor]="menu"
[tooltipPosition]="tooltipPosition"
[type]="btnType"
icon="red:close"
tooltip="annotation-actions.suggest-remove-annotation"
>
</redaction-circle-button>
<mat-menu #menu="matMenu" (closed)="onMenuClosed()" xPosition="before">
<div
(click)="suggestRemoveAnnotations($event, true)"
*ngIf="permissions.canRemoveOrSuggestToRemoveFromDictionary"
mat-menu-item
>
<redaction-annotation-icon
[color]="dictionaryColor"
[label]="'S'"
[type]="'rhombus'"
></redaction-annotation-icon>
<div [translate]="'annotation-actions.remove-annotation.remove-from-dict'"></div>
</div>
<div
(click)="suggestRemoveAnnotations($event, false)"
*ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere"
mat-menu-item
>
<redaction-annotation-icon
[color]="suggestionColor"
[label]="'S'"
[type]="'rhombus'"
></redaction-annotation-icon>
<div translate="annotation-actions.remove-annotation.only-here"></div>
</div>
<div
(click)="markAsFalsePositive($event)"
*ngIf="permissions.canMarkAsFalsePositive"
mat-menu-item
>
<mat-icon class="false-positive-icon" svgIcon="red:thumb-down"></mat-icon>
<div translate="annotation-actions.remove-annotation.false-positive"></div>
</div>
</mat-menu>

7
apps/red-ui/src/app/modules/dossier/components/annotation-remove-actions/annotation-remove-actions.component.scss
View File

@ -0,0 +1,7 @@
:host {
display: flex;
> *:not(:last-child) {
margin-right: 2px;
}
}

54
apps/red-ui/src/app/modules/dossier/components/annotation-remove-actions/annotation-remove-actions.component.ts
View File

@ -21,8 +21,6 @@ export class AnnotationRemoveActionsComponent {
@ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
permissions: {
canRemoveOrSuggestToRemoveOnlyHere: boolean;
canPerformMultipleRemoveActions: boolean;
canNotPerformMultipleRemoveActions: boolean;
canRemoveOrSuggestToRemoveFromDictionary: boolean;
canMarkAsFalsePositive: boolean;
};
@ -45,24 +43,6 @@ export class AnnotationRemoveActionsComponent {
this._setPermissions();
}
get dictionaryColor() {
return this.appStateService.getDictionaryColor('suggestion-add-dictionary');
}
get suggestionColor() {
return this.appStateService.getDictionaryColor('suggestion');
}
openMenu($event: MouseEvent) {
$event.stopPropagation();
this.matMenuTrigger.openMenu();
this.menuOpenChange.emit(true);
}
onMenuClosed() {
this.menuOpenChange.emit(false);
}
suggestRemoveAnnotations($event, removeFromDict: boolean) {
$event.stopPropagation();
this._annotationActionsService.suggestRemoveAnnotation(
@ -83,30 +63,20 @@ export class AnnotationRemoveActionsComponent {
private _setPermissions() {
this.permissions = {
canRemoveOrSuggestToRemoveOnlyHere: this._annotationsPermissions(
['canRemoveOrSuggestToRemoveOnlyHere'],
true
),
canPerformMultipleRemoveActions: this._annotationsPermissions(
['canPerformMultipleRemoveActions'],
true
),
canNotPerformMultipleRemoveActions: this._annotationsPermissions(
['canPerformMultipleRemoveActions'],
false
),
canRemoveOrSuggestToRemoveFromDictionary: this._annotationsPermissions(
['canRemoveOrSuggestToRemoveFromDictionary'],
true
),
canMarkAsFalsePositive: this._annotationsPermissions(
['canMarkAsFalsePositive', 'canMarkTextOnlyAsFalsePositive'],
true
)
canRemoveOrSuggestToRemoveOnlyHere: this._annotationsPermissions([
'canRemoveOrSuggestToRemoveOnlyHere'
]),
canRemoveOrSuggestToRemoveFromDictionary: this._annotationsPermissions([
'canRemoveOrSuggestToRemoveFromDictionary'
]),
canMarkAsFalsePositive: this._annotationsPermissions([
'canMarkAsFalsePositive',
'canMarkTextOnlyAsFalsePositive'
])
};
}
private _annotationsPermissions(keys: string[], expectedValue: boolean): boolean {
private _annotationsPermissions(keys: string[]): boolean {
return this.annotations.reduce((prevValue, annotation) => {
const annotationPermissions = AnnotationPermissions.forUser(
this._permissionsService.isApprover(),
@ -114,7 +84,7 @@ export class AnnotationRemoveActionsComponent {
annotation
);
const hasAtLeastOnePermission = keys.reduce(
(acc, key) => acc || annotationPermissions[key] === expectedValue,
(acc, key) => acc || annotationPermissions[key],
false
);
return prevValue && hasAtLeastOnePermission;

82
apps/red-ui/src/app/modules/dossier/services/annotation-actions.service.ts
View File

@ -165,23 +165,6 @@ export class AnnotationActionsService {
)
}));
const canForceRedaction = annotationPermissions.reduce(
(acc, next) => acc && next.permissions.canForceRedaction,
true
);
if (canForceRedaction) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/thumb-up.svg'),
title: this._translateService.instant('annotation-actions.force-redaction.label'),
onClick: () => {
this._ngZone.run(() => {
this.forceRedaction(null, annotations, annotationsChanged);
});
}
});
}
const canAcceptRecommendation = annotationPermissions.reduce(
(acc, next) => acc && next.permissions.canAcceptRecommendation,
true
@ -239,6 +222,45 @@ export class AnnotationActionsService {
});
}
const canMarkAsFalsePositive = annotationPermissions.reduce(
(acc, next) =>
acc &&
(next.permissions.canMarkAsFalsePositive ||
next.permissions.canMarkTextOnlyAsFalsePositive),
true
);
if (canMarkAsFalsePositive) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/thumb-down.svg'),
title: this._translateService.instant(
'annotation-actions.remove-annotation.false-positive'
),
onClick: () => {
this._ngZone.run(() => {
this.markAsFalsePositive(null, annotations, annotationsChanged);
});
}
});
}
const canForceRedaction = annotationPermissions.reduce(
(acc, next) => acc && next.permissions.canForceRedaction,
true
);
if (canForceRedaction) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/thumb-up.svg'),
title: this._translateService.instant('annotation-actions.force-redaction.label'),
onClick: () => {
this._ngZone.run(() => {
this.forceRedaction(null, annotations, annotationsChanged);
});
}
});
}
const canRejectSuggestion = annotationPermissions.reduce(
(acc, next) => acc && next.permissions.canRejectSuggestion,
true
@ -246,7 +268,7 @@ export class AnnotationActionsService {
if (canRejectSuggestion) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/close.svg'),
img: this._convertPath('/assets/icons/general/trash.svg'),
title: this._translateService.instant('annotation-actions.reject-suggestion'),
onClick: () => {
this._ngZone.run(() => {
@ -263,7 +285,7 @@ export class AnnotationActionsService {
if (canRemoveOrSuggestToRemoveOnlyHere) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/close.svg'),
img: this._convertPath('/assets/icons/general/trash.svg'),
title: this._translateService.instant(
'annotation-actions.suggest-remove-annotation'
),
@ -294,28 +316,6 @@ export class AnnotationActionsService {
});
}
const canMarkAsFalsePositive = annotationPermissions.reduce(
(acc, next) =>
acc &&
(next.permissions.canMarkAsFalsePositive ||
next.permissions.canMarkTextOnlyAsFalsePositive),
true
);
if (canMarkAsFalsePositive) {
availableActions.push({
type: 'actionButton',
img: this._convertPath('/assets/icons/general/thumb-down.svg'),
title: this._translateService.instant(
'annotation-actions.remove-annotation.false-positive'
),
onClick: () => {
this._ngZone.run(() => {
this.markAsFalsePositive(null, annotations, annotationsChanged);
});
}
});
}
return availableActions;
}

1
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -66,6 +66,7 @@ export class IconsModule {
'read-only',
'ready-for-approval',
'refresh',
'remove-from-dict',
'report',
'search',
'secret',

3
apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
View File

@ -4,6 +4,7 @@ import {
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core';
@ -15,7 +16,7 @@ import { MatTooltip } from '@angular/material/tooltip';
styleUrls: ['./circle-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CircleButtonComponent {
export class CircleButtonComponent implements OnInit {
@Input() icon: string;
@Input() tooltip: string;
@Input() showDot = false;

19
apps/red-ui/src/assets/icons/general/remove-from-dict.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
<g id="Annotations" transform="translate(-62.000000, -435.000000)">
<rect height="1090" width="1440" x="0" y="0"></rect>
<rect height="914" id="Rectangle" width="685" x="0" y="176"></rect>
<g id="Group-6" transform="translate(52.000000, 425.000000)">
<rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
<g fill="currentColor" fill-rule="nonzero" id="status"
transform="translate(10.000000, 10.000000)">
<path
d="M13.3,0 L13.3,6.44 L11.9,6.44 L11.9,1.4 L4.9,1.4 L4.9,12.6 L6.44,12.6 L6.44,14 L2.8,14 C1.61,14 0.7,13.09 0.7,11.9 L0.7,11.9 L0.7,2.1 C0.7,0.91 1.61,0 2.8,0 L2.8,0 L13.3,0 Z M12.9297475,7.98 L13.919697,8.96994949 L11.939,10.949 L13.919697,12.9297475 L12.9297475,13.919697 L10.949,11.939 L8.96994949,13.919697 L7.98,12.9297475 L9.959,10.949 L7.98,8.96994949 L8.96994949,7.98 L10.949,9.96 L12.9297475,7.98 Z M3.5,1.4 L2.8,1.4 C2.38,1.4 2.1,1.68 2.1,2.1 L2.1,2.1 L2.1,11.9 C2.1,12.32 2.38,12.6 2.8,12.6 L2.8,12.6 L3.5,12.6 L3.5,1.4 Z"
id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB