New: drawing dialog (#364)

box · Sep 8, 2017 · 5003c3d · 5003c3d
1 parent 56fe656
commit 5003c3d
Show file tree

Hide file tree

Showing 18 changed files with 609 additions and 39 deletions.
diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties
@@ -113,6 +113,8 @@ annotation_add_comment_placeholder=Add a comment here...
 annotation_reply_placeholder=Post a reply...
 # Text for cancel annotation button
 annotation_cancel=Cancel
+# Text for save annotation button
+annotation_save=Save
 # Text for post annotation button
 annotation_post=Post
 # Text for delete annotation button

diff --git a/src/lib/annotations/AnnotationDialog.js b/src/lib/annotations/AnnotationDialog.js
@@ -54,6 +54,7 @@ class AnnotationDialog extends EventEmitter {
         this.hasAnnotations = data.annotations.length > 0;
         this.canAnnotate = data.canAnnotate;
         this.locale = data.locale;
+        this.isMobile = data.isMobile;
     }
 
     /**

diff --git a/src/lib/annotations/AnnotationThread.js b/src/lib/annotations/AnnotationThread.js
@@ -50,6 +50,7 @@ class AnnotationThread extends EventEmitter {
         this.type = data.type;
         this.locale = data.locale;
         this.isMobile = data.isMobile;
+        this.hasTouch = data.hasTouch;
         this.permissions = data.permissions;
 
         this.setup();

diff --git a/src/lib/annotations/Annotator.scss b/src/lib/annotations/Annotator.scss
@@ -57,6 +57,7 @@ $avatar-color-9: #f22c44;
     }
 }
 
+.bp-annotation-drawing-dialog,
 .bp-annotation-highlight-dialog .bp-btn-plain,
 .bp-annotation-highlight-dialog .bp-btn-plain:hover {
     padding-left: 5px;
@@ -362,6 +363,7 @@ $avatar-color-9: #f22c44;
     }
 }
 
+.bp-annotation-drawing-dialog,
 .bp-annotation-highlight-dialog,
 .bp-annotation-highlight-dialog:hover {
     background-color: $white;
@@ -374,6 +376,15 @@ $avatar-color-9: #f22c44;
         padding-top: 1px;
     }
 
+    .bp-btn-annotate-draw-add {
+        padding-bottom: 3px;
+        padding-right: 6px;
+    }
+
+    .bp-btn-annotate-draw-delete {
+        padding-bottom: 3px;
+    }
+
     .bp-highlight-comment-btn {
         padding-top: 3px;
     }
@@ -430,6 +441,7 @@ $avatar-color-9: #f22c44;
     }
 }
 
+.bp-annotation-drawing-label,
 .bp-annotation-highlight-label {
     padding-left: 5px;
     padding-right: 5px;

diff --git a/src/lib/annotations/__tests__/annotatorUtil-test.js b/src/lib/annotations/__tests__/annotatorUtil-test.js
@@ -435,7 +435,7 @@ describe('lib/annotations/annotatorUtil', () => {
 
         it('should do nothing when the target exists and it is not the textLayer', () => {
             event.target = {
-                className: 'button'
+                nodeName: 'BUTTON'
             };
             locationHandler(event);
             expect(callback).to.not.be.called;

diff --git a/src/lib/annotations/annotationConstants.js b/src/lib/annotations/annotationConstants.js
@@ -35,6 +35,8 @@ export const CLASS_ANNOTATION_BUTTON_DRAW_POST = 'bp-btn-annotate-draw-post';
 export const CLASS_ANNOTATION_BUTTON_DRAW_CANCEL = 'bp-btn-annotate-draw-cancel';
 export const CLASS_ANNOTATION_BUTTON_DRAW_ENTER = 'bp-btn-annotate-draw-enter';
 export const CLASS_ANNOTATION_DRAWING_LABEL = 'bp-annotation-drawing-label';
+export const CLASS_ANNOTATION_DRAWING_DIALOG = 'bp-annotation-drawing-dialog';
+export const CLASS_ANNOTATION_DRAWING_BTNS = 'bp-annotation-drawing-btns';
 export const CLASS_ADD_DRAWING_BTN = 'bp-btn-annotate-draw-add';
 export const CLASS_DELETE_DRAWING_BTN = 'bp-btn-annotate-draw-delete';
 

diff --git a/src/lib/annotations/annotatorUtil.js b/src/lib/annotations/annotatorUtil.js
@@ -449,8 +449,9 @@ export function eventToLocationHandler(locationFunction, callback) {
     return (event) => {
         const evt = event || window.event;
         // Do nothing when the target isn't the text layer in case the text layer receives event precedence over buttons
-        // NOTE: Currently only applicable to documents. Need to find a better way to ensure button event precedence.
-        if (!evt || (event.target && event.target.className !== 'textLayer')) {
+        // NOTE: @jpress Currently only applicable to documents.
+        // Need to find a better way to ensure button event precedence.
+        if (!evt || (evt.target && evt.target.nodeName === 'BUTTON')) {
             return;
         }
 
@@ -475,6 +476,7 @@ export function prevDefAndStopProp(event) {
     event.preventDefault();
     event.stopPropagation();
 }
+
 /**
  * Create a JSON object containing x/y coordinates and optionally dimensional information
  *

diff --git a/src/lib/annotations/doc/DocAnnotator.js b/src/lib/annotations/doc/DocAnnotator.js
@@ -325,6 +325,7 @@ class DocAnnotator extends Annotator {
             container: this.container,
             fileVersionId: this.fileVersionId,
             isMobile: this.isMobile,
+            hasTouch: this.hasTouch,
             locale: this.locale,
             location,
             type,
@@ -548,10 +549,6 @@ class DocAnnotator extends Annotator {
             this.highlightThrottleHandle = null;
         }
 
-        if (!this.permissions.canAnnotate) {
-            return;
-        }
-
         Object.keys(this.modeControllers).forEach((mode) => {
             const controller = this.modeControllers[mode];
             controller.removeSelection();