From 7a1e1630d835f6b3ca4b8359076d0188493a1763 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Tue, 16 Mar 2021 21:40:20 +0300
Subject: [PATCH] use svg icon for packed article placeholders

---
 js/Article.js            | 4 +++-
 js/Headlines.js          | 4 +++-
 themes/compact.css       | 4 ++++
 themes/compact_night.css | 4 ++++
 themes/light.css         | 4 ++++
 themes/light/cdm.less    | 7 +++++++
 themes/night.css         | 4 ++++
 themes/night_blue.css    | 4 ++++
 8 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/js/Article.js b/js/Article.js
index 4388b41e6..5f882a59f 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -283,7 +283,9 @@ const Article = {
 			row.setAttribute("data-content", row.getAttribute("data-content-original"));
 			row.removeAttribute("data-content-original");
 
-			row.querySelector(".content-inner").innerHTML = "&nbsp;";
+			row.querySelector(".content-inner").innerHTML = `<div class="text-center">
+				<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+			</div>`
 		}
 	},
 	view: function (id, no_expand) {
diff --git a/js/Headlines.js b/js/Headlines.js
index 58348aca7..07796813a 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -534,7 +534,9 @@ const Headlines = {
 						<div class="content" onclick="return Headlines.click(event, ${hl.id}, true);">
 							${Article.renderNote(hl.id, hl.note)}
 							<div class="content-inner" lang="${hl.lang ? hl.lang : 'en'}">
-								<img src="${App.getInitParam('icon_indicator_white')}">
+								<div class="text-center">
+									<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+								</div>
 							</div>
 							<div class="intermediate">
 								${Article.renderEnclosures(hl.enclosures)}
diff --git a/themes/compact.css b/themes/compact.css
index 6c8502c6e..5d9cabcd9 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 83c9937fa..332acaa26 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
diff --git a/themes/light.css b/themes/light.css
index 9f08cfcc1..3dc03ecca 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 4bb1c6064..53d060b19 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -208,6 +208,13 @@
 		}
 	}
 
+	.content-inner {
+		.icon-unpack-pending {
+			width : 18px;
+			height : 18px;
+		}
+	}
+
 	.content-inner .embed-responsive {
 		overflow : hidden;
 		padding-bottom : @embed-responsive-padding;
diff --git a/themes/night.css b/themes/night.css
index 7d5eacbf2..a029b50ec 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -1376,6 +1376,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index b8d98a174..ff1c0e3a0 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -1376,6 +1376,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;