mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-08-31 21:41:33 +00:00
New Magazine view. Doesn't work in river yet nor on the dashboard. Also needs new story detail view.
This commit is contained in:
parent
0c8dbda555
commit
eb2b3dee04
10 changed files with 206 additions and 23 deletions
|
@ -1761,6 +1761,31 @@ hr {
|
|||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-xs .NB-story-title {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-s .NB-story-title {
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-m .NB-story-title {
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-l .NB-story-title {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-xl .NB-story-title {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.NB-story-pane-west .NB-story-title {
|
||||
padding-right: 4px;
|
||||
|
@ -1795,6 +1820,11 @@ hr {
|
|||
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title {
|
||||
padding-left: 120px;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title,
|
||||
.NB-story-layout-magazine .NB-view-river .NB-story-title {
|
||||
padding-left: 400px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.NB-story-title .NB-storytitles-feed-border-inner,
|
||||
.NB-story-title .NB-storytitles-feed-border-outer {
|
||||
|
@ -1827,6 +1857,10 @@ hr {
|
|||
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-story-title .NB-storytitles-sentiment {
|
||||
left: 89px;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title .NB-storytitles-sentiment {
|
||||
left: -28px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.NB-image-preview-small-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-storytitles-sentiment,
|
||||
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-storytitles-sentiment {
|
||||
|
@ -2013,6 +2047,9 @@ hr {
|
|||
.NB-content-preview-large .NB-storytitles-content-preview {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-layout-magazine .NB-storytitles-content-preview {
|
||||
-webkit-line-clamp: 8;
|
||||
}
|
||||
|
||||
.NB-theme-feed-size-xs .NB-storytitles-content-preview {
|
||||
font-size: 11px;
|
||||
|
@ -2046,6 +2083,33 @@ hr {
|
|||
.NB-story-layout-list .NB-selected .NB-storytitles-content-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-xs .NB-storytitles-content-preview {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-s .NB-storytitles-content-preview {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-m .NB-storytitles-content-preview {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-l .NB-storytitles-content-preview {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
.NB-story-layout-magazine.NB-theme-feed-size-xl .NB-storytitles-content-preview {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.read .NB-storytitles-content-preview {
|
||||
color: #b3b3b1;
|
||||
}
|
||||
|
@ -2161,6 +2225,10 @@ hr {
|
|||
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-story-title .NB-story-manage-icon {
|
||||
left: 90px;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title .NB-story-manage-icon {
|
||||
left: -28px;
|
||||
top: 4px;
|
||||
}
|
||||
.NB-image-preview-small-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-story-manage-icon,
|
||||
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-story-manage-icon {
|
||||
top: 24px;
|
||||
|
@ -2551,7 +2619,7 @@ hr {
|
|||
.NB-story-grid.read .NB-storytitles-content-preview {
|
||||
color: #D6D6DE;
|
||||
}
|
||||
.NB-story-grid.NB-story-title .NB-storytitles-grid-bottom {
|
||||
.NB-story-title .NB-storytitles-grid-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: inherit;
|
||||
|
@ -2567,6 +2635,16 @@ hr {
|
|||
.NB-story-grid:not(.read):hover .NB-storytitles-grid-bottom {
|
||||
background-color: #F7F7F6;
|
||||
}
|
||||
.NB-storytitles-magazine-bottom {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.NB-storytitles-magazine-bottom .story_date {
|
||||
top: 0;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-story-title .NB-storytitles-author {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.NB-story-grid.NB-story-title .NB-storytitles-author {
|
||||
float: left;
|
||||
display: block;
|
||||
|
@ -2865,6 +2943,10 @@ body {
|
|||
top: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.NB-story-layout-magazine .NB-layout-magazine .NB-storytitles-story-image {
|
||||
width: 350px;
|
||||
height: 94%;
|
||||
}
|
||||
.NB-image-preview-small-left.NB-story-layout-list .NB-storytitles-story-image,
|
||||
.NB-image-preview-small-right.NB-story-layout-list .NB-storytitles-story-image,
|
||||
.NB-image-preview-small-left.NB-story-layout-split .NB-story-pane-south .NB-storytitles-story-image,
|
||||
|
@ -5163,6 +5245,16 @@ background: transparent;
|
|||
background: transparent url('/media/img/icons/circular/nav_story_grid_active.png') no-repeat center center;
|
||||
background-size: 15px;
|
||||
}
|
||||
.NB-taskbar .NB-task-layout-magazine .NB-task-image {
|
||||
left: 12px;
|
||||
background: transparent url('/media/img/icons/circular/nav_story_magazine.png') no-repeat center center;
|
||||
background-size: 15px;
|
||||
}
|
||||
.NB-taskbar .NB-task-layout-magazine.NB-active .NB-task-image {
|
||||
left: 12px;
|
||||
background: transparent url('/media/img/icons/circular/nav_story_magazine_active.png') no-repeat center center;
|
||||
background-size: 15px;
|
||||
}
|
||||
|
||||
.NB-taskbar .NB-task-return .NB-task-image {
|
||||
background: transparent url('/media/embed/icons/silk/arrow_undo.png') no-repeat center center;
|
||||
|
|
BIN
media/img/icons/circular/nav_story_magazine.png
Normal file
BIN
media/img/icons/circular/nav_story_magazine.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 265 B |
BIN
media/img/icons/circular/nav_story_magazine_active.png
Normal file
BIN
media/img/icons/circular/nav_story_magazine_active.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 265 B |
|
@ -205,7 +205,7 @@
|
|||
resize: true
|
||||
});
|
||||
|
||||
if (_.contains(['split', 'list', 'grid'],
|
||||
if (_.contains(['split', 'list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
NEWSBLUR.app.story_titles.fill_out();
|
||||
} else {
|
||||
|
@ -397,7 +397,7 @@
|
|||
contentLayoutOptions[story_anchor+'__onclose_start'] = $.rescope(this.toggle_story_titles_pane, this);
|
||||
contentLayoutOptions[story_anchor+'__onopen_start'] = $.rescope(this.toggle_story_titles_pane, this);
|
||||
this.layout.contentLayout = this.$s.$content_pane.layout(contentLayoutOptions);
|
||||
} else if (_.contains(['list', 'grid'],
|
||||
} else if (_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
var rightLayoutOptions = {
|
||||
resizeWhileDragging: true,
|
||||
|
@ -544,6 +544,7 @@
|
|||
.removeClass('NB-story-layout-split')
|
||||
.removeClass('NB-story-layout-list')
|
||||
.removeClass('NB-story-layout-grid')
|
||||
.removeClass('NB-story-layout-magazine')
|
||||
.addClass('NB-story-layout-'+NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'));
|
||||
},
|
||||
|
||||
|
@ -950,7 +951,7 @@
|
|||
page_in_story: function(amount, direction) {
|
||||
amount = parseInt(amount, 10) / 100.0;
|
||||
var page_height = this.$s.$story_pane.height();
|
||||
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
page_height = this.$s.$story_titles.height();
|
||||
}
|
||||
var scroll_height = parseInt(page_height * amount, 10);
|
||||
|
@ -991,7 +992,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
} else if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
} else if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
var scroll_top = this.$s.$story_titles.scrollTop();
|
||||
var $story = this.active_story.story_title_view.$el;
|
||||
var story_height = $story.height();
|
||||
|
@ -1013,7 +1014,7 @@
|
|||
dir = '-';
|
||||
}
|
||||
// NEWSBLUR.log(['scroll_in_story', this.$s.$story_pane, direction, amount]);
|
||||
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
this.$s.$story_titles.stop().scrollTo({
|
||||
top: dir+'='+amount,
|
||||
left:'+=0'
|
||||
|
@ -1631,6 +1632,7 @@
|
|||
var $split = $(".NB-task-layout-split");
|
||||
var $list = $(".NB-task-layout-list");
|
||||
var $grid = $(".NB-task-layout-grid");
|
||||
var $magazine = $(".NB-task-layout-magazine");
|
||||
var $full = $(".NB-task-layout-full");
|
||||
var story_layout = NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
|
||||
this.$s.$story_titles[0].className = this.$s.$story_titles[0].className.replace(/ ?NB-layout-\w+/gi, '');
|
||||
|
@ -1645,6 +1647,7 @@
|
|||
$split.removeClass('NB-active');
|
||||
$list.addClass('NB-active');
|
||||
$grid.removeClass('NB-active');
|
||||
$magazine.removeClass('NB-active');
|
||||
} else if (story_layout == 'grid') {
|
||||
$('.NB-taskbar-button.task_view_page').addClass('NB-hidden');
|
||||
$('.NB-taskbar-button.task_view_feed').addClass('NB-first');
|
||||
|
@ -1654,6 +1657,17 @@
|
|||
$split.removeClass('NB-active');
|
||||
$list.removeClass('NB-active');
|
||||
$grid.addClass('NB-active');
|
||||
$magazine.removeClass('NB-active');
|
||||
} else if (story_layout == 'magazine') {
|
||||
$('.NB-taskbar-button.task_view_page').addClass('NB-hidden');
|
||||
$('.NB-taskbar-button.task_view_feed').addClass('NB-first');
|
||||
$('.NB-taskbar-button.task_view_story').addClass('NB-hidden');
|
||||
$('.NB-taskbar-button.task_view_text').addClass('NB-last');
|
||||
$full.removeClass('NB-active');
|
||||
$split.removeClass('NB-active');
|
||||
$list.removeClass('NB-active');
|
||||
$grid.removeClass('NB-active');
|
||||
$magazine.addClass('NB-active');
|
||||
} else if (story_layout == 'split') {
|
||||
if (!this.flags.river_view) {
|
||||
$('.NB-taskbar-button.task_view_page').removeClass('NB-hidden');
|
||||
|
@ -1665,6 +1679,7 @@
|
|||
$split.addClass('NB-active');
|
||||
$list.removeClass('NB-active');
|
||||
$grid.removeClass('NB-active');
|
||||
$magazine.removeClass('NB-active');
|
||||
} else if (story_layout == 'full') {
|
||||
if (!this.flags.river_view) {
|
||||
$('.NB-taskbar-button.task_view_page').removeClass('NB-hidden');
|
||||
|
@ -1676,6 +1691,7 @@
|
|||
$split.removeClass('NB-active');
|
||||
$list.removeClass('NB-active');
|
||||
$grid.removeClass('NB-active');
|
||||
$magazine.removeClass('NB-active');
|
||||
}
|
||||
|
||||
if (_.contains(['starred', 'read'], feed_id)) {
|
||||
|
@ -1721,6 +1737,11 @@
|
|||
this.active_story.story_title_view.toggle_selected();
|
||||
}
|
||||
NEWSBLUR.app.story_list.clear();
|
||||
} else if (story_layout == 'magazine') {
|
||||
if (this.active_story) {
|
||||
this.active_story.story_title_view.toggle_selected();
|
||||
}
|
||||
NEWSBLUR.app.story_list.clear();
|
||||
} else if (story_layout == 'split') {
|
||||
NEWSBLUR.app.story_list.render();
|
||||
if (this.active_story) {
|
||||
|
@ -1747,7 +1768,7 @@
|
|||
NEWSBLUR.app.story_titles.scroll_to_selected_story();
|
||||
NEWSBLUR.app.story_list.scroll_to_selected_story();
|
||||
NEWSBLUR.app.feed_list.scroll_to_selected();
|
||||
if (_.contains(['split', 'list', 'grid'],
|
||||
if (_.contains(['split', 'list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
NEWSBLUR.app.story_titles.fill_out();
|
||||
} else {
|
||||
|
@ -2425,7 +2446,7 @@
|
|||
this.switch_taskbar_view('feed', {skip_save_type: 'page'});
|
||||
NEWSBLUR.app.story_list.show_stories_preference_in_feed_view();
|
||||
}
|
||||
} else if (_.contains(['list', 'grid'],
|
||||
} else if (_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
|
||||
(this.story_view == 'page' || this.story_view == 'story')) {
|
||||
this.switch_taskbar_view('feed', {skip_save_type: 'layout'});
|
||||
|
@ -3122,7 +3143,7 @@
|
|||
} else if ($('.task_view_'+view).hasClass('NB-disabled') ||
|
||||
$('.task_view_'+view).hasClass('NB-hidden')) {
|
||||
return;
|
||||
} else if (_.contains(['list', 'grid'],
|
||||
} else if (_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
|
||||
_.contains(['page', 'story'], view)) {
|
||||
view = 'feed';
|
||||
|
@ -3201,7 +3222,7 @@
|
|||
|
||||
NEWSBLUR.app.story_list.reset_story_positions();
|
||||
if (!options.resize && this.active_story &&
|
||||
_.contains(['list', 'grid'],
|
||||
_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
NEWSBLUR.app.text_tab_view.unload();
|
||||
if (this.active_story.get('selected')) {
|
||||
|
@ -3226,7 +3247,7 @@
|
|||
}
|
||||
} else if (!options.resize && this.active_story &&
|
||||
this.active_story.get('selected') &&
|
||||
_.contains(['list', 'grid'],
|
||||
_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
this.active_story.story_title_view.render_inline_story_detail();
|
||||
}
|
||||
|
@ -3252,7 +3273,7 @@
|
|||
var $active = $('.NB-taskbar-view .NB-active');
|
||||
var view;
|
||||
|
||||
if (_.contains(['list', 'grid'],
|
||||
if (_.contains(['list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (direction == -1) {
|
||||
if ($active.hasClass('task_view_feed')) {
|
||||
|
@ -5118,7 +5139,7 @@
|
|||
NEWSBLUR.app.story_list.show_correct_explainer();
|
||||
|
||||
// NEWSBLUR.log(['Showing correct stories', this.story_view, unread_view_name, $stories_show.length, $stories_hide.length]);
|
||||
if (_.contains(['split', 'list', 'grid'],
|
||||
if (_.contains(['split', 'list', 'grid', 'magazine'],
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
NEWSBLUR.app.story_titles.fill_out();
|
||||
} else {
|
||||
|
@ -6741,6 +6762,10 @@
|
|||
e.preventDefault();
|
||||
self.switch_story_layout('grid');
|
||||
});
|
||||
$.targetIs(e, { tagSelector: '.NB-taskbar-button.NB-task-layout-magazine' }, function($t, $p){
|
||||
e.preventDefault();
|
||||
self.switch_story_layout('magazine');
|
||||
});
|
||||
$.targetIs(e, { tagSelector: '.NB-taskbar-options' }, function($t, $p){
|
||||
e.preventDefault();
|
||||
self.open_story_options_popover();
|
||||
|
|
|
@ -198,6 +198,13 @@ _.extend(NEWSBLUR.ReaderFeedException.prototype, {
|
|||
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_grid_active.png' }),
|
||||
$.make("div", { className: "NB-layout-title" }, "Grid")
|
||||
])
|
||||
]),
|
||||
$.make('div', [
|
||||
$.make('label', { 'for': 'NB-preference-layout-5' }, [
|
||||
$.make('input', { id: 'NB-preference-layout-5', type: 'radio', name: 'story_layout', value: 'magazine' }),
|
||||
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_magazine_active.png' }),
|
||||
$.make("div", { className: "NB-layout-title" }, "Magazine")
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
|
|
|
@ -382,6 +382,13 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
|
|||
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_grid_active.png' }),
|
||||
$.make("div", { className: "NB-layout-title" }, "Grid")
|
||||
])
|
||||
]),
|
||||
$.make('div', [
|
||||
$.make('label', { 'for': 'NB-preference-layout-5' }, [
|
||||
$.make('input', { id: 'NB-preference-layout-5', type: 'radio', name: 'story_layout', value: 'magazine' }),
|
||||
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_magazine_active.png' }),
|
||||
$.make("div", { className: "NB-layout-title" }, "Magazine")
|
||||
])
|
||||
])
|
||||
]),
|
||||
$.make('div', { className: 'NB-preference-label'}, [
|
||||
|
|
|
@ -690,7 +690,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
|
|||
href = footnote_href;
|
||||
var offset = $(href).offset().top;
|
||||
var $scroll;
|
||||
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
$scroll = NEWSBLUR.reader.$s.$story_titles;
|
||||
} else if (NEWSBLUR.reader.flags['temporary_story_view'] ||
|
||||
NEWSBLUR.reader.story_view == 'text') {
|
||||
|
@ -998,7 +998,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
|
|||
},
|
||||
|
||||
scroll_to_comments: function() {
|
||||
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
NEWSBLUR.app.story_titles.scroll_to_selected_story(this.model, {
|
||||
scroll_to_comments: true,
|
||||
scroll_offset: -50
|
||||
|
|
|
@ -27,6 +27,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
|||
render: function() {
|
||||
var template_name = !this.model.get('selected') && this.options.is_grid ?
|
||||
'grid_template' : 'template';
|
||||
if (this.options.is_magazine) template_name = "magazine_template";
|
||||
// console.log(['render story title', template_name, this.$el[0], this.options.is_grid, this.show_image_preview(), this.options.override_layout, NEWSBLUR.assets.get_feed(this.model.get('story_feed_id'))]);
|
||||
this.$el.html(this[template_name]({
|
||||
story : this.model,
|
||||
|
@ -133,6 +134,48 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
|||
<div class="NB-story-detail"></div>\
|
||||
'),
|
||||
|
||||
magazine_template: _.template('\
|
||||
<div class="NB-story-title <% if (!show_content_preview) { %>NB-story-title-hide-preview<% } %>">\
|
||||
<div class="NB-storytitles-feed-border-inner"></div>\
|
||||
<div class="NB-storytitles-feed-border-outer"></div>\
|
||||
<% if (story.image_url()) { %>\
|
||||
<div class="NB-storytitles-story-image-container">\
|
||||
<div class="NB-storytitles-story-image" <% if (story.image_url()) { %>style="background-image: none, url(\'<%= story.image_url() %>\');"<% } %>></div>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<div class="NB-storytitles-content">\
|
||||
<% if (feed) { %>\
|
||||
<div class="NB-story-feed">\
|
||||
<img class="feed_favicon" src="<%= $.favicon(feed) %>">\
|
||||
<span class="feed_title"><%= feed.get("feed_title") %></span>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<a href="<%= story.get("story_permalink") %>" class="story_title NB-hidden-fade">\
|
||||
<div class="NB-storytitles-star"></div>\
|
||||
<div class="NB-storytitles-share"></div>\
|
||||
<div class="NB-storytitles-sentiment"></div>\
|
||||
<div class="NB-story-manage-icon" role="button"></div>\
|
||||
<span class="NB-storytitles-title"><%= story.get("story_title") %></span>\
|
||||
<% if (show_content_preview) { %>\
|
||||
<div class="NB-storytitles-content-preview"><%= show_content_preview %></div>\
|
||||
<% } %>\
|
||||
</a>\
|
||||
</div>\
|
||||
<div class="NB-storytitles-magazine-bottom">\
|
||||
<span class="NB-storytitles-author"><%= story.story_authors() %></span>\
|
||||
<span class="story_date NB-hidden-fade"><%= story.formatted_short_date() %></span>\
|
||||
</div>\
|
||||
<% if (story.get("comment_count_friends")) { %>\
|
||||
<div class="NB-storytitles-shares">\
|
||||
<% _.each(story.get("commented_by_friends"), function(user_id) { %>\
|
||||
<img class="NB-user-avatar" src="<%= NEWSBLUR.assets.user_profiles.find(user_id).get("photo_url") %>">\
|
||||
<% }) %>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
</div>\
|
||||
<div class="NB-story-detail"></div>\
|
||||
'),
|
||||
|
||||
render_inline_story_detail: function(temporary_text) {
|
||||
// console.log(['render_inline_story_detail', this.model.get('story_title')]);
|
||||
if (NEWSBLUR.reader.story_view == 'text' || temporary_text) {
|
||||
|
@ -232,7 +275,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
|||
var story_layout = this.options.override_layout ||
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
|
||||
var pane_anchor = this.options.override_layout ? "west" : NEWSBLUR.assets.preference('story_pane_anchor');
|
||||
if (_.contains(['list', 'grid'], story_layout)) return true;
|
||||
if (_.contains(['list', 'grid', 'magazine'], story_layout)) return true;
|
||||
if (story_layout == 'split' && _.contains(['north', 'south'], pane_anchor)) return true;
|
||||
|
||||
return !!this.model.image_url();
|
||||
|
@ -381,16 +424,19 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
|||
}
|
||||
},
|
||||
|
||||
toggle_selected: function(model, selected, options) {
|
||||
toggle_selected: function (model, selected, options) {
|
||||
var story_layout = this.options.override_layout ||
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
|
||||
if (this.options.is_grid) this.render();
|
||||
|
||||
this.$st.toggleClass('NB-selected', !!this.model.get('selected'));
|
||||
this.$el.toggleClass('NB-selected', !!this.model.get('selected'));
|
||||
|
||||
if (!!this.model.get('selected')) {
|
||||
if (_.contains(['list', 'grid'], this.options.override_layout ||
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
|
||||
if (_.contains(['list', 'grid'], story_layout)) {
|
||||
this.render_inline_story_detail();
|
||||
} else if (_.contains(['magazine'], story_layout)) {
|
||||
this.render_magazine_story_detail();
|
||||
} else {
|
||||
this.destroy_inline_story_detail();
|
||||
}
|
||||
|
@ -479,7 +525,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
|||
return;
|
||||
}
|
||||
|
||||
if (_.contains(['list', 'grid'], this.options.override_layout ||
|
||||
if (_.contains(['list', 'grid', 'magazine'], this.options.override_layout ||
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
|
||||
this.model.get('selected')) {
|
||||
this.collapse_story();
|
||||
|
|
|
@ -40,6 +40,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
|||
model: story,
|
||||
collection: collection,
|
||||
is_grid: story_layout == 'grid',
|
||||
is_magazine: story_layout == 'magazine',
|
||||
override_layout: override_layout,
|
||||
on_dashboard: on_dashboard
|
||||
}).render();
|
||||
|
@ -71,6 +72,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
|||
model: story,
|
||||
collection: collection,
|
||||
is_grid: story_layout == 'grid',
|
||||
is_magazine: story_layout == 'magazine',
|
||||
override_layout: override_layout,
|
||||
on_dashboard: on_dashboard
|
||||
}).render();
|
||||
|
@ -256,7 +258,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
|||
]);
|
||||
var story_layout = this.options.override_layout ||
|
||||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
|
||||
if (_.contains(['list', 'grid'], story_layout) || NEWSBLUR.assets.preference('mark_read_on_scroll_titles')) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], story_layout) || NEWSBLUR.assets.preference('mark_read_on_scroll_titles')) {
|
||||
var pane_height = this.$story_titles.height();
|
||||
var endbar_height = 20;
|
||||
var last_story_height = 80;
|
||||
|
@ -308,7 +310,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
|||
// console.log(["scroll_to_selected_story 1", story, options]);
|
||||
var story_title_visisble = this.$story_titles.isScrollVisible(story_title_view.$el);
|
||||
if (!story_title_visisble || options.force ||
|
||||
_.contains(['list', 'grid'], story_layout)) {
|
||||
_.contains(['list', 'grid', 'magazine'], story_layout)) {
|
||||
var container_offset = this.$story_titles.position().top;
|
||||
var scroll = story_title_view.$el.find('.NB-story-title').position().top;
|
||||
if (options.scroll_to_comments) {
|
||||
|
@ -318,7 +320,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
|||
var height = this.$story_titles.outerHeight();
|
||||
var position = scroll+container-height/5;
|
||||
// console.log(["scroll_to_selected_story 2", container_offset, scroll, container, height, position]);
|
||||
if (_.contains(['list', 'grid'], story_layout)) {
|
||||
if (_.contains(['list', 'grid', 'magazine'], story_layout)) {
|
||||
position = scroll+container;
|
||||
}
|
||||
if (story_layout == 'grid') {
|
||||
|
|
|
@ -270,6 +270,10 @@
|
|||
<div class="NB-task-image"></div>
|
||||
<span class="NB-task-title">Grid</span>
|
||||
</li>
|
||||
<li class="NB-taskbar-button NB-task-layout-magazine NB-tipsy" tipsy-title="Magazine">
|
||||
<div class="NB-task-image"></div>
|
||||
<span class="NB-task-title">Magazine</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="NB-taskbar-options-container">
|
||||
|
|
Loading…
Add table
Reference in a new issue