From 896c098a07429d685fc0a6e48ba924b42339f979 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Sun, 26 Feb 2012 21:17:20 -0800
Subject: [PATCH] changed handlebars "avatar" helper to "personImage"; added
 home button to interaction pane (only when sneaky -- needs further
 investigating on getting it showing up when the interaction pane is invoked);
 minor css tweaks.

---
 .../app/helpers/handlebars-helpers.js         |  2 +-
 .../app/templates/comment-stream.handlebars   |  2 +-
 .../app/templates/comment.handlebars          |  6 +--
 .../templates/post-viewer/author.handlebars   |  2 +-
 .../templates/post-viewer/comment.handlebars  |  2 +-
 .../templates/post-viewer/feedback.handlebars | 14 ++++---
 .../post-viewer/interactions.handlebars       |  1 -
 .../post-viewer/new-comment.handlebars        |  1 -
 .../post-viewer/reactions.handlebars          |  6 +--
 .../app/templates/stream-element.handlebars   |  2 +-
 .../app/views/post-viewer/feedback.js         |  2 +-
 .../app/views/post-viewer/interactions.js     | 17 +++++++--
 public/stylesheets/sass/new-templates.scss    | 37 +++++++++++++++++--
 13 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/public/javascripts/app/helpers/handlebars-helpers.js b/public/javascripts/app/helpers/handlebars-helpers.js
index ec2ed679a..4b98f757d 100644
--- a/public/javascripts/app/helpers/handlebars-helpers.js
+++ b/public/javascripts/app/helpers/handlebars-helpers.js
@@ -14,7 +14,7 @@ Handlebars.registerHelper('linkToPerson', function(context, block) {
   return html
 })
 
-Handlebars.registerHelper('avatar', function(person, size, imageClass) {
+Handlebars.registerHelper('personImage', function(person, size, imageClass) {
   size = (typeof(size) != "string" ? "small" : size);
   imageClass = (typeof(imageClass) != "string" ? size : imageClass);
 
diff --git a/public/javascripts/app/templates/comment-stream.handlebars b/public/javascripts/app/templates/comment-stream.handlebars
index d1c327a44..d0d6d313f 100644
--- a/public/javascripts/app/templates/comment-stream.handlebars
+++ b/public/javascripts/app/templates/comment-stream.handlebars
@@ -15,7 +15,7 @@
     <div class="media new_comment_form_wrapper {{#unless comments_count}} hidden {{/unless}}">
       {{#with current_user}}
         <a href="/people/{{guid}}" class="img">
-          {{{avatar this}}}
+          {{{personImage this}}}
         </a>
       {{/with}}
 
diff --git a/public/javascripts/app/templates/comment.handlebars b/public/javascripts/app/templates/comment.handlebars
index 4dcbd68f0..92fbf3915 100644
--- a/public/javascripts/app/templates/comment.handlebars
+++ b/public/javascripts/app/templates/comment.handlebars
@@ -7,9 +7,9 @@
 {{/if}}
 
 <div class="img">
-  <a href="/people/{{author.guid}}">
-    <img src="{{author.avatar.small}}" class="avatar smaller" />
-  </a>
+  {{#linkToPerson author}}
+    {{{personImage this "small" "small"}}}
+  {{/linkToPerson}}
 </div>
 
 <div class="bd">
diff --git a/public/javascripts/app/templates/post-viewer/author.handlebars b/public/javascripts/app/templates/post-viewer/author.handlebars
index 7ea58254f..417a5a77b 100644
--- a/public/javascripts/app/templates/post-viewer/author.handlebars
+++ b/public/javascripts/app/templates/post-viewer/author.handlebars
@@ -1,6 +1,6 @@
 <div class="img">
   {{#linkToPerson author}}
-    {{{avatar this "small"}}}
+    {{{personImage this "small"}}}
   {{/linkToPerson}}
 </div>
 
diff --git a/public/javascripts/app/templates/post-viewer/comment.handlebars b/public/javascripts/app/templates/post-viewer/comment.handlebars
index 5f766183a..fb5da3920 100644
--- a/public/javascripts/app/templates/post-viewer/comment.handlebars
+++ b/public/javascripts/app/templates/post-viewer/comment.handlebars
@@ -1,6 +1,6 @@
 <div class="img">
   {{#linkToPerson author}}
-    {{{avatar this "small"}}}
+    {{{personImage this "small" "small"}}}
   {{/linkToPerson}}
 </div>
 
diff --git a/public/javascripts/app/templates/post-viewer/feedback.handlebars b/public/javascripts/app/templates/post-viewer/feedback.handlebars
index a458b489c..5ee6ed1c9 100644
--- a/public/javascripts/app/templates/post-viewer/feedback.handlebars
+++ b/public/javascripts/app/templates/post-viewer/feedback.handlebars
@@ -34,15 +34,19 @@
 
 <!-- this acts as a dock underlay -->
 <div id="post-info-sneaky" class="passive">
-  <a href="#" rel="invoke-interaction-pane">
-    <div id="post-info-container-sneaky">
+  <div id="post-info-container-sneaky">
+    <a href="#" rel="invoke-interaction-pane" class="invoker">
       <img src="/images/up-tick-inset.png" class="info-tick"/>
-    </div>
-  </a>
+      <a href="/" title="Home" class="home-button">
+        <i class="icon-home icon-white"></i>
+      </a>
+    </a>
+  </div>
 </div>
 
 <!-- this closes an open interaction pane -->
 <div id="close-reactions-pane-container">
-  <a href="#" id="close-reactions-pane" rel="hide-interaction-pane"> </a>
+  <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 e0466349b..239f549d8 100644
--- a/public/javascripts/app/templates/post-viewer/interactions.handlebars
+++ b/public/javascripts/app/templates/post-viewer/interactions.handlebars
@@ -2,7 +2,6 @@
 
 <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>
diff --git a/public/javascripts/app/templates/post-viewer/new-comment.handlebars b/public/javascripts/app/templates/post-viewer/new-comment.handlebars
index c919e2113..789ed216d 100644
--- a/public/javascripts/app/templates/post-viewer/new-comment.handlebars
+++ b/public/javascripts/app/templates/post-viewer/new-comment.handlebars
@@ -2,7 +2,6 @@
   <form class="form-inline">
     <textarea class="new-comment-text" id="new-comment-text" placeholder="Comment"></textarea>
     <button type="submit" class="btn btn-small">
-      <i class="icon-comment"></i>
       Comment
     </button>
   </form>
diff --git a/public/javascripts/app/templates/post-viewer/reactions.handlebars b/public/javascripts/app/templates/post-viewer/reactions.handlebars
index 85aa688ab..c4217b591 100644
--- a/public/javascripts/app/templates/post-viewer/reactions.handlebars
+++ b/public/javascripts/app/templates/post-viewer/reactions.handlebars
@@ -7,7 +7,7 @@
       <div class="bd">
         {{#each likes}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>
@@ -24,7 +24,7 @@
       <div class="bd">
         {{#each participations}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>
@@ -41,7 +41,7 @@
       <div class="bd">
         {{#each reshares}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>
diff --git a/public/javascripts/app/templates/stream-element.handlebars b/public/javascripts/app/templates/stream-element.handlebars
index 7c2c7542c..2e0fe9a83 100644
--- a/public/javascripts/app/templates/stream-element.handlebars
+++ b/public/javascripts/app/templates/stream-element.handlebars
@@ -19,7 +19,7 @@
 
   {{#with author}}
     <a href="/people/{{guid}}" class="img">
-      {{{avatar this}}}
+      {{{personImage this}}}
     </a>
   {{/with}}
 
diff --git a/public/javascripts/app/views/post-viewer/feedback.js b/public/javascripts/app/views/post-viewer/feedback.js
index 5aa0b8dae..d773f3a4e 100644
--- a/public/javascripts/app/views/post-viewer/feedback.js
+++ b/public/javascripts/app/views/post-viewer/feedback.js
@@ -14,7 +14,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click *[rel='hide-interaction-pane']" : "hidePane"
   },
 
-  tooltipSelector : ".label",
+  tooltipSelector : ".label, .home-button",
 
   postRenderTemplate : function() {
     this.sneakyVisiblity()
diff --git a/public/javascripts/app/views/post-viewer/interactions.js b/public/javascripts/app/views/post-viewer/interactions.js
index f24561c7f..7a3d1039a 100644
--- a/public/javascripts/app/views/post-viewer/interactions.js
+++ b/public/javascripts/app/views/post-viewer/interactions.js
@@ -30,15 +30,26 @@ 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() {
-    if(!this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(!this.$("#post-info").is(":visible")) {
+      this.$("#post-info-sneaky").addClass("passive")
+      this.togglePane()
+    }
   },
 
   hidePane : function() {
-    if(this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(this.$("#post-info").is(":visible")) {
+
+      /* it takes about 400ms for the pane to hide.  we need to keep
+       * the sneaky hidden until the slide is complete */
+      setTimeout(function(){
+        this.$("#post-info-sneaky").removeClass("passive")
+      }, 400)
+
+      this.togglePane()
+    }
   }
 })
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 80d68c240..0da437ee6 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -424,9 +424,17 @@ body.idle {
       top: 1px solid #111;
     }
 
+    .img {
+      margin-right: 5px;
+    }
+
+    i {
+      margin-top: 1px;
+    }
+
     .avatar {
       @include border-radius();
-      margin-right: 2px;
+      margin-right: 0;
     }
   }
 
@@ -452,7 +460,7 @@ body.idle {
 
     textarea{
       height: 18px;
-      width: 300px;
+      width: 318px;
     }
 
     form {
@@ -488,6 +496,30 @@ body.idle {
   }
 }
 
+.home-button {
+  @include transition(opacity, 0.3s);
+  @include opacity(0.6);
+
+  position: absolute;
+  left: 2px;
+  top: 4px;
+
+  padding: 4px 6px;
+
+  &:hover {
+    @include opacity(1);
+  }
+}
+
+.invoker {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 #post-feedback:hover {
   #post-info-sneaky:not(.passive) {
     @include opacity(1);
@@ -495,7 +527,6 @@ body.idle {
   }
 }
 
-
 .post-comment {
   -moz-box-shadow: 0 1px 2px -2px #999;
   -webkit-box-shadow: 0 1px 2px -2px #999;