From d64d94e289755e6a50622b4297f374d522df1a3d Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Tue, 13 Apr 2010 16:32:17 -0400 Subject: [PATCH] Adding loading indicators to add feed/folder and opml upload. --- media/css/reader.css | 19 +++++++++++++---- media/js/newsblur/reader.js | 30 ++++++++++----------------- media/js/newsblur/reader_add_feed.js | 31 ++++++++++++++++++++++------ templates/reader/feeds.xhtml | 2 +- 4 files changed, 52 insertions(+), 30 deletions(-) diff --git a/media/css/reader.css b/media/css/reader.css index 8c86c2ce3..75c724727 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -147,14 +147,20 @@ background: transparent; background-color: #D7DDE6; overflow-y: auto; font-size: 11px; + list-style: none; + margin: 0; + padding: 0; } -#feed_list .folder { + +#feed_list ul.folder { margin: 6px 0px 4px; + padding: 0 0 0 22px; + list-style: none; background: transparent url('../img/icons/silk/folder.png') no-repeat 3px 1px; } -#feed_list .folder .folder_title { - padding: 3px 0px 4px 22px; +#feed_list ul.folder .folder_title { + padding: 3px 0 4px; font-weight: bold; display: block; color: #404040; @@ -1042,7 +1048,8 @@ form.opml_import_form input { padding: 12px; } -.NB-modal .NB-modal-loading { +.NB-modal .NB-modal-loading, +.NB-modal .NB-loading { width: 16px; height: 16px; float: right; @@ -1053,6 +1060,10 @@ form.opml_import_form input { background: transparent url('../img/reader/recycle_spinner.gif') no-repeat 0 0; } +.NB-modal .NB-loading.NB-active { + background: transparent url('../img/reader/spinner_ball.gif') no-repeat 0 0; +} + .NB-modal h2 { margin: 0; padding: 0; diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index f094af5a1..aae98b0f4 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -33,7 +33,6 @@ $('#story_titles').scroll($.rescope(this.handle_scroll_story_titles, this)); this.$feed_view.scroll($.rescope(this.handle_scroll_feed_view, this)); - this.load_page(); this.load_feeds(); this.apply_resizable_layout(); this.cornerize_buttons(); @@ -103,17 +102,7 @@ // ======== // = Page = // ======== - - load_page: function() { - // this.resize_story_content_pane(); - // this.resize_feed_list_pane(); - this.stylize_login_form(); - }, - - stylize_login_form: function() { - // DD_roundies.addRule('.NB-login form input', '4px'); - }, - + apply_resizable_layout: function() { var outerLayout, rightLayout, contentLayout, leftLayout; @@ -375,14 +364,16 @@ if (typeof item == "number") { var feed = this.model.feeds[item]; - var $feed = this.make_feed_title_line(feed); + var $feed = this.make_feed_title_line(feed, true); $feeds.append($feed); } else if (typeof item == "object") { for (var o in item) { var folder = item[o]; - var $folder = $.make('div', { className: 'folder' }, [ - $.make('span', { className: 'folder_title' }, o), - $.make('div', { className: 'feeds' }, this.make_feeds_folder(folder)) + var $folder = $.make('li', { className: 'folder' }, [ + $.make('ul', { className: 'folder' }, [ + $.make('li', { className: 'folder_title' }, o), + this.make_feeds_folder(folder) + ]) ]); $feeds.append($folder); } @@ -392,10 +383,10 @@ $('.feed', $feeds).tsort('.feed_title'); $('.folder', $feeds).tsort('.folder_title'); - return $feeds; + return $feeds.children(); }, - make_feed_title_line: function(feed) { + make_feed_title_line: function(feed, list_item) { var unread_class = ''; if (feed.unread_count_positive) { unread_class += ' unread_positive'; @@ -406,7 +397,7 @@ if (feed.unread_count_negative) { unread_class += ' unread_negative'; } - var $feed = $.make('div', { className: 'feed ' + unread_class }, [ + var $feed = $.make((list_item?'li':'div'), { className: 'feed ' + unread_class }, [ $.make('div', { className: 'feed_counts' }, [ $.make('div', { className: 'feed_counts_floater' }, [ $.make('span', { @@ -508,6 +499,7 @@ this.active_feed = feed_id; this.$story_titles.data('page', 0); this.$story_titles.data('feed_id', feed_id); + this.iframe_scroll = null; this.show_feed_title_in_stories($story_titles, feed_id); this.mark_feed_as_selected(feed_id, $feed_link); diff --git a/media/js/newsblur/reader_add_feed.js b/media/js/newsblur/reader_add_feed.js index 3a78baec4..76cba0deb 100644 --- a/media/js/newsblur/reader_add_feed.js +++ b/media/js/newsblur/reader_add_feed.js @@ -30,6 +30,7 @@ NEWSBLUR.ReaderAddFeed.prototype = { ]), $.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', [ + $.make('div', { className: 'NB-loading' }), $.make('label', { 'for': 'NB-add-url' }, 'RSS or URL: '), $.make('input', { type: 'text', id: 'NB-add-url', className: 'NB-add-url', name: 'url' }), $.make('input', { type: 'submit', value: 'Add it', className: 'NB-add-url-submit' }), @@ -37,25 +38,28 @@ NEWSBLUR.ReaderAddFeed.prototype = { ]) ]) ]), - $.make('div', { className: 'NB-fieldset' }, [ + $.make('div', { className: 'NB-fieldset NB-add-add-folder' }, [ $.make('h5', [ $.make('div', { className: 'NB-add-folders' }, this.make_folders()), 'Add a new folder' ]), $.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', [ + $.make('div', { className: 'NB-loading' }), $.make('label', { 'for': 'NB-add-folder' }, [ $.make('div', { className: 'NB-folder-icon' }) ]), $.make('input', { type: 'text', id: 'NB-add-folder', className: 'NB-add-folder', name: 'url' }), - $.make('input', { type: 'submit', value: 'Add folder', className: 'NB-add-folder-submit' }) + $.make('input', { type: 'submit', value: 'Add folder', className: 'NB-add-folder-submit' }), + $.make('div', { className: 'NB-error' }) ]) ]) ]), - $.make('div', { className: 'NB-fieldset' }, [ + $.make('div', { className: 'NB-fieldset NB-add-opml' }, [ $.make('h5', 'Upload OPML (from Google Reader)'), $.make('div', { className: 'NB-fieldset-fields' }, [ $.make('form', { method: 'post', enctype: 'multipart/form-data', className: 'NB-add-form' }, [ + $.make('div', { className: 'NB-loading' }), $.make('input', { type: 'file', name: 'file', id: 'opml_file_input' }), $.make('input', { type: 'submit', className: 'NB-add-opml-button', value: 'Upload OPML File' }).click(function(e) { e.preventDefault(); @@ -154,7 +158,9 @@ NEWSBLUR.ReaderAddFeed.prototype = { handle_opml_upload: function() { var self = this; - + var $loading = $('.NB-fieldset.NB-add-opml .NB-loading'); + $loading.addClass('NB-active'); + // NEWSBLUR.log(['Uploading']); $.ajaxFileUpload({ url: '/opml/opml_upload', @@ -163,6 +169,9 @@ NEWSBLUR.ReaderAddFeed.prototype = { dataType: 'json', success: function (data, status) { + var $loading = $('.NB-fieldset.NB-add-opml .NB-loading'); + $loading.removeClass('NB-active'); + if (typeof data.code != 'undefined') { if (data.code <= 0) { // NEWSBLUR.log(['Success - Error', data.code]); @@ -227,13 +236,18 @@ NEWSBLUR.ReaderAddFeed.prototype = { save_add_url: function(url, folder) { var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); + var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url'); $error.slideUp(300); + $loading.addClass('NB-active'); 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 $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url'); + $loading.removeClass('NB-active'); + if (data.code > 0) { NEWSBLUR.reader.load_feeds(); $.modal.close(); @@ -245,19 +259,24 @@ NEWSBLUR.ReaderAddFeed.prototype = { }, save_add_folder: function(folder, parent_folder) { - var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); + var $error = $('.NB-error', '.NB-fieldset.NB-add-add-folder'); + var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-folder'); $error.slideUp(300); + $loading.addClass('NB-active'); 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 $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-folder'); + $loading.removeClass('NB-active'); + if (data.code > 0) { NEWSBLUR.reader.load_feeds(); $.modal.close(); } else { - var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); + var $error = $('.NB-error', '.NB-fieldset.NB-add-add-folder'); $error.text(data.message); $error.slideDown(300); } diff --git a/templates/reader/feeds.xhtml b/templates/reader/feeds.xhtml index 41fd277ca..d9466f120 100644 --- a/templates/reader/feeds.xhtml +++ b/templates/reader/feeds.xhtml @@ -3,7 +3,7 @@ {% block content %}
-
+