Drawing out send email dialog. Still needs love and an entire backend.

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;
 }

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();
-        });
     }
     
 };

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);
         },
         

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' }, [
+        this.$modal = $.make('div', { className: 'NB-modal-email NB-modal' }, [
-            $.make('h2', { className: 'NB-modal-title' }, 'Goodies & Extras'),
+            $.make('h2', { className: 'NB-modal-title' }, 'Send Story by Email'),
-            $.make('div', { className: 'NB-goodies-group' }, [
+            $.make('h2', { className: 'NB-modal-subtitle' }, [
-              NEWSBLUR.generate_bookmarklet(),
+                $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: $.favicon(this.feed.favicon) }),
-              $.make('div', { className: 'NB-goodies-title' }, 'Add Site Bookmarklet')
+                $.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('div', { className: 'NB-modal-email-explanation' }, [
-              $.make('a', {
+                "Add an optional comment to send with the story. The contents of the story will be sent below this comment."
-                  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-goodies-group NB-modal-submit' }, [
+            $.make('div', { className: 'NB-modal-email-comments-container' }, [
-              $.make('a', {
+                $.make('textarea', { className: 'NB-modal-email-comments' })
-                  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-goodies-group NB-modal-submit' }, [
+            $.make('div', { className: 'NB-modal-email-name-container' }, [
-              $.make('a', {
+              '» Who is this from: ',
-                  className: 'NB-goodies-safari-link NB-modal-submit-button NB-modal-submit-green',
+              $.make('input', { className: 'NB-input NB-modal-email-name', value: NEWSBLUR.Globals.username })
-                  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-goodies-group NB-modal-submit' }, [
+            $.make('form', { className: 'NB-recommend-form' }, [
-              $.make('input', {
+                $.make('div', { className: 'NB-modal-submit' }, [
-                  className: 'NB-goodies-custom-input',
+                    $.make('input', { type: 'submit', className: 'NB-modal-submit-save NB-modal-submit-green', value: 'Send this story' }),
-                  value: 'http://www.newsblur.com/?url=BLOG_URL_GOES_HERE'
+                    ' or ',
-              }),
+                    $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel')
-              $.make('div', { className: 'NB-goodies-custom' }),
+                ])
-              $.make('div', { className: 'NB-goodies-title' }, 'Custom Add Site URL')
             ])
         ]);
     },

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',
         ),