Move the reply toggle inline with share links

h/static/scripts/directives/annotation.coffee

@@ -38,8 +38,8 @@ validate = (value) ->
 # {@link annotator annotator service} for persistence.
 ###
 AnnotationController = [
-  '$scope', 'annotator', 'drafts', 'flash'
-  ($scope,   annotator,   drafts,   flash) ->
+  '$scope', 'annotator', 'drafts', 'flash', 'documentHelpers',
+  ($scope,   annotator,   drafts,   flash,   documentHelpers) ->
     @annotation = {}
     @action = 'view'
     @document = null
@@ -51,6 +51,7 @@ AnnotationController = [
     highlight = annotator.tool is 'highlight'
     model = $scope.annotationGet()
     original = null
+    vm = this
 
     ###*
     # @ngdoc method
@@ -204,6 +205,9 @@ AnnotationController = [
       # Form the tags for ngTagsInput.
       @annotation.tags = ({text} for text in (model.tags or []))
 
+    # Export the baseURI for the share link
+    this.baseURI = documentHelpers.baseURI
+
     # Discard the draft if the scope goes away.
     $scope.$on '$destroy', ->
       drafts.remove model
@@ -223,6 +227,9 @@ AnnotationController = [
       else
         this.render()
 
+    $scope.$watch (=> @annotation.id), =>
+      vm.annotationURI = documentHelpers.absoluteURI("/a/#{@annotation.id}")
+
     # Start editing brand new annotations immediately
     unless model.id? or (highlight and this.isHighlight()) then this.edit()
 
@@ -292,9 +299,6 @@ annotation = ['annotator', 'documentHelpers', (annotator, documentHelpers) ->
       scope.$on '$destroy', ->
         if ctrl.editing then counter?.count 'edit', -1
 
-    # Export the baseURI for the share link
-    scope.baseURI = documentHelpers.baseURI
-
   controller: 'AnnotationController'
   controllerAs: 'vm'
   link: linkFn

h/static/scripts/directives/thread.coffee

@@ -28,6 +28,16 @@ ThreadController = [
     this.toggleCollapsed = ->
       @collapsed = not @collapsed
 
+    ###*
+    # @ngdoc method
+    # @name thread.ThreadController#showReplyToggle
+    # @description
+    # Determines whether the reply toggle button should be displayed for the
+    # current thread.
+    ###
+    this.showReplyToggle = (messageCount) ->
+      messageCount > 1 && !(@collapsed && @container.parent.parent)
+
     this
 ]
 

h/static/styles/annotations.scss

@@ -4,24 +4,26 @@
   font-family: $sans-font-family;
   font-weight: 300;
   position: relative;
+  @include pie-clearfix;
 
   &:hover .annotation-timestamp, &:hover .reply-count {
     color: $link-color;
   }
+}
 
-  .annotation-timestamp {
+.annotation-timestamp {
   line-height: 2;
   color: $text-color;
   &:hover { color: $link-color-hover; }
   &:focus { outline: 0; }
-  }
+}
 
-  .annotation-header { margin-bottom: .8em }
-  .annotation-section { margin: .8em 0 }
-  .annotation-target { margin: .8em 0 }
-  .annotation-footer { margin-top: .8em }
+.annotation-header { margin-bottom: .8em }
+.annotation-section { margin: .8em 0 }
+.annotation-target { margin: .8em 0 }
+.annotation-footer { margin-top: .8em }
 
-  .annotation-user {
+.annotation-user {
   color: $text-color;
   font-weight: bold;
   font-size: 1.1em;
@@ -30,6 +32,15 @@
     cursor: pointer;
     text-decoration: underline;
   }
+}
+
+.annotation-actions {
+  float: right;
+  margin-top: 0;
+
+  .magicontrol {
+    margin-left: 0.8em;
+    margin-right: 0;
   }
 }
 
@@ -53,31 +64,87 @@ privacy {
 //MAGICONTROL////////////////////////////////
 .magicontrol {
   margin-right: .8em;
-  color: $gray-lighter;
+
+  &, a {
+    color: $gray-light;
+  }
 
   &.dropdown {
     top: 4px;
   }
 
-  .annotation:hover & {
+  .annotation:hover &, .annotation:hover & a {
     color: $link-color;
   }
 }
 
+.share-dialog-wrapper {
+  position: relative;
+
+  .share-dialog {
+    display: none;
+  }
+
+  &.open .share-dialog {
+    display: block;
+  }
+}
+
 .share-dialog {
-  a {
-    float: left;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+  width: 240px;
+  margin-right: -46px;
+  margin-bottom: 2px;
+  padding: 3px 5px 3px 23px;
+  z-index: 1;
+  display: block;
   line-height: 1.4;
-    margin-right: .5em;
-    vertical-align: middle;
+  background: #fff;
+  border: 1px solid #d3d3d3;
+  border-radius: 2px;
+
+  &:after, &:before {
+    top: 100%;
+    right: 20px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #fff;
+    border-width: 5px;
+    margin-right: -5px;
   }
 
-  div {
-    overflow: hidden;
+  &:before {
+    border-color: rgba(211, 211, 211, 0);
+    border-top-color: #d3d3d3;
+    border-width: 6px;
+    margin-right: -6px;
+  }
+
+  a {
+    position: absolute;
+    left: 0;
+    line-height: 1.4;
+    left: 5px;
+    vertical-align: middle;
   }
 
   input {
     padding: 0;
     width: 100%;
+    font-size: 0.84em;
+    padding: 1px 3px;
+    border: none;
+    color: $text-color;
+    outline: $gray-lighter solid 1px;
   }
 }

h/static/styles/threads.scss

@@ -25,18 +25,10 @@ $threadexp-width: .6em;
   }
 
   .reply-count {
-    color: $text-color;
+    color: $gray-light;
     &:focus { outline: 0; }
   }
 
-  &:hover .reply-count {
-    color: $link-color;
-
-    &:hover, &:focus {
-      color: $link-color-hover;
-    }
-  }
-
   .thread {
     border-left: 1px dotted $gray-light;
     padding: 0;
@@ -105,3 +97,22 @@ $threadexp-width: .6em;
 .thread-message {
   margin-bottom: .8em;
 }
+
+.thread-reply {
+  margin-top: -2.153em;
+  margin-bottom: .8em;
+}
+
+.thread-message:hover + .thread-reply {
+  .reply-count {
+    color: $link-color;
+
+    &:hover, &:focus {
+      color: $link-color-hover;
+    }
+  }
+}
+
+.thread-load-more {
+  clear: both;
+}