mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Arrows for folder/feed actions. They have click handlers and are properly positioned for all feeds/folders.
This commit is contained in:
Samuel Clay
parent
57bc5ade0c
commit
2b2305d08f
4 changed files with 103 additions and 22 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
media/img/icons/silk/bullet_arrow_right.png
Normal file
BIN
media/img/icons/silk/bullet_arrow_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 B |
BIN
media/img/reader/feed_manage_menu_icon.png
Normal file
BIN
media/img/reader/feed_manage_menu_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 377 B |
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue