Merge pull request #2138 from hypothesis/UX-Improvements

Address usability issues

h/static/scripts/annotator/plugin/toolbar.coffee

@@ -10,14 +10,10 @@ makeButton = (item) ->
   return button[0]
 
 class Annotator.Plugin.Toolbar extends Annotator.Plugin
-  PUSHED_CLASS = 'annotator-pushed'
-
   events:
-    '.annotator-toolbar mouseenter': 'show'
-    '.annotator-toolbar mouseleave': 'hide'
     'setVisibleHighlights': 'onSetVisibleHighlights'
 
-  html: '<div class="annotator-toolbar annotator-hide"></div>'
+  html: '<div class="annotator-toolbar"></div>'
 
   pluginInit: ->
     @annotator.toolbar = @toolbar = $(@html)
@@ -39,7 +35,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
           else
             @annotator.triggerHideFrame()
     ,
-      "title": "Show Annotations"
+      "title": "Hide Highlights"
       "class": "h-icon-visibility"
       "on":
         "click": (event) =>
@@ -67,16 +63,15 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
     # psuedo-class to a clicked element.
     @toolbar.on('mouseup', 'a', (event) -> $(event.target).blur())
 
-  show: -> this.toolbar.removeClass('annotator-hide')
-
-  hide: -> this.toolbar.addClass('annotator-hide')
-
   onSetVisibleHighlights: (state) ->
     if state
-      $(@buttons[1]).addClass(PUSHED_CLASS)
+      $(@buttons[1]).children().removeClass('h-icon-visibility-off')
+      $(@buttons[1]).children().addClass('h-icon-visibility')
+      $(@buttons[1]).children().prop('title', 'Hide Highlights');
     else
-      $(@buttons[1]).removeClass(PUSHED_CLASS)
-    this._updateStickyButtons()
+      $(@buttons[1]).children().removeClass('h-icon-visibility')
+      $(@buttons[1]).children().addClass('h-icon-visibility-off')
+      $(@buttons[1]).children().prop('title', 'Show Highlights');
 
   _updateStickyButtons: ->
     count = $(@buttons).filter(-> $(this).hasClass(PUSHED_CLASS)).length

h/static/styles/inject.scss

@@ -152,33 +152,8 @@ $base-font-size: 14px;
   }
 }
 
-.annotator-frame .annotator-toolbar.annotator-hide {
-  display: block;
-  visibility: visible;
-
-  li {
-    @include transition-delay(.75s);
-    @include transition-timing-function(cubic-bezier(1, .1, .55, 0));
-    height: 0;
-    left: 34px;
-    margin-top: -2px;
-    &:first-child, &.annotator-pushed {
-      @include transition-delay(0);
-      left: 3px;
-      height: 30px;
-    }
-    &.annotator-pushed {
-      margin-top: 5px;
-    }
-  }
-}
-
 .annotator-frame .annotator-toolbar li {
   @include smallshadow;
-  @include transition-property(left, height, margin-top);
-  @include transition-duration(.25s);
-  @include transition-delay(0);
-  @include transition-timing-function(cubic-bezier(0, .55, .1, 1));
   background: $white;
   border: solid 1px $gray-lighter;
   border-radius: 4px;
@@ -201,16 +176,6 @@ $base-font-size: 14px;
     z-index: 1;
   }
 
-  &.annotator-pushed {
-    @include box-shadow(none);
-    left: 3px;
-    z-index: 1;
-
-    a {
-      color: $text-color;
-    }
-  }
-
   a {
     @include single-transition(background-color, .25s, .25s);
     background: $white;

h/static/styles/variables.scss

@@ -57,7 +57,7 @@ $bucket-bar-width: 22px;
 $highlight-color: rgba(255, 255, 60, 0.3);
 $highlight-color-second: rgba(206, 206, 60, 0.4);
 $highlight-color-third: rgba(192, 192, 49, 0.4);
-$highlight-color-focus: rgb(224, 246, 254);
+$highlight-color-focus: rgba(156, 230, 255, 0.5);
 $score-width: 40px;
 $score-height: $score-width;
 $input-border-radius: 2px;