expand&collapse comments; added comment form (wip)

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

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)

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"
 

app/views/comments/new.mobile.haml

+= new_comment_form(params[:post_id], current_user)

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

app/views/shared/_footer.mobile.haml

 %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

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

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))}"
 

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

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'
 

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();
+  });
+
 });

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;
   }
-}
 
-.show_comments {
-  font-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;
+    }
+  }
 }