When hovering the mouse over a visible highlight, add a drop shadow to the...

When hovering the mouse over a visible highlight, add a drop shadow to the annotation card in the sidebar.

Fixes #918.
Also fixes #957.

h/css/sidebar.scss

@@ -58,6 +58,11 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   &.squished {
     padding-left: -.5em;
   }
+
+  li.card-emphasis {
+    box-shadow: 6px 6px 8px -2px #999999;
+  }
+
 }
 
 //SIDEBAR LAYOUT////////////////////////////////

h/js/guest.coffee

@@ -8,9 +8,6 @@ class Annotator.Guest extends Annotator
     "setTool": "onSetTool"
     "setVisibleHighlights": "onSetVisibleHighlights"
 
-  onAnchorMouseover: -> #console.log "Overridden mouse over"
-  onAnchorMouseout: -> #console.log "Overridden mouse out"
-
   # Plugin configuration
   options:
     TextHighlights: {}
@@ -174,6 +171,16 @@ class Annotator.Guest extends Annotator
 
   showEditor: (annotation) => @plugins.Bridge.showEditor annotation
 
+  addEmphasis: (annotations) =>
+    @panel?.notify
+      method: "addEmphasis"
+      params: (a.id for a in annotations)
+
+  removeEmphasis: (annotations) =>
+    @panel?.notify
+      method: "removeEmphasis"
+      params: (a.id for a in annotations)
+
   checkForStartSelection: (event) =>
     # Override to prevent Annotator choking when this ties to access the
     # viewer but preserve the manipulation of the attribute `mouseIsDown` which
@@ -226,6 +233,14 @@ class Annotator.Guest extends Annotator
     else
       super
 
+  onAnchorMouseover: (annotations) ->
+    if (@tool is 'highlight') or @visibleHighlights
+      this.addEmphasis annotations
+
+  onAnchorMouseout: (annotations) ->
+    if (@tool is 'highlight') or @visibleHighlights
+      this.removeEmphasis annotations
+
   # When clicking on a highlight in highlighting mode,
   # set @noBack to true to prevent the sidebar from closing
   onAnchorMousedown: (annotations) =>

h/js/services.coffee

@@ -234,6 +234,14 @@ class Hypothesis extends Annotator
       $rootScope.$apply => this.setVisibleHighlights state
     )
 
+    .bind('addEmphasis', (ctx, ids=[]) =>
+      this.addEmphasis ((@threading.getContainer id).message for id in ids)
+    )
+
+    .bind('removeEmphasis', (ctx, ids=[]) =>
+      this.removeEmphasis ((@threading.getContainer id).message for id in ids)
+    )
+
   _setupWrapper: ->
     @wrapper = @element.find('#wrapper')
     .on 'mousewheel', (event, delta) ->
@@ -325,6 +333,16 @@ class Hypothesis extends Annotator
     ]
     this
 
+  addEmphasis: (annotations=[]) =>
+    for a in annotations
+      a.$emphasis = true
+    @element.injector().get('$rootScope').$digest()
+
+  removeEmphasis: (annotations=[]) =>
+    for a in annotations
+      delete a.$emphasis
+    @element.injector().get('$rootScope').$digest()
+
   clickAdder: =>
     for p in @providers
       p.channel.notify