Showing Twitter/Facebook posting links more prominently.

This commit is contained in:
Samuel Clay 2012-07-10 14:43:33 -07:00
parent 64d607d7e9
commit bfbcf54d80
5 changed files with 71 additions and 16 deletions

View file

@ -1431,6 +1431,8 @@ class MSocialServices(mongo.Document):
facebook_picture_url = mongo.StringField()
facebook_refresh_date = mongo.DateTimeField()
upload_picture_url = mongo.StringField()
syncing_twitter = mongo.BooleanField()
syncing_facebook = mongo.BooleanField()
meta = {
'collection': 'social_services',

View file

@ -2437,27 +2437,31 @@ background: transparent;
color: #202020;
}
.NB-sideoption-share .NB-sideoption-share-crosspost {
margin-right: -4px;
margin: 8px 0;
overflow: hidden;
}
.NB-sideoption-share .NB-sideoption-share-crosspost-twitter,
.NB-sideoption-share .NB-sideoption-share-crosspost-facebook {
float: right;
float: left;
width: 16px;
height: 16px;
margin: 0 0 0 6px;
margin: 0 6px 0 0;
opacity: .4;
cursor: pointer;
-webkit-filter: grayscale(100%);
filter: gray;
}
.NB-sideoption-share .NB-sideoption-share-crosspost-twitter:hover,
.NB-sideoption-share .NB-sideoption-share-crosspost-facebook:hover {
opacity: .7;
-webkit-filter: none;
filter: none;
}
.NB-sideoption-share .NB-sideoption-share-crosspost-twitter.NB-active,
.NB-sideoption-share .NB-sideoption-share-crosspost-facebook.NB-active {
opacity: 1;
-webkit-filter: none;
filter: none;
}
.NB-sideoption-share .NB-sideoption-share-crosspost-twitter {
background: transparent url('/media/embed/reader/twitter_icon.png') no-repeat 0 0;
@ -2465,6 +2469,14 @@ background: transparent;
.NB-sideoption-share .NB-sideoption-share-crosspost-facebook {
background: transparent url('/media/embed/reader/facebook_icon.png') no-repeat 0 0;
}
.NB-sideoption-share .NB-sideoption-share-crosspost-text {
font-size: 9px;
text-transform: uppercase;
text-align: left;
color: #7483A2;
text-shadow: 0 1px 0 #FBFBFB;
line-height: 16px;
}
.NB-sideoption-share .NB-sideoption-share-comments {
width: 100%;
height: 52px;
@ -7907,7 +7919,7 @@ form.opml_import_form input {
}
.NB-modal-profile-editor .NB-tab.NB-tab-profile,
.NB-modal-profile-editor .NB-tab.NB-tab-blurblog {
height: auto;
height: 500px;
}
/* ================= */

View file

@ -99,7 +99,7 @@ _.extend(NEWSBLUR.ReaderIntro.prototype, {
$.make('input', { type: 'checkbox', id: 'NB-intro-uptodate-follow-newsblur' }),
$.make('label', { 'for': 'NB-intro-uptodate-follow-newsblur' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + 'img/reader/new-window-icon.png', className: 'NB-intro-uptodate-newwindow' }),
$.make('img', { src: 'http://img.tweetimag.es/i/newsblur_n.png', style: 'border-color: #505050;' }),
$.make('img', { src: 'http://avatars.io/twitter/newsblur', style: 'border-color: #505050;' }),
$.make('span', [
'Follow @newsblur on',
$.make('br'),
@ -112,7 +112,7 @@ _.extend(NEWSBLUR.ReaderIntro.prototype, {
$.make('input', { type: 'checkbox', id: 'NB-intro-uptodate-follow-samuelclay' }),
$.make('label', { 'for': 'NB-intro-uptodate-follow-samuelclay' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + 'img/reader/new-window-icon.png', className: 'NB-intro-uptodate-newwindow' }),
$.make('img', { src: 'http://img.tweetimag.es/i/samuelclay_n.png', style: 'border-color: #505050;' }),
$.make('img', { src: 'http://avatars.io/twitter/samuelclay', style: 'border-color: #505050;' }),
$.make('span', [
'Follow @samuelclay on',
$.make('br'),

View file

@ -292,11 +292,11 @@ _.extend(NEWSBLUR.ReaderTutorial.prototype, {
$.make('h4', 'Stay connected to NewsBlur on Twitter'),
$.make('div', { className: 'NB-tutorial-twitter' }, [
$.make('a', { className: 'NB-splash-link', href: 'http://twitter.com/samuelclay', target: '_blank' }, [
$.make('img', { src: 'http://img.tweetimag.es/i/samuelclay_n.png', style: 'border-color: #505050;' }),
$.make('img', { src: 'http://avatars.io/twitter/samuelclay', style: 'border-color: #505050;' }),
$.make('span', '@samuelclay')
]),
$.make('a', { className: 'NB-splash-link', href: 'http://twitter.com/newsblur', target: '_blank' }, [
$.make('img', { src: 'http://img.tweetimag.es/i/newsblur_n.png' }),
$.make('img', { src: 'http://avatars.io/twitter/newsblur' }),
$.make('span', '@newsblur')
])
]),

View file

@ -26,16 +26,19 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
<div class="NB-sideoption-share-wrapper">\
<div class="NB-sideoption-share">\
<div class="NB-sideoption-share-wordcount"></div>\
<div class="NB-sideoption-share-crosspost">\
<% if (social_services.twitter.twitter_uid) { %>\
<div class="NB-sideoption-share-crosspost-twitter"></div>\
<% } %>\
<% if (social_services.facebook.facebook_uid) { %>\
<div class="NB-sideoption-share-crosspost-facebook"></div>\
<% } %>\
</div>\
<div class="NB-sideoption-share-title">Comments:</div>\
<textarea class="NB-sideoption-share-comments"><%= story.get("shared_comments") %></textarea>\
<% if (social_services.twitter.twitter_uid || social_services.facebook.facebook_uid) { %>\
<div class="NB-sideoption-share-crosspost">\
<% if (social_services.twitter.twitter_uid) { %>\
<div class="NB-sideoption-share-crosspost-twitter"></div>\
<% } %>\
<% if (social_services.facebook.facebook_uid) { %>\
<div class="NB-sideoption-share-crosspost-facebook"></div>\
<% } %>\
<div class="NB-sideoption-share-crosspost-text"></div>\
</div>\
<% } %>\
<div class="NB-menu-manage-story-share-save NB-modal-submit-green NB-sideoption-share-save NB-modal-submit-button">Share</div>\
<div class="NB-menu-manage-story-share-unshare NB-modal-submit-grey NB-sideoption-share-unshare NB-modal-submit-button">Delete share</div>\
</div>\
@ -93,6 +96,7 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
$twitter_button.toggleClass('NB-active', !!NEWSBLUR.assets.preference('post_to_twitter'));
$facebook_button.toggleClass('NB-active', !!NEWSBLUR.assets.preference('post_to_facebook'));
this.update_share_button_label();
this.reset_posting_label();
var $share_clone = $share.clone();
var dialog_height = $share_clone.css({
@ -300,6 +304,7 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
}
$twitter_button.toggleClass('NB-active', NEWSBLUR.assets.preference('post_to_twitter'));
this.reset_posting_label();
},
toggle_facebook: function() {
@ -312,6 +317,42 @@ NEWSBLUR.Views.StoryShareView = Backbone.View.extend({
}
$facebook_button.toggleClass('NB-active', NEWSBLUR.assets.preference('post_to_facebook'));
this.reset_posting_label();
},
show_twitter_posting_label: function() {
this.show_posting_label(true, false);
},
show_facebook_posting_label: function() {
this.show_posting_label(false, true);
},
reset_posting_label: function() {
this.show_posting_label();
},
show_posting_label: function(twitter, facebook) {
console.log(["show_posting_label", twitter, facebook]);
var $text = this.$('.NB-sideoption-share-crosspost-text');
twitter = twitter || NEWSBLUR.assets.preference('post_to_twitter');
facebook = facebook || NEWSBLUR.assets.preference('post_to_facebook');
if (twitter || facebook) {
var message = "Post to ";
if (twitter && !facebook) {
message += "Twitter";
} else if (!twitter && facebook) {
message += "Facebook";
} else {
message += "Twitter & FB";
}
$text.text(message);
} else {
$text.text("");
}
}
});