diff --git a/media/css/reader.css b/media/css/reader.css index dc811200b..c6c4cf6f1 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -377,6 +377,7 @@ a img { text-transform: uppercase; text-shadow: 1px 1px 0 #EEEEEE; cursor: pointer; + position: relative; } #feed_list .feeds { @@ -443,6 +444,9 @@ a img { position: absolute; top: 2px; left: 2px; + background: transparent url('../img/icons/silk/building.png') no-repeat 0 0; + width: 16px; + height: 16px; } #feed_list .feed_title { display: block; @@ -450,7 +454,7 @@ a img { text-decoration: none; color: #272727; line-height: 1.3em; - height: 1.2em; + height: 14px; overflow: hidden; text-shadow: 0 1px 0 #EBF3FA; } @@ -460,6 +464,44 @@ a img { color: #000000; } +#feed_list .feed .NB-feedlist-manage-icon, +#feed_list .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 0px 3px; +} + +#feed_list .feed .NB-feedlist-manage-icon:hover, +#feed_list .folder_title .NB-feedlist-manage-icon:hover { + background: transparent url('../img/icons/silk/bullet_arrow_down.png') no-repeat -1px 3px; +} + +#feed_list .feed.NB-toplevel .NB-feedlist-manage-icon, +#feed_list .folder_title.NB-toplevel .NB-feedlist-manage-icon { + left: 0; + opacity: 1; + display: none; + background-position: 4px 3px !important; +} + +#feed_list .feed.NB-hover .NB-feedlist-manage-icon, +#feed_list .folder_title.NB-hover .NB-feedlist-manage-icon { + opacity: 1; + display: block; + background-position: 3px 3px; +} + +#feed_list .feed.NB-hover.NB-toplevel .feed_favicon { + display: none; +} +#feed_list .folder_title.NB-hover.NB-toplevel { + background: none; +} + #feed_list .feed_counts { position: absolute; right: 2px; @@ -710,10 +752,20 @@ background: transparent; background: transparent url("../img/icons/silk/cog.png") no-repeat center center; width: 16px; height: 16px; - display: none; +/* display: none;*/ cursor: pointer; padding: 0 0 0 38px; } +#story_titles .NB-feedbar .NB-feedbar-statistics { + background: transparent url('../img/icons/silk/chart_curve.png') no-repeat left center; + width: 16px; + height: 16px; +/* display: none;*/ + cursor: pointer; + padding: 0 4px 0 24px; + margin: 3px 0 0 0; +} + #story_titles .NB-feedbar .NB-feedbar-mark-feed-read { background-color: #3090cf; color: #F0F0F0; @@ -729,15 +781,6 @@ background: transparent; text-transform: uppercase; display: none; } -#story_titles .NB-feedbar .NB-feedbar-statistics { - background: transparent url('../img/icons/silk/chart_curve.png') no-repeat left center; - width: 16px; - height: 16px; - display: none; - cursor: pointer; - padding: 0 4px 0 24px; - margin: 3px 0 0 0; -} #story_titles .NB-feedbar .NB-feedbar-last-updated { color: #808080; text-shadow: 0 1px 0 #e6e6e6; @@ -859,7 +902,7 @@ background: transparent; background: transparent url('../img/icons/silk/bullet_red.png') no-repeat 14px 50%; } -#story_titles .story.NB-story-hover { +#story_titles .story.NB-hover { background: #f0f0f0; } @@ -905,7 +948,7 @@ background: transparent; display: none; } -#story_titles .NB-story-hover .NB-story-sentiment { +#story_titles .NB-hover .NB-story-sentiment { display: block; } diff --git a/media/img/icons/silk/bullet_arrow_right.png b/media/img/icons/silk/bullet_arrow_right.png new file mode 100644 index 000000000..0000585d3 Binary files /dev/null and b/media/img/icons/silk/bullet_arrow_right.png differ diff --git a/media/img/reader/feed_manage_menu_icon.png b/media/img/reader/feed_manage_menu_icon.png new file mode 100644 index 000000000..3f0c77cee Binary files /dev/null and b/media/img/reader/feed_manage_menu_icon.png differ diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 0196fe411..c76ffefd2 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -567,6 +567,8 @@ var $feed = this.make_feed_title_line(feed, true, 'feed'); $feeds.append($feed); if (depth == 0) { + this.hover_over_feed_titles(); + $feed.addClass('NB-toplevel'); $feed.css({'display': 'none'}).fadeIn(500); } @@ -580,8 +582,9 @@ for (var o in item) { var folder = item[o]; var $folder = $.make('li', { className: 'folder' }, [ - $.make('div', { className: 'folder_title' }, [ - $.make('span', { className: 'folder_title_text' }, o) + $.make('div', { className: 'folder_title ' + (depth==0 ? 'NB-toplevel':'') }, [ + $.make('span', { className: 'folder_title_text' }, o), + $.make('div', { className: 'NB-feedlist-manage-icon' }) ]), $.make('ul', { className: 'folder' }) ]).css({'display': 'none'}); @@ -601,6 +604,7 @@ } else { $feeds.append($folder.fadeIn(500)); } + self.hover_over_feed_titles($folder); }, 50); })($feeds, $folder, is_collapsed, collapsed_parent); this.make_feeds_folder($('ul.folder', $folder), folder, depth+1, is_collapsed); @@ -646,7 +650,8 @@ ])), (type == 'story' && $.make('div', { className: 'NB-feedbar-mark-feed-read' }, 'Mark All as Read')), (feed.has_exception && $.make('div', { className: 'NB-feed-exception-icon' })), - (feed.not_yet_fetched && $.make('div', { className: 'NB-feed-unfetched-icon' })) + (feed.not_yet_fetched && $.make('div', { className: 'NB-feed-unfetched-icon' })), + (type == 'feed' && $.make('div', { className: 'NB-feedlist-manage-icon' })) ]).data('feed_id', feed.id); return $feed; @@ -916,6 +921,26 @@ }); }, + hover_over_feed_titles: function($folder) { + var $feed_list = $folder || this.$s.$feed_list; + var $feeds = $('.feed, .folder_title', $feed_list); + $feeds.each(function() { + $(this).unbind('mouseenter').unbind('mouseleave'); + }); + + $feeds.hover(function() { + $('.NB-hover', $feed_list).removeClass('NB-hover'); + $(this).addClass("NB-hover"); + }, function() { + $('.NB-hover', $feed_list).removeClass('NB-hover'); + $(this).removeClass("NB-hover"); + }); + }, + + open_feedlist_manage_menu: function($feed, type) { + NEWSBLUR.log(['Showing', $feed, $feed.data('feed_id'), type]); + }, + // =============================== // = Feed bar - Individual Feeds = // =============================== @@ -1736,11 +1761,11 @@ }); $('.story', $story_titles) .hover(function() { - $(this).siblings('.story.NB-story-hover').removeClass('NB-story-hover'); - $(this).addClass("NB-story-hover"); + $(this).siblings('.story.NB-hover').removeClass('NB-hover'); + $(this).addClass("NB-hover"); }, function() { - $(this).siblings('.story.NB-story-hover').removeClass('NB-story-hover'); - $(this).removeClass("NB-story-hover"); + $(this).siblings('.story.NB-hover').removeClass('NB-hover'); + $(this).removeClass("NB-hover"); }); }, @@ -2957,7 +2982,20 @@ // = Feeds = - var exception = false; + var stopPropagation = false; + $.targetIs(e, { tagSelector: '#feed_list .NB-feedlist-manage-icon' }, function($t, $p) { + e.preventDefault(); + e.stopPropagation(); + if (!self.flags['sorting_feed']) { + stopPropagation = true; + if ($t.parent().hasClass('feed')) { + self.open_feedlist_manage_menu($t.parents('.feed').eq(0), 'feed'); + } else { + self.open_feedlist_manage_menu($t.parents('.folder').eq(0), 'folder'); + } + } + }); + if (stopPropagation) return; $.targetIs(e, { tagSelector: '#feed_list .feed.NB-feed-exception' }, function($t, $p){ e.preventDefault(); e.stopPropagation(); @@ -2967,7 +3005,7 @@ self.open_feed_exception_modal(feed_id, $t); } }); - if (exception) return; + if (stopPropagation) return; $.targetIs(e, { tagSelector: '#feed_list .feed' }, function($t, $p){ e.preventDefault();