diff --git a/classes/rpc.php b/classes/rpc.php index 59349a5f7..bde0b1e46 100755 --- a/classes/rpc.php +++ b/classes/rpc.php @@ -664,6 +664,7 @@ class RPC extends Handler_Protected { "a e" => "toggle_full_text", "e" => "email_article", "a q" => "close_article", + "a s" => "article_span_grid", "a a" => "select_all", "a u" => "select_unread", "a U" => "select_marked", diff --git a/js/App.js b/js/App.js index 649571593..e2da5433b 100644 --- a/js/App.js +++ b/js/App.js @@ -1204,6 +1204,9 @@ const App = { Headlines.renderAgain(); }); }; + this.hotkey_actions["article_span_grid"] = () => { + Article.cdmToggleGridSpan(Article.getActive()); + }; } }, openPreferences: function(tab) { diff --git a/js/Article.js b/js/Article.js index ed74051a6..5c39240c7 100644 --- a/js/Article.js +++ b/js/Article.js @@ -93,6 +93,19 @@ const Article = { w.opener = null; w.location = url; }, + cdmToggleGridSpan: function(id) { + const row = App.byId(`RROW-${id}`); + + if (row) { + + if (row.style.gridColumn != '1 / -1') + row.style.gridColumn = '1 / -1'; + else + row.style.gridColumn = ''; + + this.cdmMoveToId(id); + } + }, cdmUnsetActive: function (event) { const row = App.byId(`RROW-${Article.getActive()}`); @@ -389,10 +402,12 @@ const Article = { const ctr = App.byId("headlines-frame"); const row = App.byId(`RROW-${id}`); - if (!row || !ctr) return; + if (ctr && row) { + const grid_gap = parseInt(window.getComputedStyle(ctr).gridGap) || 0; - if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) { - ctr.scrollTop = row.offsetTop; + if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) { + ctr.scrollTop = row.offsetTop - grid_gap; + } } }, setActive: function (id) { diff --git a/js/Headlines.js b/js/Headlines.js index 36cff4bc8..65cd2480c 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -506,6 +506,7 @@ const Headlines = { ${hl.updated}
+ fullscreen ${Article.getScorePic(hl.score)} diff --git a/themes/compact.css b/themes/compact.css index 02c3c8328..92f9000e7 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true" border-bottom-width: 0; padding: 4px; } +body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { + display: inline; +} body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } @@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main i.icon-score { +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { cursor: pointer; color: #777; } +body.ttrss_main .icon-grid-span { + display: none; +} body.ttrss_main .panel { border: 1px solid #ddd; background: #f5f5f5; diff --git a/themes/compact_night.css b/themes/compact_night.css index d941c4391..1c118be1a 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true" border-bottom-width: 0; padding: 4px; } +body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { + display: inline; +} body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } @@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main i.icon-score { +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { cursor: pointer; color: #999; } +body.ttrss_main .icon-grid-span { + display: none; +} body.ttrss_main .panel { border: 1px solid #222; background: #222; diff --git a/themes/light.css b/themes/light.css index 9d8fe9dc2..04e58c776 100644 --- a/themes/light.css +++ b/themes/light.css @@ -680,6 +680,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true" border-bottom-width: 0; padding: 4px; } +body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { + display: inline; +} body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } @@ -1031,10 +1034,14 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main i.icon-score { +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { cursor: pointer; color: #777; } +body.ttrss_main .icon-grid-span { + display: none; +} body.ttrss_main .panel { border: 1px solid #ddd; background: #f5f5f5; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 688f34010..cc9a66bd6 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -792,6 +792,10 @@ body.ttrss_main { border-bottom-width : 0; padding : 4px; + .icon-grid-span { + display : inline; + } + .feed { display : none; } @@ -1220,11 +1224,16 @@ body.ttrss_main { opacity : 0.5; }*/ - i.icon-score { + i.icon-score, i.icon-grid-span { cursor : pointer; color : @color-icon; } + // only shown in grid mode + .icon-grid-span { + display : none; + } + .panel { border : 1px solid @border-default; background : @color-panel-bg; diff --git a/themes/night.css b/themes/night.css index 5c5c47289..4814ed5e2 100644 --- a/themes/night.css +++ b/themes/night.css @@ -681,6 +681,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true" border-bottom-width: 0; padding: 4px; } +body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { + display: inline; +} body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } @@ -1032,10 +1035,14 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main i.icon-score { +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { cursor: pointer; color: #999; } +body.ttrss_main .icon-grid-span { + display: none; +} body.ttrss_main .panel { border: 1px solid #222; background: #222; diff --git a/themes/night_blue.css b/themes/night_blue.css index c10c0a92d..9520f5ca6 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -681,6 +681,9 @@ body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true" border-bottom-width: 0; padding: 4px; } +body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { + display: inline; +} body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } @@ -1032,10 +1035,14 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main i.icon-score { +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { cursor: pointer; color: #999; } +body.ttrss_main .icon-grid-span { + display: none; +} body.ttrss_main .panel { border: 1px solid #222; background: #222;