Merge pull request #1729 from hypothesis/1728-drop-shadows

Re-implement hiliting annotation cards on hover

h/static/scripts/controllers.coffee

@@ -353,6 +353,8 @@ class ViewerController
       else
         true
 
+    $scope.isFocused = (annotation) ->
+      annotation?.$$tag in ($scope.focusedAnnotations ? [])
 
 angular.module('h')
 .controller('AppController', AppController)

h/static/scripts/guest.coffee

@@ -250,8 +250,11 @@ class Annotator.Guest extends Annotator
       method: "showEditor"
       params: annotation.$$tag
 
-  onAnchorMouseover: ->
-  onAnchorMouseout: ->
+  focusInViewer: (annotations) =>
+    @panel?.notify
+      method: "setViewerFocus"
+      params: (a.$$tag for a in annotations)
+
   onAnchorMousedown: ->
 
   checkForStartSelection: (event) =>
@@ -294,6 +297,21 @@ class Annotator.Guest extends Annotator
       # Tell sidebar to show the viewer for these annotations
       this.showViewer annotations
 
+  # When hovering on a highlight in highlighting mode,
+  # tell the sidebar to hilite the relevant annotations
+  onAnchorMouseover: (event) ->
+    if @visibleHighlights or @tool is 'highlight'
+      event.stopPropagation()
+      annotations = event.data.getAnnotations(event)
+      this.focusInViewer annotations
+
+  # When leaving a highlight (with the cursor) in highlighting mode,
+  # tell the sidebar to stop hiliting the relevant annotations
+  onAnchorMouseout: (event) ->
+    if @visibleHighlights or @tool is 'highlight'
+      event.stopPropagation()
+      this.focusInViewer []
+
   # When clicking on a highlight in highlighting mode,
   # tell the sidebar to bring up the viewer for the relevant annotations
   onAnchorClick: (event) =>

h/static/scripts/services.coffee

@@ -164,6 +164,11 @@ class Hypothesis extends Annotator
         this.updateViewer this._getLocalAnnotations(tags)
     )
 
+    .bind('setViewerFocus', (ctx, tags=[]) =>
+      @element.scope().$apply =>
+        this.setViewerFocus tags
+    )
+
     .bind('toggleViewerSelection', (ctx, tags=[]) =>
       @element.scope().$apply =>
         this.toggleViewerSelection this._getLocalAnnotations(tags)
@@ -231,6 +236,9 @@ class Hypothesis extends Annotator
     @_setSelectedAnnotations selected
     this
 
+  setViewerFocus: (tags) ->
+    @element.scope().focusedAnnotations = tags
+
   updateViewer: (annotations=[]) ->
     # TODO: re-implement
     this

h/static/styles/threads.scss

@@ -6,8 +6,9 @@ $threadexp-width: .6em;
     margin-bottom: .72em;
   }
 
-  .card-emphasis {
-    box-shadow: 6px 6px 8px -2px $gray-light;
+  & > li.thread:hover,
+  & > li.thread.js-hover {
+    @include focus-outline;
   }
 }
 

h/templates/client/viewer.html

@@ -34,6 +34,7 @@
     </span>
   </li>
   <li class="paper thread"
+      ng-class="{'js-hover': isFocused(child.message)}"
       deep-count="count"
       thread="child" thread-filter
       thread-collapsed="!search.query"