diff --git a/media/css/reader.css b/media/css/reader.css index eeded5563..923774e59 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -4130,6 +4130,14 @@ background: transparent; .NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-readitlater .NB-menu-manage-thirdparty-readitlater { opacity: 1; } +.NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-email .NB-menu-manage-image, +.NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-email .NB-menu-manage-thirdparty-icon { + opacity: .2; +} +.NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-email .NB-menu-manage-thirdparty-email { + opacity: 1; +} + .NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-readability .NB-menu-manage-image, .NB-menu-manage .NB-menu-manage-story-thirdparty.NB-menu-manage-highlight-readability .NB-menu-manage-thirdparty-icon { opacity: .2; @@ -4365,6 +4373,47 @@ background: transparent; } +/* ===================== */ +/* = Email Story Modal = */ +/* ===================== */ + +.NB-modal-email .NB-modal-loading { + margin: 6px 8px 0; +} +.NB-modal.NB-modal-email .NB-modal-email-comments-container { + padding: 6px 0; + margin: 4px 0; + border-top: 1px solid #C0C0C0; + border-bottom: 1px solid #C0C0C0; +} +.NB-modal-email .NB-modal-email-comments { + width: 558px; + height: 80px; + font-size: 14px; + color: #404040; + line-height: 20px; + padding: 8px; + margin: 0; + border: 1px solid #E0E0E0; + font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; +} +.NB-modal-email .NB-modal-email-name-container { + color: #505050; + font-size: 12px; + margin: 4px 0; +} +.NB-modal-email .NB-modal-email-name { + +} +.NB-modal-email .NB-modal-email-explanation { + clear: both; + color: #505050; + font-size: 12px; + margin: 12px 0 14px; + padding: 0 1px; +} + + /* ========================= */ /* = Feed Exceptions Modal = */ /* ========================= */ @@ -5005,6 +5054,9 @@ background: transparent; .NB-modal-preferences .NB-preference-story-share label[for=NB-preference-story-share-readitlater] { background: transparent url('../img/reader/readitlater.png') no-repeat 0 0; } +.NB-modal-preferences .NB-preference-story-share label[for=NB-preference-story-share-email] { + background: transparent url('../img/reader/email.png') no-repeat 0 0; +} .NB-modal-preferences .NB-preference-story-share label[for=NB-preference-story-share-readability] { background: transparent url('../img/reader/readability.png') no-repeat 0 0; } diff --git a/media/js/newsblur/modal.js b/media/js/newsblur/modal.js index d8722fd78..626940d03 100644 --- a/media/js/newsblur/modal.js +++ b/media/js/newsblur/modal.js @@ -8,28 +8,6 @@ NEWSBLUR.Modal = function(options) { NEWSBLUR.Modal.prototype = { - runner: function() { - this.make_modal(); - this.open_modal(); - - this.$modal.bind('click', $.rescope(this.handle_click, this)); - }, - - make_modal: function() { - var self = this; - - this.$modal = $.make('div', { className: 'NB-modal-recommend NB-modal' }, [ - $.make('h2', { className: 'NB-modal-title' }, 'Recommend this Site'), - $.make('form', { className: 'NB-recommend-form' }, [ - $.make('div', { className: 'NB-modal-submit' }, [ - $.make('input', { type: 'submit', className: 'NB-modal-submit-save NB-modal-submit-green', value: 'Recommend Site' }), - ' or ', - $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel') - ]) - ]) - ]); - }, - open_modal: function() { var self = this; @@ -59,19 +37,6 @@ NEWSBLUR.Modal.prototype = { $('.NB-modal-holder').empty().remove(); } }); - }, - - // =========== - // = Actions = - // =========== - - handle_click: function(elem, e) { - var self = this; - - $.targetIs(e, { tagSelector: '.NB-modal-cancel' }, function($t, $p) { - e.preventDefault(); - $.modal.close(); - }); } }; \ No newline at end of file diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 5ee1821f5..f0d6c33a8 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -2446,7 +2446,7 @@ }, send_story_to_email: function(story_id) { - NEWSBLUR.reader_send_email = new NEWSBLUR.ReaderSendEmail({'story_id': story_id}); + NEWSBLUR.reader_send_email = new NEWSBLUR.ReaderSendEmail(story_id); this.mark_story_as_read(story_id); }, diff --git a/media/js/newsblur/reader_send_email.js b/media/js/newsblur/reader_send_email.js index f22e0a5c7..0844b5416 100644 --- a/media/js/newsblur/reader_send_email.js +++ b/media/js/newsblur/reader_send_email.js @@ -1,15 +1,16 @@ -NEWSBLUR.ReaderSendEmail = function(options) { +NEWSBLUR.ReaderSendEmail = function(story_id, options) { var defaults = {}; this.options = $.extend({}, defaults, options); this.model = NEWSBLUR.AssetModel.reader(); - this.story_id = options.story_id; + this.story_id = story_id; this.story = this.model.get_story(story_id); + this.feed = this.model.get_feed(this.story.story_feed_id); this.runner(); }; -NEWSBLUR.ReaderSendEmail.prototype = _.extend(NEWSBLUR.Modal.prototype, { +NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, { runner: function() { this.make_modal(); @@ -21,50 +22,30 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend(NEWSBLUR.Modal.prototype, { make_modal: function() { var self = this; - this.$modal = $.make('div', { className: 'NB-modal-goodies NB-modal' }, [ - $.make('h2', { className: 'NB-modal-title' }, 'Goodies & Extras'), - $.make('div', { className: 'NB-goodies-group' }, [ - NEWSBLUR.generate_bookmarklet(), - $.make('div', { className: 'NB-goodies-title' }, 'Add Site Bookmarklet') + this.$modal = $.make('div', { className: 'NB-modal-email NB-modal' }, [ + $.make('h2', { className: 'NB-modal-title' }, 'Send Story by Email'), + $.make('h2', { className: 'NB-modal-subtitle' }, [ + $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: $.favicon(this.feed.favicon) }), + $.make('div', { className: 'NB-modal-feed-title' }, this.feed.feed_title), + $.make('div', { className: 'NB-modal-email-story-title' }, this.story.story_title), + $.make('div', { className: 'NB-modal-email-story-permalink' }, this.story.story_permalink) ]), - $.make('div', { className: 'NB-goodies-group NB-modal-submit' }, [ - $.make('a', { - className: 'NB-goodies-firefox-link NB-modal-submit-button NB-modal-submit-green', - href: '#' - }, 'Add to Firefox'), - $.make('div', { className: 'NB-goodies-firefox' }), - $.make('div', { className: 'NB-goodies-title' }, 'Firefox: Register Newsblur as an RSS reader') + $.make('div', { className: 'NB-modal-email-explanation' }, [ + "Add an optional comment to send with the story. The contents of the story will be sent below this comment." ]), - $.make('div', { className: 'NB-goodies-group NB-modal-submit' }, [ - $.make('a', { - className: 'NB-goodies-chrome-link NB-modal-submit-button NB-modal-submit-green', - href: '#' - }, 'Add to Chrome'), - $.make('div', { className: 'NB-goodies-chrome' }), - $.make('div', { className: 'NB-goodies-title' }, 'Google Chome: NewsBlur Chrome Web App') + $.make('div', { className: 'NB-modal-email-comments-container' }, [ + $.make('textarea', { className: 'NB-modal-email-comments' }) ]), - $.make('div', { className: 'NB-goodies-group NB-modal-submit' }, [ - $.make('a', { - className: 'NB-goodies-safari-link NB-modal-submit-button NB-modal-submit-green', - href: '#' - }, 'Add to Safari'), - $.make('div', { className: 'NB-goodies-safari' }), - $.make('div', { className: 'NB-goodies-title' }, 'Safari: Register Newsblur as an RSS reader'), - $.make('div', { className: 'NB-goodies-subtitle' }, [ - 'To use this extension, extract and move the NewsBlur Safari Helper.app ', - 'to your Applications folder. Then in ', - $.make('b', 'Safari > Settings > RSS'), - ' choose the new NewsBlur Safari Helper.app. Then clicking on the RSS button in ', - 'Safari will open the feed in NewsBlur. Simple!' - ]) + $.make('div', { className: 'NB-modal-email-name-container' }, [ + '» Who is this from: ', + $.make('input', { className: 'NB-input NB-modal-email-name', value: NEWSBLUR.Globals.username }) ]), - $.make('div', { className: 'NB-goodies-group NB-modal-submit' }, [ - $.make('input', { - className: 'NB-goodies-custom-input', - value: 'http://www.newsblur.com/?url=BLOG_URL_GOES_HERE' - }), - $.make('div', { className: 'NB-goodies-custom' }), - $.make('div', { className: 'NB-goodies-title' }, 'Custom Add Site URL') + $.make('form', { className: 'NB-recommend-form' }, [ + $.make('div', { className: 'NB-modal-submit' }, [ + $.make('input', { type: 'submit', className: 'NB-modal-submit-save NB-modal-submit-green', value: 'Send this story' }), + ' or ', + $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel') + ]) ]) ]); }, diff --git a/settings.py b/settings.py index bc19111bc..9b96be6e9 100644 --- a/settings.py +++ b/settings.py @@ -121,6 +121,7 @@ COMPRESS_JS = { 'js/newsblur/assetmodel.js', 'js/newsblur/reader.js', 'js/newsblur/generate_bookmarklet.js', + 'js/newsblur/modal.js', 'js/newsblur/reader_classifier.js', 'js/newsblur/reader_add_feed.js', 'js/newsblur/reader_mark_read.js', @@ -131,6 +132,7 @@ COMPRESS_JS = { 'js/newsblur/reader_feed_exception.js', 'js/newsblur/reader_keyboard.js', 'js/newsblur/reader_recommend_feed.js', + 'js/newsblur/reader_send_email.js', 'js/newsblur/about.js', 'js/newsblur/faq.js', ),