Merge pull request #3078 from hypothesis/sheetaluk/281-update-the-too…

…lbar-s-note-icon-tooltip-and-update-the-adder-design changing adder icons and note icon in toolbar.
hypothesis · Mar 15, 2016 · 00793e3 · 00793e3
2 parents a4d2ad2 + 74d5a23
commit 00793e3
Show file tree

Hide file tree

Showing 8 changed files with 436 additions and 289 deletions.
diff --git a/h/static/scripts/annotator/guest.coffee b/h/static/scripts/annotator/guest.coffee
@@ -44,8 +44,14 @@ module.exports = class Guest extends Annotator
   html: extend {}, Annotator::html,
     adder: '''
       <div class="annotator-adder">
-        <button class="h-icon-insert-comment" data-action="comment" title="New Note"></button>
-        <button class="h-icon-border-color" data-action="highlight" title="Highlight"></button>
+        <div class="annotator-adder-actions">
+          <button class="annotator-adder-actions__button h-icon-annotate" data-action="comment">
+            <span class="annotator-adder-actions__label" data-action="comment">Annotate</span>
+          </button>
+          <button class="annotator-adder-actions__button h-icon-highlight" data-action="highlight">
+            <span class="annotator-adder-actions__label" data-action="highlight">Highlight</span>
+          </button>
+        </div>
       </div>
     '''
 
@@ -343,6 +349,11 @@ module.exports = class Guest extends Annotator
 
     @selectedRanges = event.ranges
 
+    Annotator.$('.annotator-toolbar .h-icon-note')
+      .attr('title', 'New Annotation')
+      .removeClass('h-icon-note')
+      .addClass('h-icon-annotate');
+
     # Do we want immediate annotation?
     if immediate
       # Create an annotation
@@ -359,6 +370,11 @@ module.exports = class Guest extends Annotator
     @adder.hide()
     @selectedRanges = []
 
+    Annotator.$('.annotator-toolbar .h-icon-annotate')
+      .attr('title', 'New Page Note')
+      .removeClass('h-icon-annotate')
+      .addClass('h-icon-note');
+
   selectAnnotations: (annotations, toggle) ->
     if toggle
       this.toggleAnnotationSelection annotations

diff --git a/h/static/scripts/annotator/plugin/textselection.coffee b/h/static/scripts/annotator/plugin/textselection.coffee
@@ -30,14 +30,19 @@ module.exports = class TextSelection extends Annotator.Plugin
   #
   # Returns nothing.
   checkForEndSelection: (event = {}) =>
-    # Get the currently selected ranges.
-    selection = Annotator.Util.getGlobal().getSelection()
-    ranges = for i in [0...selection.rangeCount]
-      r = selection.getRangeAt(0)
-      if r.collapsed then continue else r
-
-    if ranges.length
-      event.ranges = ranges
-      @annotator.onSuccessfulSelection event
-    else
-      @annotator.onFailedSelection event
+    callback = ->
+      # Get the currently selected ranges.
+      selection = Annotator.Util.getGlobal().getSelection()
+      ranges = for i in [0...selection.rangeCount]
+        r = selection.getRangeAt(0)
+        if r.collapsed then continue else r
+
+      if ranges.length
+        event.ranges = ranges
+        @annotator.onSuccessfulSelection event
+      else
+        @annotator.onFailedSelection event
+
+    # Run callback after the current event loop tick
+    # so that the mouseup event can update the document selection.
+    setTimeout callback, 0
diff --git a/h/static/scripts/annotator/plugin/toolbar.coffee b/h/static/scripts/annotator/plugin/toolbar.coffee
@@ -51,14 +51,14 @@ module.exports = class Toolbar extends Annotator.Plugin
           state = not @annotator.visibleHighlights
           @annotator.setVisibleHighlights state
     ,
-      "title": "New Note"
-      "class": "h-icon-insert-comment"
+      "title": "New Page Note"
+      "class": "h-icon-note"
       "name": "insert-comment"
       "on":
         "click": (event) =>
           event.preventDefault()
           event.stopPropagation()
-          @annotator.createComment()
+          @annotator.createAnnotation()
           @annotator.show()
     ]
     @buttons = $(makeButton(item) for item in items)

diff --git a/h/static/styles/annotator/inject.scss b/h/static/styles/annotator/inject.scss
@@ -7,59 +7,75 @@ $base-font-size: 14px;
 .annotator-adder {
   box-sizing: border-box;
   direction: ltr;
-  height: 35px;
-  margin-left: -20px;
-  margin-top: -50px;
-  padding: 0;
+  margin-top: -60px;
+  margin-left: -65px;
   position: absolute;
   background: $white;
-  border: 3px solid $gray;
+  border: 1px solid rgba(0,0,0,0.20);
   border-radius: 4px;
+  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
   z-index: 999;
+}
 
-  &:before {
-    @include rotate(45deg);
-    background: $white;
-    bottom: -8px;
-    border-bottom: 4px solid $gray;
-    border-right: 4px solid $gray;
-    content: "";
-    display: block;
-    height: 6px;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    position: absolute;
-    right: 0;
-    width: 6px;
-  }
+.annotator-adder:before {
+  @include rotate(45deg);
+  background: $white;
+  bottom: -5px;
+  border-bottom: 1px solid rgba(0,0,0,0.20);
+  border-right: 1px solid rgba(0,0,0,0.20);
+  content: "";
+  display: block;
+  height: 6px;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  right: 0;
+  width: 6px;
+}
 
-  button {
-    @include box-shadow(none);
-    display: inline-block;
-    font-family: h;
-    border: none;
-    cursor: pointer;
-    height: 100%;
-    width: 35px;
-    font-size: 18px;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    background: $white !important;
-    color: $gray-light !important;
+.annotator-adder-actions {
+  display: flex;
+  flex-direction: row;
+}
 
-    &:active {
-      transition: background-color .25s;
-      background-color: $gray-light !important;
-    }
+.annotator-adder-actions:hover .annotator-adder-actions__button {
+  color: $gray-light !important;
+}
 
-    &:hover {
-      color: $gray-dark !important;
-    }
+.annotator-adder-actions__button {
+  @include box-shadow(none);
+  font-family: h;
+  font-size: 18px;
+  background: transparent !important;
+  color: $gray-dark !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+
+  padding-top: 7px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.annotator-adder-actions .annotator-adder-actions__button:hover {
+  color: $gray-dark !important;
+
+  .annotator-adder-actions__label {
+    color: $gray-dark !important;
   }
 }
 
+.annotator-adder-actions__label {
+  font-size: 11px;
+  margin: 2px 0px;
+  font-family: sans-serif;
+  color: $gray-light !important;
+}
+
 
 //HIGHLIGHTS////////////////////////////////
 .annotator-highlights-always-on {

diff --git a/h/static/styles/vendor/fonts/h.woff b/h/static/styles/vendor/fonts/h.woff