valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

experimental: add preference to show combined mode headlines as a 2 column grid

This commit is contained in:
Andrew Dolgov 2021-03-10 08:33:56 +03:00
parent 6ec66d0ce5
commit ddfa39015e
11 changed files with 152 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
classes/pref/prefs.php
View File

@ -54,6 +54,7 @@ class Pref_Prefs extends Handler_Protected {
'BLOCK_SEPARATOR', 'BLOCK_SEPARATOR',
Prefs::COMBINED_DISPLAY_MODE, Prefs::COMBINED_DISPLAY_MODE,
Prefs::CDM_EXPANDED, Prefs::CDM_EXPANDED,
Prefs::CDM_ENABLE_GRID,
'BLOCK_SEPARATOR', 'BLOCK_SEPARATOR',
Prefs::CDM_AUTO_CATCHUP, Prefs::CDM_AUTO_CATCHUP,
Prefs::VFEED_GROUP_BY_FEED, Prefs::VFEED_GROUP_BY_FEED,
@ -117,6 +118,7 @@ class Pref_Prefs extends Handler_Protected {
Prefs::HEADLINES_NO_DISTINCT => array(__("Don't enforce DISTINCT headlines"), __("May produce duplicate entries")), Prefs::HEADLINES_NO_DISTINCT => array(__("Don't enforce DISTINCT headlines"), __("May produce duplicate entries")),
Prefs::DEBUG_HEADLINE_IDS => array(__("Show article and feed IDs"), __("In the headlines buffer")), Prefs::DEBUG_HEADLINE_IDS => array(__("Show article and feed IDs"), __("In the headlines buffer")),
Prefs::DISABLE_CONDITIONAL_COUNTERS => array(__("Disable conditional counter updates"), __("May increase server load")), Prefs::DISABLE_CONDITIONAL_COUNTERS => array(__("Disable conditional counter updates"), __("May increase server load")),
Prefs::CDM_ENABLE_GRID => array(__("Show as grid"), __("On wider screens, if always expanded")),
]; ];
// hidden in the main prefs UI (use to hide things that have description set above) // hidden in the main prefs UI (use to hide things that have description set above)

2
classes/prefs.php
View File

@ -60,6 +60,7 @@ class Prefs {
const DEBUG_HEADLINE_IDS = "DEBUG_HEADLINE_IDS"; const DEBUG_HEADLINE_IDS = "DEBUG_HEADLINE_IDS";
const DISABLE_CONDITIONAL_COUNTERS = "DISABLE_CONDITIONAL_COUNTERS"; const DISABLE_CONDITIONAL_COUNTERS = "DISABLE_CONDITIONAL_COUNTERS";
const WIDESCREEN_MODE = "WIDESCREEN_MODE"; const WIDESCREEN_MODE = "WIDESCREEN_MODE";
const CDM_ENABLE_GRID = "CDM_ENABLE_GRID";
private const _DEFAULTS = [ private const _DEFAULTS = [
Prefs::PURGE_OLD_DAYS => [ 60, Config::T_INT ], Prefs::PURGE_OLD_DAYS => [ 60, Config::T_INT ],
@ -120,6 +121,7 @@ class Prefs {
Prefs::DEBUG_HEADLINE_IDS => [ false, Config::T_BOOL ], Prefs::DEBUG_HEADLINE_IDS => [ false, Config::T_BOOL ],
Prefs::DISABLE_CONDITIONAL_COUNTERS => [ false, Config::T_BOOL ], Prefs::DISABLE_CONDITIONAL_COUNTERS => [ false, Config::T_BOOL ],
Prefs::WIDESCREEN_MODE => [ false, Config::T_BOOL ], Prefs::WIDESCREEN_MODE => [ false, Config::T_BOOL ],
Prefs::CDM_ENABLE_GRID => [ false, Config::T_BOOL ],
]; ];
const _PROFILE_BLACKLIST = [ const _PROFILE_BLACKLIST = [

2
classes/rpc.php
View File

@ -431,7 +431,7 @@ class RPC extends Handler_Protected {
Prefs::ENABLE_FEED_CATS, Prefs::FEEDS_SORT_BY_UNREAD, Prefs::ENABLE_FEED_CATS, Prefs::FEEDS_SORT_BY_UNREAD,
Prefs::CONFIRM_FEED_CATCHUP, Prefs::CDM_AUTO_CATCHUP, Prefs::CONFIRM_FEED_CATCHUP, Prefs::CDM_AUTO_CATCHUP,
Prefs::FRESH_ARTICLE_MAX_AGE, Prefs::HIDE_READ_SHOWS_SPECIAL, Prefs::FRESH_ARTICLE_MAX_AGE, Prefs::HIDE_READ_SHOWS_SPECIAL,
Prefs::COMBINED_DISPLAY_MODE, Prefs::DEBUG_HEADLINE_IDS] as $param) { Prefs::COMBINED_DISPLAY_MODE, Prefs::DEBUG_HEADLINE_IDS, Prefs::CDM_ENABLE_GRID] as $param) {
$params[strtolower($param)] = (int) get_pref($param); $params[strtolower($param)] = (int) get_pref($param);
} }

12
js/Feeds.js
View File

@ -321,8 +321,16 @@ const Feeds = {
this._active_feed_id = id; this._active_feed_id = id;
this._active_feed_is_cat = is_cat; this._active_feed_is_cat = is_cat;
App.byId("headlines-frame").setAttribute("feed-id", id); const container = App.byId("headlines-frame");
App.byId("headlines-frame").setAttribute("is-cat", is_cat ? 1 : 0);
// TODO @deprecated: these two should be removed (replaced with data- attributes below)
container.setAttribute("feed-id", id);
container.setAttribute("is-cat", is_cat ? 1 : 0);
// ^
container.setAttribute("data-feed-id", id);
container.setAttribute("data-is-cat", is_cat ? "true" : "false");
container.setAttribute("data-enable-grid", App.getInitParam("cdm_enable_grid") ? "true" : "false");
this.select(id, is_cat); this.select(id, is_cat);

13
js/Headlines.js
View File

@ -431,6 +431,8 @@ const Headlines = {
this.unpack_observer.observe(e) this.unpack_observer.observe(e)
}); });
dijit.byId('main').resize();
}, },
render: function (headlines, hl) { render: function (headlines, hl) {
let row = null; let row = null;
@ -459,6 +461,11 @@ const Headlines = {
this.vgroup_last_feed = hl.feed_id; this.vgroup_last_feed = hl.feed_id;
} }
const container = App.byId("headlines-frame");
container.setAttribute("data-is-cdm", App.isCombinedMode() ? "true" : "false");
container.setAttribute("data-is-cdm-expanded", App.getInitParam("cdm_expanded"));
if (App.isCombinedMode()) { if (App.isCombinedMode()) {
row_class += App.getInitParam("cdm_expanded") ? " expanded" : " expandable"; row_class += App.getInitParam("cdm_expanded") ? " expanded" : " expandable";
@ -677,9 +684,13 @@ const Headlines = {
// also called in renderAgain() after view mode switch // also called in renderAgain() after view mode switch
Headlines.setCommonClasses(); Headlines.setCommonClasses();
/** TODO: remove @deprecated */
App.byId("headlines-frame").setAttribute("is-vfeed", App.byId("headlines-frame").setAttribute("is-vfeed",
reply['headlines']['is_vfeed'] ? 1 : 0); reply['headlines']['is_vfeed'] ? 1 : 0);
App.byId("headlines-frame").setAttribute("data-is-vfeed",
reply['headlines']['is_vfeed'] ? "true" : "false");
Article.setActive(0); Article.setActive(0);
try { try {
@ -820,6 +831,8 @@ const Headlines = {
// unpack visible articles, fill buffer more, etc // unpack visible articles, fill buffer more, etc
this.scrollHandler(); this.scrollHandler();
dijit.byId('main').resize();
Notify.close(); Notify.close();
}, },
reverse: function () { reverse: function () {

21
themes/compact.css
View File

@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
margin: 0px; margin: 0px;
border-width: 0px; border-width: 0px;
} }
body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed { body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
display: none; display: none;
} }
@media screen and (min-width: 1500px) {
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: #f5f5f5;
grid-gap: 8px;
padding: 8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
top: -8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded {
background: white;
border: 1px solid #ddd;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
border: 0;
}
}
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #ddd; border: 0px #ddd;

21
themes/compact_night.css
View File

@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
margin: 0px; margin: 0px;
border-width: 0px; border-width: 0px;
} }
body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed { body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
display: none; display: none;
} }
@media screen and (min-width: 1500px) {
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: #222;
grid-gap: 8px;
padding: 8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
top: -8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded {
background: #333;
border: 1px solid #222;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
border: 0;
}
}
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #222; border: 0px #222;

21
themes/light.css
View File

@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
margin: 0px; margin: 0px;
border-width: 0px; border-width: 0px;
} }
body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed { body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
display: none; display: none;
} }
@media screen and (min-width: 1500px) {
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: #f5f5f5;
grid-gap: 8px;
padding: 8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
top: -8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded {
background: white;
border: 1px solid #ddd;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
border: 0;
}
}
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #ddd; border: 0px #ddd;

25
themes/light/tt-rss.less
View File

@ -751,10 +751,33 @@ body.ttrss_main {
border-width : 0px; border-width : 0px;
} }
#headlines-frame[is-vfeed="0"] .header .feed { #headlines-frame[data-is-vfeed="false"] .header .feed {
display : none; display : none;
} }
@media screen and (min-width: 1500px) {
#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display : grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: @color-panel-bg;
grid-gap : 8px;
padding : 8px;
.header[stuck] {
top : -8px;
}
.cdm.expanded {
background : @default-bg;
border : 1px solid @border-default;
.footer {
border : 0;
}
}
}
}
#headlines-frame { #headlines-frame {
padding : 0px; padding : 0px;
border: 0px @border-default; border: 0px @border-default;

21
themes/night.css
View File

@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
margin: 0px; margin: 0px;
border-width: 0px; border-width: 0px;
} }
body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed { body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
display: none; display: none;
} }
@media screen and (min-width: 1500px) {
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: #222;
grid-gap: 8px;
padding: 8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
top: -8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded {
background: #333;
border: 1px solid #222;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
border: 0;
}
}
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #222; border: 0px #222;

21
themes/night_blue.css
View File

@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
margin: 0px; margin: 0px;
border-width: 0px; border-width: 0px;
} }
body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed { body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed {
display: none; display: none;
} }
@media screen and (min-width: 1500px) {
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
background-color: #222;
grid-gap: 8px;
padding: 8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .header[stuck] {
top: -8px;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded {
background: #333;
border: 1px solid #222;
}
body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer {
border: 0;
}
}
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #222; border: 0px #222;