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

Adding compact/comfortable density controls to feed popover.

Browse source
This commit is contained in:
Samuel Clay 2021-07-02 16:11:44 -04:00
parent 0a81617d21
commit 24250de9a0
6 changed files with 89 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
media/css/reader.css
View file

@ -722,18 +722,33 @@ hr {
width: 16px;
height: 16px;
}
.NB-density-compact .NB-feedlist img.feed_favicon {
top: 1px;
}
.NB-theme-feed-size-s .NB-feedlist img.feed_favicon {
top: 3px;
}
.NB-density-compact.NB-theme-feed-size-s .NB-feedlist img.feed_favicon {
top: 1px;
}
.NB-theme-feed-size-m .NB-feedlist img.feed_favicon {
top: 4px;
}
.NB-density-compact.NB-theme-feed-size-m .NB-feedlist img.feed_favicon {
top: 2px;
}
.NB-theme-feed-size-l .NB-feedlist img.feed_favicon {
top: 4px;
}
.NB-density-compact.NB-theme-feed-size-l .NB-feedlist img.feed_favicon {
top: 2px;
}
.NB-theme-feed-size-xl .NB-feedlist img.feed_favicon {
top: 5px;
}
.NB-density-compact.NB-theme-feed-size-xl .NB-feedlist img.feed_favicon {
top: 3px;
}
.NB-feedlist .feed_title {
display: block;
padding: 5px 40px 0 23px;
@ -742,7 +757,7 @@ hr {
line-height: 1.3em;
overflow: hidden;
text-shadow: 0 1px 0 rgba(250, 250, 250, .4);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
@ -751,6 +766,9 @@ hr {
word-break: break-all;
}
.NB-density-compact .NB-feedlist .feed_title {
padding-top: 2px;
}
.NB-feedlist .feed .NB-feedlist-manage-icon,
.NB-feedlist .folder_title .NB-feedlist-manage-icon {
opacity: 0;
@ -888,6 +906,9 @@ hr {
right: 2px;
top: 1px;
}
.NB-density-compact .NB-feedlist .feed_counts {
top: -1px;
}
.NB-feedlist .NB-feedbar-mark-feed-read {
display: none;
}
@ -1958,6 +1979,9 @@ hr {
display: -webkit-box;
}
.NB-density-compact .NB-storytitles-content-preview {
margin-bottom: 0;
}
.NB-story-pane-west .NB-storytitles-content-preview {
display: -webkit-box;
-webkit-line-clamp: 4;
@ -1967,7 +1991,9 @@ hr {
height: auto;
padding: 6px 0 0;
}
.NB-density-compact .NB-story-pane-west .NB-storytitles-content-preview {
padding-top: 0;
}
.NB-content-preview-small .NB-story-pane-west .NB-storytitles-content-preview {
-webkit-line-clamp: 2;
}
@ -2003,11 +2029,17 @@ hr {
line-height: 17px;
padding-top: 10px;
}
.NB-density-compact.NB-theme-feed-size-l .NB-storytitles-content-preview {
padding-top: 0;
}
.NB-theme-feed-size-xl .NB-storytitles-content-preview {
font-size: 14px;
line-height: 18px;
padding-top: 12px;
}
.NB-density-compact.NB-theme-feed-size-xl .NB-storytitles-content-preview {
padding-top: 0;
}
.NB-content-preview-title .NB-storytitles-content-preview {
display: none;
}
@ -2205,6 +2237,10 @@ hr {
font-weight: normal;
clear: both;
}
.NB-density-compact .NB-story-pane-west .NB-story-title .story_date {
margin-top: 0;
margin-bottom: 0;
}
.NB-story-title.NB-selected .story_date {
/* text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);*/
}
@ -2719,6 +2755,10 @@ body {
font-family: 'Whitney SSm A', 'Whitney SSm B', "Lucida Grande", Verdana, "Helvetica Neue", Helvetica, sans-serif;
}
.NB-theme-sans-serif #story_pane {
font-family: "Helvetica Neue", "Helvetica", sans-serif;
}
.NB-theme-sans-serif-alt1 #story_pane {
font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

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

@ -3059,6 +3059,10 @@
.removeClass('NB-line-spacing-xl');
$body.addClass('NB-line-spacing-' + NEWSBLUR.Preferences['story_line_spacing']);
$body.removeClass('NB-density-compact')
.removeClass('NB-density-comfortable');
$body.addClass('NB-density-' + NEWSBLUR.Preferences['density']);
$body.removeClass('NB-content-preview-title')
.removeClass('NB-content-preview-small')
.removeClass('NB-content-preview-medium')

25
media/js/newsblur/reader/reader_preferences.js
View file

@ -482,6 +482,25 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
'Mark stories read on scroll'
])
]),
$.make('div', { className: 'NB-preference NB-preference-density' }, [
$.make('div', { className: 'NB-preference-options' }, [
$.make('div', [
$.make('input', { id: 'NB-preference-density-compact', type: 'radio', name: 'density', value: "compact" }),
$.make('label', { 'for': 'NB-preference-density-compact' }, [
'Compact spacing: more dense'
])
]),
$.make('div', [
$.make('input', { id: 'NB-preference-density-comfortable', type: 'radio', name: 'density', value: "comfortable" }),
$.make('label', { 'for': 'NB-preference-density-comfortable' }, [
'Comfortable spacing: less dense'
])
])
]),
$.make('div', { className: 'NB-preference-label'}, [
'Spacing between feeds and story titles'
])
]),
$.make('div', { className: 'NB-preference NB-preference-showcontentpreview' }, [
$.make('div', { className: 'NB-preference-options' }, [
$.make('div', [
@ -1064,6 +1083,12 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
return false;
}
});
$('input[name=density]', $modal).each(function() {
if ($(this).val() == ""+NEWSBLUR.Preferences.density) {
$(this).prop('checked', true);
return false;
}
});
$('input[name=show_content_preview]', $modal).each(function() {
if ($(this).val() == NEWSBLUR.Preferences.show_content_preview) {
$(this).prop('checked', true);

16
media/js/newsblur/views/feed_options_popover.js
View file

@ -13,6 +13,7 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
'overlay_top': true,
'popover_class': 'NB-filter-popover-container',
'show_markscroll': true,
'show_density': true,
'show_readfilter': true,
'show_contentpreview': true,
'show_imagepreview': true,
@ -107,6 +108,10 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
$.make('li', { className: 'NB-view-setting-option NB-view-setting-markscroll-read NB-active', role: "button" }, 'Read on scroll'),
$.make('li', { className: 'NB-view-setting-option NB-view-setting-markscroll-unread', role: "button" }, 'Leave unread')
])),
(this.options.show_density && $.make('ul', { className: 'segmented-control NB-menu-manage-view-setting-density' }, [
$.make('li', { className: 'NB-view-setting-option NB-view-setting-density-compact NB-active', role: "button" }, 'Compact'),
$.make('li', { className: 'NB-view-setting-option NB-view-setting-density-comfortable', role: "button" }, 'Comfortable')
])),
(this.options.show_contentpreview && $.make('ul', { className: 'segmented-control NB-menu-manage-view-setting-contentpreview' }, [
$.make('li', { className: 'NB-view-setting-option NB-view-setting-contentpreview-title', role: "button" }, 'Title only'),
$.make('li', { className: 'NB-view-setting-option NB-view-setting-contentpreview-small', role: "button" }, $.make('div', { className: 'NB-icon' })),
@ -176,6 +181,7 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
var order = NEWSBLUR.assets.view_setting(this.options.feed_id, 'order');
var read_filter = NEWSBLUR.assets.view_setting(this.options.feed_id, 'read_filter');
var mark_scroll = NEWSBLUR.assets.preference('mark_read_on_scroll_titles');
var density = NEWSBLUR.assets.preference('density');
var image_preview = NEWSBLUR.assets.preference('image_preview');
var content_preview = NEWSBLUR.assets.preference('show_content_preview');
var infrequent = parseInt(NEWSBLUR.assets.preference('infrequent_stories_per_month'), 10);
@ -187,6 +193,8 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
var $all = this.$('.NB-view-setting-readfilter-all');
var $mark_unread = this.$('.NB-view-setting-markscroll-unread');
var $mark_read = this.$('.NB-view-setting-markscroll-read');
var $density_compact = this.$('.NB-view-setting-density-compact');
var $density_comfortable = this.$('.NB-view-setting-density-comfortable');
var $content_preview_title = this.$('.NB-view-setting-contentpreview-title');
var $content_preview_1 = this.$('.NB-view-setting-contentpreview-small');
var $content_preview_2 = this.$('.NB-view-setting-contentpreview-medium');
@ -205,6 +213,8 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
$all.toggleClass('NB-active', read_filter != 'unread');
$mark_unread.toggleClass('NB-active', !mark_scroll);
$mark_read.toggleClass('NB-active', mark_scroll);
$density_compact.toggleClass('NB-active', density == "compact");
$density_comfortable.toggleClass('NB-active', density == "comfortable");
$content_preview_title.toggleClass('NB-active', content_preview == '0' || content_preview == "title");
$content_preview_1.toggleClass('NB-active', content_preview == "small");
$content_preview_2.toggleClass('NB-active', content_preview == "1" || content_preview == "medium");
@ -254,6 +264,12 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
NEWSBLUR.assets.preference('mark_read_on_scroll_titles', false);
} else if ($target.hasClass("NB-view-setting-markscroll-read")) {
NEWSBLUR.assets.preference('mark_read_on_scroll_titles', true);
} else if ($target.hasClass("NB-view-setting-density-compact")) {
NEWSBLUR.assets.preference('density', "compact");
NEWSBLUR.reader.apply_story_styling();
} else if ($target.hasClass("NB-view-setting-density-comfortable")) {
NEWSBLUR.assets.preference('density', "comfortable");
NEWSBLUR.reader.apply_story_styling();
} else if ($target.hasClass("NB-view-setting-contentpreview-title")) {
NEWSBLUR.assets.preference('show_content_preview', "title");
NEWSBLUR.reader.apply_story_styling(true);

2
media/js/newsblur/views/story_detail_view.js
View file

@ -130,7 +130,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
},
watch_images_load: function () {
var pane_width = NEWSBLUR.reader.$s.$story_pane.width() - 32; // 28px to compensate for margin-left: -28px
var pane_width = NEWSBLUR.reader.$s.$story_pane.width() - 28*2; // 28px to compensate for both margins
this.$el.imagesLoaded(_.bind(function() {
var largest = 0;

1
templates/base.html
View file

@ -88,6 +88,7 @@
'show_content_preview' : true,
'image_preview' : 'small-left',
'mark_read_on_scroll_titles' : false,
'density' : 'comfortable',
'doubleclick_feed' : 'open',
'doubleclick_unread' : 'markread',
'mark_read_river_confirm' : true,