public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-09-18 21:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

New feature: single or double column dashboard.

Browse source
This commit is contained in:
Samuel Clay 2021-04-06 15:04:44 -04:00
parent 2d278a9eab
commit 73c3a0242b
7 changed files with 80 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
media/css/reader.css
View file

@ -1757,12 +1757,12 @@ hr {
.NB-image-preview-large-left .NB-story-title {
padding-left: 116px;
}
.NB-image-preview-small-left.NB-view-river .NB-story-title,
.NB-image-preview-large-left.NB-view-river .NB-story-title {
.NB-image-preview-small-left .NB-view-river .NB-story-title,
.NB-image-preview-large-left .NB-view-river .NB-story-title {
padding-left: 242px;
}
.NB-image-preview-small-left.NB-view-river .NB-story-pane-west .NB-story-title,
.NB-image-preview-large-left.NB-view-river .NB-story-pane-west .NB-story-title {
.NB-image-preview-small-left .NB-view-river .NB-story-pane-west .NB-story-title,
.NB-image-preview-large-left .NB-view-river .NB-story-pane-west .NB-story-title {
padding-left: 142px;
}
@ -5405,6 +5405,19 @@ form.opml_import_form input {
margin: 0 24px;
}
}
.NB-dashboard-columns-single .NB-splash-modules {
display: block;
}
.NB-dashboard-columns-single .NB-splash-modules .NB-modules-center,
.NB-dashboard-columns-single .NB-splash-modules .NB-account-wide {
max-width: none;
}
.NB-dashboard-columns-single .NB-splash-modules .NB-modules-center {
margin-right: 0;
}
.NB-dashboard-columns-single .NB-splash-modules .NB-account-wide {
margin: 0 24px;
}
.NB-splash-info {
width: 100%;
height: 55px;
@ -7018,6 +7031,27 @@ form.opml_import_form input {
display: inline-block;
cursor: pointer;
}
.NB-module-river .NB-dashboard-column-control {
float: left;
line-height: 0;
display: none;
}
.NB-module-river .NB-dashboard-column-control.NB-active {
display: inline-block;
}
.NB-module-river .NB-dashboard-column-control li {
width: 32px;
margin: -2px 0 -4px;
padding: 5px 0;
}
.NB-module-river .NB-dashboard-column-control li img {
opacity: 0.3;
width: 16px;
height: 16px;
}
.NB-module-river .NB-dashboard-column-control li.NB-active img {
opacity: 0.5;
}
.NB-module-river .NB-view-river {
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 3px;

BIN
media/img/originals/Image preview icon.sketch
View file

Binary file not shown.

BIN
media/img/reader/columns_double.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 650 B

BIN
media/img/reader/columns_single.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 655 B

13
media/js/newsblur/reader/reader.js
View file

@ -517,6 +517,7 @@
this.$s.$body.toggleClass('NB-is-anonymous', NEWSBLUR.Globals.is_anonymous);
this.$s.$body.toggleClass('NB-is-authenticated', NEWSBLUR.Globals.is_authenticated);
this.$s.$body.toggleClass('NB-pref-full-width-story', !!this.model.preference('full_width_story'));
this.$s.$body.toggleClass('NB-dashboard-columns-single', this.model.preference('dashboard_columns') == 1);
this.$s.$body.removeClass('NB-story-layout-full')
.removeClass('NB-story-layout-split')
.removeClass('NB-story-layout-list')
@ -1315,7 +1316,7 @@
this.$s.$river_blurblogs_header.removeClass('NB-selected');
this.$s.$river_global_header.removeClass('NB-selected');
this.$s.$tryfeed_header.removeClass('NB-selected');
this.$s.$body.removeClass('NB-view-river');
this.$s.$layout.removeClass('NB-view-river');
$('.task_view_page', this.$s.$taskbar).removeClass('NB-disabled');
$('.task_view_story', this.$s.$taskbar).removeClass('NB-disabled');
$('.task_view_page', this.$s.$taskbar).removeClass('NB-task-return');
@ -1852,7 +1853,7 @@
this.flags['starred_tag'] = null;
}
this.flags['starred_view'] = true;
this.$s.$body.addClass('NB-view-river');
this.$s.$layout.addClass('NB-view-river');
this.flags.river_view = true;
$('.task_view_page', this.$s.$taskbar).addClass('NB-disabled');
@ -1924,7 +1925,7 @@
this.iframe_scroll = null;
this.$s.$read_header.addClass('NB-selected');
this.$s.$body.addClass('NB-view-river');
this.$s.$layout.addClass('NB-view-river');
this.flags.river_view = true;
$('.task_view_page', this.$s.$taskbar).addClass('NB-disabled');
@ -2021,7 +2022,7 @@
}
this.iframe_scroll = null;
this.flags['opening_feed'] = true;
this.$s.$body.addClass('NB-view-river');
this.$s.$layout.addClass('NB-view-river');
this.flags.river_view = true;
$('.task_view_page', this.$s.$taskbar).addClass('NB-disabled');
@ -2147,7 +2148,7 @@
this.iframe_scroll = null;
this.flags['opening_feed'] = true;
this.$s.$body.addClass('NB-view-river');
this.$s.$layout.addClass('NB-view-river');
this.flags.river_view = true;
this.flags.social_view = true;
this.flags.global_blurblogs = options.global;
@ -2275,7 +2276,7 @@
}
this.set_correct_story_view_for_feed(this.active_feed);
this.make_feed_title_in_stories();
this.$s.$body.addClass('NB-view-river');
this.$s.$layout.addClass('NB-view-river');
// TODO: Only make feed the default for blurblogs, not overriding an explicit pref.
this.switch_taskbar_view(this.story_view);

35
media/js/newsblur/views/dashboard_river_view.js
View file

@ -4,7 +4,8 @@ NEWSBLUR.Views.DashboardRiver = Backbone.View.extend({
"click .NB-module-search-add-url" : "add_url",
"click .NB-feedbar-options" : "open_options_popover",
"click .NB-module-river-favicon" : "reload",
"click .NB-module-river-title" : "open_river"
"click .NB-module-river-title": "open_river",
"click .NB-dashboard-column-option": "choose_columns"
},
initialize: function () {
@ -55,6 +56,16 @@ NEWSBLUR.Views.DashboardRiver = Backbone.View.extend({
render: function () {
var $river = $(_.template('<div class="NB-module NB-module-river NB-dashboard-river NB-dashboard-river-order-<%= river_order %>">\
<h5 class="NB-module-header">\
<div class="NB-dashboard-column-control <% if (parseInt(river_order, 10) == 0) { %>NB-active<% } %>">\
<ul class="segmented-control NB-dashboard-columns-control">\
<li class="NB-dashboard-column-option NB-dashboard-columns-control-1">\
<img src="/media/img/reader/columns_single.png" class="NB-icon">\
</li>\
<li class="NB-dashboard-column-option NB-dashboard-columns-control-2">\
<img src="/media/img/reader/columns_double.png" class="NB-icon">\
</li>\
</ul>\
</div>\
<div class="NB-module-river-settings NB-javascript"></div>\
<div class="NB-module-river-favicon"><img src="<%= favicon_url %>"></div>\
<div class="NB-module-river-title"><%= river_title %></div>\
@ -69,14 +80,25 @@ NEWSBLUR.Views.DashboardRiver = Backbone.View.extend({
', {
favicon_url: this.model.favicon_url(),
river_title: NEWSBLUR.reader.feed_title(this.model.get('river_id')),
river_order: this.model.get('river_order')
river_order: this.model.get('river_order'),
single_column: parseInt(NEWSBLUR.assets.preference('dashboard_columns'), 10) == 1
}));
this.$el.html($river);
this.render_columns();
return this;
},
render_columns: function () {
var columns = NEWSBLUR.assets.preference('dashboard_columns');
this.$(".NB-dashboard-columns-control-1").toggleClass('NB-active', columns == 1);
this.$(".NB-dashboard-columns-control-2").toggleClass('NB-active', columns == 2);
NEWSBLUR.reader.add_body_classes();
},
options_template: function () {
var $options = $(_.template('<div class="NB-feedbar-options-container">\
<span class="NB-feedbar-options">\
@ -166,6 +188,15 @@ NEWSBLUR.Views.DashboardRiver = Backbone.View.extend({
this.load_stories();
},
choose_columns: function ($event) {
var single_column = $($event.currentTarget).hasClass('NB-dashboard-columns-control-1');
var double_column = $($event.currentTarget).hasClass('NB-dashboard-columns-control-2');
var columns = single_column ? 1 : 2;
NEWSBLUR.assets.preference('dashboard_columns', columns);
this.render_columns();
},
load_stories: function(options) {
options = _.extend({
global_feed: this.options.global_feed,

3
templates/base.html
View file

@ -98,7 +98,8 @@
'story_share_instapaper' : true,
'story_share_email' : true,
'theme' : 'auto',
'highlights' : true
'highlights' : true,
'dashboard_columns' : 2
};
NEWSBLUR.URLs = {
'upload-avatar' : "{% url "upload-avatar" %}",