Adding line spacing options.

This commit is contained in:
Samuel Clay 2014-04-08 16:49:11 -07:00
parent bea31acc60
commit af172638e3
4 changed files with 99 additions and 4 deletions

View file

@ -2029,6 +2029,23 @@ body {
font-size: 12px;
line-height: 1.5em;
}
.NB-line-spacing-xs .NB-feed-story {
line-height: 1.1em;
}
.NB-line-spacing-s .NB-feed-story {
line-height: 1.3em;
}
.NB-line-spacing-m .NB-feed-story {
line-height: 1.5em;
}
.NB-line-spacing-l .NB-feed-story {
line-height: 1.7em;
}
.NB-line-spacing-xl .NB-feed-story {
line-height: 1.9em;
}
.NB-theme-sans-serif.NB-theme-size-xs .NB-feed-story {
font-size: 12px;
}
@ -4134,6 +4151,38 @@ background: transparent;
font-size: 15px;
}
.NB-style-popover .NB-options-line-spacing {
margin-top: 6px;
}
.NB-style-popover .NB-options-line-spacing li {
width: 45px;
padding: 2px 0;
line-height: 16px;
font-weight: bold;
}
.NB-style-popover .NB-options-line-spacing .NB-icon {
width: 32px;
height: 16px;
background-size: 32px 16px;
background-position: center center;
margin: 0 auto;
}
.NB-style-popover .NB-options-line-spacing-xs .NB-icon {
background-image: url("/media/embed/reader/line_spacing_xs.png");
}
.NB-style-popover .NB-options-line-spacing-s .NB-icon {
background-image: url("/media/embed/reader/line_spacing_s.png");
}
.NB-style-popover .NB-options-line-spacing-m .NB-icon {
background-image: url("/media/embed/reader/line_spacing_m.png");
}
.NB-style-popover .NB-options-line-spacing-l .NB-icon {
background-image: url("/media/embed/reader/line_spacing_l.png");
}
.NB-style-popover .NB-options-line-spacing-xl .NB-icon {
background-image: url("/media/embed/reader/line_spacing_xl.png");
}
.NB-style-popover .NB-options-font-family {
width: 230px;
}

View file

@ -2506,6 +2506,13 @@
.removeClass('NB-theme-size-xl');
$body.addClass('NB-theme-size-' + NEWSBLUR.Preferences['story_size']);
$body.removeClass('NB-line-spacing-xs')
.removeClass('NB-line-spacing-s')
.removeClass('NB-line-spacing-m')
.removeClass('NB-line-spacing-l')
.removeClass('NB-line-spacing-xl');
$body.addClass('NB-line-spacing-' + NEWSBLUR.Preferences['story_line_spacing']);
if (reset_stories) {
this.show_story_titles_above_intelligence_level({'animate': true, 'follow': true});
}

View file

@ -17,6 +17,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
events: {
"click .NB-font-family-option": "change_font_family",
"click .NB-font-size-option": "change_font_size",
"click .NB-line-spacing-option": "change_line_spacing",
"click .NB-story-titles-pane-option": "change_story_titles_pane"
},
@ -62,10 +63,10 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
$.make('ul', { className: 'segmented-control-vertical NB-options-font-family' }, [
$.make('li', { className: 'NB-font-family-option NB-options-font-family-sans-serif NB-active' }, 'Helvetica'),
$.make('li', { className: 'NB-font-family-option NB-options-font-family-serif' }, 'Palatino / Georgia'),
$.make('li', { className: 'NB-font-family-option NB-options-font-family-gotham' }, 'Gotham Narrow'),
$.make('li', { className: 'NB-font-family-option NB-options-font-family-sentinel' }, 'Sentinel'),
$.make('li', { className: 'NB-font-family-option NB-options-font-family-whitney' }, 'Whitney'),
$.make('li', { className: 'NB-font-family-option NB-options-font-family-chronicle' }, 'Chronicle')
$.make('li', { className: 'NB-font-family-option NB-premium-only NB-options-font-family-gotham' }, 'Gotham Narrow'),
$.make('li', { className: 'NB-font-family-option NB-premium-only NB-options-font-family-sentinel' }, 'Sentinel'),
$.make('li', { className: 'NB-font-family-option NB-premium-only NB-options-font-family-whitney' }, 'Whitney'),
$.make('li', { className: 'NB-font-family-option NB-premium-only NB-options-font-family-chronicle' }, 'Chronicle')
])
]),
$.make('div', { className: 'NB-popover-section' }, [
@ -76,6 +77,13 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
$.make('li', { className: 'NB-font-size-option NB-options-font-size-m NB-active' }, 'M'),
$.make('li', { className: 'NB-font-size-option NB-options-font-size-l' }, 'L'),
$.make('li', { className: 'NB-font-size-option NB-options-font-size-xl' }, 'XL')
]),
$.make('ul', { className: 'segmented-control NB-options-line-spacing' }, [
$.make('li', { className: 'NB-line-spacing-option NB-options-line-spacing-xs' }, $.make('div', { className: 'NB-icon' })),
$.make('li', { className: 'NB-line-spacing-option NB-options-line-spacing-s' }, $.make('div', { className: 'NB-icon' })),
$.make('li', { className: 'NB-line-spacing-option NB-options-line-spacing-m NB-active' }, $.make('div', { className: 'NB-icon' })),
$.make('li', { className: 'NB-line-spacing-option NB-options-line-spacing-l' }, $.make('div', { className: 'NB-icon' })),
$.make('li', { className: 'NB-line-spacing-option NB-options-line-spacing-xl' }, $.make('div', { className: 'NB-icon' }))
])
])
]));
@ -86,6 +94,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
show_correct_options: function() {
var font_family = NEWSBLUR.assets.preference('story_styling');
var font_size = NEWSBLUR.assets.preference('story_size');
var line_spacing = NEWSBLUR.assets.preference('story_line_spacing');
var titles_layout_pane = NEWSBLUR.assets.preference('story_pane_anchor');
this.$('.NB-font-family-option').removeClass('NB-active');
@ -93,11 +102,17 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
this.$('.NB-font-size-option').removeClass('NB-active');
this.$('.NB-options-font-size-'+font_size).addClass('NB-active');
this.$('.NB-line-spacing-option').removeClass('NB-active');
this.$('.NB-options-line-spacing-'+line_spacing).addClass('NB-active');
this.$('.NB-story-titles-pane-option').removeClass('NB-active');
this.$('.NB-options-story-titles-pane-'+titles_layout_pane).addClass('NB-active');
NEWSBLUR.reader.$s.$taskbar_options.addClass('NB-active');
if (!NEWSBLUR.Globals.is_premium) {
this.$(". NB-premium-only").addClass('NB-disabled').attr('disabled', 'disabled');
}
},
@ -153,6 +168,29 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
NEWSBLUR.reader.apply_story_styling();
},
change_line_spacing: function(e) {
var $target = $(e.currentTarget);
if ($target.hasClass("NB-options-line-spacing-xs")) {
this.update_line_spacing('xs');
} else if ($target.hasClass("NB-options-line-spacing-s")) {
this.update_line_spacing('s');
} else if ($target.hasClass("NB-options-line-spacing-m")) {
this.update_line_spacing('m');
} else if ($target.hasClass("NB-options-line-spacing-l")) {
this.update_line_spacing('l');
} else if ($target.hasClass("NB-options-line-spacing-xl")) {
this.update_line_spacing('xl');
}
this.show_correct_options();
},
update_line_spacing: function(setting) {
NEWSBLUR.assets.preference('story_line_spacing', setting);
NEWSBLUR.reader.apply_story_styling();
},
change_story_titles_pane: function(e) {
var $target = $(e.currentTarget);

View file

@ -68,6 +68,7 @@
'collapsed_folders' : [],
'story_styling' : 'sans-serif',
'story_size' : 's',
'story_line_spacing' : 'm',
'hide_public_comments' : false,
'timezone' : "{{ user_profile.timezone }}",
'title_counts' : true,