servers
/
ttrss
mirror of https://tt-rss.org/git/tt-rss.git
1
0
Fork 0
Code Issues Releases Wiki Activity

grid: add a header icon (and a hotkey) to toggle article span entire row

This commit is contained in:
Andrew Dolgov 2021-03-11 08:35:02 +03:00
parent 27ab16b6dc
commit f9a381ecca
10 changed files with 73 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
classes/rpc.php
View File

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

3
js/App.js
View File

@ -1204,6 +1204,9 @@ const App = {
Headlines.renderAgain();
});
};
this.hotkey_actions["article_span_grid"] = () => {
Article.cdmToggleGridSpan(Article.getActive());
};
}
},
openPreferences: function(tab) {

21
js/Article.js
View File

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

1
js/Headlines.js
View File

@ -506,6 +506,7 @@ const Headlines = {
<span class="updated" title="${hl.imported}">${hl.updated}</span>
<div class="right">
<i class="material-icons icon-grid-span" title="${__("Span all columns")}" onclick="Article.cdmToggleGridSpan(${hl.id})">fullscreen</i>
<i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
<span style="cursor : pointer" title="${App.escapeHtml(hl.feed_title)}" onclick="Feeds.open({feed:${hl.feed_id}})">

9
themes/compact.css
View File

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

9
themes/compact_night.css
View File

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

9
themes/light.css
View File

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

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

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

9
themes/night.css
View File

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

9
themes/night_blue.css
View File

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