Adding comment box to share.

This commit is contained in:
Samuel Clay 2011-12-13 09:57:04 -08:00
parent ae0e45b698
commit 7f3ac8c843
2 changed files with 104 additions and 3 deletions

View file

@ -1927,7 +1927,7 @@ background: transparent;
}
#story_pane .NB-feed-story-content {
margin: 0 140px 32px 28px;
margin: 0 200px 32px 28px;
padding: 12px 0px;
max-width: 700px;
}
@ -1937,6 +1937,7 @@ background: transparent;
right: 12px;
bottom: 32px;
text-align: center;
width: 172px;
}
#story_pane .NB-feed-story-sideoptions-container {
@ -1977,16 +1978,63 @@ background: transparent;
-moz-transition: all .12s ease-out;
-o-transition: all .12s ease-out;
-ms-transition: all .12s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#story_pane .NB-sideoption:hover {
cursor: pointer;
}
#story_pane .NB-sideoption:hover .NB-sideoption-icon,
#story_pane .NB-sideoption:hover .NB-sideoption-title {
#story_pane .NB-sideoption:hover .NB-sideoption-title,
#story_pane .NB-sideoption.NB-active .NB-sideoption-icon,
#story_pane .NB-sideoption.NB-active .NB-sideoption-title {
background-color: #2B478C;
color: #D7DDF7;
opacity: 1;
text-shadow: 0 1px 0 #101010;
}
#story_pane .NB-sideoption-share-wrapper {
background-color: #EBF6DA;
height: 0;
overflow: hidden;
}
#story_pane .NB-sideoption-share {
padding: 4px 12px 6px;
}
#story_pane .NB-sideoption-share .NB-sideoption-share-title {
text-transform: uppercase;
font-size: 10px;
text-align: left;
text-shadow: 0 1px 0 #F6F6F6;
}
#story_pane .NB-sideoption-share .NB-sideoption-share-optional {
text-transform: uppercase;
float: right;
color: #808080;
font-size: 10px;
text-shadow: 0 1px 0 #F6F6F6;
}
#story_pane .NB-sideoption-share .NB-sideoption-share-comments {
width: 100%;
}
#story_pane .NB-sideoption-share .NB-sideoption-share-save {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: white;
padding: 2px 6px;
margin: 2px auto;
width: 90%;
background-color: #639510;
cursor: pointer;
-moz-box-shadow:2px 2px 0 #95AB76;
-webkit-box-shadow:2px 2px 0 #95AB76;
box-shadow:2px 2px 0 #95AB76;
text-shadow: 0 1px 0 #101010;
}
#story_pane .NB-feed-story-endbar {
height: 8px;
border-top: 1px solid #404040;

View file

@ -2668,6 +2668,51 @@
this.update_starred_count();
},
open_feed_story_share: function(story_id, feed_id) {
var $feed_story = this.find_story_in_feed_view(story_id);
var $sideoption = $('.NB-sideoption.NB-feed-story-share', $feed_story);
var $share = $('.NB-sideoption-share-wrapper', $feed_story);
var $story_content = $('.NB-feed-story-content', $feed_story);
if ($sideoption.hasClass('NB-active')) {
$share.animate({
'height': 0
}, {
'duration': 300,
'easing': 'easeInOutQuint',
'queue': false
});
$sideoption.removeClass('NB-active');
return;
}
$sideoption.addClass('NB-active');
var $share_clone = $share.clone();
var full_height = $share_clone.css({
'height': 'auto',
'position': 'absolute',
'visibility': 'hidden'
}).appendTo($share.parent()).height();
$share_clone.remove();
$share.animate({
'height': full_height
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false
});
if ($('.NB-feed-story-sideoptions-container', $feed_story).height() + full_height > $story_content.height()) {
$story_content.animate({
'height': $('.NB-feed-story-sideoptions-container', $feed_story).height() + full_height
}, {
'duration': 350,
'easing': 'easeInOutQuint',
'queue': false
});
}
},
send_story_to_instapaper: function(story_id) {
var story = this.model.get_story(story_id);
var url = 'http://www.instapaper.com/edit';
@ -3528,6 +3573,14 @@
$.make('div', { className: 'NB-sideoption NB-feed-story-share' }, [
$.make('div', { className: 'NB-sideoption-icon'}, ' '),
$.make('div', { className: 'NB-sideoption-title'}, 'Share this story')
]),
$.make('div', { className: 'NB-sideoption-share-wrapper' }, [
$.make('div', { className: 'NB-sideoption-share' }, [
$.make('div', { className: 'NB-sideoption-share-optional' }, 'Optional'),
$.make('div', { className: 'NB-sideoption-share-title' }, 'Comments:'),
$.make('textarea', { className: 'NB-sideoption-share-comments' }),
$.make('div', { className: 'NB-sideoption-share-save NB-modal-submit-green NB-modal-submit-button' }, 'Share')
])
])
])
]).data('story', story.id).data('story_id', story.id).data('feed_id', story.story_feed_id);
@ -5990,7 +6043,7 @@
var $story = $t.closest('.NB-feed-story');
var feed_id = $story.data('feed_id');
var story_id = $story.data('story_id');
self.open_story_trainer(story_id, feed_id);
self.open_feed_story_share(story_id, feed_id);
});