sneaky dock has an arrow now. you can click the top of the interaction bar to close/open it.

public/javascripts/app/templates/post-viewer/feedback.handlebars

@@ -27,15 +27,22 @@
   </a>
 {{/if}}
 
-<a href="#" class="label comment" rel="interaction-pane" title="Comment">
+<a href="#" class="label comment" rel="invoke-interaction-pane" title="Comment">
   <i class="icon-comment icon-white"></i>
   {{comments_count}}
 </a>
 
 <!-- this acts as a dock underlay -->
 <div id="post-info-sneaky">
-  <a href="#" rel="interaction-pane">
-    <div id="post-info-container-sneaky"> </div>
+  <a href="#" rel="invoke-interaction-pane">
+    <div id="post-info-container-sneaky">
+      <img src="/images/up-tick-inset.png" class="info-tick"/>
+    </div>
   </a>
 </div>
 
+<!-- this closes an open interaction pane -->
+<div id="close-reactions-pane-container">
+  <a href="#" id="close-reactions-pane" rel="hide-interaction-pane"> </a>
+</div>
+

public/javascripts/app/templates/post-viewer/interactions.handlebars

@@ -2,6 +2,9 @@
 
 <div id="post-info" style="display:none;">
   <div id="post-info-container">
+
+    <img src="/images/down-tick-inset.png" class="info-tick"/>
+
     <div id="post-reactions"> </div>
     <div id="new-post-comment"> </div>
   </div>

public/javascripts/app/views/post-viewer/feedback.js

@@ -10,12 +10,13 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click .follow" : "toggleFollow",
     "click .reshare" : "resharePost",
 
-    "click *[rel='interaction-pane']" : "invokePane"
+    "click *[rel='invoke-interaction-pane']" : "invokePane",
+    "click *[rel='hide-interaction-pane']" : "hidePane"
   },
 
   tooltipSelector : ".label",
 
-  invokePane : function(evt){
-    this.trigger("invokePane")
-  }
+  invokePane : function(evt){ this.trigger("invokePane") },
+  hidePane : function(evt){ this.trigger("hidePane") }
+
 })

public/javascripts/app/views/post-viewer/interactions.js

@@ -14,6 +14,7 @@ app.views.PostViewerInteractions = app.views.Base.extend({
     this.initViews();
 
     this.feedbackView.bind("invokePane", this.invokePane, this)
+    this.feedbackView.bind("hidePane", this.hidePane, this)
   },
 
   initViews : function() {
@@ -29,23 +30,17 @@ app.views.PostViewerInteractions = app.views.Base.extend({
   togglePane : function(evt) {
     if(evt) { evt.preventDefault() }
     this.$("#post-info").slideToggle(300)
+    this.$("#post-info-sneaky").toggleClass('passive')
     this.removeTooltips()
   },
 
   invokePane : function(evt) {
     if(evt) { evt.preventDefault() }
-    if(this.$("#post-info").is(":visible")) { return }
-
-    this.togglePane()
-    this.$("#post-info-sneaky").addClass('passive')
+    if(!this.$("#post-info").is(":visible")) { this.togglePane() }
   },
 
   hidePane : function(evt) {
     if(evt) { evt.preventDefault() }
-    if(!this.$("#post-info").is(":visible")) { return }
-
-    this.togglePane()
-    setTimeout(function(){
-      this.$("#post-info-sneaky").removeClass('passive')}, 300)
+    if(this.$("#post-info").is(":visible")) { this.togglePane() }
   }
 })

public/stylesheets/sass/new-templates.scss

@@ -1,6 +1,7 @@
 /* variables */
 
 $light-grey: #999;
+$pane-width: 420px;
 
 /* mixins */
 @mixin center($orient:vertical) {
@@ -65,6 +66,7 @@ $light-grey: #999;
   @include dark-hatched-bg();
 
   display: inline-block;
+  position: relative;
 
   border-top: 1px solid #555;
   border-right: 1px solid #444;
@@ -72,7 +74,7 @@ $light-grey: #999;
 
   padding-top: 25px;
 
-  width: 420px;
+  width: $pane-width;
 
   color: #ddd;
 
@@ -370,7 +372,6 @@ $light-grey: #999;
   margin-top: 5px;
 }
 
-
 #post-info,
 #post-info-sneaky {
   text-align: center;
@@ -477,6 +478,7 @@ $light-grey: #999;
   }
 }
 
+
 .post-comment {
   -moz-box-shadow: 0 1px 2px -2px #999;
   -webkit-box-shadow: 0 1px 2px -2px #999;
@@ -599,3 +601,27 @@ $light-grey: #999;
   position: relative;
   z-index: 30;
 }
+
+#close-reactions-pane-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: -3px;
+
+  #close-reactions-pane {
+    width: $pane-width;
+    top: 0;
+
+    min-height: 30px;
+    display: inline-block;
+  }
+}
+
+.info-tick {
+  @include opacity(0.8);
+
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}