public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-08-21 05:45:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding loading indicators to add feed/folder and opml upload.

Browse source
This commit is contained in:
Samuel Clay 2010-04-13 16:32:17 -04:00
parent 1ff73b0d9c
commit d64d94e289
4 changed files with 52 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
media/css/reader.css
View file

@ -147,14 +147,20 @@ background: transparent;
background-color: #D7DDE6; background-color: #D7DDE6;
overflow-y: auto; overflow-y: auto;
font-size: 11px; font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
} }
#feed_list .folder {
#feed_list ul.folder {
margin: 6px 0px 4px; margin: 6px 0px 4px;
padding: 0 0 0 22px;
list-style: none;
background: transparent url('../img/icons/silk/folder.png') no-repeat 3px 1px; background: transparent url('../img/icons/silk/folder.png') no-repeat 3px 1px;
} }
#feed_list .folder .folder_title { #feed_list ul.folder .folder_title {
padding: 3px 0px 4px 22px; padding: 3px 0 4px;
font-weight: bold; font-weight: bold;
display: block; display: block;
color: #404040; color: #404040;
@ -1042,7 +1048,8 @@ form.opml_import_form input {
padding: 12px; padding: 12px;
} }
.NB-modal .NB-modal-loading { .NB-modal .NB-modal-loading,
.NB-modal .NB-loading {
width: 16px; width: 16px;
height: 16px; height: 16px;
float: right; float: right;
@ -1053,6 +1060,10 @@ form.opml_import_form input {
background: transparent url('../img/reader/recycle_spinner.gif') no-repeat 0 0; 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 { .NB-modal h2 {
margin: 0; margin: 0;
padding: 0; padding: 0;

28
media/js/newsblur/reader.js
View file

@ -33,7 +33,6 @@
$('#story_titles').scroll($.rescope(this.handle_scroll_story_titles, this)); $('#story_titles').scroll($.rescope(this.handle_scroll_story_titles, this));
this.$feed_view.scroll($.rescope(this.handle_scroll_feed_view, this)); this.$feed_view.scroll($.rescope(this.handle_scroll_feed_view, this));
this.load_page();
this.load_feeds(); this.load_feeds();
this.apply_resizable_layout(); this.apply_resizable_layout();
this.cornerize_buttons(); this.cornerize_buttons();
@ -104,16 +103,6 @@
// = Page = // = 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() { apply_resizable_layout: function() {
var outerLayout, rightLayout, contentLayout, leftLayout; var outerLayout, rightLayout, contentLayout, leftLayout;
@ -375,14 +364,16 @@
if (typeof item == "number") { if (typeof item == "number") {
var feed = this.model.feeds[item]; 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); $feeds.append($feed);
} else if (typeof item == "object") { } else if (typeof item == "object") {
for (var o in item) { for (var o in item) {
var folder = item[o]; var folder = item[o];
var $folder = $.make('div', { className: 'folder' }, [ var $folder = $.make('li', { className: 'folder' }, [
$.make('span', { className: 'folder_title' }, o), $.make('ul', { className: 'folder' }, [
$.make('div', { className: 'feeds' }, this.make_feeds_folder(folder)) $.make('li', { className: 'folder_title' }, o),
this.make_feeds_folder(folder)
])
]); ]);
$feeds.append($folder); $feeds.append($folder);
} }
@ -392,10 +383,10 @@
$('.feed', $feeds).tsort('.feed_title'); $('.feed', $feeds).tsort('.feed_title');
$('.folder', $feeds).tsort('.folder_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 = ''; var unread_class = '';
if (feed.unread_count_positive) { if (feed.unread_count_positive) {
unread_class += ' unread_positive'; unread_class += ' unread_positive';
@ -406,7 +397,7 @@
if (feed.unread_count_negative) { if (feed.unread_count_negative) {
unread_class += ' unread_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' }, [
$.make('div', { className: 'feed_counts_floater' }, [ $.make('div', { className: 'feed_counts_floater' }, [
$.make('span', { $.make('span', {
@ -508,6 +499,7 @@
this.active_feed = feed_id; this.active_feed = feed_id;
this.$story_titles.data('page', 0); this.$story_titles.data('page', 0);
this.$story_titles.data('feed_id', feed_id); this.$story_titles.data('feed_id', feed_id);
this.iframe_scroll = null;
this.show_feed_title_in_stories($story_titles, feed_id); this.show_feed_title_in_stories($story_titles, feed_id);
this.mark_feed_as_selected(feed_id, $feed_link); this.mark_feed_as_selected(feed_id, $feed_link);

29
media/js/newsblur/reader_add_feed.js
View file

@ -30,6 +30,7 @@ NEWSBLUR.ReaderAddFeed.prototype = {
]), ]),
$.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', { className: 'NB-fieldset-fields' }, [
$.make('div', [ $.make('div', [
$.make('div', { className: 'NB-loading' }),
$.make('label', { 'for': 'NB-add-url' }, 'RSS or URL: '), $.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: 'text', id: 'NB-add-url', className: 'NB-add-url', name: 'url' }),
$.make('input', { type: 'submit', value: 'Add it', className: 'NB-add-url-submit' }), $.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('h5', [
$.make('div', { className: 'NB-add-folders' }, this.make_folders()), $.make('div', { className: 'NB-add-folders' }, this.make_folders()),
'Add a new folder' 'Add a new folder'
]), ]),
$.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', { className: 'NB-fieldset-fields' }, [
$.make('div', [ $.make('div', [
$.make('div', { className: 'NB-loading' }),
$.make('label', { 'for': 'NB-add-folder' }, [ $.make('label', { 'for': 'NB-add-folder' }, [
$.make('div', { className: 'NB-folder-icon' }) $.make('div', { className: 'NB-folder-icon' })
]), ]),
$.make('input', { type: 'text', id: 'NB-add-folder', className: 'NB-add-folder', name: 'url' }), $.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('h5', 'Upload OPML (from Google Reader)'),
$.make('div', { className: 'NB-fieldset-fields' }, [ $.make('div', { className: 'NB-fieldset-fields' }, [
$.make('form', { method: 'post', enctype: 'multipart/form-data', className: 'NB-add-form' }, [ $.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: 'file', name: 'file', id: 'opml_file_input' }),
$.make('input', { type: 'submit', className: 'NB-add-opml-button', value: 'Upload OPML File' }).click(function(e) { $.make('input', { type: 'submit', className: 'NB-add-opml-button', value: 'Upload OPML File' }).click(function(e) {
e.preventDefault(); e.preventDefault();
@ -154,6 +158,8 @@ NEWSBLUR.ReaderAddFeed.prototype = {
handle_opml_upload: function() { handle_opml_upload: function() {
var self = this; var self = this;
var $loading = $('.NB-fieldset.NB-add-opml .NB-loading');
$loading.addClass('NB-active');
// NEWSBLUR.log(['Uploading']); // NEWSBLUR.log(['Uploading']);
$.ajaxFileUpload({ $.ajaxFileUpload({
@ -163,6 +169,9 @@ NEWSBLUR.ReaderAddFeed.prototype = {
dataType: 'json', dataType: 'json',
success: function (data, status) success: function (data, status)
{ {
var $loading = $('.NB-fieldset.NB-add-opml .NB-loading');
$loading.removeClass('NB-active');
if (typeof data.code != 'undefined') { if (typeof data.code != 'undefined') {
if (data.code <= 0) { if (data.code <= 0) {
// NEWSBLUR.log(['Success - Error', data.code]); // NEWSBLUR.log(['Success - Error', data.code]);
@ -227,13 +236,18 @@ NEWSBLUR.ReaderAddFeed.prototype = {
save_add_url: function(url, folder) { save_add_url: function(url, folder) {
var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url'); var $error = $('.NB-error', '.NB-fieldset.NB-add-add-url');
var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url');
$error.slideUp(300); $error.slideUp(300);
$loading.addClass('NB-active');
this.model.save_add_url(url, folder, $.rescope(this.post_save_add_url, this)); this.model.save_add_url(url, folder, $.rescope(this.post_save_add_url, this));
}, },
post_save_add_url: function(e, data) { post_save_add_url: function(e, data) {
NEWSBLUR.log(['Data', data]); NEWSBLUR.log(['Data', data]);
var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-url');
$loading.removeClass('NB-active');
if (data.code > 0) { if (data.code > 0) {
NEWSBLUR.reader.load_feeds(); NEWSBLUR.reader.load_feeds();
$.modal.close(); $.modal.close();
@ -245,19 +259,24 @@ NEWSBLUR.ReaderAddFeed.prototype = {
}, },
save_add_folder: function(folder, parent_folder) { 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); $error.slideUp(300);
$loading.addClass('NB-active');
this.model.save_add_folder(folder, parent_folder, $.rescope(this.post_save_add_folder, this)); this.model.save_add_folder(folder, parent_folder, $.rescope(this.post_save_add_folder, this));
}, },
post_save_add_folder: function(e, data) { post_save_add_folder: function(e, data) {
NEWSBLUR.log(['Data', data]); NEWSBLUR.log(['Data', data]);
var $loading = $('.NB-loading', '.NB-fieldset.NB-add-add-folder');
$loading.removeClass('NB-active');
if (data.code > 0) { if (data.code > 0) {
NEWSBLUR.reader.load_feeds(); NEWSBLUR.reader.load_feeds();
$.modal.close(); $.modal.close();
} else { } 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.text(data.message);
$error.slideDown(300); $error.slideDown(300);
} }

2
templates/reader/feeds.xhtml
View file

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<div class="left-pane"> <div class="left-pane">
<div class="left-center" id="feed_list"></div> <ul class="left-center" id="feed_list"></ul>
<div class="NB-taskbar left-south"> <div class="NB-taskbar left-south">
<ul class="taskbar_nav taskbar_nav_feeds"> <ul class="taskbar_nav taskbar_nav_feeds">