Note adding / viewing UX updates

Summary:
* Disable viewing through annotator popup
* Clicking a highlight opens it in the panel
* Update note adder styling to match bootstrap
* Remove "edit" option from note adder

Resolves T256

Test Plan:
* Make sure adding notes still works
  * Provide any feedback you have on style of adder button and editor
* Click a note, make sure it opens that note in the panel
* Make sure note does not show on hover
* Make sure note actions still work in the panel
* Make sure "edit" functionality is gone from adder

Reviewers: doshitan

Reviewed By: doshitan

Maniphest Tasks: T256

Differential Revision: https://phabricator.opengovfoundation.org/D152

Author: sethetter

gulpfile.js

@@ -27,7 +27,6 @@ elixir((mix) => {
        )
        .copy('resources/assets/img', 'public/img')
        .copy('resources/assets/icons', 'public/')
-       .copy('resources/assets/vendor/css/annotator.min.css', 'public/css/')
        .copy('node_modules/font-awesome/fonts/', 'public/fonts/')
        .version([
          'css/app.css',

resources/assets/js/annotator-madison.js

@@ -1,5 +1,4 @@
 /*global Annotator*/
-/*global diff_match_patch*/
 /*jslint newcap: true*/
 Annotator.Plugin.Madison = function (element, options) {
   Annotator.Plugin.apply(this, arguments);
@@ -96,31 +95,6 @@ $.extend(Annotator.Plugin.Madison.prototype, new Annotator.Plugin(), {
       $('#current-comments').collapse(true);
     });
 
-    this.annotator.subscribe('annotationViewerTextField', function (field, annotation) {
-      if (annotation.tags.length === 0) {
-        return;
-      }
-
-      annotation.tags.forEach(function (tag) {
-        // TODO: support edits?
-        // if (tag === 'edit') {
-        //   var jField = $(field);
-        //   var differ = new diff_match_patch();
-        //   var diffs = differ.diff_main(annotation.quote, annotation.text);
-        //   var html = differ.diff_prettyHtml(diffs);
-        //   jField.find('p').html(html);
-        // }
-      });
-    });
-
-    // Add Madison-specific fields to the viewer when Annotator loads it
-    this.annotator.viewer.addField({
-      load: function (field, annotation) {
-        this.addNoteActions(field, annotation);
-        this.addComments(field, annotation);
-      }.bind(this)
-    });
-
     this.annotator.editor.submit = function (e) {
       // Clear previous errors
       this.annotation._error = false;
@@ -142,49 +116,38 @@ $.extend(Annotator.Plugin.Madison.prototype, new Annotator.Plugin(), {
       }
     };
 
-    this.annotator.editor.addField({
-      load: function (field, annotation) {
-        this.addEditFields(field, annotation);
-      }.bind(this),
-      submit: function (field, annotation) {
-        // check it is tagged 'edit'
-        if (this.hasEditTag(annotation.tags)) {
-          // check we have explanatory content
-          var explanation = $(field).find('#explanation').val();
-
-          // If no explanatory content, show message and don't submit
-          if ('' === explanation.trim()) {
-            $('#annotation-error').text("Explanation required for edits.").toggle(true);
-
-            annotation._error = true;
-            return false;
-          }
+    // We want document events even on readOnly, which isn't the default
+    // behavior.
+    if (this.annotator.options.readOnly && !this.annotator.options.discussionClosed) {
+      this.annotator._setupDocumentEvents();
+    }
 
-          annotation.explanation = explanation;
-        }
-      },
-      hasEditTag: function (tags) {
-        var hasEditTag = false;
+    // Disable viewing annotations through mouseover
+    this.annotator.onHighlightMouseover = function (event) {
+      return false;
+    };
 
-        if (tags === undefined || tags.length  === 0) {
-          return false;
-        }
+    // Clicking a highlight opens the panel for that annotation group
+    $('.annotator-wrapper').delegate('.annotator-hl', 'click', function (event) {
+      $(event.target).trigger('madison.showNotes');
+    });
 
-        tags.forEach(function (tag) {
-          if (tag === 'edit') {
-            hasEditTag = true;
+    // If the area outside of the editor is clicked, close it.
+    this.annotator.subscribe('annotationEditorShown', function () {
+      setTimeout(function() {
+        $(document).one('click.annotationEditor', function (e) {
+          let clickIsOutsideEditor = !$(e.target).closest('.annotator-editor').length;
+          if (clickIsOutsideEditor) {
+            $('.annotator-editor:not(.annotator-hide) .annotator-controls .annotator-cancel').trigger('click');
           }
         });
-
-        return hasEditTag;
-      }
+      }, 500);
     });
 
-    // We want document events even on readOnly, which isn't the default
-    // behavior.
-    if (this.annotator.options.readOnly && !this.annotator.options.discussionClosed) {
-      this.annotator._setupDocumentEvents();
-    }
+    // Just in case we close the editor with "cancel", clean up the single event binding
+    this.annotator.subscribe('annotationEditorHidden', function () {
+      $(document).off('click.annotationEditor');
+    });
 
     this.onAdderClickOld = this.annotator.onAdderClick;
     this.annotator.onAdderClick = function (event) {
@@ -254,100 +217,6 @@ $.extend(Annotator.Plugin.Madison.prototype, new Annotator.Plugin(), {
     }
   },
 
-  addEditFields: function (field, annotation) {
-    var newField = $(field);
-    var toAdd = $('<div class="annotator-editor-edit-wrapper"></div>');
-
-    var buttonGroup = $('<div class="btn-group"></div>');
-
-    var explanation = $('<input id="explanation" type="text" name="explanation" placeholder="'+window.trans['messages.document.note_edit_explanation_prompt']+'" style="display:none;" />');
-    var annotationError = $('<p id="annotation-error" style="display:none; color:red;"></p>');
-
-    var annotateButton = $('<button type="button" class="btn btn-default active">'+window.trans['messages.document.note']+'</button>').click(function () {
-      $(this).addClass('active');
-      $(this).siblings().each(function (sibling) {
-        $(this).removeClass('active');
-      });
-      $('#annotator-field-0').val('');
-      $('#annotator-field-1').val('');
-      $('#explanation').toggle(false);
-      $('#explanation').prop('required', false);
-      $('#annotator-error').text('').toggle(false);
-      $('#annotator-field-0').focus();
-    });
-
-    var editButton = $('<button type="button" class="btn btn-default">'+window.trans['messages.edit']+'</button>').click(function () {
-      $(this).addClass('active');
-      $(this).siblings().each(function (sibling) {
-        $(this).removeClass('active');
-      });
-      $('#annotator-field-0').val(annotation.quote);
-      $('#annotator-field-1').val('edit ');
-      $('#explanation').toggle(true);
-      $('#explanation').prop('required', true);
-      $('#annotator-field-0').focus();
-    });
-
-    buttonGroup.append(annotateButton, editButton);
-    toAdd.append(buttonGroup);
-    toAdd.append(explanation);
-    toAdd.append(annotationError);
-    newField.html(toAdd);
-  },
-
-  addComments: function (field, annotation) {
-    var userId = this.options.userId;
-
-    // Add comment wrapper and collapse the comment thread
-    var commentsHeader = $('<div class="comment-toggle" data-toggle-"collapse" data-target="#current-comments">Comments <span id="comment-caret" class="caret caret-right"></span></button>').click(function () {
-      $('#current-comments').collapse('toggle');
-      $('#comment-caret').toggleClass('caret-right');
-    });
-
-    // If there are no comments, hide the comment wrapper
-    if ($(annotation.comments).length === 0) {
-      commentsHeader.addClass('hidden');
-    }
-
-    // Add all current comments to the annotation viewer
-    var currentComments = $('<div id="current-comments" class="current-comments collapse"></div>');
-
-    /*jslint unparam: true*/
-    $.each(annotation.comments, function (index, comment) {
-      comment = $('<div class="existing-comment"><blockquote>' + comment.text + '<div class="comment-author">' + comment.user.display_name + '</div></blockquote></div>');
-      currentComments.append(comment);
-    });
-    /*jslint unparam: false*/
-
-    // Collapse the comment thread on load
-    currentComments.ready(function () {
-      $('#existing-comments').collapse({
-        toggle: false
-      });
-    });
-
-    // If the user is logged in, allow them to comment
-    if (userId) {
-      var annotationComments = $('<div class="annotation-comments"></div>');
-      var commentText = $('<input type="text" class="form-control" />');
-      var commentSubmit = $('<button type="button" class="btn btn-primary" >Submit</button>');
-      commentSubmit.click(function () {
-        this.createComment(commentText, annotation);
-      }.bind(this));
-      annotationComments.append(commentText);
-
-      annotationComments.append(commentSubmit);
-
-      $(field).append(annotationComments);
-    }
-
-    $(field).append(commentsHeader, currentComments);
-  },
-
-  addNoteActions: function (field, annotation) {
-    $(field).append(this.noteActionsString(annotation));
-  },
-
   noteActionsString: function (comment) {
     let actions = '<div class="activity-actions">';
     actions += '<a class="thumbs-up" onclick=$(this).trigger("madison.addAction")'
@@ -543,12 +412,18 @@ $.extend(Annotator.Plugin.Madison.prototype, new Annotator.Plugin(), {
       var annotationParentId;
       if (annotationParent.prop('id')) {
         annotationParentId = annotationParent.prop('id');
+        annotationGroupCount = parseInt(annotationParentId.replace('annotationGroup-', ''));
       } else {
         annotationGroupCount++;
         annotationParentId = 'annotationGroup-' + annotationGroupCount;
         annotationParent.prop('id', annotationParentId);
       }
 
+      // Set data-group-id on highlights so they can trigger notes pane
+      annotation.highlights.forEach(function (highlight) {
+        $(highlight).data('groupId', annotationParentId);
+      });
+
       if ((typeof(annotationGroups[annotationParentId])).toLowerCase() === 'undefined') {
         var parentTop = annotationParent.offset().top;
         var containerTop = $(this.options.annotationContainerElem).offset().top;

resources/assets/sass/annotation.scss

@@ -201,10 +201,141 @@
   }
 }
 
+.annotator-hide { display: none; }
+
 .annotator-adder, .annotator-outer, .annotator-notice, .annotator-filter {
   z-index: 1000 !important;
 }
 
+.annotator-wrapper .annotator-adder {
+  position: absolute;
+  padding-left: 15px;
+  padding-top: 7px;
+
+  button {
+    @extend .btn;
+    @extend .btn-default;
+    @extend .fa;
+    @extend .fa-pencil;
+
+    // Styling for the pencil
+    &:before {
+      text-indent: 0;
+      color: $gray;
+      font-size: 16px;
+      position: absolute;
+      top: 6px;
+      left: 8px;
+    }
+
+    text-indent: -9999px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    margin-left: 5px;
+    height: 30px;
+    width: 30px;
+    position: absolute;
+    top: -40px;
+    left: -20px;
+  }
+}
+
+.annotator-outer.annotator-editor {
+  position: absolute;
+}
+
+.annotator-wrapper .annotator-widget {
+  @extend .panel;
+
+  position: absolute;
+  top: -180px;
+  left: -150px;
+
+  border: 1px solid #eee;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+
+  &:after { background-image: none; }
+
+  .annotator-listing {
+    @extend .panel-body;
+
+    padding-bottom: 0;
+    list-style: none;
+
+    .annotator-item textarea {
+      padding: 0;
+      border: none;
+      width: 300px;
+      min-height: 80px;
+
+      &:focus { outline: none; }
+    }
+  }
+
+  .annotator-controls {
+    @extend .panel-footer;
+
+    a {
+      @extend .btn;
+
+      &.annotator-save {
+        @extend .btn-primary;
+        float: right;
+      }
+      &.annotator-cancel {
+        @extend .btn-default;
+      }
+    }
+  }
+
+}
+
+.annotator-notice {
+  @extend .alert;
+
+  position: fixed;
+  top: -54px;
+  left: 0;
+
+  width: 100%;
+  text-align: center;
+
+  .ie6 & {
+    position: absolute;
+  }
+
+}
+
+.annotator-notice-success {
+  @extend .alert-success;
+}
+
+.annotator-notice-error {
+  @extend .alert-danger;
+}
+
+.annotator-notice-show {
+  top: 0;
+}
+
+
+
+.annotator-hl {
+  background: rgba(255,255,10,0.3);
+  cursor: pointer;
+}
+
+.annotator-hl-temporary {
+  background: rgba(0,124,255,0.3);
+}
+
+.annotator-hl-active {
+  background: rgba(255,255,10,0.8);
+}
+
+.annotator-hl-filtered {
+  background-color: transparent;
+}
+
 .mobile-annotation-message {
   display: none;
 }
@@ -243,8 +374,9 @@
   }
 
   // Hide all inline annotations for now.
-  .annotator-outer {
-    display: none;
+  .annotator-outer,
+  .annotator-adder {
+    display: none !important;
   }
 }