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

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

js/App.js

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

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)) {
+			if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
-			ctr.scrollTop = row.offsetTop;
+				ctr.scrollTop = row.offsetTop - grid_gap;
+			}
 		}
 	},
 	setActive: function (id) {

js/Headlines.js

@@ -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}})">

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;

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;

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;

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;

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;

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;