diff --git a/Changelog.md b/Changelog.md index 76933b740..5f9e7b219 100644 --- a/Changelog.md +++ b/Changelog.md @@ -78,6 +78,7 @@ Contributions are very welcome, the hard work is done! * Change login/registration/forgot password button color [#6504](https://github.com/diaspora/diaspora/pull/6504) * A note regarding ignoring users was added to the failure messages on commenting/liking [#6646](https://github.com/diaspora/diaspora/pull/6646) * Replace sidetiq with sidekiq-cron [#6616](https://github.com/diaspora/diaspora/pull/6616) +* Refactor mobile comment section [#6509](https://github.com/diaspora/diaspora/pull/6509) ## Bug fixes * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) 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 dae58b943..000000000 Binary files a/app/assets/images/branding/logos/header-logo_hover.png and /dev/null differ diff --git a/app/assets/images/mobile/arrow_down_small.png b/app/assets/images/mobile/arrow_down_small.png deleted file mode 100644 index 392d82125..000000000 Binary files a/app/assets/images/mobile/arrow_down_small.png and /dev/null differ 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 970a8e596..000000000 Binary files a/app/assets/images/mobile/arrow_up_small.png and /dev/null differ diff --git a/app/assets/images/mobile/check_yes_ok.png b/app/assets/images/mobile/check_yes_ok.png deleted file mode 100644 index da33bf6fd..000000000 Binary files a/app/assets/images/mobile/check_yes_ok.png and /dev/null differ 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 293660655..0b6e328eb 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,96 +19,135 @@ }, 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")) { + + if(toggleReactionsLink.hasClass("active")) { this.hideComments(toggleReactionsLink); + toggleReactionsLink.parents(".bottom-bar").find(".add-comment-switcher").addClass("hidden"); } else { this.showComments(toggleReactionsLink); } }, 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,72 +162,76 @@ }, 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"); - } - }); - }, - - appendCommentBox: function(link, data) { - link.removeClass("loading"); - link.removeClass("inactive"); - var bottomBar = link.closest(".bottom_bar").first(); - bottomBar.append(data); + 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); + this.increaseReactionCount(bottomBar); this.handleCommentShowing(form, bottomBar); bottomBar.find("time.timeago").timeago(); }, addNewComments: function(bottomBar, data) { - if ($(".comment_container", bottomBar).length === 0) { - $(".show_comments", bottomBar).after($("
", {"class": "comment_container"})); - $(".comment_container", bottomBar).append($("