Merge pull request #3078 from...

Merge pull request #3078 from hypothesis/sheetaluk/281-update-the-toolbar-s-note-icon-tooltip-and-update-the-adder-design

changing adder icons and note icon in toolbar.

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,6 +30,7 @@ module.exports = class TextSelection extends Annotator.Plugin
   #
   # Returns nothing.
   checkForEndSelection: (event = {}) =>
+    callback = ->
       # Get the currently selected ranges.
       selection = Annotator.Util.getGlobal().getSelection()
       ranges = for i in [0...selection.rangeCount]
@@ -41,3 +42,7 @@ module.exports = class TextSelection extends Annotator.Plugin
         @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,22 +7,22 @@ $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 {
+.annotator-adder:before {
   @include rotate(45deg);
   background: $white;
-    bottom: -8px;
-    border-bottom: 4px solid $gray;
-    border-right: 4px solid $gray;
+  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;
@@ -32,32 +32,48 @@ $base-font-size: 14px;
   position: absolute;
   right: 0;
   width: 6px;
-  }
+}
 
-  button {
+.annotator-adder-actions {
+  display: flex;
+  flex-direction: row;
+}
+
+.annotator-adder-actions:hover .annotator-adder-actions__button {
+  color: $gray-light !important;
+}
+
+.annotator-adder-actions__button {
   @include box-shadow(none);
-    display: inline-block;
   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;
-    height: 100%;
-    width: 35px;
-    font-size: 18px;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    background: $white !important;
-    color: $gray-light !important;
 
-    &:active {
-      transition: background-color .25s;
-      background-color: $gray-light !important;
-    }
+  padding-top: 7px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
 
-    &:hover {
+.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;
 }
 
 

h/static/styles/vendor/icomoon.css

@@ -20,6 +20,15 @@
     -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";
 }
@@ -173,3 +182,4 @@
 .h-icon-mail:before {
     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