From 16b50b5110987a28ee7cb359977bad5620f3fee9 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Wed, 28 Oct 2020 11:51:42 -0400 Subject: [PATCH] Adding style option for grid height. XS/S/M/L/XL --- clients/android/NewsBlur/build.gradle | 4 +- media/css/reader.css | 47 ++++++++++++++--- .../newsblur/views/story_options_popover.js | 52 ++++++++++++++++++- media/js/newsblur/views/story_titles_view.js | 10 +++- templates/base.html | 1 + 5 files changed, 101 insertions(+), 13 deletions(-) diff --git a/clients/android/NewsBlur/build.gradle b/clients/android/NewsBlur/build.gradle index 0eb1a454a..e2271c2d4 100644 --- a/clients/android/NewsBlur/build.gradle +++ b/clients/android/NewsBlur/build.gradle @@ -46,8 +46,8 @@ android { applicationId "com.newsblur" minSdkVersion 21 targetSdkVersion 29 - versionCode 175 - versionName "10.1b7" + versionCode 176 + versionName "10.1" } compileOptions.with { sourceCompatibility = JavaVersion.VERSION_1_8 diff --git a/media/css/reader.css b/media/css/reader.css index 10573c945..7f2137797 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2220,6 +2220,21 @@ hr { -moz-box-sizing: border-box; box-sizing: border-box; } +.NB-layout-grid.NB-grid-height-xs .NB-story-grid { + height: 200px; +} +.NB-layout-grid.NB-grid-height-s .NB-story-grid { + height: 280px; +} +.NB-layout-grid.NB-grid-height-m .NB-story-grid { + height: 360px; +} +.NB-layout-grid.NB-grid-height-l .NB-story-grid { + height: 420px; +} +.NB-layout-grid.NB-grid-height-xl .NB-story-grid { + height: 480px; +} .NB-story-grid.NB-story-title-hide-preview { height: 296px; } @@ -2307,6 +2322,17 @@ hr { -moz-box-sizing: border-box; box-sizing: border-box; } +.NB-layout-grid.NB-grid-height-xs .NB-story-grid .NB-storytitles-story-image { + height: 86px; +} +.NB-layout-grid.NB-grid-height-s .NB-story-grid .NB-storytitles-story-image { + height: 112px; +} +.NB-layout-grid.NB-grid-height-xs.NB-grid-columns-3 .NB-story-grid .NB-storytitles-author, +.NB-layout-grid.NB-grid-height-xs.NB-grid-columns-4 .NB-story-grid .NB-storytitles-author, +.NB-layout-grid.NB-grid-height-s.NB-grid-columns-4 .NB-story-grid .NB-storytitles-author { + display: none; +} .NB-story-grid.read .NB-storytitles-story-image { opacity: .5; } @@ -4964,7 +4990,7 @@ background: transparent; .NB-style-popover .NB-options-feed-font-size li, .NB-style-popover .NB-options-story-font-size li { - width: 45px; + width: 48px; padding: 2px 0; line-height: 16px; font-weight: bold; @@ -4991,7 +5017,7 @@ background: transparent; margin-top: 6px; } .NB-style-popover .NB-options-line-spacing li { - width: 45px; + width: 48px; padding: 2px 0; line-height: 16px; font-weight: bold; @@ -5020,7 +5046,7 @@ background: transparent; } .NB-style-popover .NB-options-font-family { - width: 230px; + width: 246px; } .NB-style-popover .NB-options-font-family li { padding: 5px 0; @@ -5079,7 +5105,7 @@ background: transparent; } .NB-style-popover .NB-story-titles-pane-option { - width: 72px; + width: 79px; font-size: 12px; padding: 4px 0; } @@ -5108,7 +5134,7 @@ background: transparent; margin-top: 6px; } .NB-style-popover .NB-single-story-option { - width: 116px; + width: 122px; font-size: 12px; padding: 4px 0; } @@ -5126,14 +5152,19 @@ background: transparent; background: transparent url("/media/embed/icons/silk/text_horizontalrule.png") no-repeat center center; } -.NB-style-popover .NB-options-grid-columns { +.NB-style-popover .NB-options-grid-columns, +.NB-style-popover .NB-options-grid-height { margin-top: 6px; } -.NB-style-popover .NB-grid-columns-option { - min-width: 23px; +.NB-style-popover .NB-grid-columns-option, +.NB-style-popover .NB-grid-height-option { + min-width: 26px; font-size: 12px; padding: 4px 8px; } +.NB-style-popover .NB-grid-height-option { + min-width: 22px; +} .NB-style-popover .NB-grid-columns-option .NB-icon { width: 16px; height: 16px; diff --git a/media/js/newsblur/views/story_options_popover.js b/media/js/newsblur/views/story_options_popover.js index d909a3245..3ae10dad8 100644 --- a/media/js/newsblur/views/story_options_popover.js +++ b/media/js/newsblur/views/story_options_popover.js @@ -3,7 +3,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ className: "NB-style-popover", options: { - 'width': 264, + 'width': 274, 'anchor': '.NB-taskbar-options', 'placement': 'top right', 'offset': { @@ -22,6 +22,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ "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-grid-height-option": "change_grid_height", "click .NB-premium-link": "open_premium_modal" }, @@ -92,6 +93,23 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-4' }, [ '4' ]) + ]), + $.make('ul', { className: 'segmented-control NB-options-grid-height' }, [ + $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-xs' }, [ + 'XS' + ]), + $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-s' }, [ + 'Short' + ]), + $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-m' }, [ + 'Medium' + ]), + $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-l' }, [ + 'Tall' + ]), + $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-xl' }, [ + 'XL' + ]) ]) ]), $.make('div', { className: 'NB-popover-section' }, [ @@ -159,6 +177,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ 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'); + var grid_height = NEWSBLUR.assets.preference('grid_height'); this.$('.NB-font-family-option').removeClass('NB-active'); this.$('.NB-options-font-family-'+font_family).addClass('NB-active'); @@ -177,6 +196,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ this.$('.NB-grid-columns-option').removeClass('NB-active'); this.$('.NB-options-grid-columns-'+grid_columns).addClass('NB-active'); + this.$('.NB-grid-height-option').removeClass('NB-active'); + this.$('.NB-options-grid-height-'+grid_height).addClass('NB-active'); NEWSBLUR.reader.$s.$taskbar_options.addClass('NB-active'); @@ -366,6 +387,33 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ }); }, + change_grid_height: function(e) { + var $target = $(e.currentTarget); + + if ($target.hasClass("NB-options-grid-height-xs")) { + this.update_grid_height('xs'); + } else if ($target.hasClass("NB-options-grid-height-s")) { + this.update_grid_height('s'); + } else if ($target.hasClass("NB-options-grid-height-m")) { + this.update_grid_height('m'); + } else if ($target.hasClass("NB-options-grid-height-l")) { + this.update_grid_height('l'); + } else if ($target.hasClass("NB-options-grid-height-xl")) { + this.update_grid_height('xl'); + } + + this.show_correct_options(); + }, + + update_grid_height: function(setting) { + NEWSBLUR.assets.preference('grid_height', setting); + NEWSBLUR.app.story_list.render(); + _.defer(function() { + NEWSBLUR.app.story_titles.override_grid(); + NEWSBLUR.reader.resize_window(); + }); + }, + open_premium_modal: function(e) { this.close(e, function() { NEWSBLUR.reader.open_feedchooser_modal({'premium_only': true}); @@ -373,4 +421,4 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ } -}); \ No newline at end of file +}); diff --git a/media/js/newsblur/views/story_titles_view.js b/media/js/newsblur/views/story_titles_view.js index 8a354f2ce..d81f9e83f 100644 --- a/media/js/newsblur/views/story_titles_view.js +++ b/media/js/newsblur/views/story_titles_view.js @@ -101,15 +101,23 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({ if (story_layout != 'grid') return; var columns = NEWSBLUR.assets.preference('grid_columns'); + var height = NEWSBLUR.assets.preference('grid_height'); var $layout = this.$story_titles; $layout.removeClass('NB-grid-columns-1') .removeClass('NB-grid-columns-2') .removeClass('NB-grid-columns-3') .removeClass('NB-grid-columns-4'); + $layout.removeClass('NB-grid-height-xs') + .removeClass('NB-grid-height-s') + .removeClass('NB-grid-height-m') + .removeClass('NB-grid-height-l') + .removeClass('NB-grid-height-xl'); + if (columns > 0) { $layout.addClass('NB-grid-columns-' + columns); } + $layout.addClass('NB-grid-height-' + height); }, append_river_premium_only_notification: function() { @@ -391,4 +399,4 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({ _.invoke(unread_stories, 'mark_read'); } -}); \ No newline at end of file +}); diff --git a/templates/base.html b/templates/base.html index d44159743..676a10db2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -46,6 +46,7 @@ 'default_order' : 'newest', 'default_read_filter' : 'all', 'grid_columns' : 0, + 'grid_height' : 'm', 'hide_read_feeds' : 0, 'show_tooltips' : 1, 'show_contextmenus' : 1,