Fix: Point annotation cleanup (#325)

- Ensures that dialog.position doesn't get called for image point annotations 
- Added styling to the create annotation text area container so that it fits inside the tablet annotations dialog that slides out from the right 
- Removes 'zoomable' and 'pannable' classes from image when the image viewer controls are disabled
- Added extra padding below reply-container on mobile annotation dialogs so that the post/cancel buttons are displayed properly irrespective of whether or not the container can scroll

src/lib/annotations/Annotator.scss

@@ -429,7 +429,8 @@ $avatar-color-9: #f22c44;
 .bp-annotation-mode .page,
 .bp-annotation-mode .bp-annotation-layer-highlight,
 .bp-annotation-mode .textLayer > div,
-.bp-annotation-mode > img {
+.bp-annotation-mode > img,
+.bp-annotation-mode img {
     cursor: crosshair;
 }
 

src/lib/annotations/MobileAnnotator.scss

@@ -165,6 +165,14 @@ $tablet: "(min-width: 768px)";
             width: 24px;
         }
     }
+
+    .reply-container {
+        padding-bottom: 15px;
+
+        @media #{$tablet} {
+            padding-bottom: 45px;
+        }
+    }
 }
 
 /* Highlight dialog */
@@ -186,6 +194,12 @@ $tablet: "(min-width: 768px)";
     width: 100%;
 
     @include border-top-bottom;
+
+    @media #{$tablet} {
+        left: auto;
+        padding: 15px 0;
+        width: 415px;
+    }
 }
 
 .bp-mobile-annotation-dialog .bp-annotation-highlight-dialog {

src/lib/annotations/image/ImagePointThread.js

@@ -38,7 +38,9 @@ class ImagePointThread extends AnnotationThread {
             this.showDialog();
 
             // Force dialogs to reposition on re-render
-            this.dialog.position();
+            if (!this.isMobile) {
+                this.dialog.position();
+            }
         }
     }
 

src/lib/annotations/image/__tests__/ImagePointThread-test.js

@@ -29,6 +29,7 @@ describe('lib/annotations/image/ImagePointThread', () => {
         thread.dialog = {
             position: sandbox.stub()
         };
+        thread.isMobile = false;
     });
 
     afterEach(() => {
@@ -72,6 +73,26 @@ describe('lib/annotations/image/ImagePointThread', () => {
 
             expect(thread.showDialog).to.not.have.been.called;
         });
+
+        it('should not re-position the dialog if pending but on a mobile device', () => {
+            thread.isMobile = true;
+            thread.state = STATES.pending;
+
+            sandbox.stub(imageAnnotatorUtil, 'getBrowserCoordinatesFromLocation').returns([1, 2]);
+            sandbox.stub(annotatorUtil, 'showElement');
+            sandbox.stub(thread, 'showDialog');
+
+            thread.show();
+
+            expect(imageAnnotatorUtil.getBrowserCoordinatesFromLocation).to.have.been.calledWith(
+                thread.location,
+                thread.annotatedElement
+            );
+
+            expect(thread.dialog.position).to.not.have.been.called;
+            expect(annotatorUtil.showElement).to.have.been.calledWith(thread.element);
+            expect()
+        });
     });
 
     describe('createDialog', () => {

src/lib/viewers/image/ImageBaseViewer.js

@@ -336,6 +336,10 @@ class ImageBaseViewer extends BaseViewer {
     disableViewerControls() {
         super.disableViewerControls();
         this.unbindDOMListeners();
+
+        // Ensure zoom/pan classes are removed when controls are disabled
+        this.imageEl.classList.remove(CSS_CLASS_ZOOMABLE);
+        this.imageEl.classList.remove(CSS_CLASS_PANNABLE);
     }
 
     /**

src/lib/viewers/image/__tests__/ImageBaseViewer-test.js

@@ -532,6 +532,8 @@ describe('lib/viewers/image/ImageBaseViewer', () => {
             imageBase.disableViewerControls();
             expect(imageBase.controls.disable).to.be.called;
             expect(imageBase.unbindDOMListeners).to.be.called;
+            expect(imageBase.imageEl).to.not.have.class(CSS_CLASS_ZOOMABLE);
+            expect(imageBase.imageEl).to.not.have.class(CSS_CLASS_PANNABLE);
         });
     });