diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index ee21517ab026c7804f3cd015c75e602d3eb4057c..f700ba86aad3c2a56ec43dbc625c461001c2c319 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 84e31ea81c04aa2cb7d9b21dd1db7fffc574b47e..5b622dfa6e06b8c99b0b294c0bae7ffa68e83a67 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 0bf41fff662a3c65872544420fccfff6e8b2d39b..95cbfb4c296404050e6ba335948cca13d9011d15 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 0000000000000000000000000000000000000000..c34cdf84a6e12571b82200fb30f0aa22588a5a45 --- /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 d6a34ee074b6ddffcffa78db884eac939749f19d..3b041fe538f25af9d1353d6534512d286ca293ae 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 b8b8b0c7940cf9e9db8196e4969d3fe22e34a5c1..bc7fd2a8e79e119d9f541e77de41e98c6588c1d6 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 9aeb27166ed70276acfb1f6b62ad9296f0c2bfc3..747b4a92dfdf209a11e045bffb790ca065dca6c5 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 d51d753eeb947bcf0699b44e8f819ff63e7e38ca..35ba85d7ba7b4dc7c3e48d0db14521899b65ee96 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 e8a4368e0bb01083a1ce0101edcb291c20294005..9c702dd2a57de5ba126ae624f34b2adef7d24c01 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 f8f8856b42e1045966b26145d28e8bd3bf3eb610..78c7cf23f085147f9af275b7e96963f072a01d99 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 Binary files /dev/null and b/public/images/icons/pencil_mobile_grey_active.png differ 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 Binary files /dev/null and b/public/images/icons/pencil_mobile_grey_mobile.png differ diff --git a/public/images/icons/reshare_mobile.png b/public/images/icons/reshare_mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..7b53165ec4b0abdb4fe454c97b14f58f524b751a Binary files /dev/null and b/public/images/icons/reshare_mobile.png differ diff --git a/public/javascripts/mobile.js b/public/javascripts/mobile.js index f8d277905c33a7b366623a465a4b4ac26e988459..a47bc89029d5dc34870d24dff64a38c3c8f41f31 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 d0c242ea125617bbb163e93f5ec9dd7c47d1168c..e02a8bf8e71412fd1e18a0b07a8d9a5af9dec3f2 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; } -} -.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; + } + } }