diff --git a/media/css/reader.css b/media/css/reader.css index 71bd8d7a6..0955ad3e5 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2095,19 +2095,19 @@ a img { -moz-box-sizing: border-box; box-sizing: border-box; } -#story_titles.NB-layout-grid.NB-grid-override-2 .NB-story-grid, +#story_titles.NB-layout-grid.NB-grid-columns-2 .NB-story-grid, .NB-narrow-content #story_titles .NB-story-grid { width: 44%; } -#story_titles.NB-layout-grid.NB-grid-override-1 .NB-story-grid, +#story_titles.NB-layout-grid.NB-grid-columns-1 .NB-story-grid, .NB-extra-narrow-content #story_titles .NB-story-grid { width: 94%; } -#story_titles.NB-layout-grid.NB-grid-override-3 .NB-story-grid, +#story_titles.NB-layout-grid.NB-grid-columns-3 .NB-story-grid, .NB-wide-content #story_titles .NB-story-grid { width: 29%; } -#story_titles.NB-layout-grid.NB-grid-override-4 .NB-story-grid, +#story_titles.NB-layout-grid.NB-grid-columns-4 .NB-story-grid, .NB-extra-wide-content #story_titles .NB-story-grid { width: 21%; } @@ -4760,15 +4760,15 @@ background: transparent; background: transparent url("/media/embed/icons/silk/text_horizontalrule.png") no-repeat center center; } -.NB-style-popover .NB-options-grid-override { +.NB-style-popover .NB-options-grid-columns { margin-top: 6px; } -.NB-style-popover .NB-grid-override-option { +.NB-style-popover .NB-grid-columns-option { min-width: 23px; font-size: 12px; padding: 4px 8px; } -.NB-style-popover .NB-grid-override-option .NB-icon { +.NB-style-popover .NB-grid-columns-option .NB-icon { width: 16px; height: 16px; display: inline-block; diff --git a/media/js/newsblur/views/story_options_popover.js b/media/js/newsblur/views/story_options_popover.js index ba71ed945..1381286f4 100644 --- a/media/js/newsblur/views/story_options_popover.js +++ b/media/js/newsblur/views/story_options_popover.js @@ -21,6 +21,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ "click .NB-line-spacing-option": "change_line_spacing", "click .NB-story-titles-pane-option": "change_story_titles_pane", "click .NB-single-story-option": "change_single_story", + "click .NB-grid-columns-option": "change_grid_columns", "click .NB-premium-link": "open_premium_modal" }, @@ -45,7 +46,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ this.$el.html($.make('div', [ $.make('div', { className: 'NB-popover-section' }, [ - $.make('div', { className: 'NB-popover-section-title' }, 'Story Layout'), + $.make('div', { className: 'NB-popover-section-title' }, 'Story Layout - Split'), $.make('ul', { className: 'segmented-control NB-options-story-titles-pane' }, [ $.make('li', { className: 'NB-story-titles-pane-option NB-options-story-titles-pane-north' }, [ $.make('div', { className: 'NB-icon' }), @@ -73,22 +74,22 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ ]), $.make('div', { className: 'NB-popover-section' }, [ - $.make('div', { className: 'NB-popover-section-title' }, 'Grid Columns'), - $.make('ul', { className: 'segmented-control NB-options-grid-override' }, [ - $.make('li', { className: 'NB-grid-override-option NB-options-grid-override-auto' }, [ + $.make('div', { className: 'NB-popover-section-title' }, 'Story Layout - Grid Columns'), + $.make('ul', { className: 'segmented-control NB-options-grid-columns' }, [ + $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-0' }, [ $.make('div', { className: 'NB-icon' }), 'Auto' ]), - $.make('li', { className: 'NB-grid-override-option NB-options-grid-override-1' }, [ + $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-1' }, [ '1' ]), - $.make('li', { className: 'NB-grid-override-option NB-options-grid-override-2' }, [ + $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-2' }, [ '2' ]), - $.make('li', { className: 'NB-grid-override-option NB-options-grid-override-3' }, [ + $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-3' }, [ '3' ]), - $.make('li', { className: 'NB-grid-override-option NB-options-grid-override-4' }, [ + $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-4' }, [ '4' ]) ]) @@ -157,6 +158,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ var line_spacing = NEWSBLUR.assets.preference('story_line_spacing'); var titles_layout_pane = NEWSBLUR.assets.preference('story_pane_anchor'); var single_story = NEWSBLUR.assets.preference('feed_view_single_story'); + var grid_columns = NEWSBLUR.assets.preference('grid_columns'); this.$('.NB-font-family-option').removeClass('NB-active'); this.$('.NB-options-font-family-'+font_family).addClass('NB-active'); @@ -173,6 +175,9 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ this.$('.NB-single-story-option').removeClass('NB-active'); this.$('.NB-options-single-story-'+(single_story?'on':'off')).addClass('NB-active'); + this.$('.NB-grid-columns-option').removeClass('NB-active'); + this.$('.NB-options-grid-columns-'+grid_columns).addClass('NB-active'); + NEWSBLUR.reader.$s.$taskbar_options.addClass('NB-active'); if (!NEWSBLUR.Globals.is_premium) { @@ -334,6 +339,35 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ }); }, + change_grid_columns: function(e) { + var $target = $(e.currentTarget); + + if ($target.hasClass("NB-options-grid-columns-0")) { + this.update_grid_columns(0); + } else if ($target.hasClass("NB-options-grid-columns-1")) { + this.update_grid_columns(1); + } else if ($target.hasClass("NB-options-grid-columns-2")) { + this.update_grid_columns(2); + } else if ($target.hasClass("NB-options-grid-columns-3")) { + this.update_grid_columns(3); + } else if ($target.hasClass("NB-options-grid-columns-4")) { + this.update_grid_columns(4); + } + + this.show_correct_options(); + }, + + update_grid_columns: function(setting) { + NEWSBLUR.assets.preference('grid_columns', setting); + NEWSBLUR.app.story_list.render(); + _.defer(function() { + NEWSBLUR.reader.resize_window(); + if (NEWSBLUR.reader.active_story) { + NEWSBLUR.reader.active_story.set('selected', false).set('selected', true); + } + }); + }, + open_premium_modal: function(e) { this.close(e, function() { NEWSBLUR.reader.open_feedchooser_modal({'premium_only': true}); diff --git a/templates/base.html b/templates/base.html index 3913b25f9..e0e3bb4eb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -45,6 +45,7 @@ 'default_view' : 'feed', 'default_order' : 'newest', 'default_read_filter' : 'all', + 'grid_columns' : 0, 'hide_read_feeds' : 0, 'show_tooltips' : 1, 'show_contextmenus' : 1,