From 03d74d53136e74aeda3dbc5581ed12f1334ecbec Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Sat, 7 May 2011 21:12:13 -0400 Subject: [PATCH] Cleaning up the send email dialog (as well as the add site dialog). Everything looks great, save for an email icon and a bit more validation. --- apps/reader/views.py | 12 +++-- media/css/modals.css | 8 +++ media/css/reader.css | 67 +++++++++++++++++--------- media/js/newsblur/modal.js | 4 ++ media/js/newsblur/reader_add_feed.js | 23 ++++++--- media/js/newsblur/reader_send_email.js | 65 +++++++++++++++++-------- templates/base.html | 1 + 7 files changed, 128 insertions(+), 52 deletions(-) diff --git a/apps/reader/views.py b/apps/reader/views.py index 70b38f246..0e0f5dda8 100644 --- a/apps/reader/views.py +++ b/apps/reader/views.py @@ -700,9 +700,12 @@ def _parse_user_info(user): def add_url(request): code = 0 url = request.POST['url'] - folder = request.POST.get('folder', '') - - code, message, _ = UserSubscription.add_subscription(user=request.user, feed_address=url, folder=folder) + if not url: + code = -1 + message = 'Enter in the website address or the feed URL.' + else: + folder = request.POST.get('folder', '') + code, message, _ = UserSubscription.add_subscription(user=request.user, feed_address=url, folder=folder) return dict(code=code, message=message) @@ -967,7 +970,8 @@ def send_story_email(request): story_id = request.POST['story_id'] feed_id = request.POST['feed_id'] to_address = request.POST['to'] - from_name = request.POST['from'] + from_name = request.POST['from_name'] + from_email = request.POST['from_email'] comments = request.POST['comments'] from_email = 'share@newsblur.com' diff --git a/media/css/modals.css b/media/css/modals.css index 1c4b72fb3..a7f3fab8a 100644 --- a/media/css/modals.css +++ b/media/css/modals.css @@ -112,6 +112,13 @@ float: left; } +.NB-modal .NB-error { + display: none; + font-weight: bold; + font-size: 14px; + color: #7E0418; + padding: 0 0 12px 0; +} .NB-modal .NB-modal-title { font-weight: bold; color: #303030; @@ -124,6 +131,7 @@ font-size: 14px; position: relative; background-color: #F6F6F6; + overflow: hidden; } .NB-modal .NB-modal-feed-title { display: block; diff --git a/media/css/reader.css b/media/css/reader.css index eaf9650a5..69dcdb7ce 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -33,6 +33,10 @@ a img { .NB-right { float: right; } +.NB-raquo { + font-size: 18px; + vertical-align: baseline; +} /* ==================== */ /* = Styling & Themes = */ @@ -2830,7 +2834,7 @@ a.NB-splash-link:hover { /* ===================== */ .NB-modal.NB-add .NB-fieldset-fields { - margin: 14px 0 14px 16px; + margin: 14px 0 0 16px; } .NB-add .NB-add-danger { @@ -2839,7 +2843,7 @@ a.NB-splash-link:hover { font-size: 12px; color: #535558; font-weight: bold; - margin: 8px 0 0; + margin: 8px 0 12px; float: left; } @@ -2870,7 +2874,11 @@ a.NB-splash-link:hover { } .NB-add input[type=text] { - width: 340px; + width: 308px; + margin-bottom: 16px; +} +.NB-add .NB-add-add-folder input[type=text] { + width: 380px; } .NB-add .NB-folder-icon { @@ -2885,14 +2893,6 @@ a.NB-splash-link:hover { margin-left: 6px; } -.NB-add .NB-error { - display: none; - font-weight: bold; - font-size: 14px; - color: #7E0418; - margin: 10px 0 0 0; -} - .NB-add .NB-add-google-reader-arrow { width: 16px; height: 16px; @@ -4383,12 +4383,27 @@ background: transparent; .NB-modal-email .NB-modal-loading { margin: 6px 8px 0; } +.NB-modal-email label { + float: left; +} + .NB-modal-email .NB-input { - width: 300px; + width: 430px; + margin-left: 120px; + display: block; } .NB-modal-email .NB-modal-email-feed { - font-size: 13px; - margin: 4px 0; + font-size: 11px; + margin: 0 0 6px; + line-height: 10px; +} +.NB-modal-email .NB-modal-email-feed .NB-modal-feed-image { + height: 12px; + width: 12px; +} +.NB-modal-email .NB-modal-email-feed .NB-modal-feed-title { + margin-left: 0; + overflow: visible; } .NB-modal-email .NB-modal-email-story-permalink { color: #808080; @@ -4396,29 +4411,32 @@ background: transparent; } .NB-modal.NB-modal-email .NB-modal-email-comments-container { padding: 6px 0 0; - margin: 4px 0; + margin: 0; } .NB-modal-email .NB-modal-email-comments { - width: 558px; + width: 550px; height: 80px; font-size: 14px; color: #404040; line-height: 20px; - padding: 8px; + padding: 8px 0 0 8px; margin: 0; - border: 1px solid #E0E0E0; + border: 1px solid #F0F0F0; font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } .NB-modal-email .NB-modal-email-to-container, .NB-modal-email .NB-modal-email-from-container { color: #505050; font-size: 12px; + padding: 12px 0 0; +} +.NB-modal-email .NB-modal-email-to-container { margin: 4px 0; - border-top: 1px solid #F0F0F0; - padding: 6px 0 6px; + border-top: 1px solid #D0D0D0; +} +.NB-modal-email .NB-modal-email-from-container { } .NB-modal-email .NB-modal-email-from { - } .NB-modal-email .NB-modal-email-explanation { clear: both; @@ -4426,9 +4444,12 @@ background: transparent; font-size: 12px; margin: 0; padding: 14px 1px 0; - border-top: 1px solid #F0F0F0; } - +.NB-modal.NB-modal-email .NB-error { + float: right; + font-size: 12px; + margin-top: 8px; +} /* ========================= */ /* = Feed Exceptions Modal = */ diff --git a/media/js/newsblur/modal.js b/media/js/newsblur/modal.js index e89ed3cc1..ccda5ddb4 100644 --- a/media/js/newsblur/modal.js +++ b/media/js/newsblur/modal.js @@ -39,6 +39,10 @@ NEWSBLUR.Modal.prototype = { }); }, + resize: function() { + $(window).trigger('resize.simplemodal'); + }, + close: function() { $('.NB-modal-loading', this.$modal).removeClass('NB-active'); $.modal.close(); diff --git a/media/js/newsblur/reader_add_feed.js b/media/js/newsblur/reader_add_feed.js index 49ec91e7d..b8d79e80c 100644 --- a/media/js/newsblur/reader_add_feed.js +++ b/media/js/newsblur/reader_add_feed.js @@ -23,19 +23,19 @@ NEWSBLUR.ReaderAddFeed.prototype = { var self = this; this.$modal = $.make('div', { className: 'NB-add NB-modal' }, [ - $.make('h2', { className: 'NB-modal-title' }, 'Add feeds and folders'), + $.make('h2', { className: 'NB-modal-title' }, 'Add sites and folders'), $.make('div', { className: 'NB-add-form' }, [ $.make('div', { className: 'NB-fieldset NB-add-add-url NB-modal-submit' }, [ $.make('h5', [ $.make('div', { className: 'NB-add-folders' }, this.make_folders()), - 'Add a new feed' + 'Add a new site' ]), $.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', [ $.make('div', { className: 'NB-loading' }), - $.make('label', { 'for': 'NB-add-url' }, 'RSS or URL: '), + $.make('label', { 'for': 'NB-add-url' }, 'Website or RSS: '), $.make('input', { type: 'text', id: 'NB-add-url', className: 'NB-input NB-add-url', name: 'url', value: self.options.url }), - $.make('input', { type: 'submit', value: 'Add it', className: 'NB-modal-submit-green NB-add-url-submit' }), + $.make('input', { type: 'submit', value: 'Add site', className: 'NB-modal-submit-green NB-add-url-submit' }), $.make('div', { className: 'NB-error' }) ]) ]) @@ -285,6 +285,7 @@ NEWSBLUR.ReaderAddFeed.prototype = { }, save_add_url: function() { + var $submit = $('.NB-add-add-url input[type=submit]', this.$modal); var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url'); @@ -293,28 +294,34 @@ NEWSBLUR.ReaderAddFeed.prototype = { $error.slideUp(300); $loading.addClass('NB-active'); - + $submit.addClass('NB-disabled').val('Adding...'); + this.model.save_add_url(url, folder, $.rescope(this.post_save_add_url, this)); }, post_save_add_url: function(e, data) { NEWSBLUR.log(['Data', data]); + var $submit = $('.NB-add-add-url input[type=submit]', this.$modal); var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url'); $loading.removeClass('NB-active'); + $submit.removeClass('NB-disabled'); if (data.code > 0) { NEWSBLUR.reader.load_feeds(); NEWSBLUR.reader.load_recommended_feed(); NEWSBLUR.reader.handle_mouse_indicator_hover(); $.modal.close(); + $submit.val('Added!'); } else { var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); $error.text(data.message); $error.slideDown(300); + $submit.val('Add Site'); } }, save_add_folder: function() { + var $submit = $('.NB-add-add-folder input[type=submit]', this.$modal); var $error = $('.NB-error', '.NB-fieldset.NB-add-add-folder'); var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-folder'); @@ -323,24 +330,28 @@ NEWSBLUR.ReaderAddFeed.prototype = { $error.slideUp(300); $loading.addClass('NB-active'); + $submit.addClass('NB-disabled').val('Adding...'); this.model.save_add_folder(folder, parent_folder, $.rescope(this.post_save_add_folder, this)); }, post_save_add_folder: function(e, data) { - NEWSBLUR.log(['Data', data]); + var $submit = $('.NB-add-add-folder input[type=submit]', this.$modal); var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-folder'); $loading.removeClass('NB-active'); + $submit.removeClass('NB-disabled'); if (data.code > 0) { NEWSBLUR.reader.load_feeds(); _.defer(function() { NEWSBLUR.reader.open_add_feed_modal(); }); + $submit.val('Added!'); } else { var $error = $('.NB-error', '.NB-fieldset.NB-add-add-folder'); $error.text(data.message); $error.slideDown(300); + $submit.val('Add Folder'); } } diff --git a/media/js/newsblur/reader_send_email.js b/media/js/newsblur/reader_send_email.js index 5cc31c6b0..c924b40d2 100644 --- a/media/js/newsblur/reader_send_email.js +++ b/media/js/newsblur/reader_send_email.js @@ -29,16 +29,19 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, { $.make('span', { className: 'NB-modal-loading NB-spinner'}), $.make('h2', { className: 'NB-modal-title' }, 'Send Story by Email'), $.make('h2', { className: 'NB-modal-subtitle' }, [ - $.make('div', { className: 'NB-modal-email-story-title' }, this.story.story_title), $.make('div', { className: 'NB-modal-email-feed' }, [ $.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-modal-email-to-container' }, [ - '» Recipient\'s email: ', - $.make('input', { className: 'NB-input NB-modal-to', name: 'to', value: "" }) + $.make('label', { 'for': 'NB-send-email-to' }, [ + $.make('span', { className: 'NB-raquo' }, '»'), + ' Recipient\'s email: ' + ]), + $.make('input', { className: 'NB-input NB-modal-to', name: 'to', id: 'NB-send-email-to', value: "" }) ]), $.make('div', { className: 'NB-modal-email-explanation' }, [ "Add an optional comment to send with the story. The story will be sent below your comment." @@ -47,10 +50,23 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, { $.make('textarea', { className: 'NB-modal-email-comments' }) ]), $.make('div', { className: 'NB-modal-email-from-container' }, [ - '» Your name: ', - $.make('input', { className: 'NB-input NB-modal-email-from', name: 'from', value: NEWSBLUR.Globals.username }) + $.make('div', [ + $.make('label', { 'for': 'NB-send-email-from-name' }, [ + $.make('span', { className: 'NB-raquo' }, '»'), + ' Your name: ' + ]), + $.make('input', { className: 'NB-input NB-modal-email-from', name: 'from_name', id: 'NB-send-email-from-name', value: this.model.preference('full_name') || NEWSBLUR.Globals.username || '' }) + ]), + $.make('div', { style: 'margin-top: 8px' }, [ + $.make('label', { 'for': 'NB-send-email-from-email' }, [ + $.make('span', { className: 'NB-raquo' }, '»'), + ' Your email: ' + ]), + $.make('input', { className: 'NB-input NB-modal-email-from', name: 'from_email', id: 'NB-send-email-from-email', value: NEWSBLUR.Globals.email || this.model.preference('email') || '' }) + ]) ]), $.make('form', { className: 'NB-recommend-form' }, [ + $.make('div', { className: 'NB-error' }), $.make('div', { className: 'NB-modal-submit' }, [ $.make('input', { type: 'submit', className: 'NB-modal-submit-save NB-modal-submit-green', value: 'Send this story' }), ' or ', @@ -61,25 +77,36 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, { }, save: function(e) { - var self = this; - var from = $('input[name=from]', this.$modal).val(); - var to = $('input[name=to]', this.$modal).val(); - var comments = $('textarea', this.$modal).val(); - var $save = $('input[type=submit]', this.$modal); + var self = this; + var from_name = $('input[name=from_name]', this.$modal).val(); + var from_email = $('input[name=from_email]', this.$modal).val(); + var to = $('input[name=to]', this.$modal).val(); + var comments = $('textarea', this.$modal).val(); + var $save = $('input[type=submit]', this.$modal); $save.addClass('NB-disabled').val('Sending...'); $('.NB-modal-loading', this.$modal).addClass('NB-active'); + this.model.preference('full_name', from_name); + this.model.preference('email', from_email); + $('.NB-error', this.$modal).fadeOut(500); this.model.send_story_email({ - story_id : this.story_id, - feed_id : this.feed_id, - from : from, - to : to, - comments : comments - }, this.close, function(error) { - $('.NB-modal-loading', self.$modal).removeClass('NB-active'); - $save.removeClass('NB-disabled').val('Send this story'); - }); + story_id : this.story_id, + feed_id : this.feed_id, + from_name : from_name, + from_email : from_email, + to : to, + comments : comments + }, _.bind(function(data) { + if (!data || data.code < 0) { + $('.NB-error', this.$modal).html(data.message).fadeIn(500); + $('.NB-modal-loading', this.$modal).removeClass('NB-active'); + $save.removeClass('NB-disabled').val('Send this story'); + } else { + $save.val('Sent!'); + this.close(); + } + }, this)); }, // =========== diff --git a/templates/base.html b/templates/base.html index 7574e7712..fdddd16b8 100644 --- a/templates/base.html +++ b/templates/base.html @@ -14,6 +14,7 @@ 'is_premium' : {{ user.profile.is_premium|yesno:"true,false" }}, 'secret_token' : "{{ user.profile.secret_token }}", 'username' : "{{ user.username|safe }}", + 'email' : "{{ user.email|safe }}", 'google_favicon_url' : 'http://www.google.com/s2/favicons?domain_url=', 'MEDIA_URL' : "{{ MEDIA_URL }}" };