Updated annotation actions icons

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

@@ -1,14 +1,4 @@
-<div *ngIf="canPerformAnnotationActions" [class.visible]="menuOpen" class="annotation-actions">
+<div *ngIf="canPerformAnnotationActions" 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>
-
     <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>

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

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

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

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

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

@@ -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="
+    *ngIf="permissions.canRemoveOrSuggestToRemoveOnlyHere"
-        permissions.canRemoveOrSuggestToRemoveOnlyHere &&
-        permissions.canNotPerformMultipleRemoveActions
-    "
     [tooltipPosition]="tooltipPosition"
     [type]="btnType"
-    icon="red:close"
+    icon="red:trash"
-    tooltip="annotation-actions.suggest-remove-annotation"
+    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>

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

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

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

@@ -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: this._annotationsPermissions([
-                ['canRemoveOrSuggestToRemoveOnlyHere'],
+                'canRemoveOrSuggestToRemoveOnlyHere'
-                true
+            ]),
-            ),
+            canRemoveOrSuggestToRemoveFromDictionary: this._annotationsPermissions([
-            canPerformMultipleRemoveActions: this._annotationsPermissions(
+                'canRemoveOrSuggestToRemoveFromDictionary'
-                ['canPerformMultipleRemoveActions'],
+            ]),
-                true
+            canMarkAsFalsePositive: this._annotationsPermissions([
-            ),
+                'canMarkAsFalsePositive',
-            canNotPerformMultipleRemoveActions: this._annotationsPermissions(
+                'canMarkTextOnlyAsFalsePositive'
-                ['canPerformMultipleRemoveActions'],
+            ])
-                false
-            ),
-            canRemoveOrSuggestToRemoveFromDictionary: this._annotationsPermissions(
-                ['canRemoveOrSuggestToRemoveFromDictionary'],
-                true
-            ),
-            canMarkAsFalsePositive: this._annotationsPermissions(
-                ['canMarkAsFalsePositive', 'canMarkTextOnlyAsFalsePositive'],
-                true
-            )
         };
     }
 
-    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;

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

@@ -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;
     }
 

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

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

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

@@ -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;

apps/red-ui/src/assets/icons/general/remove-from-dict.svg

@@ -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>