From 054971c7de4cb6e7ce9febb4ccec468b5362811f Mon Sep 17 00:00:00 2001 From: augier Date: Sun, 18 Oct 2015 18:51:50 +0200 Subject: [PATCH] Big refactor on mobile comments --- .../logos}/asterisk_white_mobile.png | Bin .../branding/logos/header-logo_hover.png | Bin 3931 -> 0 bytes app/assets/images/mobile/arrow_down_small.png | Bin 455 -> 0 bytes app/assets/images/mobile/arrow_up_small.png | Bin 460 -> 0 bytes app/assets/images/mobile/check_yes_ok.png | Bin 273 -> 0 bytes app/assets/javascripts/mobile/mobile.js | 8 +- .../javascripts/mobile/mobile_comments.js | 156 ++++++++++-------- app/assets/javascripts/mobile/publisher.js | 2 +- app/assets/stylesheets/color-variables.scss | 2 + app/assets/stylesheets/mobile/comments.scss | 89 ++++++++-- app/assets/stylesheets/mobile/mobile.scss | 60 ++----- app/helpers/mobile_helper.rb | 21 ++- app/views/comments/_new_comment.mobile.haml | 16 +- app/views/comments/_post_stats.mobile.haml | 13 ++ app/views/comments/index.mobile.haml | 4 +- app/views/comments/new.mobile.haml | 2 +- app/views/layouts/_header.mobile.haml | 2 +- app/views/people/show.mobile.haml | 2 +- app/views/shared/_post_stats.mobile.haml | 14 -- app/views/shared/_stream.haml | 4 +- app/views/shared/_stream_element.mobile.haml | 25 +-- features/mobile/logged_out_browsing.feature | 2 +- features/mobile/reactions.feature | 20 +-- features/mobile/reshare.feature | 17 +- features/step_definitions/custom_web_steps.rb | 4 + .../mobile/mobile_comments_spec.js | 60 ++----- 26 files changed, 278 insertions(+), 245 deletions(-) rename app/assets/images/{mobile => branding/logos}/asterisk_white_mobile.png (100%) delete mode 100644 app/assets/images/branding/logos/header-logo_hover.png delete mode 100644 app/assets/images/mobile/arrow_down_small.png delete mode 100644 app/assets/images/mobile/arrow_up_small.png delete mode 100644 app/assets/images/mobile/check_yes_ok.png create mode 100644 app/views/comments/_post_stats.mobile.haml delete mode 100644 app/views/shared/_post_stats.mobile.haml diff --git a/app/assets/images/mobile/asterisk_white_mobile.png b/app/assets/images/branding/logos/asterisk_white_mobile.png similarity index 100% rename from app/assets/images/mobile/asterisk_white_mobile.png rename to app/assets/images/branding/logos/asterisk_white_mobile.png diff --git a/app/assets/images/branding/logos/header-logo_hover.png b/app/assets/images/branding/logos/header-logo_hover.png deleted file mode 100644 index dae58b94328b60fd0f82ad352b806ff5937f870c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3931 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 diff --git a/app/assets/images/mobile/arrow_up_small.png b/app/assets/images/mobile/arrow_up_small.png deleted file mode 100644 index 970a8e5969ecd9fc7411e789f5063421bda73dfe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 460 zcmV;-0WsPOu{r>ZZ;r+XJr!8%5 z5`f~nK$1)#;>(vW4aW{0zIf^4MKcag&cDLKLcgCpek{3r`;Kiu(|h3xuUx(?4wMiO z77_XD>FX2c?C!3sqN@7n}8$W&iByMACo58`wH3ujrWnyCTj0x%y zkitr!n~pqu_)zM@`wz^!w(pqz=GCi(K=E&ItM~8TQwH=<+PAOYST(dXZt-yQe7tz^ zqUqs-hvGy;L^yyZhJzKpdi9Ep6$p$?O%AB2tAzrE-UtZ`cO5%=wDj4tXY6njEvzi> z%F4;LGchx_0=Zv7VuB*VW#0aN4{lw*ZUo{31Q-DPzL%FF>~1Uo0000JnU7qJ1*YkEY_ST&??4u?32_bkq8dYB*|86=1 Xmi1*scpSuA00000NkvXXu0mjfzPD<^ diff --git a/app/assets/javascripts/mobile/mobile.js b/app/assets/javascripts/mobile/mobile.js index 9fdd94215..f8c1ece61 100644 --- a/app/assets/javascripts/mobile/mobile.js +++ b/app/assets/javascripts/mobile/mobile.js @@ -59,7 +59,7 @@ $(document).ready(function(){ $(".like-action", ".stream").bind("tap click", function(evt){ evt.preventDefault(); var link = $(this), - likeCounter = $(this).closest(".stream_element").find("like_count"), + likeCounter = $(this).closest(".stream_element").find(".like-count"), href = link.attr("href"); if(!link.hasClass("loading")){ @@ -74,7 +74,7 @@ $(document).ready(function(){ link.attr("href", href + "/" + data["id"]); if(likeCounter){ - likeCounter.text(parseInt(likeCounter.text) + 1); + likeCounter.text(parseInt(likeCounter.text(), 10) + 1); } } }); @@ -90,7 +90,7 @@ $(document).ready(function(){ link.attr("href", href.replace(/\/\d+$/, '')); if(likeCounter){ - likeCounter.text(parseInt(likeCounter.text) - 1); + likeCounter.text(parseInt(likeCounter.text(), 10) - 1); } } }); @@ -99,7 +99,7 @@ $(document).ready(function(){ }); /* Reshare */ - $(".reshare-action", ".stream").bind("tap click", function(evt){ + $(".reshare-action:not(.disabled)", ".stream").bind("tap click", function(evt){ evt.preventDefault(); var link = $(this), diff --git a/app/assets/javascripts/mobile/mobile_comments.js b/app/assets/javascripts/mobile/mobile_comments.js index c87ac6f28..fe60d9074 100644 --- a/app/assets/javascripts/mobile/mobile_comments.js +++ b/app/assets/javascripts/mobile/mobile_comments.js @@ -7,6 +7,8 @@ (function() { Diaspora.Mobile = {}; Diaspora.Mobile.Comments = { + stream: function(){ return $(".stream"); }, + initialize: function() { var self = this; $(".stream").on("tap click", "a.back_to_stream_element_top", function() { @@ -17,41 +19,44 @@ }, 1000); }); - $(".stream").on("tap click", "a.show_comments", function(evt){ + this.stream().on("tap click", "a.show-comments", function(evt){ evt.preventDefault(); self.toggleComments($(this)); }); - $(".stream").on("tap click", "a.comment-action", function(evt) { + this.stream().on("tap click", "a.comment-action", function(evt) { evt.preventDefault(); self.showCommentBox($(this)); - var bottomBar = $(this).closest(".bottom_bar").first(); - var commentContainer = bottomBar.find(".comment_container").first(); + var bottomBar = $(this).closest(".bottom-bar").first(); + var commentContainer = bottomBar.find(".comment-container").first(); self.scrollToOffset(commentContainer); }); - $(".stream").on("submit", ".new_comment", this.submitComment); + this.stream().on("submit", ".new_comment", this.submitComment); }, - submitComment: function(evt) { + submitComment: function(evt){ evt.preventDefault(); var form = $(this); var commentBox = form.find(".comment_box"); var commentText = $.trim(commentBox.val()); - if (commentText) { - $.post(form.attr("action")+"?format=mobile", form.serialize(), function(data) { - Diaspora.Mobile.Comments.updateStream(form, data); - }, "html"); - return true; - } - else { + if(!commentText){ commentBox.focus(); return false; } + + $.post(form.attr("action") + "?format=mobile", form.serialize(), function(data){ + Diaspora.Mobile.Comments.updateStream(form, data); + }, "html").fail(function(){ + Diaspora.Mobile.Comments.resetCommentBox(this); + }); + + autosize($(".add-comment-switcher:not(.hidden) textarea")); }, toggleComments: function(toggleReactionsLink) { if(toggleReactionsLink.hasClass("loading")) { return; } + if (toggleReactionsLink.hasClass("active")) { this.hideComments(toggleReactionsLink); } else { @@ -60,53 +65,88 @@ }, hideComments: function(toggleReactionsLink) { - var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(), - commentsContainer = this.commentsContainerLazy(bottomBar), - existingCommentsContainer = commentsContainer(); - existingCommentsContainer.hide(); + var bottomBar = toggleReactionsLink.closest(".bottom-bar").first(); + this.bottomBarLazy(bottomBar).deactivate(); toggleReactionsLink.removeClass("active"); }, showComments: function(toggleReactionsLink) { - var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(), - commentsContainer = this.commentsContainerLazy(bottomBar), - existingCommentsContainer = commentsContainer(), + var bottomBar = toggleReactionsLink.closest(".bottom-bar").first(), + bottomBarContainer = this.bottomBarLazy(bottomBar), + existingCommentsContainer = bottomBarContainer.getCommentsContainer(), commentActionLink = bottomBar.find("a.comment-action"); + + bottomBarContainer.activate(); + bottomBarContainer.showLoader(); + if (existingCommentsContainer.length > 0) { this.showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink); + bottomBarContainer.hideLoader(); } else { this.showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink); } }, showLoadedComments: function(toggleReactionsLink, existingCommentsContainer, commentActionLink) { - toggleReactionsLink.addClass("active"); - existingCommentsContainer.show(); this.showCommentBox(commentActionLink); existingCommentsContainer.find("time.timeago").timeago(); }, showUnloadedComments: function(toggleReactionsLink, bottomBar, commentActionLink) { toggleReactionsLink.addClass("loading"); - var commentsContainer = this.commentsContainerLazy(bottomBar); + var bottomBarContainer = this.bottomBarLazy(bottomBar); var self = this; $.ajax({ url: toggleReactionsLink.attr("href"), success: function (data) { toggleReactionsLink.addClass("active").removeClass("loading"); - $(data).insertAfter(bottomBar.children(".show_comments").first()); + $(data).insertAfter(bottomBar.children(".show-comments").first()); self.showCommentBox(commentActionLink); - commentsContainer().find("time.timeago").timeago(); + bottomBarContainer.getCommentsContainer().find("time.timeago").timeago(); + bottomBarContainer.activate(); }, - error: function() { - toggleReactionsLink.removeClass("loading"); + error: function(){ + bottomBarContainer.deactivate(); } + }).always(function(){ + toggleReactionsLink.removeClass("loading"); + bottomBarContainer.hideLoader(); }); }, - commentsContainerLazy: function(bottomBar) { - return function() { - return bottomBar.find(".comment_container").first(); + bottomBarLazy: function(bottomBar) { + return { + loader: function(){ + return bottomBar.find(".ajax-loader"); + }, + + getCommentsContainer: function(){ + return bottomBar.find(".comment-container").first(); + }, + + getShowCommentsLink: function(){ + return bottomBar.find("a.show-comments"); + }, + + showLoader: function(){ + this.loader().removeClass("hidden"); + }, + + hideLoader: function(){ + this.loader().addClass("hidden"); + }, + + activate: function(){ + bottomBar.addClass("active").removeClass("inactive"); + this.getShowCommentsLink().addClass("active"); + this.getShowCommentsLink().find("i").removeClass("entypo-chevron-down").addClass("entypo-chevron-up"); + }, + + deactivate: function(){ + bottomBar.removeClass("active").addClass("inactive"); + this.getShowCommentsLink().removeClass("active"); + this.getShowCommentsLink().find("i").addClass("entypo-chevron-down").removeClass("entypo-chevron-up"); + } }; }, @@ -121,36 +161,14 @@ }, showCommentBox: function(link){ - if(!link.hasClass("inactive") || link.hasClass("loading")) { return; } - // var self = this; - // $.ajax({ - // url: link.attr("href"), - // beforeSend: function(){ - // link.addClass("loading"); - // }, - // context: link, - // success: function(data) { - // self.appendCommentBox.call(this, link, data); - // }, - // error: function() { - // link.removeClass("loading"); - // } - // }); - this.appendCommentBox(link); - }, - - appendCommentBox: function(link) { - link.removeClass("loading"); - link.removeClass("inactive"); - var bottomBar = link.closest(".bottom_bar").first(); - // bottomBar.append(data); - var addCommentSwitcher = bottomBar.find(".add-comment-switcher").removeClass('hidden') + var bottomBar = link.closest(".bottom-bar").first(); var textArea = bottomBar.find("textarea.comment_box").first()[0]; + bottomBar.find(".add-comment-switcher").removeClass("hidden"); autosize(textArea); }, updateStream: function(form, data) { - var bottomBar = form.closest(".bottom_bar").first(); + var bottomBar = form.closest(".bottom-bar").first(); this.addNewComments(bottomBar, data); this.updateCommentCount(bottomBar); this.updateReactionCount(bottomBar); @@ -159,36 +177,44 @@ }, addNewComments: function(bottomBar, data) { - if ($(".comment_container", bottomBar).length === 0) { - $(".show_comments", bottomBar).after($("
", {"class": "comment_container"})); - $(".comment_container", bottomBar).append($("
    ", {"class": "comments"})); + if ($(".comment-container", bottomBar).length === 0) { + $(".show-comments", bottomBar).after($("
    ", {"class": "comment-container"})); + $(".comment-container", bottomBar).append($("
      ", {"class": "comments"})); } - $(".comment_container .comments", bottomBar).append(data); + $(".comment-container .comments", bottomBar).append(data); }, // Fix for no comments updateCommentCount: function(bottomBar) { - var commentCount = bottomBar.find(".comment_count"); + var commentCount = bottomBar.find(".comment-count"); commentCount.text(commentCount.text().replace(/(\d+)/, function (match) { - return parseInt(match) + 1; + return parseInt(match, 10) + 1; })); }, // Fix for no reactions updateReactionCount: function(bottomBar) { - var toggleReactionsLink = bottomBar.find(".show_comments").first(); + var toggleReactionsLink = bottomBar.find(".show-comments").first(); toggleReactionsLink.text(toggleReactionsLink.text().replace(/(\d+)/, function (match) { - return parseInt(match) + 1; + return parseInt(match, 10) + 1; })); }, handleCommentShowing: function(form, bottomBar) { var formContainer = form.parent(); - formContainer.remove(); + formContainer.find("textarea.form-control").first().val(""); + this.resetCommentBox(formContainer); var commentActionLink = bottomBar.find("a.comment-action").first(); commentActionLink.addClass("inactive"); - var toggleReactionsLink = bottomBar.find(".show_comments").first(); + var toggleReactionsLink = bottomBar.find(".show-comments").first(); this.showComments(toggleReactionsLink); + }, + + resetCommentBox: function(el){ + var commentButton = el.find("input.comment-button").first(); + commentButton.attr("value", commentButton.data("reset-with")); + commentButton.removeAttr("disabled"); + commentButton.blur(); } }; })(); diff --git a/app/assets/javascripts/mobile/publisher.js b/app/assets/javascripts/mobile/publisher.js index 4f6f609ba..7e96c2fd5 100644 --- a/app/assets/javascripts/mobile/publisher.js +++ b/app/assets/javascripts/mobile/publisher.js @@ -14,7 +14,7 @@ $(document).ready(function(){ $("#new_status_message .counter").remove(); $.each(selectedServices, function() { - serviceMaxChars = parseInt($(this).attr("maxchar")); + serviceMaxChars = parseInt($(this).attr("maxchar"), 10); if(publisherMaxChars > serviceMaxChars) { publisherMaxChars = serviceMaxChars; } diff --git a/app/assets/stylesheets/color-variables.scss b/app/assets/stylesheets/color-variables.scss index 449f7eb1b..f0ee2876e 100644 --- a/app/assets/stylesheets/color-variables.scss +++ b/app/assets/stylesheets/color-variables.scss @@ -10,9 +10,11 @@ $background-grey: #eee; $background-blue: #e7f2f7; $grey: #2b2b2b; +$medium-gray: #ccc; $light-grey: #ddd; $border-grey: $light-grey; +$border-medium-grey: $medium-gray; $border-dark-grey: $text-grey; $link-grey: #777; diff --git a/app/assets/stylesheets/mobile/comments.scss b/app/assets/stylesheets/mobile/comments.scss index 02aa6a638..e79d2c3b6 100644 --- a/app/assets/stylesheets/mobile/comments.scss +++ b/app/assets/stylesheets/mobile/comments.scss @@ -1,4 +1,4 @@ -.bottom_bar { +.bottom-bar { border-radius: 0 0 5px 5px; z-index: 3; display: block; @@ -8,44 +8,97 @@ margin-top: 10px; border-top: 1px solid $border-grey; min-height: 22px; + overflow: hidden; - > a, .show_comments { + > a, + .show-comments, + .show-comments > [class^="entypo"] { @include transition(color); color: $text-grey; font-weight: bold; } - .show_comments { + .show-comments { position: relative; top: 3px; - } - a.show_comments.active:not(.bottom_collapse) { - color: $text; - padding-right: 14px; - background: { - image: image-url("mobile/arrow_down_small.png"); - position: center right; - repeat: no-repeat; + &:hover, + &:active, + &:focus { + outline: none; + text-decoration: none; + } + + &.active:not(.bottom_collapse), + &.active:not(.bottom_collapse) > [class^="entypo"] { + color: $text; } } - .floater { + .post-stats { top: -5px; float: right; - height: 28px; - overflow: hidden; position: relative; + display: flex; + margin-bottom: -15px; + + .count { + background-color: $background-grey; + text-align: center; + z-index: 2; + } + + .icon-count-group { + display: flex; + flex-flow: column; + justify-content: center; + margin: 0 7px; + } [class^="entypo"] { - height: 90%; - margin: 0 4px; color: $text-grey; font-size: 24px; - &:hover, &:active, &:focus{ text-decoration: none; } - &:last-child { margin-right: 1px; } + height: 28px; + margin: 0; + width: 100%; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + &.entypo-reshare.active { color: $blue; } + &.entypo-heart.active { color: $red; } } } + + .post-action { + height: 28px; + + .disabled { color: $medium-gray; } + } + + .add-comment-switcher { padding-top: 10px; } + + &.inactive .post-stats .count, + &.inactive .comment-container { + display: none; + } +} + +.stream_element .comments { + margin: 0; + padding: 0; + width: 100%; + + .content { padding: 0; } + + .comment { + border-top: 1px solid $border-medium-grey; + padding: 10px 0 0; + + &:first-child { padding-top: 20px; } + } } diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss index c98613dbf..3f4b55578 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/app/assets/stylesheets/mobile/mobile.scss @@ -6,6 +6,7 @@ @import "_flash_messages"; @import 'entypo'; @import 'icons'; +@import 'spinner'; @import "mobile/header"; @import "mobile/tags"; @@ -36,6 +37,8 @@ h3 { margin-top: 0; } .clear { clear: both; } #main { padding: 56px 10px 0 10px; } +textarea { resize: vertical; } + .avatar { border-radius: 4px; } @@ -93,6 +96,14 @@ h3 { margin-top: 0; } z-index: 2; } +.ajax-loader { + border-top: 1px solid $border-medium-grey; + margin-top: 10px; + padding-top: 10px; + text-align: center; + width: 100%; +} + .stream_element:not(.shield-active) .shield{ display: none; } @@ -101,31 +112,6 @@ h3 { margin-top: 0; } display: none; } -.new_comment { - padding: 10px; -} - -.stream_element .comments { - width: 100%; - margin: 0; - top: 3px; - .content { - padding: 0; - } - - .comment { - padding: { - top: 10px; - bottom: 5px; - } - } -} - -.comment { - border: { - top: 1px solid #ccc; }; -} - .login_error, .login_alert { color: #DF0101; @@ -357,7 +343,7 @@ h3 { margin-top: 0; } } } - .bottom_bar { + .bottom-bar { position: static; } } @@ -423,34 +409,12 @@ select { padding: 7px; } -.new_comment { - padding: 10px 0; - padding-top: 20px; -} - .comment.add_comment_bottom_link_container { position: relative; text-align: center; padding: 25px !important; } -.post_stats { - position: absolute; - right: 8px; - top: 31px; - z-index: 2; - - span { - color: $text-dark-grey; - font-weight: bold; - padding: 2px 7px; - margin: 5px 6px; - background: { - color: $background-grey; - } - } -} - .additional_photo_count { opacity: 0.5; diff --git a/app/helpers/mobile_helper.rb b/app/helpers/mobile_helper.rb index d64fdcee0..f16e5e68b 100644 --- a/app/helpers/mobile_helper.rb +++ b/app/helpers/mobile_helper.rb @@ -10,7 +10,11 @@ module MobileHelper link_to "", reshares_path(root_guid: absolute_root.guid), title: t("reshares.reshare.reshare_confirmation", author: absolute_root.author_name), class: "entypo-reshare reshare-action #{klass}" + else + content_tag :div, nil, class: "entypo-reshare reshare-action disabled" end + else + content_tag :div, nil, class: "entypo-reshare reshare-action disabled" end end @@ -26,14 +30,19 @@ module MobileHelper link_to "", new_post_comment_path(post), class: "entypo-comment comment-action inactive" end - def reactions_link(post) + def reactions_link(post, klass="") reactions_count = post.comments_count + post.likes_count - if reactions_count > 0 - link_to "#{t('reactions', count: reactions_count)}", - post_comments_path(post, format: "mobile"), - class: "show_comments" + if klass == "active" + entypo_class = "entypo-chevron-up" else - html = "" + entypo_class = "entypo-chevron-down" + end + if reactions_count > 0 + link_to "#{t('reactions', count: reactions_count)} ".html_safe, + post_comments_path(post, format: "mobile"), + class: "show-comments #{klass}" + else + html = "" html << "#{t('reactions', count: reactions_count)}" html << "" end diff --git a/app/views/comments/_new_comment.mobile.haml b/app/views/comments/_new_comment.mobile.haml index 40db9aa25..5cae52950 100644 --- a/app/views/comments/_new_comment.mobile.haml +++ b/app/views/comments/_new_comment.mobile.haml @@ -3,13 +3,13 @@ -# the COPYRIGHT file. .add_comment_bottom_link_container - = link_to "#", class: "back_to_stream_element_top pull-right" do - = image_tag "mobile/arrow_up_small.png" - - if user_signed_in? - = form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: "new_comment", autocomplete: "off") do + = form_tag(post_comments_path(post_id), id: "new-comment-on-#{post_id}", + class: "new_comment", autocomplete: "off") do %fieldset - = hidden_field_tag :post_id, post_id, id: "post_id_on_#{post_id}" - .form-group - = text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t(".comment") - = submit_tag t(".comment"), :id => "comment_submit_#{post_id}", "data-disable-with" => t(".commenting"), :class => "btn btn-primary btn-block" + = hidden_field_tag :post_id, post_id, id: "post-id-on-#{post_id}" + .form-group.clearfix + = text_area_tag :text, nil, class: "col-md-12 comment_box form-control", + id: "comment-text-on-#{post_id}", placeholder: t(".comment") + = submit_tag t(".comment"), :id => "comment-submit-#{post_id}", "data-disable-with" => t(".commenting"), + "data-reset-with" => t(".comment"), :class => "btn btn-primary btn-block comment-button" diff --git a/app/views/comments/_post_stats.mobile.haml b/app/views/comments/_post_stats.mobile.haml new file mode 100644 index 000000000..106ef8ae8 --- /dev/null +++ b/app/views/comments/_post_stats.mobile.haml @@ -0,0 +1,13 @@ +.post-stats + - if post.public? + .icon-count-group + .post-action= mobile_reshare_icon(post) + %span.reshare-count.count= post.reshares.size + + .icon-count-group + .post-action= mobile_comment_icon(post) + %span.comment-count.count= post.comments.size + + .icon-count-group + .post-action= mobile_like_icon(post) + %span.like-count.count= post.likes.size diff --git a/app/views/comments/index.mobile.haml b/app/views/comments/index.mobile.haml index b644ae77a..6f0d545e2 100644 --- a/app/views/comments/index.mobile.haml +++ b/app/views/comments/index.mobile.haml @@ -1 +1,3 @@ -= render :partial => 'shared/post_stats', :locals => { :post => @post} \ No newline at end of file +.comment-container + %ul.comments + = render partial: "comments/comment", collection: @post.comments.for_a_stream, locals: {post: @post} diff --git a/app/views/comments/new.mobile.haml b/app/views/comments/new.mobile.haml index 453a092c9..4788ace61 100644 --- a/app/views/comments/new.mobile.haml +++ b/app/views/comments/new.mobile.haml @@ -1 +1 @@ -= render :partial => 'new_comment', :locals =>{:post_id => params[:post_id]} += render partial: "new_comment", locals: {post_id: params[:post_id]} diff --git a/app/views/layouts/_header.mobile.haml b/app/views/layouts/_header.mobile.haml index 05f2549a7..30c779098 100644 --- a/app/views/layouts/_header.mobile.haml +++ b/app/views/layouts/_header.mobile.haml @@ -1,7 +1,7 @@ .nav.navbar-inverse.navbar-fixed-top#main-nav .container-fluid .navbar - = link_to(image_tag("mobile/asterisk_white_mobile.png", class: "img-responsive"), + = link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"), stream_path, id: "header-title", class: "navbar-brand") - if user_signed_in? diff --git a/app/views/people/show.mobile.haml b/app/views/people/show.mobile.haml index bb3c8c85f..dbac64ad1 100644 --- a/app/views/people/show.mobile.haml +++ b/app/views/people/show.mobile.haml @@ -12,7 +12,7 @@ - if user_signed_in? && @person != current_user.person = render 'aspect_memberships/aspect_membership_dropdown' .clear - .bottom_bar + .bottom-bar - if !@person.tag_string.blank? && user_signed_in? = Diaspora::Taggable.format_tags(@person.tag_string) .row diff --git a/app/views/shared/_post_stats.mobile.haml b/app/views/shared/_post_stats.mobile.haml deleted file mode 100644 index a0a0d0c50..000000000 --- a/app/views/shared/_post_stats.mobile.haml +++ /dev/null @@ -1,14 +0,0 @@ -.comment_container - .post_stats - - if @post.public? - %span.reshare_count - = @post.reshares.size - - %span.comment_count - = @post.comments.size - - %span.like_count - = @post.likes.size - - %ul.comments - = render partial: "comments/comment", collection: @post.comments.for_a_stream, locals: {post: @post} diff --git a/app/views/shared/_stream.haml b/app/views/shared/_stream.haml index 74a06e827..c1b49f03c 100644 --- a/app/views/shared/_stream.haml +++ b/app/views/shared/_stream.haml @@ -2,6 +2,4 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -= render :partial => 'shared/stream_element', - :collection => posts, - :as => :post += render partial: "shared/stream_element", collection: posts, as: :post diff --git a/app/views/shared/_stream_element.mobile.haml b/app/views/shared/_stream_element.mobile.haml index 6ff99ea69..bb6869503 100644 --- a/app/views/shared/_stream_element.mobile.haml +++ b/app/views/shared/_stream_element.mobile.haml @@ -19,16 +19,21 @@ - if post.is_a?(StatusMessage) = render "status_messages/status_message", post: post, photos: post.photos - .bottom_bar.nsfw-hidden - .floater - = mobile_reshare_icon(post) - = mobile_comment_icon(post) - = mobile_like_icon(post) - - != reactions_link(post) + .bottom-bar.nsfw-hidden{class: ("inactive" unless defined?(expanded_info) && expanded_info)} + = render partial: "comments/post_stats", locals: {post: post} - if defined?(expanded_info) && expanded_info - = render partial: "shared/post_stats", locals: {post: @post} + != reactions_link(post, "active") + .comment-container + %ul.comments + = render partial: "comments/comment", collection: @post.comments.for_a_stream, locals: {post: @post} - .add-comment-switcher{class: ('hidden' unless defined?(expanded_info) && expanded_info)} - = render :partial => 'comments/new_comment', :locals =>{:post_id => post.id} + - else + != reactions_link(post) + + .ajax-loader.hidden + .loader + .spinner + + .add-comment-switcher{class: ("hidden" unless defined?(expanded_info) && expanded_info)} + = render partial: "comments/new_comment", locals: {post_id: post.id} diff --git a/features/mobile/logged_out_browsing.feature b/features/mobile/logged_out_browsing.feature index 0eedca983..125fb6bbd 100644 --- a/features/mobile/logged_out_browsing.feature +++ b/features/mobile/logged_out_browsing.feature @@ -17,5 +17,5 @@ Feature: Browsing Diaspora as a logged out user mobile Scenario: Visiting a profile page When I am on "bob@bob.bob"'s page Then I should see "public stuff" within ".ltr" - And I click on selector "a.show_comments" + And I click on selector "a.show-comments" And I should see "this also" within ".comment" diff --git a/features/mobile/reactions.feature b/features/mobile/reactions.feature index 7b2e625b3..c44cbd4c6 100644 --- a/features/mobile/reactions.feature +++ b/features/mobile/reactions.feature @@ -14,26 +14,26 @@ Feature: reactions mobile post And I sign in as "bob@bob.bob" on the mobile website Scenario: like on a mobile post - When I should see "No reactions" within ".show_comments" - And I click on selector "span.show_comments" + When I should see "No reactions" within ".show-comments" + And I click on selector "span.show-comments" And I click on selector "a.like-action.inactive" Then I should see a "a.like-action.active" When I go to the stream page - And I should see "1 reaction" within ".show_comments" - And I click on selector "a.show_comments" - Then I should see "1" within ".like_count" + And I should see "1 reaction" within ".show-comments" + And I click on selector "a.show-comments" + Then I should see "1" within ".like-count" Scenario: comment and delete a mobile post When I click on selector "a.comment-action.inactive" And I fill in the following: | text | is that a poodle? | And I press "Comment" - Then I should see "is that a poodle?" within ".comment_container" + Then I should see "is that a poodle?" within ".comment-container" When I go to the stream page - And I should see "1 reaction" within ".show_comments" - And I click on selector "a.show_comments" - And I should see "1" within ".comment_count" + And I should see "1 reaction" within ".show-comments" + And I click on selector "a.show-comments" + And I should see "1" within ".comment-count" When I click on selector "a.comment-action" And I click on selector "a.remove" And I confirm the alert - Then I should not see "1 reaction" within ".show_comments" + Then I should not see "1 reaction" within ".show-comments" diff --git a/features/mobile/reshare.feature b/features/mobile/reshare.feature index 1a84b7079..48665aa2b 100644 --- a/features/mobile/reshare.feature +++ b/features/mobile/reshare.feature @@ -16,18 +16,18 @@ Feature: resharing from the mobile And I sign in as "alice@alice.alice" Scenario: Resharing a post from a single post page - And I click on selector "a.reshare-action.inactive" + And I click on selector ".reshare-action.inactive" And I confirm the alert - Then I should see a "a.reshare-action.active" + Then I should see a ".reshare-action.active" When I go to the stream page Then I should see "Reshared via" within ".reshare_via" Scenario: Resharing a post from a single post page that is reshared Given the post with text "reshare this!" is reshared by "eve@eve.eve" And a user with email "alice@alice.alice" is connected with "eve@eve.eve" - And I click on the first selector "a.reshare-action.inactive" + And I click on the first selector ".reshare-action.inactive" And I confirm the alert - Then I should see a "a.reshare-action.active" + Then I should see a ".reshare-action.active" When I go to the stream page Then I should see "Reshared via" within ".reshare_via" @@ -45,3 +45,12 @@ Feature: resharing from the mobile And I sign in as "eve@eve.eve" on the mobile website And I toggle the mobile view Then I should see "Original post deleted by author" within ".reshare" + + Scenario: Not resharing own post + Given I sign in as "bob@bob.bob" + Then I should see a ".reshare-action.disabled" + When I click on selector ".reshare-action" + Then I should not see any alert + And I should not see a ".reshare-action.active" + When I go to the stream page + Then I should not see a ".reshare_via" diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index e5bbfb275..60952f345 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -142,6 +142,10 @@ And /^I reject the alert$/ do page.driver.browser.switch_to.alert.dismiss end +And /^I should not see any alert$/ do + expect { page.driver.browser.switch_to.alert }.to raise_error(Selenium::WebDriver::Error::NoAlertPresentError) +end + When /^(.*) in the mention modal$/ do |action| within('#mentionModal') do step action diff --git a/spec/javascripts/mobile/mobile_comments_spec.js b/spec/javascripts/mobile/mobile_comments_spec.js index 376642e5c..91a5c9d7e 100644 --- a/spec/javascripts/mobile/mobile_comments_spec.js +++ b/spec/javascripts/mobile/mobile_comments_spec.js @@ -2,7 +2,7 @@ describe("Diaspora.Mobile.Comments", function(){ describe("toggleComments", function() { beforeEach(function() { spec.loadFixture("aspects_index_mobile_post_with_comments"); - this.link = $(".stream .show_comments").first(); + this.link = $(".stream .show-comments").first(); spyOn(Diaspora.Mobile.Comments, "showComments"); spyOn(Diaspora.Mobile.Comments, "hideComments"); }); @@ -31,27 +31,27 @@ describe("Diaspora.Mobile.Comments", function(){ describe("showUnloadedComments", function() { beforeEach(function() { spec.loadFixture("aspects_index_mobile_post_with_comments"); - this.link = $(".stream .show_comments").first(); - this.bottomBar = this.link.closest(".bottom_bar").first(); + this.link = $(".stream .show-comments").first(); + this.bottomBar = this.link.closest(".bottom-bar").first(); this.commentActionLink = this.bottomBar.find("a.comment-action"); }); it("adds the 'loading' class to the link", function() { Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink); - expect($(".show_comments").first()).toHaveClass("loading"); + expect($(".show-comments").first()).toHaveClass("loading"); }); it("removes the 'loading' class if the request failed", function() { Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink); jasmine.Ajax.requests.mostRecent().respondWith({status: 400}); - expect($(".show_comments").first()).not.toHaveClass("loading"); + expect($(".show-comments").first()).not.toHaveClass("loading"); }); it("adds the 'active' class if the request succeeded", function() { Diaspora.Mobile.Comments.showUnloadedComments(this.link, this.bottomBar, this.commentActionLink); jasmine.Ajax.requests.mostRecent().respondWith({status: 200, contentType: "text/plain", responseText: "test"}); - expect($(".show_comments").first()).toHaveClass("active"); - expect($(".show_comments").first()).not.toHaveClass("loading"); + expect($(".show-comments").first()).toHaveClass("active"); + expect($(".show-comments").first()).not.toHaveClass("loading"); }); it("calls showCommentBox", function() { @@ -70,50 +70,12 @@ describe("Diaspora.Mobile.Comments", function(){ }); expect($(".stream .stream_element").first()).toContainElement(".commentContainerForTest"); }); - }); - describe("showCommentBox", function() { - beforeEach(function() { - spec.loadFixture("aspects_index_mobile_post_with_comments"); - this.link = $(".stream .comment-action").first(); - }); - - it("adds the 'loading' class to the link", function() { - Diaspora.Mobile.Comments.showCommentBox(this.link); - expect($(".comment-action").first()).toHaveClass("loading"); - }); - - it("removes the 'loading' class if the request failed", function() { - Diaspora.Mobile.Comments.showCommentBox(this.link); - jasmine.Ajax.requests.mostRecent().respondWith({status: 400}); - expect($(".comment-action").first()).not.toHaveClass("loading"); - }); - - it("fires an AJAX call", function() { - spyOn(jQuery, "ajax"); - Diaspora.Mobile.Comments.showCommentBox(this.link); - expect(jQuery.ajax).toHaveBeenCalled(); - }); - - it("calls appendCommentBox", function() { - spyOn(Diaspora.Mobile.Comments, "appendCommentBox"); - Diaspora.Mobile.Comments.showCommentBox(this.link); + it("shows and hides the mobile spinner", function(){ + Diaspora.Mobile.Comments.showComments(this.link); + expect($(".ajax-loader").first()).toBeVisible(); jasmine.Ajax.requests.mostRecent().respondWith({status: 200, contentType: "text/plain", responseText: "test"}); - expect(Diaspora.Mobile.Comments.appendCommentBox).toHaveBeenCalledWith(this.link, "test"); - }); - - it("doesn't do anything if the link class is 'loading'", function() { - spyOn(jQuery, "ajax"); - this.link.addClass("loading"); - Diaspora.Mobile.Comments.showCommentBox(this.link); - expect(jQuery.ajax).not.toHaveBeenCalled(); - }); - - it("doesn't do anything if the link class is not 'inactive'", function() { - spyOn(jQuery, "ajax"); - this.link.removeClass("inactive"); - Diaspora.Mobile.Comments.showCommentBox(this.link); - expect(jQuery.ajax).not.toHaveBeenCalled(); + expect($(".ajax-loader").first()).not.toBeVisible(); }); });