experimental: add preference to show combined mode headlines as a 2 column grid
This commit is contained in:
parent
6ec66d0ce5
commit
ddfa39015e
|
@ -54,6 +54,7 @@ class Pref_Prefs extends Handler_Protected {
|
|||
'BLOCK_SEPARATOR',
|
||||
Prefs::COMBINED_DISPLAY_MODE,
|
||||
Prefs::CDM_EXPANDED,
|
||||
Prefs::CDM_ENABLE_GRID,
|
||||
'BLOCK_SEPARATOR',
|
||||
Prefs::CDM_AUTO_CATCHUP,
|
||||
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::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::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)
|
||||
|
|
|
@ -60,6 +60,7 @@ class Prefs {
|
|||
const DEBUG_HEADLINE_IDS = "DEBUG_HEADLINE_IDS";
|
||||
const DISABLE_CONDITIONAL_COUNTERS = "DISABLE_CONDITIONAL_COUNTERS";
|
||||
const WIDESCREEN_MODE = "WIDESCREEN_MODE";
|
||||
const CDM_ENABLE_GRID = "CDM_ENABLE_GRID";
|
||||
|
||||
private const _DEFAULTS = [
|
||||
Prefs::PURGE_OLD_DAYS => [ 60, Config::T_INT ],
|
||||
|
@ -120,6 +121,7 @@ class Prefs {
|
|||
Prefs::DEBUG_HEADLINE_IDS => [ false, Config::T_BOOL ],
|
||||
Prefs::DISABLE_CONDITIONAL_COUNTERS => [ false, Config::T_BOOL ],
|
||||
Prefs::WIDESCREEN_MODE => [ false, Config::T_BOOL ],
|
||||
Prefs::CDM_ENABLE_GRID => [ false, Config::T_BOOL ],
|
||||
];
|
||||
|
||||
const _PROFILE_BLACKLIST = [
|
||||
|
|
|
@ -431,7 +431,7 @@ class RPC extends Handler_Protected {
|
|||
Prefs::ENABLE_FEED_CATS, Prefs::FEEDS_SORT_BY_UNREAD,
|
||||
Prefs::CONFIRM_FEED_CATCHUP, Prefs::CDM_AUTO_CATCHUP,
|
||||
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);
|
||||
}
|
||||
|
|
12
js/Feeds.js
12
js/Feeds.js
|
@ -321,8 +321,16 @@ const Feeds = {
|
|||
this._active_feed_id = id;
|
||||
this._active_feed_is_cat = is_cat;
|
||||
|
||||
App.byId("headlines-frame").setAttribute("feed-id", id);
|
||||
App.byId("headlines-frame").setAttribute("is-cat", is_cat ? 1 : 0);
|
||||
const container = App.byId("headlines-frame");
|
||||
|
||||
// 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);
|
||||
|
||||
|
|
|
@ -431,6 +431,8 @@ const Headlines = {
|
|||
this.unpack_observer.observe(e)
|
||||
});
|
||||
|
||||
dijit.byId('main').resize();
|
||||
|
||||
},
|
||||
render: function (headlines, hl) {
|
||||
let row = null;
|
||||
|
@ -459,6 +461,11 @@ const Headlines = {
|
|||
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()) {
|
||||
row_class += App.getInitParam("cdm_expanded") ? " expanded" : " expandable";
|
||||
|
||||
|
@ -677,9 +684,13 @@ const Headlines = {
|
|||
// also called in renderAgain() after view mode switch
|
||||
Headlines.setCommonClasses();
|
||||
|
||||
/** TODO: remove @deprecated */
|
||||
App.byId("headlines-frame").setAttribute("is-vfeed",
|
||||
reply['headlines']['is_vfeed'] ? 1 : 0);
|
||||
|
||||
App.byId("headlines-frame").setAttribute("data-is-vfeed",
|
||||
reply['headlines']['is_vfeed'] ? "true" : "false");
|
||||
|
||||
Article.setActive(0);
|
||||
|
||||
try {
|
||||
|
@ -820,6 +831,8 @@ const Headlines = {
|
|||
// unpack visible articles, fill buffer more, etc
|
||||
this.scrollHandler();
|
||||
|
||||
dijit.byId('main').resize();
|
||||
|
||||
Notify.close();
|
||||
},
|
||||
reverse: function () {
|
||||
|
|
|
@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
|
|||
margin: 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;
|
||||
}
|
||||
@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 {
|
||||
padding: 0px;
|
||||
border: 0px #ddd;
|
||||
|
|
|
@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
|
|||
margin: 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;
|
||||
}
|
||||
@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 {
|
||||
padding: 0px;
|
||||
border: 0px #222;
|
||||
|
|
|
@ -644,9 +644,28 @@ body.ttrss_main #headlines-wrap-inner {
|
|||
margin: 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;
|
||||
}
|
||||
@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 {
|
||||
padding: 0px;
|
||||
border: 0px #ddd;
|
||||
|
|
|
@ -751,10 +751,33 @@ body.ttrss_main {
|
|||
border-width : 0px;
|
||||
}
|
||||
|
||||
#headlines-frame[is-vfeed="0"] .header .feed {
|
||||
#headlines-frame[data-is-vfeed="false"] .header .feed {
|
||||
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 {
|
||||
padding : 0px;
|
||||
border: 0px @border-default;
|
||||
|
|
|
@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
|
|||
margin: 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;
|
||||
}
|
||||
@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 {
|
||||
padding: 0px;
|
||||
border: 0px #222;
|
||||
|
|
|
@ -645,9 +645,28 @@ body.ttrss_main #headlines-wrap-inner {
|
|||
margin: 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;
|
||||
}
|
||||
@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 {
|
||||
padding: 0px;
|
||||
border: 0px #222;
|
||||
|
|
Loading…
Reference in New Issue