Changing river to hide folder counts. Also fixing the manage menu's arrow positioning for all permutable cases of {inverse, toplevel, folder/feed}

This commit is contained in:
Samuel Clay 2010-12-12 20:06:32 -05:00
parent f96b2d2308
commit 97df61d1c7
2 changed files with 139 additions and 44 deletions

View file

@ -376,7 +376,7 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
}
.NB-feedlist li.folder {
padding: 2px 0 0;
padding: 0px 0 0;
margin: 0px 0 0;
}
@ -387,8 +387,9 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
}
.NB-feedlist .folder_title {
background: transparent url('../img/icons/silk/folder.png') no-repeat 3px 1px;
padding: 3px 0 4px 22px;
padding: 5px 0 4px 22px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
font-weight: bold;
display: block;
color: #606060;
@ -398,6 +399,19 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
position: relative;
}
.NB-feedlist li.folder .NB-folder-icon {
background: transparent url('../img/icons/silk/folder.png') no-repeat 0 0;
width: 16px;
height: 16px;
position: absolute;
left: 2px;
top: 3px;
}
.NB-feedlist li.folder .folder_title.NB-toplevel.NB-hover .NB-folder-icon {
display: none;
}
.NB-feedlist .feeds {
margin-left: 22px;
}
@ -509,64 +523,85 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
.NB-feedlist .feed .NB-feedlist-manage-icon,
.NB-feedlist .folder_title .NB-feedlist-manage-icon {
opacity: 0;
position: absolute;
left: -20px;
top: -1px;
width: 20px;
height: 22px;
background: transparent url('../img/icons/silk/bullet_arrow_right.png') no-repeat 3px 4px;
opacity: 0;
position: absolute;
left: -20px;
top: -1px;
width: 20px;
height: 22px;
background: transparent url('../img/icons/silk/bullet_arrow_right.png') no-repeat 3px 4px;
}
.NB-feedlist .folder_title .NB-feedlist-manage-icon {
background-position: 3px 3px;
background-position: 3px 5px;
}
.NB-feedlist .feed .NB-feedlist-manage-icon:hover,
.NB-feedlist .folder_title .NB-feedlist-manage-icon:hover {
background: transparent url('../img/icons/silk/bullet_arrow_down.png') no-repeat 3px 4px;
background: transparent url('../img/icons/silk/bullet_arrow_down.png') no-repeat 3px 4px;
}
.NB-feedlist .folder_title .NB-feedlist-manage-icon:hover {
background-position: 3px 3px;
background-position: 3px 5px;
}
.NB-feedlist .feed.NB-hover-inverse .NB-feedlist-manage-icon:hover,
.NB-feedlist .folder_title.NB-hover-inverse .NB-feedlist-manage-icon:hover {
background: transparent url('../img/icons/silk/bullet_arrow_up.png') no-repeat 3px 2px;
background: transparent url('../img/icons/silk/bullet_arrow_up.png') no-repeat 3px 2px;
}
.NB-feedlist .feed.NB-toplevel .NB-feedlist-manage-icon,
.NB-feedlist .folder_title.NB-toplevel .NB-feedlist-manage-icon {
left: 0;
opacity: 1;
display: none;
background-position: 5px 4px;
left: 0;
opacity: 1;
display: none;
background-position: 5px 4px;
}
.NB-feedlist .folder_title.NB-toplevel .NB-feedlist-manage-icon {
background-position: 5px 3px;
background-position: 5px 5px;
}
.NB-feedlist .feed.NB-hover .NB-feedlist-manage-icon,
.NB-feedlist .folder_title.NB-hover .NB-feedlist-manage-icon {
opacity: 1;
display: block;
opacity: 1;
display: block;
}
.NB-feedlist .folder .NB-feedlist-river-icon {
position: absolute;
right: 4px;
top: 2px;
width: 16px;
height: 16px;
background: transparent url('../img/icons/silk/application_view_list.png') no-repeat 0 0;
opacity: .65;
display: none;
.NB-feedlist .folder .folder_title .feed_counts_floater {
margin-right: 2px;
}
.NB-feedlist .folder .folder_title:hover > .NB-feedlist-river-icon {
display: block;
.NB-feedlist .folder .folder_title .NB-feedlist-river-icon {
position: absolute;
top: 3px;
right: 4px;
width: 16px;
height: 16px;
background: transparent url('../img/icons/silk/images.png') no-repeat 0 0;
opacity: .6;
display: none;
}
.NB-feedlist .folder .NB-feedlist-river-icon:hover {
.NB-feedlist .folder .folder_title.NB-hover .NB-feedlist-river-icon:hover {
opacity: 1;
}
.NB-feedlist .folder .folder_title.NB-hover .NB-feedlist-river-icon {
display: block;
opacity: .6;
}
.NB-feedlist .folder .folder_title.NB-hover .feed_counts_floater {
display: none;
}
.NB-feedlist .folder .folder_title.NB-hover.NB-feedlist-folder-title-recently-collapsed .feed_counts_floater {
display: block;
}
.NB-feedlist .folder.NB-selected > .folder_title .NB-feedlist-river-icon {
display: block;
opacity: 1;
}
.NB-feedlist .folder.NB-selected > .folder_title .feed_counts_floater {
display: none;
}
.NB-feedlist .feed.NB-hover.NB-toplevel .feed_favicon {
display: none;
}
@ -587,6 +622,12 @@ body.NB-theme-serif #story_pane .NB-feed-story-content {
border-top: 1px solid #A8A8A8;
border-bottom: 1px solid #A8A8A8;
}
.NB-feedlist .folder.NB-selected > .folder_title {
background: #f6a828 url('../theme/images/ui-bg_highlight-hard_35_f6a828_1x100.png') 0 50% repeat-x;
border-top: 1px solid #A8A8A8;
border-bottom: 1px solid #A8A8A8;
}
.NB-feedlist .NB-feeds-list-highlight {
position: relative;
@ -1601,7 +1642,7 @@ background: transparent;
position: absolute;
top: 1px;
left: 2px;
background: transparent url('../img/icons/silk/application_view_list.png') no-repeat 1px 0;
background: transparent url('../img/icons/silk/images.png') no-repeat 1px 0;
width: 16px;
height: 16px;
}

View file

@ -679,9 +679,10 @@
var folder = item[o];
var $folder = $.make('li', { className: 'folder' }, [
$.make('div', { className: 'folder_title ' + (depth==0 ? 'NB-toplevel':'') }, [
$.make('span', { className: 'folder_title_text' }, o),
$.make('div', { className: 'NB-folder-icon' }),
$.make('div', { className: 'NB-feedlist-river-icon' }),
$.make('div', { className: 'NB-feedlist-manage-icon' }),
$.make('div', { className: 'NB-feedlist-river-icon' })
$.make('span', { className: 'folder_title_text' }, o)
]),
$.make('ul', { className: 'folder' }, [
$.make('li', { className: 'feed NB-empty' })
@ -939,6 +940,7 @@
var $counts = $('.feed_counts_floater', $folder_title);
$counts.remove();
$children = $('li.feed', $children).not('.NB-feed-inactive');
var $river = $('.NB-feedlist-river-icon', $folder_title);
var positive_count = 0;
var neutral_count = 0;
@ -952,6 +954,16 @@
$('.unread_count_negative.unread_count_full', $children).each(function() {
negative_count += parseInt($(this).text(), 10);
});
if ($folder_title.hasClass('NB-hover')) {
$river.animate({'opacity': 0}, {'duration': 100});
$folder_title.addClass('NB-feedlist-folder-title-recently-collapsed');
$folder_title.one('mouseover', function() {
$river.css({'opacity': ''});
$folder_title.removeClass('NB-feedlist-folder-title-recently-collapsed');
});
}
var $counts = this.make_feed_counts_floater(positive_count, neutral_count, negative_count);
$folder_title.prepend($counts.css({
'opacity': 0
@ -961,9 +973,18 @@
hide_collapsed_folder_count: function($folder_title) {
var $counts = $('.feed_counts_floater', $folder_title);
var $river = $('.NB-feedlist-river-icon', $folder_title);
$counts.animate({'opacity': 0}, {
'duration': 300
});
$river.animate({'opacity': .6}, {'duration': 400});
$folder_title.removeClass('NB-feedlist-folder-title-recently-collapsed');
$folder_title.one('mouseover', function() {
$river.css({'opacity': ''});
// $folder_title.removeClass('NB-feedlist-folder-title-recently-collapsed');
});
},
hover_over_feed_titles: function($folder) {
@ -1167,6 +1188,7 @@
this.$s.$feed_view.empty();
this.$s.$starred_header.removeClass('NB-selected');
this.$s.$river_header.removeClass('NB-selected');
$('.NB-selected', this.$s.$feed_list).removeClass('NB-selected');
this.$s.$body.removeClass('NB-view-starred');
$('.task_view_page', this.$s.$taskbar).removeClass('NB-disabled');
},
@ -1386,19 +1408,23 @@
// = River of News =
// =================
open_river_stories: function(feeds) {
open_river_stories: function(feeds, folder_title) {
var $story_titles = this.$s.$story_titles;
$story_titles.empty().scrollTop('0px');
this.reset_feed();
this.hide_splash_page();
this.active_feed = 'river';
if (!folder_title) {
this.active_feed = 'river';
this.$s.$river_header.addClass('NB-selected');
} else {
this.active_feed = 'river:' + folder_title;
}
$story_titles.data('page', 0);
$story_titles.data('feed_id', null);
this.iframe_scroll = null;
this.mark_feed_as_selected(null, null);
this.$s.$river_header.addClass('NB-selected');
this.$s.$body.addClass('NB-view-river');
$('.task_view_page', this.$s.$taskbar).addClass('NB-disabled');
var explicit_view_setting = NEWSBLUR.Preferences.view_settings[this.active_feed];
@ -1429,6 +1455,13 @@
}
},
open_river_stories_for_folder: function($folder, folder_title) {
var feeds = this.list_feeds_with_unreads_in_folder($folder);
this.open_river_stories(feeds, folder_title);
$folder.addClass('NB-selected');
},
list_feeds_with_unreads_in_folder: function($folder) {
},
@ -2857,7 +2890,8 @@
var inverse = type == 'folder' ?
$('.folder_title', $item).hasClass("NB-hover-inverse") :
$item.hasClass("NB-hover-inverse");
var toplevel = $item.hasClass("NB-toplevel");
var toplevel = $item.hasClass("NB-toplevel") ||
$item.children('.folder_title').hasClass("NB-toplevel");
if (type == 'folder') {
feed_id = $('.folder_title_text', $item).eq(0).text();
}
@ -2873,9 +2907,16 @@
$('.NB-task-manage').addClass('NB-hover');
$manage_menu_container.corner('tl tr 8px');
} else if (type == 'feed' || type == 'folder') {
var left, top;
// NEWSBLUR.log(['menu open', $item, inverse, toplevel, type]);
if (inverse) {
var left = toplevel ? 0 : -20;
var top = toplevel ? 24 : 21;
if (type == 'feed') {
left = toplevel ? 0 : -20;
top = toplevel ? 21 : 22;
} else if (type == 'folder') {
left = toplevel ? 0 : -20;
top = toplevel ? 23 : 24;
}
var $align;
if (type == 'feed') $align = $item;
else $align = $('.folder_title', $item);
@ -2888,8 +2929,13 @@
$(this).prependTo($(this).parent());
});
} else {
var left = toplevel ? 2 : -20;
var top = 21;
if (type == 'feed') {
left = toplevel ? 2 : -20;
top = toplevel ? 21 : 21;
} else if (type == 'folder') {
left = toplevel ? 2 : -20;
top = toplevel ? 22 : 21;
}
$manage_menu_container.align($item, '-top -left', {
'top': top,
'left': left
@ -3863,6 +3909,14 @@
self.open_feed(feed_id, false, $t);
}
});
$.targetIs(e, { tagSelector: '#feed_list .folder_title .NB-feedlist-river-icon' }, function($t, $p){
e.preventDefault();
stopPropagation = true;
var $folder = $t.closest('li.folder');
var folder_title = $t.siblings('.folder_title_text').text();
self.open_river_stories_for_folder($folder, folder_title);
});
if (stopPropagation) return;
$.targetIs(e, { tagSelector: '#feed_list .folder_title' }, function($folder, $p){
e.preventDefault();
if (!self.flags['sorting_feed']) {