mirror of
https://github.com/viq/NewsBlur.git
synced 2025-08-05 16:49:45 +00:00
Refactoring the shit out of the feed-header top links (everything river, starred stories).
This commit is contained in:
Samuel Clay
parent
fdafb280dd
commit
baad347a39
3 changed files with 153 additions and 154 deletions
|
|
@ -1869,11 +1869,11 @@ background: transparent;
|
|||
/* = Feeds Header = */
|
||||
/* ================ */
|
||||
|
||||
.NB-feeds-header-container {
|
||||
.NB-feeds-header-wrapper {
|
||||
border-bottom: 1px solid #777D86;
|
||||
}
|
||||
|
||||
.NB-feeds-header {
|
||||
.NB-feeds-header-dashboard {
|
||||
background: #4F5358 url("../img/reader/feeds_header_background.png") repeat-x 0 -22px;
|
||||
color: #FFF;
|
||||
height: 15px;
|
||||
|
|
@ -1884,213 +1884,193 @@ background: transparent;
|
|||
border-bottom: 1px solid #E9E9E9;
|
||||
}
|
||||
|
||||
.NB-feeds-header:hover {
|
||||
.NB-feeds-header-dashboard:hover {
|
||||
color: #DCDCDC;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.NB-feeds-header .NB-feeds-header-right {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-right {
|
||||
float: right;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.NB-feeds-header .NB-feeds-header-left {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-left {
|
||||
float: left;
|
||||
color: #FFF;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.NB-feeds-header .NB-feeds-header-count {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-count {
|
||||
padding: 0 0 0 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-count.NB-empty {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-count.NB-empty {
|
||||
opacity: .45;
|
||||
color: #B0B0B0;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-negative {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-negative {
|
||||
background: transparent url('../img/icons/silk/bullet_red.png') no-repeat 2px -1px;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-neutral {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-neutral {
|
||||
background: transparent url('../img/icons/silk/bullet_yellow.png') no-repeat 2px -1px;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-positive {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-positive {
|
||||
background: transparent url('../img/icons/silk/bullet_green.png') no-repeat 2px -1px;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-right {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-right {
|
||||
position: relative;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-sites {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-sites {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
padding-right: 16px;
|
||||
padding-top: 1px;
|
||||
background: transparent url('../img/icons/silk/bullet_orange.png') no-repeat right 0;
|
||||
}
|
||||
.NB-feedlist-hide-read-feeds .NB-feeds-header .NB-feeds-header-sites {
|
||||
.NB-feedlist-hide-read-feeds .NB-feeds-header-dashboard .NB-feeds-header-sites {
|
||||
background-image: url('../img/icons/silk/bullet_blue.png');
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-sites:hover {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-sites:hover {
|
||||
color: #5E7B88;
|
||||
}
|
||||
.NB-feeds-header.NB-active:hover {
|
||||
.NB-feeds-header-dashboard.NB-active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.NB-feeds-header .NB-feeds-header-home {
|
||||
.NB-feeds-header-dashboard .NB-feeds-header-home {
|
||||
display: none;
|
||||
padding: 1px 0 0 4px;
|
||||
color: #7493C7;
|
||||
}
|
||||
.NB-feeds-header.NB-active:hover {
|
||||
.NB-feeds-header-dashboard.NB-active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.NB-feeds-header.NB-active:hover .NB-feeds-header-home {
|
||||
.NB-feeds-header-dashboard.NB-active:hover .NB-feeds-header-home {
|
||||
display: block;
|
||||
}
|
||||
.NB-feeds-header.NB-active:hover .NB-feeds-header-count {
|
||||
.NB-feeds-header-dashboard.NB-active:hover .NB-feeds-header-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* =================== */
|
||||
/* = Header - Common = */
|
||||
/* =================== */
|
||||
|
||||
.NB-feeds-header-container {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.NB-feeds-header {
|
||||
background: #4F5358 url("../img/reader/feeds_header_background.png") repeat-x scroll left top;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
border-top: 1px solid #303030;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
padding-right: 2px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NB-feeds-header.NB-selected {
|
||||
background: #f6a828 url('../theme/images/ui-bg_highlight-hard_35_f6a828_1x100.png') 0 50% repeat-x;
|
||||
}
|
||||
|
||||
.NB-feeds-header .NB-feeds-header-icon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.NB-feeds-header .NB-feeds-header-title {
|
||||
display: block;
|
||||
padding: 3px 40px 2px 23px;
|
||||
text-decoration: none;
|
||||
color: #F0F0F0;
|
||||
line-height: 1.3em;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 0 #060607;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.NB-feeds-header:hover .NB-feeds-header-title {
|
||||
color: #C1C1C1;
|
||||
}
|
||||
|
||||
.NB-feeds-header.NB-selected .NB-feeds-header-title {
|
||||
text-shadow: 0 1px 0 #FFC97D;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* ========================== */
|
||||
/* = Header - River of News = */
|
||||
/* ========================== */
|
||||
|
||||
.NB-feeds-header-river-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river .NB-feeds-header-icon {
|
||||
background: transparent url('../img/icons/silk/images.png') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river .NB-feeds-header-count {
|
||||
background-color: #11448B;
|
||||
display: block;
|
||||
padding: 0 4px;
|
||||
margin: 2px 3px 0 0;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river.NB-empty .NB-feeds-header-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* = Header - Starred Stories = */
|
||||
/* ============================ */
|
||||
|
||||
.NB-feeds-header-starred-container {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred {
|
||||
background: #4F5358 url("../img/reader/feeds_header_background.png") repeat-x scroll left top;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
border-top: 1px solid #303030;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
padding-right: 2px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred.NB-selected {
|
||||
background: #f6a828 url('../theme/images/ui-bg_highlight-hard_35_f6a828_1x100.png') 0 50% repeat-x;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred .NB-feeds-header-starred-icon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 2px;
|
||||
.NB-feeds-header-starred .NB-feeds-header-icon {
|
||||
background: transparent url('../img/reader/star_blue.png') no-repeat 0 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred .NB-feeds-header-starred-title {
|
||||
display: block;
|
||||
padding: 3px 40px 2px 23px;
|
||||
text-decoration: none;
|
||||
color: #F0F0F0;
|
||||
line-height: 1.3em;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 0 #060607;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred:hover .NB-feeds-header-starred-title {
|
||||
color: #C1C1C1;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred.NB-selected .NB-feeds-header-starred-title {
|
||||
text-shadow: 0 1px 0 #FFC97D;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred .NB-feeds-header-starred-count {
|
||||
.NB-feeds-header-starred .NB-feeds-header-count {
|
||||
background-color: #11448B;
|
||||
display: block;
|
||||
padding: 0 4px;
|
||||
margin: 2px 3px 0 0;
|
||||
}
|
||||
|
||||
.NB-feeds-header-starred.NB-empty .NB-feeds-header-starred-count {
|
||||
.NB-feeds-header-starred.NB-empty .NB-feeds-header-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ========================== */
|
||||
/* = Header - River Stories = */
|
||||
/* ========================== */
|
||||
/* ===================== */
|
||||
/* = Header - Try Feed = */
|
||||
/* ===================== */
|
||||
|
||||
.NB-feeds-header-river-container {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.NB-feeds-header-river-container {
|
||||
display: block;
|
||||
.NB-feeds-header-tryfeed-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river {
|
||||
background: #4F5358 url("../img/reader/feeds_header_background.png") repeat-x scroll left top;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
border-top: 1px solid #303030;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
padding-right: 2px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
.NB-feeds-header-starred .NB-feeds-header-icon {
|
||||
background: transparent url('../img/reader/star_blue.png') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river.NB-selected {
|
||||
background: #f6a828 url('../theme/images/ui-bg_highlight-hard_35_f6a828_1x100.png') 0 50% repeat-x;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river .NB-feeds-header-river-icon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 2px;
|
||||
background: transparent url('../img/icons/silk/images.png') no-repeat 0 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river .NB-feeds-header-river-title {
|
||||
display: block;
|
||||
padding: 3px 40px 2px 23px;
|
||||
text-decoration: none;
|
||||
color: #F0F0F0;
|
||||
line-height: 1.3em;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 0 #060607;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river:hover .NB-feeds-header-river-title {
|
||||
color: #C1C1C1;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river.NB-selected .NB-feeds-header-river-title {
|
||||
text-shadow: 0 1px 0 #FFC97D;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river .NB-feeds-header-river-count {
|
||||
.NB-feeds-header-starred .NB-feeds-header-count {
|
||||
background-color: #11448B;
|
||||
display: block;
|
||||
padding: 0 4px;
|
||||
margin: 2px 3px 0 0;
|
||||
}
|
||||
|
||||
.NB-feeds-header-river.NB-empty .NB-feeds-header-river-count {
|
||||
.NB-feeds-header-starred.NB-empty .NB-feeds-header-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -213,8 +213,10 @@
|
|||
},
|
||||
|
||||
save_feed_pane_size: function(w, pane, $pane, state, options, name) {
|
||||
$('.NB-modules-center').css('margin-left', state.size);
|
||||
this.model.preference('feed_pane_size', state.size);
|
||||
var feed_pane_size = state.size;
|
||||
|
||||
$('.NB-modules-center').css('margin-left', feed_pane_size);
|
||||
this.model.preference('feed_pane_size', feed_pane_size);
|
||||
},
|
||||
|
||||
save_story_titles_pane_size: function(w, pane, $pane, state, options, name) {
|
||||
|
|
@ -226,8 +228,8 @@
|
|||
},
|
||||
|
||||
add_body_classes: function() {
|
||||
this.$s.$body.toggleClass('NB-is-premium', NEWSBLUR.Globals.is_premium);
|
||||
this.$s.$body.toggleClass('NB-is-anonymous', NEWSBLUR.Globals.is_anonymous);
|
||||
this.$s.$body.toggleClass('NB-is-premium', NEWSBLUR.Globals.is_premium);
|
||||
this.$s.$body.toggleClass('NB-is-anonymous', NEWSBLUR.Globals.is_anonymous);
|
||||
this.$s.$body.toggleClass('NB-is-authenticated', NEWSBLUR.Globals.is_authenticated);
|
||||
},
|
||||
|
||||
|
|
@ -1552,9 +1554,9 @@
|
|||
|
||||
update_starred_count: function() {
|
||||
var starred_count = this.model.starred_count;
|
||||
var $starred_count = $('.NB-feeds-header-starred-count', this.$s.$starred_header);
|
||||
var $starred_container = this.$s.$starred_header.closest('.NB-feeds-header-starred-container');
|
||||
|
||||
var $starred_count = $('.NB-feeds-header-count', this.$s.$starred_header);
|
||||
var $starred_container = this.$s.$starred_header.closest('.NB-feeds-header-container');
|
||||
|
||||
if (starred_count <= 0) {
|
||||
this.$s.$starred_header.addClass('NB-empty');
|
||||
$starred_count.text('');
|
||||
|
|
@ -1573,7 +1575,7 @@
|
|||
this.reset_feed();
|
||||
this.hide_splash_page();
|
||||
this.active_feed = 'starred';
|
||||
|
||||
|
||||
$story_titles.data('page', 0);
|
||||
$story_titles.data('feed_id', null);
|
||||
this.iframe_scroll = null;
|
||||
|
|
@ -1624,9 +1626,11 @@
|
|||
this.hide_splash_page();
|
||||
if (!folder_title) {
|
||||
this.active_feed = 'river:';
|
||||
NEWSBLUR.log(['this.$s.$river_header', this.$s.$river_header]);
|
||||
this.$s.$river_header.addClass('NB-selected');
|
||||
} else {
|
||||
this.active_feed = 'river:' + folder_title;
|
||||
$folder.addClass('NB-selected');
|
||||
}
|
||||
|
||||
$story_titles.data('page', 0);
|
||||
|
|
@ -1639,7 +1643,6 @@
|
|||
this.flags.river_view = true;
|
||||
|
||||
|
||||
$folder.addClass('NB-selected');
|
||||
$('.task_view_page', this.$s.$taskbar).addClass('NB-disabled');
|
||||
var explicit_view_setting = NEWSBLUR.Preferences.view_settings[this.active_feed];
|
||||
if (!explicit_view_setting) {
|
||||
|
|
@ -4786,6 +4789,11 @@
|
|||
|
||||
load_recommended_feeds: function() {
|
||||
var $module = this.$s.$recommended_feeds;
|
||||
|
||||
// Reload recommended feeds every 10 minutes.
|
||||
setInterval(_.bind(function() {
|
||||
this.load_recommended_feed();
|
||||
}, this), 10*60*1000);
|
||||
},
|
||||
|
||||
load_feed_in_try_view: function(feed_id) {
|
||||
|
|
@ -5195,7 +5203,7 @@
|
|||
self.switch_preferences_hide_read_feeds();
|
||||
});
|
||||
if (stopPropagation) return;
|
||||
$.targetIs(e, { tagSelector: '.NB-feeds-header' }, function($t, $p){
|
||||
$.targetIs(e, { tagSelector: '.NB-feeds-header-dashboard' }, function($t, $p){
|
||||
e.preventDefault();
|
||||
self.show_splash_page();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ $(document).ready(function() {
|
|||
<div class="left-pane">
|
||||
|
||||
<div class="left-north">
|
||||
<div class="NB-feeds-header">
|
||||
<div class="NB-feeds-header-dashboard">
|
||||
<div class="NB-feeds-header-right">
|
||||
<div class="NB-feeds-header-sites"> </div>
|
||||
</div>
|
||||
|
|
@ -348,25 +348,36 @@ $(document).ready(function() {
|
|||
|
||||
<div class="left-center-content NB-feedlist">
|
||||
<div id="NB-feeds-list-loader">Everything is on its way...</div>
|
||||
<div class="NB-feeds-header-container">
|
||||
<div class="NB-feeds-header-river-container">
|
||||
<div class="NB-feeds-header-river NB-empty">
|
||||
<div class="NB-feeds-header-river-count unread_count"></div>
|
||||
<div class="NB-feeds-header-river-icon"></div>
|
||||
<div class="NB-feeds-header-river-title">
|
||||
<div class="NB-feeds-header-wrapper">
|
||||
|
||||
<div class="NB-feeds-header-container NB-feeds-header-river-container">
|
||||
<div class="NB-feeds-header NB-feeds-header-river NB-empty">
|
||||
<div class="NB-feeds-header-count unread_count"></div>
|
||||
<div class="NB-feeds-header-icon"></div>
|
||||
<div class="NB-feeds-header-title">
|
||||
Everything
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-feeds-header-starred-container">
|
||||
<div class="NB-feeds-header-starred NB-empty">
|
||||
<div class="NB-feeds-header-starred-count unread_count"></div>
|
||||
<div class="NB-feeds-header-starred-icon"></div>
|
||||
<div class="NB-feeds-header-starred-title">
|
||||
|
||||
<div class="NB-feeds-header-container NB-feeds-header-starred-container">
|
||||
<div class="NB-feeds-header NB-feeds-header-starred NB-empty">
|
||||
<div class="NB-feeds-header-count unread_count"></div>
|
||||
<div class="NB-feeds-header-icon"></div>
|
||||
<div class="NB-feeds-header-title">
|
||||
Saved Stories
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="NB-feeds-header-container NB-feeds-header-tryfeed-container">
|
||||
<div class="NB-feeds-header NB-feeds-header-tryfeed NB-empty">
|
||||
<div class="NB-feeds-header-count unread_count"></div>
|
||||
<div class="NB-feeds-header-icon"></div>
|
||||
<div class="NB-feeds-header-title"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ul class="folder NB-feedlist" id="feed_list"></ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue