Improved: show bigmarkasread button only, when there are unread articles (#4681)

* function toggle_bigMarkAsRead_button()

* nothing_to_load text outside of bigmarkasread button

* improved

* fix

* Update p/scripts/main.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

2 files changed, 26 insertions, 5 deletions

diff --git a/app/views/helpers/stream-footer.phtml b/app/views/helpers/stream-footer.phtml
index ebce4d852..f37ba59d6 100755
--- a/app/views/helpers/stream-footer.phtml
+++ b/app/views/helpers/stream-footer.phtml
@@ -30,19 +30,20 @@ if ($hasAccess) { ?>
 	<?php if (FreshRSS_Context::$next_id) { ?>
 		<button id="load_more" type="submit" class="btn" formaction="<?= Minz_Url::display($url_next) ?>"><?= _t('gen.stream.load_more') ?></button>
 	<?php } elseif ($hasAccess) { ?>
+		<?= _t('gen.stream.nothing_to_load') ?><br />
 		<button id="bigMarkAsRead"
 			class="as-link <?= FreshRSS_Context::$user_conf->reading_confirm ? 'confirm" disabled="disabled' : '' ?>"
 			form="stream-footer"
 			formaction="<?= Minz_Url::display($url_mark_read) ?>"
 			type="submit">
-			<?= _t('gen.stream.nothing_to_load') ?><br />
 			<span class="bigTick">✓</span><br />
-			<?= _t('gen.stream.mark_all_read') ?>
+			<span class="markAllRead"><?= _t('gen.stream.mark_all_read') ?></span>
+			<?php if (FreshRSS_Context::$user_conf->onread_jump_next) { ?>
+				<div class="jumpNext"><?= _t('conf.reading.jump_next') ?></div>
+			<?php } ?>
 		</button>
 	<?php } else { ?>
-		<div id="bigMarkAsRead">
-			<?= _t('gen.stream.nothing_to_load') ?><br />
-		</div>
+		<?= _t('gen.stream.nothing_to_load') ?><br />
 	<?php } ?>
 	</div>
 <?php if ($hasAccess) { ?>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 436796b52..bf2c56f56 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -264,6 +264,7 @@ function send_mark_read_queue(queue, asRead, callback) {
 				incUnreadsTag(tagId, (asRead ? -1 : 1) * json.tags[tagId].length);
 			}
 		}
+		toggle_bigMarkAsRead_button();
 		onScroll();
 		if (callback) {
 			callback();
@@ -1661,6 +1662,23 @@ function refreshUnreads() {
 	req.send();
 }
 
+function toggle_bigMarkAsRead_button() {
+	const bigMarkAsRead_button = document.getElementById('bigMarkAsRead');
+	if (bigMarkAsRead_button) {
+		if (document.querySelector('.flux.not_read') != null) {
+			bigMarkAsRead_button.style = '';
+			bigMarkAsRead_button.querySelector('.markAllRead').style.visibility = '';
+		} else {
+			if (bigMarkAsRead_button.querySelector('.jumpNext')) {
+				bigMarkAsRead_button.querySelector('.markAllRead').style.visibility = 'hidden';
+			} else {
+				bigMarkAsRead_button.querySelector('.markAllRead').style.visibility = '';
+				bigMarkAsRead_button.style.visibility = 'hidden';
+			}
+		}
+	}
+}
+
 // <endless_mode>
 let url_load_more = '';
 let load_more = false;
@@ -1697,6 +1715,7 @@ function load_more_posts() {
 			} else {
 				bigMarkAsRead.formAction = readAll.formAction;
 			}
+			toggle_bigMarkAsRead_button();
 		}
 
 		document.querySelectorAll('[id^=day_]').forEach(function (div) {
@@ -1849,6 +1868,7 @@ function init_main_afterDOM() {
 		init_posts();
 		init_nav_entries();
 		init_notifs_html5();
+		toggle_bigMarkAsRead_button();
 		setTimeout(faviconNbUnread, 1000);
 		setInterval(refreshUnreads, 120000);
 	}