From 5b73d5ff23beab671eb6bf4d88da736f026a2bc7 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Wed, 14 Oct 2020 13:28:41 +0300
Subject: [PATCH] made annotations a bit prettier

---
 .../file-preview-screen.component.html             | 14 ++++++++------
 .../file-preview-screen.component.ts               | 13 +++++++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index f91642ffa..dd611a74e 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -34,7 +34,8 @@
     <div class="right-fixed-container">
 
       <!-- Quick navigation tab-->
-      <div class="vertical" (click)="selectTab('NAVIGATION')" [ngClass]="{ active: navigationTab}" #navigationTabElement>
+      <div class="vertical" (click)="selectTab('NAVIGATION')" [ngClass]="{ active: navigationTab}"
+           #navigationTabElement>
         <div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'">
           Quick Navigation
         </div>
@@ -62,7 +63,8 @@
       </div>
 
       <!-- Annotations tab-->
-      <div (click)="selectTab('ANNOTATIONS')" class="vertical" [ngClass]="{ active: annotationsTab }" #annotationsContainer>
+      <div (click)="selectTab('ANNOTATIONS')" class="vertical" [ngClass]="{ active: annotationsTab }"
+           #annotationsContainer>
         <div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'subheading'">
           Annotations
         </div>
@@ -73,10 +75,10 @@
                attr.annotation-page="{{annotation.getPageNumber()}}"
                (click)="selectAnnotation(annotation)"
                [ngClass]="{ active: selectedAnnotation === annotation }">
-            <div class="clamp-1">{{annotation.Id}}</div>
-            <div>Page {{annotation.getPageNumber()}}</div>
-            <div>{{annotation.getContents()}}</div>
-            <div>{{annotation.getStatus()}}</div>
+            <div><strong>Type: </strong>{{getType(annotation.Id)}}</div>
+            <div><strong>Dictionary: </strong>{{getDictionary(annotation.Id)}}</div>
+            <div><strong>Page: </strong> {{annotation.getPageNumber()}}</div>
+            <div *ngIf="annotation.getContents()"><strong>Content: </strong>{{annotation.getContents()}}</div>
           </div>
         </div>
       </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 16c85ef7b..29941a22e 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -221,14 +221,23 @@ export class FilePreviewScreenComponent implements OnInit {
     }
   }
 
+  getType(id: string) {
+    const parts = id.split(':');
+    return parts.length >= 1 ? parts[0] : 'n/a';
+  }
+
+  getDictionary(id: string) {
+    const parts = id.split(':');
+    return parts.length >= 2 ? parts[1] : 'n/a';
+  }
 }
 
 
-(function() {
+(function () {
   // @ts-ignore
   if (!Element.prototype.scrollIntoViewIfNeeded) {
     // @ts-ignore
-    Element.prototype.scrollIntoViewIfNeeded = function(centerIfNeeded) {
+    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
       centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
 
       const parent = this.parentNode,