changing adder icons and note icon in toolbar.

Addressing some PR comments.

Changed styling of the adder a bit.
Changed annotatoin icon click on the toolbar to create a new annotation instead of a new page note, when text has been selected.
Added a for attr for icon labels in the adder.

getting scripts/update-icon-font from branch: annotation-card-design-refresh

comitting new woff and icomoon css

showing adder in the middle top of selection rather than mousePosition.

Revert "showing adder in the middle top of selection rather than mousePosition."

This reverts commit 99491e42eb4103953f0cfa87afdd37e5ac8ece4d.

showing adder a little above the mouse position

check for end of text selection after current event loop tick

only show tooltip for toolbar and not adder

cursor pointer for adder labels

some styling

cleaning up css nesting.

more styling :/

Eliminate deadzone in adder buttons

 * Remove the margin between the adder buttons and the
   edge of the toolbar, and apply padding to the buttons instead.
   This removes the deadzone between the edge of the visible toolbar
   and the clickable area.

 * Add pointer cursor for the buttons

 * Use flexbox for laying out the toolbar for consistency
   with how the Adder is laid out

 * Use a transparent background for the individual buttons, so
   that their background does not obscure the rounded borders
   of the toolbar.

removing console.log

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

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

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)

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 {

h/static/styles/vendor/icomoon.css

 @font-face {
-	font-family: 'h';
-	src: url('../fonts/h.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
+    font-family: 'h';
+  src: url('../fonts/h.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 [class^="h-icon-"], [class*=" h-icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
-	font-family: 'h' !important;
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
+    font-family: 'h' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
 
-	/* Better Font Rendering =========== */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
+.h-icon-annotate:before {
+    content: "\e903";
+}
+.h-icon-highlight:before {
+    content: "\e904";
+}
+.h-icon-note:before {
+    content: "\e905";
+}
 .h-icon-account:before {
-	content: "\e800";
+    content: "\e800";
 }
 .h-icon-sort:before {
-	content: "\e801";
+    content: "\e801";
 }
 .h-icon-group:before {
-	content: "\e61e";
+    content: "\e61e";
 }
 .h-icon-cancel-outline:before {
-	content: "\e619";
+    content: "\e619";
 }
 .h-icon-google-plus:before {
-	content: "\ea88";
+    content: "\ea88";
 }
 .h-icon-facebook:before {
-	content: "\ea8d";
+    content: "\ea8d";
 }
 .h-icon-twitter:before {
-	content: "\ea91";
+    content: "\ea91";
 }
 .h-icon-github:before {
-	content: "\e900";
+    content: "\e900";
 }
 .h-icon-feed:before {
-	content: "\e901";
+    content: "\e901";
 }
 .h-icon-cc-by:before {
-	content: "\e61f";
+    content: "\e61f";
 }
 .h-icon-cc-logo:before {
-	content: "\e620";
+    content: "\e620";
 }
 .h-icon-cc-zero:before {
-	content: "\e621";
+    content: "\e621";
 }
 .h-icon-markdown:before {
-	content: "\e60b";
+    content: "\e60b";
 }
 .h-icon-move:before {
-	content: "\e902";
+    content: "\e902";
 }
 .h-icon-arrow-right:before {
-	content: "\e61d";
+    content: "\e61d";
 }
 .h-icon-arrow-drop-down:before {
-	content: "\e629";
+    content: "\e629";
 }
 .h-icon-link:before {
-	content: "\e628";
+    content: "\e628";
 }
 .h-icon-create:before {
-	content: "\e627";
+    content: "\e627";
 }
 .h-icon-delete:before {
-	content: "\e624";
+    content: "\e624";
 }
 .h-icon-remove:before {
-	content: "\e625";
+    content: "\e625";
 }
 .h-icon-edit:before {
-	content: "\e626";
+    content: "\e626";
 }
 .h-icon-bookmark:before {
-	content: "\e600";
+    content: "\e600";
 }
 .h-icon-done:before {
-	content: "\e601";
+    content: "\e601";
 }
 .h-icon-lock:before {
-	content: "\e602";
+    content: "\e602";
 }
 .h-icon-search:before {
-	content: "\e603";
+    content: "\e603";
 }
 .h-icon-settings:before {
-	content: "\e604";
+    content: "\e604";
 }
 .h-icon-visibility:before {
-	content: "\e605";
+    content: "\e605";
 }
 .h-icon-visibility-off:before {
-	content: "\e606";
+    content: "\e606";
 }
 .h-icon-add:before {
-	content: "\e608";
+    content: "\e608";
 }
 .h-icon-clear:before {
-	content: "\e609";
+    content: "\e609";
 }
 .h-icon-content-copy:before {
-	content: "\e60a";
+    content: "\e60a";
 }
 .h-icon-flag:before {
-	content: "\e60c";
+    content: "\e60c";
 }
 .h-icon-reply:before {
-	content: "\e60d";
+    content: "\e60d";
 }
 .h-icon-border-color:before {
-	content: "\e60e";
+    content: "\e60e";
 }
 .h-icon-format-bold:before {
-	content: "\e60f";
+    content: "\e60f";
 }
 .h-icon-format-italic:before {
-	content: "\e610";
+    content: "\e610";
 }
 .h-icon-format-list-bulleted:before {
-	content: "\e611";
+    content: "\e611";
 }
 .h-icon-format-list-numbered:before {
-	content: "\e612";
+    content: "\e612";
 }
 .h-icon-format-quote:before {
-	content: "\e613";
+    content: "\e613";
 }
 .h-icon-functions:before {
-	content: "\e614";
+    content: "\e614";
 }
 .h-icon-insert-comment:before {
-	content: "\e617";
+    content: "\e617";
 }
 .h-icon-insert-link:before {
-	content: "\e615";
+    content: "\e615";
 }
 .h-icon-insert-photo:before {
-	content: "\e616";
+    content: "\e616";
 }
 .h-icon-cancel:before {
-	content: "\e61a";
+    content: "\e61a";
 }
 .h-icon-check:before {
-	content: "\e61b";
+    content: "\e61b";
 }
 .h-icon-chevron-left:before {
-	content: "\e607";
+    content: "\e607";
 }
 .h-icon-chevron-right:before {
-	content: "\e618";
+    content: "\e618";
 }
 .h-icon-close:before {
-	content: "\e61c";
+    content: "\e61c";
 }
 .h-icon-public:before {
-	content: "\e622";
+    content: "\e622";
 }
 .h-icon-share:before {
-	content: "\e623";
+    content: "\e623";
 }
 .h-icon-mail:before {
-	content: "\e62a";
+    content: "\e62a";
 }
+

scripts/update-icon-font.py

@@ -2,10 +2,10 @@
 
 import argparse
 import os
-
 from base64 import b64encode
 from zipfile import ZipFile
 
+
 def main():
     parser = argparse.ArgumentParser('Update the icomoon icon font from the provided archive')
     parser.add_argument('archive', help='Path to .zip file generated by icomoon')
@@ -23,18 +23,8 @@ def main():
 
     for line in css_input_file:
         if "format('woff')" in line:
-            # inline the WOFF format file
-            woff_content = icon_font_archive.open('fonts/h.woff').read()
-            woff_src_line = """
-    /* WARNING - the URL below is inlined
-     * because the CSS asset pipeline is not correctly rebasing
-     * URLs when concatenating files together.
-     *
-     * See issue #2571
-     */
-    src:url('data:application/font-woff;base64,%s') format('woff');
-"""
-            css_output_file.write(woff_src_line % b64encode(woff_content))
+            # Rewrite the H font URL
+            css_output_file.write("  src: url('../fonts/h.woff') format('woff');\n")
         elif "url(" in line:
             # skip non-WOFF format fonts
             pass