From 0f5fd9ea13f9881698fd29333aa3e5f4acbf7bd3 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Tue, 16 Mar 2021 22:09:01 +0300
Subject: [PATCH] use svg icon for headlines loadmore prompt

---
 index.php                | 7 ++++---
 js/Headlines.js          | 3 +--
 themes/compact.css       | 7 ++++++-
 themes/compact_night.css | 7 ++++++-
 themes/light.css         | 7 ++++++-
 themes/light/cdm.less    | 3 +--
 themes/light/tt-rss.less | 7 ++++++-
 themes/night.css         | 7 ++++++-
 themes/night_blue.css    | 7 ++++++-
 9 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/index.php b/index.php
index 4ae81c00f..5452fcb4e 100644
--- a/index.php
+++ b/index.php
@@ -131,9 +131,10 @@
 
 <div id="main" dojoType="dijit.layout.BorderContainer">
     <div id="feeds-holder" dojoType="dijit.layout.ContentPane" region="leading" style="width : 20%" splitter="true">
-        <div id="feedlistLoading">
-            <img src='images/indicator_tiny.gif'/>
-            <?= __("Loading, please wait..."); ?></div>
+        <div id="feedlistLoading" class="text-center text-muted text-small">
+			  	<img class="icon-three-dots" src="images/three-dots.svg?2">
+				<?= __("Loading, please wait..."); ?>
+			</div>
         <?php
 			 PluginHost::getInstance()->run_hooks_callback(PluginHost::HOOK_FEED_TREE, function ($result) {
 				 echo $result;
diff --git a/js/Headlines.js b/js/Headlines.js
index 07796813a..2e19d54f2 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -351,8 +351,7 @@ const Headlines = {
 
 					// invoke lazy load if last article in buffer is nearly visible OR is active
 					if (Article.getActive() == last_row.getAttribute("data-article-id") || last_row.offsetTop - 250 <= container.scrollTop + container.offsetHeight) {
-						hsp.innerHTML = "<span class='loading'><img src='images/indicator_tiny.gif'> " +
-							__("Loading, please wait...") + "</span>";
+						hsp.innerHTML = `<span class='text-muted text-small text-center'><img class="icon-three-dots" src="${App.getInitParam('icon_three_dots')}"> ${__("Loading, please wait...")}</span>`;
 
 						Headlines.loadMore();
 						return;
diff --git a/themes/compact.css b/themes/compact.css
index 2f287cbdb..374e976c1 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #555;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 551ec32e4..980e05ec0 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #b87d2c;
   color: #333;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
diff --git a/themes/light.css b/themes/light.css
index 1bf075bdb..95a6863b1 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #555;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 53d060b19..acd5016fe 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -210,8 +210,7 @@
 
 	.content-inner {
 		.icon-unpack-pending {
-			width : 18px;
-			height : 18px;
+			.icon-three-dots;
 		}
 	}
 
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 9ce0f271b..56a2e608e 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -829,7 +829,6 @@ body.ttrss_main {
 			text-align : center;
 			color : @default-text;
 			font-size : @font-size-small;
-			font-style : italic;
 
 			a, span {
 				color : @default-text;
@@ -1404,6 +1403,12 @@ body.ttrss_main, body.ttrss_utility {
 	}
 }
 
+.icon-three-dots {
+	width : 18px;
+	height : 18px;
+	vertical-align : middle;
+}
+
 ::selection {
 	background : @color-accent;
 	color : @default-bg;
diff --git a/themes/night.css b/themes/night.css
index fba6de21e..e6fd20be5 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #b87d2c;
   color: #333;
@@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index f30dfff6e..c9a335a9e 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: #333;
@@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;