Recommendation hexagon icon

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html

@@ -1,3 +1,3 @@
-<div [class.hint]="isHint" [class.request]="isRequest" [style.background-color]="color || dictType.hexColor" class="icon" [class.none]="type === 'none'">
+<div #icon class="icon" [class.hint]="isHint" [class.request]="isRequest" [class.recommendation]="isRecommendation" [class.none]="type === 'none'">
     <span>{{ label || dictType.label.charAt(0) }}</span>
 </div>

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss

@@ -13,6 +13,7 @@
     text-transform: uppercase;
     color: $white;
     position: relative;
+    background-color: var(--color);
 }
 
 .request {
@@ -24,6 +25,35 @@
     }
 }
 
+.recommendation {
+    position: relative;
+    width: 16px;
+    height: 10px;
+    margin: 4px 0;
+    background-color: var(--color);
+
+    :before,
+    :after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+    }
+
+    :before {
+        bottom: 100%;
+        border-bottom: 4px solid var(--color);
+    }
+
+    :after {
+        top: 100%;
+        width: 0;
+        border-top: 4px solid var(--color);
+    }
+}
+
 .hint,
 .skipped {
     border-radius: 50%;

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { TypeValue } from '@redaction/red-ui-http';
 
 @Component({
@@ -6,14 +6,20 @@ import { TypeValue } from '@redaction/red-ui-http';
     templateUrl: './annotation-icon.component.html',
     styleUrls: ['./annotation-icon.component.scss']
 })
-export class AnnotationIconComponent {
+export class AnnotationIconComponent implements OnInit {
     @Input() color: string;
-    @Input() type: 'square' | 'rhombus' | 'circle' | 'none';
+    @Input() type: 'square' | 'rhombus' | 'circle' | 'hexagon' | 'none';
     @Input() label: string;
     @Input() dictType: TypeValue;
 
+    @ViewChild('icon', { static: true }) icon: ElementRef;
+
     constructor() {}
 
+    ngOnInit() {
+        this.icon.nativeElement.style.setProperty('--color', this.backgroundColor, '');
+    }
+
     public get isHint() {
         return this.type === 'circle' || this.dictType?.type === 'hint';
     }
@@ -21,4 +27,12 @@ export class AnnotationIconComponent {
     public get isRequest() {
         return this.type === 'rhombus' || this.dictType?.type === 'redaction';
     }
+
+    public get isRecommendation() {
+        return this.type === 'hexagon' || this.dictType?.type === 'recommendation';
+    }
+
+    public get backgroundColor() {
+        return this.color || this.dictType.hexColor;
+    }
 }

apps/red-ui/src/app/components/type-annotation-icon/type-annotation-icon.component.ts

@@ -12,7 +12,7 @@ export class TypeAnnotationIconComponent implements OnChanges {
 
     label: string;
     color: string;
-    type: 'square' | 'rhombus' | 'circle';
+    type: 'square' | 'rhombus' | 'circle' | 'hexagon';
 
     constructor(private _appStateService: AppStateService) {}
 
@@ -23,7 +23,14 @@ export class TypeAnnotationIconComponent implements OnChanges {
             } else {
                 this.color = this._appStateService.getDictionaryColor(this.annotation.dictionary);
             }
-            this.type = this.annotation.isSuggestion || this.annotation.isDeclinedSuggestion ? 'rhombus' : this.annotation.isHint ? 'circle' : 'square';
+            this.type =
+                this.annotation.isSuggestion || this.annotation.isDeclinedSuggestion
+                    ? 'rhombus'
+                    : this.annotation.isHint
+                    ? 'circle'
+                    : this.annotation.isRecommendation
+                    ? 'hexagon'
+                    : 'square';
             this.label =
                 this.annotation.isSuggestion || this.annotation.isDeclinedSuggestion
                     ? 'S'

apps/red-ui/src/app/components/type-filter/type-filter.component.html

@@ -1,5 +1,5 @@
 <redaction-annotation-icon *ngIf="filter.key === 'redaction'" type="square" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
-<redaction-annotation-icon *ngIf="filter.key === 'recommendation'" type="square" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
+<redaction-annotation-icon *ngIf="filter.key === 'recommendation'" type="hexagon" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'hint'" type="circle" label="H" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'manual-redaction'" type="square" label="M" [color]="dictionaryColor"></redaction-annotation-icon>
 <redaction-annotation-icon *ngIf="filter.key === 'skipped'" type="square" label="S" [color]="dictionaryColor"></redaction-annotation-icon>