From ddfa39015e374f7bee0d5b241391c87752db2dc4 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 10 Mar 2021 08:33:56 +0300 Subject: [PATCH] experimental: add preference to show combined mode headlines as a 2 column grid --- classes/pref/prefs.php | 2 ++ classes/prefs.php | 2 ++ classes/rpc.php | 2 +- js/Feeds.js | 12 ++++++++++-- js/Headlines.js | 13 +++++++++++++ themes/compact.css | 21 ++++++++++++++++++++- themes/compact_night.css | 21 ++++++++++++++++++++- themes/light.css | 21 ++++++++++++++++++++- themes/light/tt-rss.less | 25 ++++++++++++++++++++++++- themes/night.css | 21 ++++++++++++++++++++- themes/night_blue.css | 21 ++++++++++++++++++++- 11 files changed, 152 insertions(+), 9 deletions(-) diff --git a/classes/pref/prefs.php b/classes/pref/prefs.php index 34e8dc85b..807a35e10 100644 --- a/classes/pref/prefs.php +++ b/classes/pref/prefs.php @@ -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) diff --git a/classes/prefs.php b/classes/prefs.php index 24f0f7a80..85e7c34db 100644 --- a/classes/prefs.php +++ b/classes/prefs.php @@ -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 = [ diff --git a/classes/rpc.php b/classes/rpc.php index 35125ae04..47fdf105a 100755 --- a/classes/rpc.php +++ b/classes/rpc.php @@ -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); } diff --git a/js/Feeds.js b/js/Feeds.js index b14caeaf9..9e65a06fd 100644 --- a/js/Feeds.js +++ b/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); diff --git a/js/Headlines.js b/js/Headlines.js index 8d7e06f41..8f104c951 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -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 () { diff --git a/themes/compact.css b/themes/compact.css index 3bc7f6f5c..f11072b5c 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -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; diff --git a/themes/compact_night.css b/themes/compact_night.css index b6fde0963..48651ce2d 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -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; diff --git a/themes/light.css b/themes/light.css index c3092723d..c639d888d 100644 --- a/themes/light.css +++ b/themes/light.css @@ -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; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index a47d61dba..645ba13d3 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -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; diff --git a/themes/night.css b/themes/night.css index 7c1b3a874..a12b14c01 100644 --- a/themes/night.css +++ b/themes/night.css @@ -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; diff --git a/themes/night_blue.css b/themes/night_blue.css index b0bcfd348..e4d7894c3 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -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;