fix annotation bugs

wemaintain · Oct 19, 2020 · 197ceaf · 197ceaf
1 parent 45d9621
commit 197ceaf
Show file tree

Hide file tree

Showing 8 changed files with 204 additions and 140 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wemaintain/pdf-viewer",
-  "version": "1.0.3",
+  "version": "1.0.11",
   "description": "Angular component for rendering PDF",
   "license": "MIT",
   "scripts": {
@@ -14,6 +14,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "packagr": "ng-packagr -p package.json",
+    "publish": "npm run packagr && cd dist && npm publish",
     "docs": "ng build --prod --output-path docs --base-href ng2-pdf-viewer && cp ./docs/index.html ./docs/404.html"
   },
   "private": false,

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,20 +1,13 @@
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
-import { NoopAnimationsModule } from '@angular/platform-browser/animations'
 import { AppComponent } from './app.component'
 import { DemoMaterialModule } from './material.module'
 import { PdfViewerModule } from './pdf-viewer/pdf-viewer.module'
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    NoopAnimationsModule,
-    DemoMaterialModule,
-    PdfViewerModule,
-  ],
+  imports: [BrowserModule, FormsModule, DemoMaterialModule, PdfViewerModule],
   providers: [],
   bootstrap: [AppComponent],
 })

diff --git a/src/app/pdf-viewer/pager/pager.component.html b/src/app/pdf-viewer/pager/pager.component.html
@@ -1,20 +1,20 @@
 <div class="pager">
   <div class="page">Page {{ page }} / {{ numPages }}</div>
-  <div class="operators">
+  <!-- <div class="operators">
     <span (click)="this.nextPage()" class="operator">
       <mat-icon>add</mat-icon>
     </span>
     <span (click)="this.previousPage()" class="operator">
       <mat-icon>remove</mat-icon>
     </span>
-  </div>
+  </div> -->
   <div class="operators">
-    <span (click)="this.zoomIn()" class="operator">
-      <mat-icon>zoom_in</mat-icon>
+    <span (click)="this.zoomOut()" class="operator">
+      <mat-icon>remove</mat-icon>
     </span>
     <span class="zoom-value">{{ zoom | percent }}</span>
-    <span (click)="this.zoomOut()" class="operator">
-      <mat-icon>zoom_out</mat-icon>
+    <span (click)="this.zoomIn()" class="operator">
+      <mat-icon>add</mat-icon>
     </span>
   </div>
 </div>
diff --git a/src/app/pdf-viewer/pager/pager.component.scss b/src/app/pdf-viewer/pager/pager.component.scss
@@ -4,48 +4,50 @@
   left: 50%;
   color: white;
   display: flex;
-  font-size: 12px;
-  height: 36px;
+  font-size: 14px;
+  font-family: 'SanFranciscoSemiBold';
+  letter-spacing: 0.3px;
+  height: 48px;
+  opacity: 0.7;
+  border-radius: 4px;
+  background-color: #000000;
+  transform: translateX(-50%);
 
   .page {
     display: flex;
     align-items: center;
-    background: rgba(0, 0, 0, 0.7);
-
-    border-right: 1px solid white;
-    padding: 8px;
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0 24px;
   }
 
   .operators {
-    font-size: 12px;
     display: flex;
     align-items: center;
-    border-right: 1px solid white;
+    padding: 0 8px;
 
     .operator {
       cursor: pointer;
       display: block;
-      background: rgba(0, 0, 0, 0.7);
       display: flex;
       align-items: center;
-      width: 36px;
-      height: 36px;
       justify-content: center;
-      font-size: 18px;
+      height: 36px;
+      width: 36px;
+      border-radius: 4px;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.6);
+        background: rgba(255, 255, 255, 0.12);
       }
     }
 
     .zoom-value {
-      font-size: 12px;
-      background: rgba(0, 0, 0, 0.7);
       display: flex;
       align-items: center;
-      width: 36px;
-      height: 36px;
       justify-content: center;
+      font-size: 14px;
+      font-family: 'SanFranciscoSemiBold';
+      letter-spacing: 0.3px;
+      padding: 0 8px;
     }
   }
 }
diff --git a/src/app/pdf-viewer/pdf-viewer.component.html b/src/app/pdf-viewer/pdf-viewer.component.html
@@ -2,15 +2,22 @@
   <div class="pdfViewer"></div>
 
   <div class="annotations">
-    <div class="annotation-card" *ngIf="activeAnnotation"
-      [ngStyle]="{ top: annotationCardCoordinates.positionY * zoom + 'px', left: annotationCardCoordinates.positionX * zoom + 'px' }">
+    <div class="annotation-card" *ngIf="activeAnnotation" #annotationCardContent [ngStyle]="{
+        top: annotationCardCoordinates.positionY * zoom + 'px',
+        left: annotationCardCoordinates.positionX * zoom + offsetLeft + 'px' }">
+      <div class="triangle-container" [ngClass]="{ invert: invertTriangle}"
+        [ngStyle]="{ left: 100 + (invertTriangle ? 25 : 0) + annotationCardOffset + 'px'}">
+        <div class="triangle-shadow"></div>
+        <div class="triangle"></div>
+      </div>
       <ng-content select=".annotation-card-content"></ng-content>
     </div>
 
     <div *ngFor="let annotation of annotations" [ngStyle]="{
           top: annotation.positionY * zoom + 'px',
-          left: annotation.positionX * zoom + 'px'
-        }" class="annotation" [id]="annotation.id">{{ annotation.index }}</div>
+          left: annotation.positionX * zoom + offsetLeft + 'px'
+        }" class="annotation" [id]="annotation.index" (click)="editAnnotation(annotation)">
+      {{ annotation.index + 1 }}</div>
   </div>
 
 </div>

diff --git a/src/app/pdf-viewer/pdf-viewer.component.scss b/src/app/pdf-viewer/pdf-viewer.component.scss
@@ -3,8 +3,8 @@
   overflow-x: hidden;
   height: 100%;
   -webkit-overflow-scrolling: touch;
-  padding: 20px;
-  background: lightgray;
+  padding: 32px 0;
+  background: #f4f4f7;
   position: relative;
 
   .pdfViewer {
@@ -24,55 +24,65 @@
       background: white;
       margin-left: -100px;
       margin-top: 40px;
-      box-shadow: 0 2px 5px 0 rgba(39, 44, 108, 0.3);
-      width: 400px;
-      padding: 20px;
+      box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
+      width: 408px;
+      padding: 32px;
       z-index: 1;
+      border-radius: 4px;
 
-      &:before {
-        bottom: 100%;
-        left: 112px;
-        border: solid transparent;
-        content: ' ';
-        height: 0;
-        width: 0;
+      .triangle-container {
         position: absolute;
-        pointer-events: none;
-        border-color: rgba(136, 183, 213, 0);
-        border-bottom-color: rgba(39, 44, 108, 0.05);
-        border-width: 12px;
-        margin-left: -12px;
-      }
-
-      &:after {
-        bottom: 100%;
-        left: 112px;
-        border: solid transparent;
-        content: ' ';
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-        border-color: rgba(136, 183, 213, 0);
-        border-bottom-color: white;
-        border-width: 10px;
-        margin-left: -10px;
+        top: -12px;
+
+        &.invert {
+          top: auto;
+          transform: rotate(180deg);
+          bottom: -12px;
+
+          .triangle-shadow {
+            top: -2px;
+          }
+        }
+
+        .triangle {
+          position: absolute;
+          top: -1px;
+          width: 0;
+          height: 0;
+          border-left: 12px solid transparent;
+          border-right: 12px solid transparent;
+          margin-left: 2px;
+          margin-top: 2px;
+          border-bottom: 12px solid white;
+        }
+
+        .triangle-shadow {
+          position: absolute;
+          top: -1px;
+          width: 0;
+          height: 0;
+          border-left: 14px solid transparent;
+          border-right: 14px solid transparent;
+          border-bottom: 14px solid rgba(39, 44, 108, 0.05);
+        }
       }
     }
 
     .annotation {
       pointer-events: initial;
       position: absolute;
       cursor: pointer;
-      font-weight: bold;
+      font-weight: 600;
       font-size: 14px;
-      background: black;
+      background-color: #f1653c;
+      box-shadow: 0 2px 5px 0 rgba(241, 101, 60, 0.3);
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 24px;
-      width: 24px;
+      height: 28px;
+      width: 28px;
+      line-height: 20px;
       border-radius: 50%;
     }
   }
@@ -84,13 +94,13 @@
   position: relative;
 
   ::-webkit-scrollbar {
-    width: 8px;
     height: 8px;
+    width: 6px;
   }
 
   ::-webkit-scrollbar-thumb {
     background: #999;
-    border-radius: 0;
+    border-radius: 4px;
   }
 
   ::-webkit-scrollbar-track {
@@ -107,6 +117,7 @@
       overflow: hidden;
       opacity: 0.2;
       line-height: 1;
+      box-shadow: 0 0 10px 0 rgba(39, 44, 108, 0.1);
 
       > span {
         color: transparent;