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

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

@ -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();
@ -104,16 +103,6 @@
// = 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);

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', [
$.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,6 +158,8 @@ 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({
@ -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);
}

2
templates/reader/feeds.xhtml
View file

@ -3,7 +3,7 @@
{% block content %}
<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">
<ul class="taskbar_nav taskbar_nav_feeds">