From ea357a96effb72bb271f229bb15916c5b292f0f6 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Mon, 26 Sep 2011 16:36:44 -0700
Subject: [PATCH] expand&collapse comments; added comment form (wip)

---
 app/controllers/comments_controller.rb        |   6 +-
 app/views/comments/_comment.mobile.haml       |   4 --
 app/views/comments/_new_comment.mobile.haml   |   7 +-
 app/views/comments/new.mobile.haml            |   1 +
 app/views/layouts/application.mobile.haml     |   5 +-
 app/views/shared/_footer.mobile.haml          |   3 +-
 app/views/shared/_publisher.mobile.haml       |   2 +-
 app/views/shared/_stream_element.mobile.haml  |  37 +++-------
 config/assets.yml                             |   2 +-
 config/routes.rb                              |   2 +-
 .../icons/pencil_mobile_grey_active.png       | Bin 0 -> 871 bytes
 .../icons/pencil_mobile_grey_mobile.png       | Bin 0 -> 871 bytes
 public/images/icons/reshare_mobile.png        | Bin 0 -> 1712 bytes
 public/javascripts/mobile.js                  |  64 +++++++++++++----
 public/stylesheets/sass/mobile.scss           |  68 ++++++++++++++----
 15 files changed, 137 insertions(+), 64 deletions(-)
 create mode 100644 app/views/comments/new.mobile.haml
 create mode 100644 public/images/icons/pencil_mobile_grey_active.png
 create mode 100644 public/images/icons/pencil_mobile_grey_mobile.png
 create mode 100644 public/images/icons/reshare_mobile.png

diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
index ee21517ab..f700ba86a 100644
--- a/app/controllers/comments_controller.rb
+++ b/app/controllers/comments_controller.rb
@@ -6,7 +6,7 @@ class CommentsController < ApplicationController
   include ApplicationHelper
   before_filter :authenticate_user!
 
-  respond_to :html, :mobile, :only => [:create, :destroy, :index]
+  respond_to :html, :mobile, :only => [:new, :create, :destroy, :index]
   respond_to :js, :only => [:index]
 
   rescue_from ActiveRecord::RecordNotFound do
@@ -64,4 +64,8 @@ class CommentsController < ApplicationController
     end
   end
 
+  def new
+    puts params.inspect
+    render :layout => false
+  end
 end
diff --git a/app/views/comments/_comment.mobile.haml b/app/views/comments/_comment.mobile.haml
index 84e31ea81..5b622dfa6 100644
--- a/app/views/comments/_comment.mobile.haml
+++ b/app/views/comments/_comment.mobile.haml
@@ -3,10 +3,6 @@
 -#   the COPYRIGHT file.
 
 %li.comment{:data=>{:guid=>comment.id}, :class => ("hidden" if(defined? hidden))}
-  .right
-    -#.controls
-      -#= link_to image_tag('deletelabel.png'), comment, :confirm => t('are_you_sure'), :method => :delete, :class => "delete comment_delete", :title => t('delete')
-
   .content
     .from
       = person_image_link(comment.author)
diff --git a/app/views/comments/_new_comment.mobile.haml b/app/views/comments/_new_comment.mobile.haml
index 0bf41fff6..95cbfb4c2 100644
--- a/app/views/comments/_new_comment.mobile.haml
+++ b/app/views/comments/_new_comment.mobile.haml
@@ -2,10 +2,11 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-= form_tag( post_comments_path(post_id), :id => "new_comment_on_#{post_id}", :class => 'new_comment') do
+= form_tag( post_comments_path(post_id), :id => "new_comment_on_#{post_id}", :class => 'new_comment', :remote => true) do
   = hidden_field_tag :post_id,  post_id, :id => "post_id_on_#{post_id}"
   = text_area_tag :text, nil, :rows => 2, :class => "comment_box",:id => "comment_text_on_#{post_id}"
 
-  %div{:data => {:inline => 'true'}, :style => 'text-align:right;'}
-    = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :disable_with => t('.commenting'), "data-role" => 'button', 'data-theme' => 'b', 'data-inline' => true
+  %div{:style => 'text-align:right;'}
+    = link_to "Cancel", post_path(post_id), :class => "cancel_new_comment btn"
+    = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :disable_with => t('.commenting'), :class => "action"
 
diff --git a/app/views/comments/new.mobile.haml b/app/views/comments/new.mobile.haml
new file mode 100644
index 000000000..c34cdf84a
--- /dev/null
+++ b/app/views/comments/new.mobile.haml
@@ -0,0 +1 @@
+= new_comment_form(params[:post_id], current_user)
diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml
index d6a34ee07..3b041fe53 100644
--- a/app/views/layouts/application.mobile.haml
+++ b/app/views/layouts/application.mobile.haml
@@ -31,7 +31,7 @@
     / Stylesheets
     = include_stylesheets :mobile
 
-    %script{:src => "javascripts/vendor/mbp-modernizr-custom.js"}
+    %script{:src => "/javascripts/vendor/mbp-modernizr-custom.js"}
     / Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill
     :javascript
       Modernizr.mq('(min-width:0)') || document.write('<script src="javascripts/vendor/mbp-respond.min.js">\x3C/script>')
@@ -62,10 +62,13 @@
 
     / javascripts at the bottom
     = include_javascripts :mobile
+    = yield(:javascript)
 
     /-if current_user
     /  :javascript
     /    Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
+    :javascript
+      MBP.hideUrlBar();
 
     -if AppConfig[:google_a_site]
       :javascript
diff --git a/app/views/shared/_footer.mobile.haml b/app/views/shared/_footer.mobile.haml
index b8b8b0c79..bc7fd2a8e 100644
--- a/app/views/shared/_footer.mobile.haml
+++ b/app/views/shared/_footer.mobile.haml
@@ -1,4 +1,5 @@
 %footer
-  = link_to current_user.name, current_user.person
+  %strong
+    = link_to current_user.name, current_user.person
   = link_to t('layouts.application.toggle'), toggle_mobile_path
   = link_to t('layouts.header.logout'), destroy_user_session_path
diff --git a/app/views/shared/_publisher.mobile.haml b/app/views/shared/_publisher.mobile.haml
index 9aeb27166..747b4a92d 100644
--- a/app/views/shared/_publisher.mobile.haml
+++ b/app/views/shared/_publisher.mobile.haml
@@ -3,7 +3,7 @@
 -#   the COPYRIGHT file.
 
 = form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
-  = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :style => "width:300px", :rows => 4
+  = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :style => "width:300px", :rows => 4, :autofocus => "autofocus"
 
   - for aspect_id in aspect_ids
     = hidden_field_tag 'aspect_ids[]', aspect_id.to_s
diff --git a/app/views/shared/_stream_element.mobile.haml b/app/views/shared/_stream_element.mobile.haml
index d51d753ee..35ba85d7b 100644
--- a/app/views/shared/_stream_element.mobile.haml
+++ b/app/views/shared/_stream_element.mobile.haml
@@ -30,34 +30,17 @@
       = render 'status_messages/status_message', :post => post, :photos => post.photos
 
   .bottom_bar
-    - if defined?(expanded_info) && expanded_info
-      #bottom_bar_tabs
-        .comment_count.tab
-          = post.comments.size
-          = link_to '', post_path(post), :class => "image_link comment_action"
+    .floater
+      = link_to '', new_post_comment_path(post), :class => "image_link comment_action inactive"
 
-        .like_count.tab
-          = post.likes.size
-          - if current_user.liked?(post)
-            = link_to '', post_likes_path(post.id), :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
-          - else
-            = link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
-
-        /.reshare_count.tab
-        /  = post.comments.size
-        /  = link_to '', post_path(post), :class => "image_link comment_action"
-
-      = render "comments/comments", :post => post, :comments => post.comments, :comments_expanded => true
-
-
-    - else
-      .floater
-        = link_to '', post_path(post), :class => "image_link comment_action"
-
-        - if current_user.liked?(post)
-          = link_to '', post_like_path(post.id, current_user.like_for(post).id), :class => "image_link like_action active"
-        - else
-          = link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
+      - if current_user.liked?(post)
+        = link_to '', post_like_path(post.id, current_user.like_for(post).id), :class => "image_link like_action active"
+      - else
+        = link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
 
+    - if post.comments.length + post.likes_count > 0
       = link_to "#{t('reactions', :count => (post.comments.length + post.likes_count))}", post_comments_path(post, :format => "mobile"), :class => 'show_comments'
+    - else
+      %span.show_comments
+        = "#{t('reactions', :count => (post.comments.length + post.likes_count))}"
 
diff --git a/config/assets.yml b/config/assets.yml
index e8a4368e0..9c702dd2a 100644
--- a/config/assets.yml
+++ b/config/assets.yml
@@ -42,13 +42,13 @@ javascripts:
   login:
     - public/javascripts/login.js
   mobile:
-    - public/javascripts/vendor/jquery162.min.js
     #- public/javascripts/custom-mobile-scripting.js
     #- public/javascripts/vendor/jquery.mobile-1.0b2.min.js
     #- public/javascripts/jquery.infinitescroll-custom.js
     #- public/javascripts/diaspora.js
     #- public/javascripts/helpers/i18n.js
     #- public/javascripts/widgets/infinite-scroll.js
+    - public/javascripts/vendor/jquery162.min.js
     - public/javascripts/rails.js
     - public/javascripts/vendor/mbp-helper.js
     - public/javascripts/mobile.js
diff --git a/config/routes.rb b/config/routes.rb
index f8f8856b4..78c7cf23f 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -16,7 +16,7 @@ Diaspora::Application.routes.draw do
 
   resources :posts, :only => [:show, :destroy] do
     resources :likes, :only => [:create, :destroy, :index]
-    resources :comments, :only => [:create, :destroy, :index]
+    resources :comments, :only => [:new, :create, :destroy, :index]
   end
   get 'p/:id' => 'posts#show', :as => 'short_post'
 
diff --git a/public/images/icons/pencil_mobile_grey_active.png b/public/images/icons/pencil_mobile_grey_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d4147ea0376a3d93818bc58d11baac8ac851dd8
GIT binary patch
literal 871
zcmV-t1DO1YP)<h;3K|Lk000e1NJLTq003nG003nO0{{R3W1`*t0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUyGf+%aMU9P(RaI5=^z_}`-D_)W=;-LA
zq@=L0u+q}fcXxNYySrduV1j~znVFf!#>PrYO8@`=wu$EL0000HbW%=J|NsC0|NsC0
z|NsC0|NsC0041%NVgLXFtw}^dRCwC7+FO=`APfM|pdwlwb^og!unz%)Koa=s9OB$s
zLZnbQyr#EtgmE<eA>82isx!m>Z3_A}%Bc3B&01dRhdpk}NGp@tkp{BLw4+UFNu^gf
z(u>~9&>C^d*c`D+r<x;HG3^nn3>l;om^Ywv$RIFpV9O!`(-X!#!e{OZg0PvJf+Acd
zRuTx4iIgP5W55(5EC%{ggu}q0N)ZMF2NWZ829CZQAv5-}wH%=`_A0H)5hCL*G8G7o
zIj?~Vgv7ir(G>`ViLWR?2n-OAdIl&+H3KB1mH`@4$@sx$-y1POEVN?6&{j+o*@%e)
z+c3AdCd@so1%pI2V6Y&028|JC@DOPx5h2W^0%VzFzbKRLmSi4!1(~N#Ip+B-NHLku
zQ;5kWhYXX=bP*;$Z6%n38YIA!6jVM_^mJe|Wsf>8Q~2CwGNp@<DrO`qb&R4ab<B&Z
z6fuL*=N{EeR`Sd|xi7-!OHEdC%%2wpbmf^@KSAdKi0bIdBlFvsSnlIr`(-z+{9<12
zuZ5$enJcZ{#}gArNir%50hWR@v+|O+za=wegXorBZs4`|5zTQiBkgvf^Tcbn@uzLw
z;lqBlbNn}^5-=0e9~U#~rs`E7vF^B-k#~r{3Vxooh66_5?*1tF`D|3o7<>1hr!UTg
z#f)<h@m)+{<8Oj7W1Xse$7XqTabFkIY2Fc$_u~eQ^?`&E{J>!jA1Uu*)=4O~n9N>T
z4l-fz@|=IJs=>RVbqcpy7b(U5!`E^-i|PFR+)Yezv(T?>&|jOztE6H-xY4_z;o6zj
zqKa+XoLZ$xD)xr{6uKUeRa_<v$jV$=aq|&wOQ;5l`w_(wE;^eiE)!P&3t%h7%LMx{
xYo}aA&a_orCMZ|T8Y}Nin3^lD$W8wO3;;N@UiL>(_htY9002ovPDHLkV1lMDnf3qx

literal 0
HcmV?d00001

diff --git a/public/images/icons/pencil_mobile_grey_mobile.png b/public/images/icons/pencil_mobile_grey_mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d4147ea0376a3d93818bc58d11baac8ac851dd8
GIT binary patch
literal 871
zcmV-t1DO1YP)<h;3K|Lk000e1NJLTq003nG003nO0{{R3W1`*t0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUyGf+%aMU9P(RaI5=^z_}`-D_)W=;-LA
zq@=L0u+q}fcXxNYySrduV1j~znVFf!#>PrYO8@`=wu$EL0000HbW%=J|NsC0|NsC0
z|NsC0|NsC0041%NVgLXFtw}^dRCwC7+FO=`APfM|pdwlwb^og!unz%)Koa=s9OB$s
zLZnbQyr#EtgmE<eA>82isx!m>Z3_A}%Bc3B&01dRhdpk}NGp@tkp{BLw4+UFNu^gf
z(u>~9&>C^d*c`D+r<x;HG3^nn3>l;om^Ywv$RIFpV9O!`(-X!#!e{OZg0PvJf+Acd
zRuTx4iIgP5W55(5EC%{ggu}q0N)ZMF2NWZ829CZQAv5-}wH%=`_A0H)5hCL*G8G7o
zIj?~Vgv7ir(G>`ViLWR?2n-OAdIl&+H3KB1mH`@4$@sx$-y1POEVN?6&{j+o*@%e)
z+c3AdCd@so1%pI2V6Y&028|JC@DOPx5h2W^0%VzFzbKRLmSi4!1(~N#Ip+B-NHLku
zQ;5kWhYXX=bP*;$Z6%n38YIA!6jVM_^mJe|Wsf>8Q~2CwGNp@<DrO`qb&R4ab<B&Z
z6fuL*=N{EeR`Sd|xi7-!OHEdC%%2wpbmf^@KSAdKi0bIdBlFvsSnlIr`(-z+{9<12
zuZ5$enJcZ{#}gArNir%50hWR@v+|O+za=wegXorBZs4`|5zTQiBkgvf^Tcbn@uzLw
z;lqBlbNn}^5-=0e9~U#~rs`E7vF^B-k#~r{3Vxooh66_5?*1tF`D|3o7<>1hr!UTg
z#f)<h@m)+{<8Oj7W1Xse$7XqTabFkIY2Fc$_u~eQ^?`&E{J>!jA1Uu*)=4O~n9N>T
z4l-fz@|=IJs=>RVbqcpy7b(U5!`E^-i|PFR+)Yezv(T?>&|jOztE6H-xY4_z;o6zj
zqKa+XoLZ$xD)xr{6uKUeRa_<v$jV$=aq|&wOQ;5l`w_(wE;^eiE)!P&3t%h7%LMx{
xYo}aA&a_orCMZ|T8Y}Nin3^lD$W8wO3;;N@UiL>(_htY9002ovPDHLkV1lMDnf3qx

literal 0
HcmV?d00001

diff --git a/public/images/icons/reshare_mobile.png b/public/images/icons/reshare_mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b53165ec4b0abdb4fe454c97b14f58f524b751a
GIT binary patch
literal 1712
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
GLSTZYC?_TW

literal 0
HcmV?d00001

diff --git a/public/javascripts/mobile.js b/public/javascripts/mobile.js
index f8d277905..a47bc8902 100644
--- a/public/javascripts/mobile.js
+++ b/public/javascripts/mobile.js
@@ -30,8 +30,7 @@ $(document).ready(function(){
       type: 'DELETE',
       beforeSend: function(){
         link.removeClass('active')
-              .addClass('loading')
-              .fadeIn(50);
+              .addClass('loading');
       },
       complete: function(data){
         link.removeClass('loading')
@@ -42,19 +41,60 @@ $(document).ready(function(){
     });
   });
 
-
   $("a.show_comments").live('tap click', function(evt){
     evt.preventDefault();
     var link = $(this),
-        parent = link.closest(".bottom_bar").first();
-        
+        parent = link.closest(".bottom_bar").first(),
+        commentsContainer = parent.find(".comments");
 
-    $.ajax({
-      url: link.attr('href'),
-      success: function(data){
-        var comments = $("<ul class='comments'></ul>");
-        parent.append(comments.append(data));
-      }
-    });
+    if( link.hasClass('active') ) {
+      commentsContainer.first().hide();
+      link.removeClass('active');
+
+    } else if( commentsContainer.length > 0 ) {
+      commentsContainer.first().show();
+      link.addClass('active');
+
+    } else {
+      $.ajax({
+        url: link.attr('href'),
+        success: function(data){
+          var comments = $("<ul class='comments'></ul>");
+          parent.append(comments.append(data));
+          link.addClass('active');
+        }
+      });
+    }
   });
+
+  $("a.comment_action").live('tap click', function(evt){
+    evt.preventDefault();
+    var link = $(this);
+
+    if(link.hasClass('inactive')) {
+      var parent = link.closest(".bottom_bar").first();
+      $.ajax({
+        url: link.attr('href'),
+        beforeSend: function(){
+          link.addClass('loading');
+        },
+        success: function(data){
+          link.removeClass('loading')
+              .removeClass('inactive');
+          parent.append(data);
+        }
+      });
+    }
+  });
+
+  $("a.cancel_new_comment").live('tap click', function(evt){
+    evt.preventDefault();
+    var link = $(this);
+        form = link.closest("form"),
+        commentActionLink = link.closest(".bottom_bar").find("a.comment_action").first();
+
+    commentActionLink.addClass("inactive");
+    form.remove();
+  });
+
 });
diff --git a/public/stylesheets/sass/mobile.scss b/public/stylesheets/sass/mobile.scss
index d0c242ea1..e02a8bf8e 100644
--- a/public/stylesheets/sass/mobile.scss
+++ b/public/stylesheets/sass/mobile.scss
@@ -84,6 +84,7 @@ body {
 .stream_element .comments {
   padding: 0;
   margin: 0;
+  margin-top: 18px;
   width: 100%;
   .content {
     padding: 0;
@@ -92,14 +93,14 @@ body {
   .comment {
     padding: {
       top: 10px;
+      bottom: 5px;
     }
   }
 }
 
 .comment {
-  padding: 4px 0;
   border: {
-    bottom: 1px dotted #ccc; };
+    top: 1px solid #ccc; };
 }
 
 #login_form {
@@ -265,6 +266,7 @@ footer {
   a,
   a:visited {
     color: #999;
+    margin: 10px;
   }
   padding: {
     top: 10px;
@@ -282,9 +284,29 @@ footer {
   border: {
     top: 1px solid #dddddd; };
   min-height: 24px;
-  a {
-    color: #999999 !important;
-    font-weight: bold !important; }
+
+  a,
+  .show_comments {
+    color: #999;
+    font-weight: bold;
+  }
+
+  .show_comments {
+    position: relative;
+    top: 3px;
+    font: {
+      size: larger;
+    }
+    color: #ccc;
+  }
+
+  a.show_comments {
+    color: #999;
+
+    &.active {
+      color: #444;
+    }
+  }
 
   #bottom_bar_tabs {
     display: table;
@@ -351,14 +373,21 @@ footer {
   &.active {
     background-image: url("/images/icons/heart_mobile_red.png");
   }
-
   &.loading {
     background-image: url("/images/mobile-spinner.gif");
   }
 }
 
 .comment_action {
-  background-image: url("/images/icons/pencil_mobile_grey.png"); }
+  background-image: url("/images/icons/pencil_mobile_grey_active.png");
+
+  &.inactive {
+    background-image: url("/images/icons/pencil_mobile_grey.png");
+  }
+  &.loading {
+    background-image: url("/images/mobile-spinner.gif");
+  }
+}
 
 .compose_icon {
   position: absolute;
@@ -379,11 +408,26 @@ footer {
 }
 
 form {
-  input {
+  input:not([type='checkbox']),
+  textarea {
     -webkit-appearance: none;
+    text-size: larger;
+  }
+
+  .btn,
+  input[type=submit] {
+    @include border-radius(3px);
+    background-color: #ccc;
+    color: #666;
+    text-size: larger;
+    font-weight: bold;
+    padding: 10px;
+    border: 1px solid #999;
+
+    &.action {
+      color: #fff;
+      background-color: green;
+      border: 1px solid #888;
+    }
   }
 }
-
-.show_comments {
-  font-size: larger;
-}