From b38c49883bc81f896a117d9c32b377ba5e362404 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Thu, 23 Feb 2012 17:21:22 -0800
Subject: [PATCH] sneaky dock has an arrow now.  you can click the top of the
 interaction bar to close/open it.

---
 public/images/down-tick-inset.png             | Bin 0 -> 461 bytes
 public/images/up-tick-inset.png               | Bin 0 -> 435 bytes
 .../templates/post-viewer/feedback.handlebars |  13 ++++++--
 .../post-viewer/interactions.handlebars       |   3 ++
 .../app/views/post-viewer/feedback.js         |   9 +++---
 .../app/views/post-viewer/interactions.js     |  13 +++-----
 public/stylesheets/sass/new-templates.scss    |  30 ++++++++++++++++--
 7 files changed, 50 insertions(+), 18 deletions(-)
 create mode 100644 public/images/down-tick-inset.png
 create mode 100644 public/images/up-tick-inset.png

diff --git a/public/images/down-tick-inset.png b/public/images/down-tick-inset.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3375c1c7ebdc7a3b88dcc703c3912a0f466d5e4
GIT binary patch
literal 461
zcmV;;0W$uHP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzZ%IT!RCwB)Qp-xiKop%!(j=u2`hb?E
zgi=c>X&23>_!aFB_zhk72l)pnbWwy-NEafaXu-$cMI!`VC_=HeHl8aPiLs(MaFWcu
z=j5KbbEPm0*?*Qok6y2r$IJYq=H7MPK<ak8dEfW<f*{zDB#8;c7r7G1<#K+lR@<kF
zFPThcF`v(OIp-R{2trKc&1NI;R;g6_2roIxF0$F|)HKbpEXypFN-<Sczkp(jqOfAI
z=#@&P2{ey9a&zi9j;Cqb1BnSl6oP2K0A~#Dj07J-{NWXeX|-A%kVUde<hbo}xjfQ!
z{RrIWPhljU)$8?9I-R~rHU^b_+qRFfJrQx9X!T{I(HKw@u$Tax9H26tE!-+Z;<ivI
zObo;DR;v|Tuh$F?&MnJ2MD9Ay<y$Uz)@rq=2~Q9%o6Y7B-&aY}Hz6G!-JPQCLtK+b
zK<w^UVI)3lx7+<rr!&F!V(Z|=$0-Snqw-VkU4Q`qLd&$jD&}MX00000NkvXXu0mjf
DOSa6t

literal 0
HcmV?d00001

diff --git a/public/images/up-tick-inset.png b/public/images/up-tick-inset.png
new file mode 100644
index 0000000000000000000000000000000000000000..cef889e208871adbcc808be43d26d01c857c983c
GIT binary patch
literal 435
zcmV;k0ZjghP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzRY^oaRCwBA`2YVu12&wNmd1=r4uqK)
zuz>XRbhh8Wf9C;dbp{-O35U4ZnKNe`FJ8P@1=MUxlt!RJsdw+*Ilg}V+U@b<$NoQl
z{BQt@@e*UB?v*Q7{F#}V*@0~S3l}c90ck_L8i6M3Jb3WH^Xu2I#;mNY3~X#{3?Dvx
z0NL&WlvBW}5h%g<@83U{d-v{zfHZ+H3kwSfGhe@cJqV~o50{OmKqp%L{rguMssXO~
z=g*(ow{PF}1{!XNq7meIU?AAPeEHHH=r;yz_|c<BL4W@I0R<ErvW<qopmzgCEFU8y
zBLfH{0}vmmNd&0I5foJ*G3Mvbp9=tOioSE_P8`r=CLn-o1o{~TfBN)EK|(^}!S3C=
z&#(aH*@4dFmXVQJ19B2bBM2h{m`0%g8Gs?q!^g+R$p}h!KzEA+<wY5Y1J7p8ocRu{
dksJUJU;vl}!x7}ums$V-002ovPDHLkV1f()yR!fQ

literal 0
HcmV?d00001

diff --git a/public/javascripts/app/templates/post-viewer/feedback.handlebars b/public/javascripts/app/templates/post-viewer/feedback.handlebars
index 8e8609b73..c1464f631 100644
--- a/public/javascripts/app/templates/post-viewer/feedback.handlebars
+++ b/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>
+
diff --git a/public/javascripts/app/templates/post-viewer/interactions.handlebars b/public/javascripts/app/templates/post-viewer/interactions.handlebars
index 53e1ab79c..e0466349b 100644
--- a/public/javascripts/app/templates/post-viewer/interactions.handlebars
+++ b/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>
diff --git a/public/javascripts/app/views/post-viewer/feedback.js b/public/javascripts/app/views/post-viewer/feedback.js
index 93d076f4b..ec49c58f6 100644
--- a/public/javascripts/app/views/post-viewer/feedback.js
+++ b/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") }
+
 })
diff --git a/public/javascripts/app/views/post-viewer/interactions.js b/public/javascripts/app/views/post-viewer/interactions.js
index a5fce9ac7..5feb1bdc5 100644
--- a/public/javascripts/app/views/post-viewer/interactions.js
+++ b/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() }
   }
 })
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 25a97a3fa..20b061c49 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/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;
+}