From 9fac515c1c246a1485ecb0161e696acc59f9b7ca Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Wed, 8 Aug 2012 19:13:26 -0700 Subject: [PATCH] Rearranging comments and shares in shares bar. Moving sharing bar to top of story. --- apps/social/models.py | 2 + media/css/reader.css | 37 ++++- .../js/newsblur/views/story_comments_view.js | 126 ++++++++++++------ media/js/newsblur/views/story_detail_view.js | 11 +- media/js/newsblur/views/story_share_view.js | 6 +- 5 files changed, 129 insertions(+), 53 deletions(-) diff --git a/apps/social/models.py b/apps/social/models.py index 9740c8e1e..4c276aaf5 100644 --- a/apps/social/models.py +++ b/apps/social/models.py @@ -1307,6 +1307,7 @@ class MSharedStory(mongo.Document): for story in stories: story['friend_comments'] = [] story['public_comments'] = [] + story['reply_count'] = 0 if check_all or story['comment_count']: comment_key = "C:%s:%s" % (story['story_feed_id'], story['guid_hash']) story['comment_count'] = r.scard(comment_key) @@ -1322,6 +1323,7 @@ class MSharedStory(mongo.Document): shared_stories = cls.objects.filter(**params) for shared_story in shared_stories: comments = shared_story.comments_with_author() + story['reply_count'] += len(comments['replies']) if shared_story.user_id in friends_with_comments: story['friend_comments'].append(comments) else: diff --git a/media/css/reader.css b/media/css/reader.css index 249e4a4fe..d9c63b997 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2048,7 +2048,7 @@ background: transparent; } #story_pane .NB-feed-story-comments { margin: -24px 200px 32px 28px; - padding: 1px 0 0; +/* padding: 1px 0 0;*/ max-width: 700px; border-top: 2px solid #353535; border-bottom: 1px solid #353535; @@ -2256,6 +2256,10 @@ background: transparent; padding: 1px 0; cursor: pointer; } +#story_pane .NB-story-comments-public-header-wrapper:first-child { + border-top: none; +} + #story_pane .NB-story-comments-public-header-wrapper { cursor: default; } @@ -2300,15 +2304,18 @@ background: transparent; #story_pane .NB-story-comments-shares-teaser { background-color: whiteSmoke; + background-image: -moz-linear-gradient(center bottom , #EBEBEC 10%, #F5F5F5 84%); color: #202020; cursor: default; text-shadow: 0 1px 0 #FFF; font-weight: bold; text-transform: uppercase; font-size: 10px; - padding: 8px 12px 0px; + padding: 8px 12px 0px 28px; overflow: hidden; height: 27px; + border-bottom: 1px solid #898989; + border-top: 1px solid #FFFFFF; -webkit-transition: all .12s ease-out; -moz-transition: all .12s ease-out; -o-transition: all .12s ease-out; @@ -2327,6 +2334,7 @@ background: transparent; #story_pane .NB-story-share-label { display: inline-block; margin: 0 4px 0 0; + float: right; } #story_pane .NB-story-share-profiles { display: inline-block; @@ -2336,12 +2344,33 @@ background: transparent; margin-top: -4px; overflow: hidden; } -#story_pane .NB-story-share-profiles.NB-story-share-profiles-public { +#story_pane .NB-story-share-profiles.NB-story-share-profiles-shares { float: right; } -#story_pane .NB-story-share-profiles.NB-story-share-profiles-public .NB-story-share-profile { +#story_pane .NB-story-share-profiles.NB-story-share-profiles-shares .NB-story-share-profile { float: right; } +#story_pane .NB-story-share-profiles .NB-story-share-profiles-comments-public, +#story_pane .NB-story-share-profiles .NB-story-share-profiles-shares-public { + opacity: .5; +} +#story_pane .NB-story-share-profiles .NB-story-share-profiles-comments-friends, +#story_pane .NB-story-share-profiles .NB-story-share-profiles-comments-public { + float: left; +} +#story_pane .NB-story-share-profiles .NB-story-share-profiles-shares-friends, +#story_pane .NB-story-share-profiles .NB-story-share-profiles-shares-public { + float: right; +} +#story_pane .NB-story-comments-label { + float: left; + margin-right: 12px; +} +#story_pane .NB-story-share-label { + float: right; + margin-left: 12px; +} + #story_pane .NB-story-share-profile { display: inline-block; diff --git a/media/js/newsblur/views/story_comments_view.js b/media/js/newsblur/views/story_comments_view.js index e46532efc..46843f164 100644 --- a/media/js/newsblur/views/story_comments_view.js +++ b/media/js/newsblur/views/story_comments_view.js @@ -26,21 +26,47 @@ NEWSBLUR.Views.StoryCommentsView = Backbone.View.extend({ render_teaser: function() { if (!this.model.get('share_count')) return; - var $share_count_public = this.$('.NB-story-share-profiles-public'); - _.each(this.model.get('shared_by_public'), function(user_id) { - var $thumb = NEWSBLUR.Views.ProfileThumb.create(user_id).render().el; - $share_count_public.append($thumb); + var $comments_friends = this.$('.NB-story-share-profiles-comments-friends'); + var $comments_public = this.$('.NB-story-share-profiles-comments-public'); + var comment_user_ids = []; + this.model.friend_comments.each(function(comment) { + var $thumb = NEWSBLUR.Views.ProfileThumb.create(comment.get('user_id')).render().el; + $comments_friends.append($thumb); + comment_user_ids.push(comment.get('user_id')); }); - var $share_count_friends = this.$('.NB-story-share-profiles-friends'); + this.model.public_comments.each(function(comment) { + var $thumb = NEWSBLUR.Views.ProfileThumb.create(comment.get('user_id')).render().el; + $comments_public.append($thumb); + comment_user_ids.push(comment.get('user_id')); + }); + + var $shares_friends = this.$('.NB-story-share-profiles-shares-friends'); + var $shares_public = this.$('.NB-story-share-profiles-shares-public'); _.each(this.model.get('shared_by_friends'), function(user_id) { + if (_.contains(comment_user_ids, user_id)) return; var $thumb = NEWSBLUR.Views.ProfileThumb.create(user_id).render().el; - $share_count_friends.append($thumb); + $shares_friends.append($thumb); + }); + _.each(this.model.get('shared_by_public'), function(user_id) { + if (_.contains(comment_user_ids, user_id)) return; + var $thumb = NEWSBLUR.Views.ProfileThumb.create(user_id).render().el; + $shares_public.append($thumb); }); }, render_comments_friends: function() { if (!this.model.get('comment_count_friends') || !this.model.get('comment_count')) return; + var $header = $.make('div', { + className: 'NB-story-comments-public-header-wrapper' + }, $.make('div', { + className: 'NB-story-comments-public-header' + }, [ + Inflector.pluralize(' comment', this.model.get('comment_count_friends'), true) + ])); + + this.$el.append($header); + this.model.friend_comments.each(_.bind(function(comment) { var $comment = new NEWSBLUR.Views.StoryComment({model: comment, story: this.model}).render().el; this.$el.append($comment); @@ -49,53 +75,67 @@ NEWSBLUR.Views.StoryCommentsView = Backbone.View.extend({ render_comments_public: function() { if (!this.model.get('comment_count_public') || !this.model.get('comment_count')) return; - - var $header = $.make('div', { - className: 'NB-story-comments-public-header-wrapper' - }, $.make('div', { - className: 'NB-story-comments-public-header' - }, Inflector.pluralize(' public comment', this.model.get('comment_count_public'), true))); - this.$el.append($header); + if (NEWSBLUR.assets.preference('hide_public_comments')) { + var $public_teaser = $.make('div', { className: 'NB-story-comments-public-teaser-wrapper' }, [ + $.make('div', { className: 'NB-story-comments-public-teaser' }, [ + 'There ', + Inflector.pluralize('is', this.model.get('comment_count_public')), + ' ', + $.make('b', this.model.get('comment_count_public')), + ' public ', + Inflector.pluralize('comment', this.model.get('comment_count_public')) + ]) + ]); + this.$el.append($public_teaser); + } else { + var $header = $.make('div', { + className: 'NB-story-comments-public-header-wrapper' + }, $.make('div', { + className: 'NB-story-comments-public-header' + }, Inflector.pluralize(' public comment', this.model.get('comment_count_public'), true))); - this.model.public_comments.each(_.bind(function(comment) { - var $comment = new NEWSBLUR.Views.StoryComment({model: comment, story: this.model}).render().el; - this.$el.append($comment); - }, this)); + this.$el.append($header); - // var $public_teaser = $.make('div', { className: 'NB-story-comments-public-teaser-wrapper' }, [ - // $.make('div', { className: 'NB-story-comments-public-teaser' }, [ - // 'There ', - // Inflector.pluralize('is', this.model.get('comment_count_public')), - // ' ', - // $.make('b', this.model.get('comment_count_public')), - // ' public ', - // Inflector.pluralize('comment', this.model.get('comment_count_public')) - // ]) - // ]); - // this.$el.append($public_teaser); + this.model.public_comments.each(_.bind(function(comment) { + var $comment = new NEWSBLUR.Views.StoryComment({model: comment, story: this.model}).render().el; + this.$el.append($comment); + }, this)); + } }, template: _.template('\ -
\ +
\
\ - <% if (story.get("share_count")) { %>\ -
\ - Shared by \ - <%= story.get("share_count") %>\ - <%= Inflector.pluralize("person", story.get("share_count")) %>\ + <% if (story.get("comment_count")) { %>\ +
\ + <%= story.get("comment_count") %>\ + <%= Inflector.pluralize("comment", story.get("comment_count")) %>\ + <% if (story.get("reply_count")) { %>\ + and \ + <%= story.get("reply_count") %>\ + <%= Inflector.pluralize("reply", story.get("reply_count")) %>\ + <% } %>\ +
\ +
\ +
\ +
\
\ - <% if (story.get("share_count_public")) { %>\ -
\ - <% } %>\ <% } %>\ <% if (story.get("share_count")) { %>\ - <% if (story.get("share_count_friends")) { %>\ -
Shared by:
\ - <% } %>\ - <% if (story.get("share_count_friends")) { %>\ -
\ - <% } %>\ +
\ + <% if (story.get("share_count_friends")) { %>\ +
\ + Shared by\ + <%= story.get("share_count") %>\ + <%= Inflector.pluralize("person", story.get("share_count")) %>\ +
\ +
\ +
\ +
\ +
\ + <% } %>\ +
\ <% } %>\
\
\ diff --git a/media/js/newsblur/views/story_detail_view.js b/media/js/newsblur/views/story_detail_view.js index c08306e8f..6f0404a7f 100644 --- a/media/js/newsblur/views/story_detail_view.js +++ b/media/js/newsblur/views/story_detail_view.js @@ -134,10 +134,11 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ template: _.template('\ <%= story_header %>\ +
\
\ <%= story.get("story_content") %>\
\ -
\ +
\
\
\
 
\ @@ -187,12 +188,16 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ }, render_comments: function() { - var $original_comments = this.$('.NB-feed-story-share-container,.NB-feed-story-comments'); + var $original_comments = this.$('.NB-feed-story-comments-container,.NB-feed-story-comments'); + var $original_shares = this.$('.NB-feed-story-shares-container,.NB-feed-story-shares'); if (this.model.get("comment_count") || this.model.get("share_count")) { var $comments = new NEWSBLUR.Views.StoryCommentsView({model: this.model}).render().el; $original_comments.replaceWith($comments); + var $shares = $('.NB-story-comments-shares-teaser-wrapper', $comments); + $original_shares.replaceWith($shares); } else if ($original_comments.length) { - $original_comments.replaceWith($.make('div', { className: 'NB-feed-story-share-container' })); + $original_comments.replaceWith($.make('div', { className: 'NB-feed-story-comments-container' })); + $original_shares.replaceWith($.make('div', { className: 'NB-feed-story-shares-container' })); } }, diff --git a/media/js/newsblur/views/story_share_view.js b/media/js/newsblur/views/story_share_view.js index c7a714eb3..3f9a821bc 100644 --- a/media/js/newsblur/views/story_share_view.js +++ b/media/js/newsblur/views/story_share_view.js @@ -348,10 +348,10 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({ }, show_posting_label: function(twitter, facebook) { - NEWSBLUR.log(["show_posting_label", twitter, facebook]); + var social_services = NEWSBLUR.assets.social_services; var $text = this.$('.NB-sideoption-share-crosspost-text'); - twitter = twitter || NEWSBLUR.assets.preference('post_to_twitter'); - facebook = facebook || NEWSBLUR.assets.preference('post_to_facebook'); + twitter = twitter || (social_services.twitter && social_services.twitter.twitter_uid && NEWSBLUR.assets.preference('post_to_twitter')); + facebook = facebook || (social_services.facebook && social_services.facebook.facebook_uid && NEWSBLUR.assets.preference('post_to_facebook')); if (twitter || facebook) { var message = "Post to ";