public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-08-31 22:20:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding style option for grid height. XS/S/M/L/XL

Browse source
This commit is contained in:
Samuel Clay 2020-10-28 11:51:42 -04:00
parent f1802c29c4
commit 16b50b5110
5 changed files with 101 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
clients/android/NewsBlur/build.gradle
View file

@ -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

47
media/css/reader.css
View file

@ -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;

52
media/js/newsblur/views/story_options_popover.js
View file

@ -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({
}
});
});

10
media/js/newsblur/views/story_titles_view.js
View file

@ -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');
}
});
});

1
templates/base.html
View file

@ -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,