minor cosmetic changes

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

@@ -79,6 +79,12 @@
             <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 class="annotation-actions">
+              <button mat-icon-button (click)="suggestRemoveAnnotation($event, annotation)">
+                <mat-icon svgIcon="red:delete" ></mat-icon>
+              </button>
+            </div>
           </div>
         </div>
       </div>

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -39,7 +39,7 @@ redaction-pdf-viewer {
         box-sizing: border-box;
 
         scrollbar-width: none; /* Firefox */
-        -ms-overflow-style: none;  /* IE 10+ */
+        -ms-overflow-style: none; /* IE 10+ */
         &::-webkit-scrollbar {
           width: 0;
           background: transparent; /* Chrome/Safari/Webkit */
@@ -73,10 +73,28 @@ redaction-pdf-viewer {
     padding: 14px;
     font-size: 12px;
     cursor: pointer;
+    position: relative;
+
+    &:hover {
+      background-color: #F9FAFB;
+
+      .annotation-actions {
+        display: flex;
+      }
+    }
 
     &.active {
       border-left: 2px solid $red-1;
     }
+
+    .annotation-actions {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      display: none;
+      width: 40px;
+    }
   }
 
   .page-navigation {

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts

@@ -135,6 +135,7 @@ export class FilePreviewScreenComponent implements OnInit {
 
   public handleAnnotationSelected(annotation: Annotations.Annotation) {
     this.selectedAnnotation = annotation;
+    this.selectTab('ANNOTATIONS');
     this.scrollToAnnotation(annotation);
     this._changeDetectorRef.detectChanges();
   }
@@ -230,6 +231,31 @@ export class FilePreviewScreenComponent implements OnInit {
     const parts = id.split(':');
     return parts.length >= 2 ? parts[1] : 'n/a';
   }
+
+  // async getText(pageNumber: number, rect) {
+  //   const viewerObject = this._viewerSyncService.activeViewerObject;
+  //
+  //   const { PDFNet } = viewerObject;
+  //   await PDFNet.initialize();
+  //   const pdfDoc = await viewerObject.docViewer.getDocument().getPDFDoc();
+  //   const txt = await PDFNet.TextExtractor.create();
+  //   await txt.begin(await pdfDoc.getPage(pageNumber), rect);
+  //
+  //   // Extract words one by one.
+  //   let text = '';
+  //   let line = await txt.getFirstLine();
+  //   for (; (await line.isValid()); line = (await line.getNextLine())) {
+  //     for (let word = await line.getFirstWord(); (await word.isValid()); word = (await word.getNextWord())) {
+  //       await word.getString();
+  //       text += word;
+  //     }
+  //   }
+  //   console.log(text);
+  // }
+
+  suggestRemoveAnnotation($event: MouseEvent, annotation: Annotations.Annotation) {
+    $event.stopPropagation();
+  }
 }
 
 

apps/red-ui/src/app/screens/file/service/viewer-sync.service.ts

@@ -13,6 +13,15 @@ export class ViewerSyncService {
   constructor() {
   }
 
+  get activeViewerObject(): WebViewerInstance{
+    if (this._activeViewer) {
+      const activeViewer = this._viewers[this._activeViewer];
+      console.log(activeViewer,this._activeViewer);
+      return activeViewer;
+    }
+    return undefined;
+  }
+
   get activeViewerPage() {
     if (this._activeViewer) {
       const lastActiveViewer = this._viewers[this._activeViewer];

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

@@ -69,15 +69,15 @@
 
         <div class="on-hover-wrapper">
           <div class="on-hover">
-            <div (click)="deleteProject($event,pw.project)">
+            <button mat-icon-button  (click)="deleteProject($event,pw.project)">
               <mat-icon svgIcon="red:delete"></mat-icon>
-            </div>
-            <div (click)="editProject($event,pw.project)">
+            </button>
+            <button mat-icon-button  (click)="editProject($event,pw.project)">
               <mat-icon svgIcon="red:edit"></mat-icon>
-            </div>
-            <div (click)="showDetailsDialog($event,pw)">
+            </button>
+            <button mat-icon-button  (click)="showDetailsDialog($event,pw)">
               <mat-icon svgIcon="red:stats"></mat-icon>
-            </div>
+            </button>
           </div>
         </div>
       </div>

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

@@ -90,24 +90,26 @@
 
   <div class="project-details-container right-fixed-container">
     <div class="actions-row">
-      <div (click)="deleteProject($event)">
+      <button mat-icon-button  (click)="deleteProject($event)">
         <mat-icon svgIcon="red:delete"></mat-icon>
-      </div>
-      <div (click)="editProject($event)">
+      </button>
+      <button mat-icon-button  (click)="editProject($event)">
         <mat-icon svgIcon="red:edit"></mat-icon>
-      </div>
-      <div (click)="showDetailsDialog($event)">
+      </button>
+      <button mat-icon-button  (click)="showDetailsDialog($event)">
         <mat-icon svgIcon="red:stats"></mat-icon>
-      </div>
+      </button>
     </div>
 
     <div class="subtitle stats-subtitle mt-20">
       <div>
-        {{ appStateService.activeProject.files.length }}
+        <mat-icon svgIcon="red:pages"></mat-icon> {{ appStateService.activeProject.files.length }}
       </div>
-      <div>9</div>
       <div>
-        {{ appStateService.activeProject.project.date | date:'d MMM. yyyy'  }}
+        <mat-icon svgIcon="red:user"></mat-icon>1
+      </div>
+      <div>
+        <mat-icon svgIcon="red:calendar"></mat-icon> {{ appStateService.activeProject.project.date | date:'d MMM. yyyy'  }}
       </div>
     </div>
 

apps/red-ui/src/app/state/app-state.guard.ts

@@ -13,7 +13,7 @@ export class AppStateGuard implements CanActivate {
   }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return this._appStateService.loadAllProjects().then(t => {
+    return this._appStateService.loadAllProjectsIfNecessary().then(t => {
       return true;
     })
   }

apps/red-ui/src/app/state/app-state.service.ts

@@ -56,17 +56,17 @@ export class AppStateService {
     return this._appState.activeFile;
   }
 
-  get totalAnalysedPages(){
+  get totalAnalysedPages() {
     return this._appState.totalAnalysedPages;
   }
 
-  get totalDocuments(){
-    return this._appState.totalDocuments ;
+  get totalDocuments() {
+    return this._appState.totalDocuments;
   }
 
   async loadAllProjects() {
     const projects = await this._projectControllerService.getProjects().toPromise();
-    if(projects) {
+    if (projects) {
       this._appState.projects = projects.map(p => {
         return new ProjectWrapper(p, []);
       });
@@ -154,4 +154,10 @@ export class AppStateService {
   async reloadActiveProjectFiles() {
     await this.getFiles(this._appState.activeProject.project.projectId);
   }
+
+  async loadAllProjectsIfNecessary() {
+    if (!this._appState.projects.length) {
+      await this.loadAllProjects();
+    }
+  }
 }