mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-09-18 21:50:56 +00:00
Adding new story position preference which controls where the story is placed on the viewport. Supercedes full width setting, which is now captured in the stretch setting of the story position. Should also turn the width into a preference.
This commit is contained in:
Samuel Clay
parent
0074cf2b53
commit
a1fba2fe10
10 changed files with 121 additions and 33 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -16,7 +16,7 @@
|
|||
"ansible/playbooks/*/*": true,
|
||||
// "archive/*": true,
|
||||
"logs/*": true,
|
||||
// "static/*": true,
|
||||
"static/*": true,
|
||||
"media/fonts": true,
|
||||
"static/*.css": true,
|
||||
"static/js/*.*.js": true,
|
||||
|
|
|
|||
|
|
@ -2987,7 +2987,7 @@ body {
|
|||
}
|
||||
|
||||
.NB-feed-story .NB-feed-story-header-info {
|
||||
padding: 0 206px 8px 28px;
|
||||
padding: 8px 236px 8px 28px;
|
||||
background-color: #EEF0E9;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
border-left: 3px solid transparent;
|
||||
|
|
@ -3203,6 +3203,14 @@ body {
|
|||
position: relative;
|
||||
clear: both;
|
||||
}
|
||||
.NB-pref-story-position-center .NB-feed-story .NB-feed-story-title-container {
|
||||
margin: 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
.NB-pref-story-position-right .NB-feed-story .NB-feed-story-title-container {
|
||||
margin: 0 0 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.NB-feed-story a.NB-feed-story-title {
|
||||
display: block;
|
||||
|
|
@ -3423,6 +3431,14 @@ body {
|
|||
.NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
|
||||
clear: left;
|
||||
}
|
||||
.NB-pref-story-position-center .NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
|
||||
margin: 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
.NB-pref-story-position-right .NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
|
||||
margin: 0 0 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
.NB-feed-story .NB-feed-story-header .NB-feed-story-show-changes {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
|
|
@ -3484,7 +3500,13 @@ body {
|
|||
max-width: 700px;
|
||||
min-height: 12px;
|
||||
}
|
||||
.NB-pref-full-width-story .NB-feed-story .NB-feed-story-content {
|
||||
.NB-pref-story-position-center .NB-feed-story .NB-feed-story-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.NB-pref-story-position-right .NB-feed-story .NB-feed-story-content {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.NB-pref-story-position-stretch .NB-feed-story .NB-feed-story-content {
|
||||
max-width: none;
|
||||
}
|
||||
.NB-feed-story .NB-narrow-content .NB-feed-story-content {
|
||||
|
|
@ -5372,6 +5394,37 @@ background: transparent;
|
|||
.NB-options-story-titles-pane-south .NB-icon {
|
||||
background: transparent url("/media/embed/reader/layout_bottom.png") no-repeat center center;
|
||||
}
|
||||
.NB-style-popover .NB-story-position-option .NB-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.NB-options-story-position .NB-story-position-option {
|
||||
width: auto;
|
||||
font-size: 12px;
|
||||
padding: 4px 15px;
|
||||
}
|
||||
.NB-options-story-position-stretch {
|
||||
|
||||
}
|
||||
.NB-options-story-position-left .NB-icon {
|
||||
background: transparent url("/media/embed/reader/position_left.svg") no-repeat center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
.NB-options-story-position-center .NB-icon {
|
||||
background: transparent url("/media/embed/reader/position_center.svg") no-repeat center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
.NB-options-story-position-right .NB-icon {
|
||||
background: transparent url("/media/embed/reader/position_right.svg") no-repeat center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
.NB-options-story-position-stretch .NB-icon {
|
||||
background: transparent url("/media/embed/reader/position_stretch.png") no-repeat center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.NB-style-popover .NB-options-single-story {
|
||||
margin-top: 6px;
|
||||
|
|
|
|||
4
media/img/reader/position_center.svg
Normal file
4
media/img/reader/position_center.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1050 700v250c0 13.262-5.2695 25.98-14.645 35.355s-22.094 14.645-35.355 14.645h-350v100c0 17.863-9.5312 34.371-25 43.301-15.469 8.9336-34.531 8.9336-50 0-15.469-8.9297-25-25.438-25-43.301v-100h-350c-13.262 0-25.98-5.2695-35.355-14.645s-14.645-22.094-14.645-35.355v-250c0-13.262 5.2695-25.98 14.645-35.355s22.094-14.645 35.355-14.645h350v-100h-200c-13.262 0-25.98-5.2695-35.355-14.645s-14.645-22.094-14.645-35.355v-250c0-13.262 5.2695-25.98 14.645-35.355s22.094-14.645 35.355-14.645h200v-100c0-17.863 9.5312-34.371 25-43.301 15.469-8.9336 34.531-8.9336 50 0 15.469 8.9297 25 25.438 25 43.301v100h200c13.262 0 25.98 5.2695 35.355 14.645s14.645 22.094 14.645 35.355v250c0 13.262-5.2695 25.98-14.645 35.355s-22.094 14.645-35.355 14.645h-200v100h350c13.262 0 25.98 5.2695 35.355 14.645s14.645 22.094 14.645 35.355z" fill="#7f7f79"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 994 B |
4
media/img/reader/position_left.svg
Normal file
4
media/img/reader/position_left.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m100 1150c-13.262 0-25.98-5.2695-35.355-14.645s-14.645-22.094-14.645-35.355v-1e3c0-17.863 9.5312-34.371 25-43.301 15.469-8.9336 34.531-8.9336 50 0 15.469 8.9297 25 25.438 25 43.301v1e3c0 13.262-5.2695 25.98-14.645 35.355s-22.094 14.645-35.355 14.645zm1e3 -500h-800c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355v250c0 13.262 5.2695 25.98 14.645 35.355s22.094 14.645 35.355 14.645h800c13.262 0 25.98-5.2695 35.355-14.645s14.645-22.094 14.645-35.355v-250c0-13.262-5.2695-25.98-14.645-35.355s-22.094-14.645-35.355-14.645zm-800-100h500c13.262 0 25.98-5.2695 35.355-14.645s14.645-22.094 14.645-35.355v-250c0-13.262-5.2695-25.98-14.645-35.355s-22.094-14.645-35.355-14.645h-500c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355v250c0 13.262 5.2695 25.98 14.645 35.355s22.094 14.645 35.355 14.645z" fill="#7f7f79"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,009 B |
4
media/img/reader/position_right.svg
Normal file
4
media/img/reader/position_right.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m950 250v250c0 13.262-5.2695 25.98-14.645 35.355s-22.094 14.645-35.355 14.645h-500c-13.262 0-25.98-5.2695-35.355-14.645s-14.645-22.094-14.645-35.355v-250c0-13.262 5.2695-25.98 14.645-35.355s22.094-14.645 35.355-14.645h500c13.262 0 25.98 5.2695 35.355 14.645s14.645 22.094 14.645 35.355zm150-200c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355v1e3c0 17.863 9.5312 34.371 25 43.301 15.469 8.9336 34.531 8.9336 50 0 15.469-8.9297 25-25.438 25-43.301v-1e3c0-13.262-5.2695-25.98-14.645-35.355s-22.094-14.645-35.355-14.645zm-200 600h-800c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355v250c0 13.262 5.2695 25.98 14.645 35.355s22.094 14.645 35.355 14.645h800c13.262 0 25.98-5.2695 35.355-14.645s14.645-22.094 14.645-35.355v-250c0-13.262-5.2695-25.98-14.645-35.355s-22.094-14.645-35.355-14.645z" fill="#7f7f79"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,007 B |
BIN
media/img/reader/position_stretch.png
Normal file
BIN
media/img/reader/position_stretch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -529,8 +529,16 @@
|
|||
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-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-is-authenticated', NEWSBLUR.Globals.is_authenticated);
|
||||
if (!!this.model.preference('full_width_story')) {
|
||||
this.model.preference('story_position', 'stretch');
|
||||
this.model.preference('full_width_story', false); // Turn off to ignore and deprecate
|
||||
}
|
||||
this.$s.$body.removeClass('NB-pref-story-position-stretch')
|
||||
.removeClass('NB-pref-story-position-left')
|
||||
.removeClass('NB-pref-story-position-center')
|
||||
.removeClass('NB-pref-story-position-right')
|
||||
.toggleClass('NB-pref-story-position-' + this.model.preference('story_position'));
|
||||
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')
|
||||
|
|
|
|||
|
|
@ -759,25 +759,6 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
|
|||
'Open links'
|
||||
])
|
||||
]),
|
||||
$.make('div', { className: 'NB-preference NB-preference-fullwidthdstory' }, [
|
||||
$.make('div', { className: 'NB-preference-options' }, [
|
||||
$.make('div', [
|
||||
$.make('input', { id: 'NB-preference-fullwidthdstory-1', type: 'radio', name: 'full_width_story', value: "false" }),
|
||||
$.make('label', { 'for': 'NB-preference-fullwidthdstory-1' }, [
|
||||
'Wrap story content at 700px to ease reading'
|
||||
])
|
||||
]),
|
||||
$.make('div', [
|
||||
$.make('input', { id: 'NB-preference-fullwidthdstory-2', type: 'radio', name: 'full_width_story', value: "true" }),
|
||||
$.make('label', { 'for': 'NB-preference-fullwidthdstory-2' }, [
|
||||
'Wrap story content at the edge of the screen'
|
||||
])
|
||||
])
|
||||
]),
|
||||
$.make('div', { className: 'NB-preference-label'}, [
|
||||
'Story width'
|
||||
])
|
||||
]),
|
||||
$.make('div', { className: 'NB-preference NB-preference-truncatestory' }, [
|
||||
$.make('div', { className: 'NB-preference-options' }, [
|
||||
$.make('div', [
|
||||
|
|
@ -1131,12 +1112,6 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
|
|||
return false;
|
||||
}
|
||||
});
|
||||
$('input[name=full_width_story]', $modal).each(function() {
|
||||
if ($(this).val() == ""+NEWSBLUR.Preferences.full_width_story) {
|
||||
$(this).prop('checked', true);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('input[name=truncate_story]', $modal).each(function() {
|
||||
if ($(this).val() == NEWSBLUR.Preferences.truncate_story) {
|
||||
$(this).prop('checked', true);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
"click .NB-view-setting-option": "change_view_setting",
|
||||
"click .NB-line-spacing-option": "change_line_spacing",
|
||||
"click .NB-story-titles-pane-option": "change_story_titles_pane",
|
||||
"click .NB-story-position-option": "change_story_position",
|
||||
"click .NB-single-story-option": "change_single_story",
|
||||
"click .NB-story-": "change_story_position",
|
||||
"click .NB-grid-columns-option": "change_grid_columns",
|
||||
"click .NB-grid-height-option": "change_grid_height",
|
||||
"click .NB-premium-link": "open_premium_modal"
|
||||
|
|
@ -74,8 +76,21 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
$.make('div', { className: 'NB-icon' }),
|
||||
'Single Story'
|
||||
])
|
||||
]),
|
||||
$.make('ul', { className: 'segmented-control NB-options-story-position' }, [
|
||||
$.make('li', { className: 'NB-story-position-option NB-options-story-position-stretch', role: "button" }, [
|
||||
'Full width'
|
||||
]),
|
||||
$.make('li', { className: 'NB-story-position-option NB-options-story-position-left', role: "button" }, [
|
||||
$.make('div', { className: 'NB-icon' })
|
||||
]),
|
||||
$.make('li', { className: 'NB-story-position-option NB-options-story-position-center NB-active', role: "button" }, [
|
||||
$.make('div', { className: 'NB-icon' })
|
||||
]),
|
||||
$.make('li', { className: 'NB-story-position-option NB-options-story-position-right NB-active', role: "button" }, [
|
||||
$.make('div', { className: 'NB-icon' })
|
||||
])
|
||||
])
|
||||
|
||||
]),
|
||||
$.make('div', { className: 'NB-popover-section' }, [
|
||||
$.make('div', { className: 'NB-popover-section-title' }, 'Story Layout - Grid Columns'),
|
||||
|
|
@ -138,8 +153,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
])
|
||||
]),
|
||||
(!NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-premium-explainer' }, [
|
||||
'Premium fonts require a ',
|
||||
$.make('spam', { className: 'NB-splash-link NB-premium-link' }, 'premium account')
|
||||
'Premium fonts require a ',
|
||||
$.make('span', { className: 'NB-splash-link NB-premium-link' }, 'premium account')
|
||||
]))
|
||||
]),
|
||||
$.make('div', { className: 'NB-popover-section' }, [
|
||||
|
|
@ -204,6 +219,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
var grid_height = NEWSBLUR.assets.preference('grid_height');
|
||||
var image_preview = NEWSBLUR.assets.preference('image_preview');
|
||||
var content_preview = NEWSBLUR.assets.preference('show_content_preview');
|
||||
var story_position = NEWSBLUR.assets.preference('story_position');
|
||||
|
||||
this.$('.NB-font-family-option').removeClass('NB-active');
|
||||
this.$('.NB-options-font-family-'+font_family).addClass('NB-active');
|
||||
|
|
@ -216,6 +232,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
this.$('.NB-line-spacing-option').removeClass('NB-active');
|
||||
this.$('.NB-options-line-spacing-'+line_spacing).addClass('NB-active');
|
||||
|
||||
this.$('.NB-story-position-option').removeClass('NB-active');
|
||||
this.$('.NB-options-story-position-'+story_position).addClass('NB-active');
|
||||
this.$('.NB-story-titles-pane-option').removeClass('NB-active');
|
||||
this.$('.NB-options-story-titles-pane-'+titles_layout_pane).addClass('NB-active');
|
||||
this.$('.NB-single-story-option').removeClass('NB-active');
|
||||
|
|
@ -373,6 +391,27 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
|
|||
NEWSBLUR.assets.preference('story_titles_pane_size', pane_size);
|
||||
NEWSBLUR.reader.apply_resizable_layout({right_side: true});
|
||||
},
|
||||
|
||||
change_story_position: function(e) {
|
||||
var $target = $(e.currentTarget);
|
||||
|
||||
if ($target.hasClass("NB-options-story-position-stretch")) {
|
||||
this.update_story_position('stretch');
|
||||
} else if ($target.hasClass("NB-options-story-position-left")) {
|
||||
this.update_story_position('left');
|
||||
} else if ($target.hasClass("NB-options-story-position-center")) {
|
||||
this.update_story_position('center');
|
||||
} else if ($target.hasClass("NB-options-story-position-right")) {
|
||||
this.update_story_position('right');
|
||||
}
|
||||
|
||||
this.show_correct_options();
|
||||
},
|
||||
|
||||
update_story_position: function(setting) {
|
||||
NEWSBLUR.assets.preference('story_position', setting);
|
||||
NEWSBLUR.reader.add_body_classes();
|
||||
},
|
||||
|
||||
change_single_story: function(e) {
|
||||
var $target = $(e.currentTarget);
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
'show_global_shared_stories': true,
|
||||
'show_infrequent_site_stories': true,
|
||||
'full_width_story' : false,
|
||||
'story_position' : 'left',
|
||||
'truncate_story' : 'social',
|
||||
'autoopen_folder' : false,
|
||||
'show_content_preview' : true,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue