New: Label menu in article row (#6984)

* configs

* add the icon in the entry header line

* rename comment

* Update main.js

* CSS

* comment typo fix

* fix gloabl view my labels menu

* improved: my labels dropdown with triangle now. yay!

10 files changed, 76 insertions, 15 deletions

diff --git a/app/Controllers/configureController.php b/app/Controllers/configureController.php
index 6d25493cf..ebca7318d 100644
--- a/app/Controllers/configureController.php
+++ b/app/Controllers/configureController.php
@@ -52,6 +52,7 @@ class FreshRSS_configure_Controller extends FreshRSS_ActionController {
 			FreshRSS_Context::userConf()->content_width = Minz_Request::paramString('content_width') ?: 'thin';
 			FreshRSS_Context::userConf()->topline_read = Minz_Request::paramBoolean('topline_read');
 			FreshRSS_Context::userConf()->topline_favorite = Minz_Request::paramBoolean('topline_favorite');
+			FreshRSS_Context::userConf()->topline_myLabels = Minz_Request::paramBoolean('topline_myLabels');
 			FreshRSS_Context::userConf()->topline_sharing = Minz_Request::paramBoolean('topline_sharing');
 			FreshRSS_Context::userConf()->topline_date = Minz_Request::paramBoolean('topline_date');
 			FreshRSS_Context::userConf()->topline_link = Minz_Request::paramBoolean('topline_link');
diff --git a/app/Models/UserConfiguration.php b/app/Models/UserConfiguration.php
index 8c08d0bd7..8c2129744 100644
--- a/app/Models/UserConfiguration.php
+++ b/app/Models/UserConfiguration.php
@@ -61,6 +61,7 @@ declare(strict_types=1);
  * @property bool $topline_date
  * @property bool $topline_display_authors
  * @property bool $topline_favorite
+ * @property bool $topline_myLabels
  * @property bool $topline_sharing
  * @property bool $topline_link
  * @property bool $topline_read
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 9584f37ea..de07f1ab2 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -210,7 +210,9 @@
 							<td><input type="checkbox" name="topline_favorite" value="1"<?=
 								FreshRSS_Context::userConf()->topline_favorite ? ' checked="checked"' : '' ?>
 								data-leave-validation="<?= FreshRSS_Context::userConf()->topline_favorite ?>" /></td>
-							<td><input type="checkbox" disabled="disabled" /></td>
+							<td><input type="checkbox" name="topline_myLabels" value="1"<?=
+								FreshRSS_Context::userConf()->topline_myLabels ? ' checked="checked"' : '' ?>
+								data-leave-validation="<?= FreshRSS_Context::userConf()->topline_myLabels ?>" /></td>
 							<td><input type="checkbox" disabled="disabled" /></td>
 							<td><input type="checkbox" name="topline_sharing" value="1"<?=
 								FreshRSS_Context::userConf()->topline_sharing ? ' checked="checked"' : '' ?>
diff --git a/app/views/helpers/index/normal/entry_header.phtml b/app/views/helpers/index/normal/entry_header.phtml
index a2f8d00fc..7aa752835 100644
--- a/app/views/helpers/index/normal/entry_header.phtml
+++ b/app/views/helpers/index/normal/entry_header.phtml
@@ -3,6 +3,7 @@
 	/** @var FreshRSS_View $this */
 	$topline_read = FreshRSS_Context::userConf()->topline_read;
 	$topline_favorite = FreshRSS_Context::userConf()->topline_favorite;
+	$topline_myLabels = FreshRSS_Context::userConf()->topline_myLabels;
 	$topline_sharing = FreshRSS_Context::userConf()->topline_sharing;
 	$topline_website = FreshRSS_Context::userConf()->topline_website;
 	$topline_thumbnail = FreshRSS_Context::userConf()->topline_thumbnail;
@@ -76,6 +77,17 @@
 	endif; ?>
 	<?php if ($topline_date) { ?><span class="item-element date"><time datetime="<?= $this->entry->machineReadableDate() ?>"><?= $this->entry->date() ?></time>&nbsp;</span><?php } ?>
 	</li>
+	<?php if ($topline_myLabels) { ?>
+		<li class="item labels">
+			<div class="item-element dropdown dynamictags">
+				<div id="dropdown-labels2-<?= $this->entry->id() ?>" class="dropdown-target"></div>
+				<a class="dropdown-toggle" href="#dropdown-labels2-<?= $this->entry->id() ?>" title="<?= _t('index.menu.tags') ?>">
+					<?= _i('label') ?>
+				</a>
+				<?php /* labels_article_template */ ?>
+			</div>
+		</li>
+	<?php } ?>
 	<?php if ($topline_sharing) { ?>
 		<li class="item share">
 			<div class="item-element dropdown">
@@ -83,7 +95,7 @@
 				<a class="dropdown-toggle" href="#dropdown-share2-<?= $this->entry->id() ?>" title="<?= _t('index.share') ?>">
 					<?= _i('share') ?>
 				</a>
-				<?php /* entry_share_menu */ ?>
+				<?php /* share_article_template */ ?>
 			</div>
 		</li>
 	<?php } ?>
diff --git a/app/views/index/global.phtml b/app/views/index/global.phtml
index 717560fd2..decde4cce 100644
--- a/app/views/index/global.phtml
+++ b/app/views/index/global.phtml
@@ -21,6 +21,21 @@
 	<a class="dropdown-close" href="#close">❌</a>
 </template>
 
+<template id="labels_article_template">
+	<div class="dropdown-menu">
+		<ul class="dropdown-menu-scrollable scrollbar-thin">
+			<li class="dropdown-header">
+				<?= _t('index.menu.tags') ?>
+				<?php if (FreshRSS_Auth::hasAccess()) { ?>
+					<a href="<?= _url('tag', 'index') ?>"><?= _i('configure') ?></a>
+				<?php } ?>
+			</li>
+			<!-- Ajax -->
+		</ul>
+	</div>
+	<a class="dropdown-close" href="#close">❌</a>
+</template>
+
 <main id="stream" class="global<?= $class ?>">
 	<h1 class="title_hidden"><?= _t('conf.reading.view.global') ?></h1>
 <?php
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index e2c3c9c56..3923d774b 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -24,15 +24,17 @@ $today = @strtotime('today');
 </template>
 
 <template id="labels_article_template">
-	<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
-		<li class="dropdown-header">
-			<?= _t('index.menu.tags') ?>
-			<?php if (FreshRSS_Auth::hasAccess()) { ?>
-				<a href="<?= _url('tag', 'index') ?>"><?= _i('configure') ?></a>
-			<?php } ?>
-		</li>
-		<!-- Ajax -->
-	</ul>
+	<div class="dropdown-menu">
+		<ul class="dropdown-menu-scrollable scrollbar-thin">
+			<li class="dropdown-header">
+				<?= _t('index.menu.tags') ?>
+				<?php if (FreshRSS_Auth::hasAccess()) { ?>
+					<a href="<?= _url('tag', 'index') ?>"><?= _i('configure') ?></a>
+				<?php } ?>
+			</li>
+			<!-- Ajax -->
+		</ul>
+	</div>
 	<a class="dropdown-close" href="#close">❌</a>
 </template>
 
diff --git a/config-user.default.php b/config-user.default.php
index 964ef8860..15b5fb8fb 100644
--- a/config-user.default.php
+++ b/config-user.default.php
@@ -102,6 +102,7 @@ return array (
 
 	'topline_read' => true,
 	'topline_favorite' => true,
+	'topline_myLabels' => false,
 	'topline_sharing' => false,
 	'topline_website' => 'full',
 	'topline_thumbnail' => 'none',
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 3d1022872..811af2f3e 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1327,8 +1327,25 @@ function init_stream(stream) {
 				req.onloadend = function (e) {
 					checkboxTag.disabled = false;
 					if (tagId == 0) {
+						// new tag is added
 						forceReloadLabelsList = true;
 						loadDynamicTags(checkboxTag.closest('div.dropdown'));
+					} else {
+						// a tag was (un)checked
+						const dropdownmenu_current = ev.target.closest('.dropdown-menu');
+						const flux = ev.target.closest('.flux');
+						const dropdownmenu_all = flux.querySelectorAll('.dynamictags .dropdown-menu');
+						if (dropdownmenu_all.length > 1) {
+							// delete all other tag dropdown menus except the current one
+							dropdownmenu_all.forEach(
+								function (currentValue) {
+									if (currentValue !== dropdownmenu_current) {
+										currentValue.nextElementSibling.remove();
+										currentValue.parentNode.removeChild(currentValue);
+									}
+								}
+							);
+						}
 					}
 				};
 				req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
@@ -1438,7 +1455,7 @@ function loadDynamicTags(div) {
 			label.appendChild(div_stick);
 			li_item0.appendChild(label);
 
-			div.querySelector('.dropdown-menu').appendChild(li_item0);
+			div.querySelector('.dropdown-menu-scrollable').appendChild(li_item0);
 		}
 
 		let html = '';
@@ -1465,7 +1482,7 @@ function loadDynamicTags(div) {
 				html += '<li class="item"><span class="emptyLabels">' + context.i18n.labels_empty + '</span></li>';
 			}
 		}
-		div.querySelector('.dropdown-menu').insertAdjacentHTML('beforeend', html);
+		div.querySelector('.dropdown-menu-scrollable').insertAdjacentHTML('beforeend', html);
 		const datalistLabels = document.getElementById('datalist-labels');
 		datalistLabels.innerHTML = ''; // clear before add the (updated) labels list
 		datalistLabels.insertAdjacentHTML('beforeend', datalist);
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 2dfbc2a04..9d88e8c0c 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -796,6 +796,10 @@ input[type="checkbox"]:focus-visible {
 	max-width: 95%;
 }
 
+.dynamictags .dropdown-menu label {
+	white-space: initial;
+}
+
 .dropdown-target:target ~ .dropdown-menu {
 	display: block;
 	z-index: 1000;
@@ -1316,7 +1320,7 @@ input[type="search"] {
 	position: relative;
 }
 
-.flux .flux_header .item {
+.flux .flux_header > .item {
 	white-space: nowrap;
 }
 
@@ -1334,6 +1338,7 @@ input[type="search"] {
 }
 
 .flux .item.manage,
+.flux .flux_header > .item.labels,
 .flux .flux_header > .item.share,
 .flux .item.link {
 	width: calc(1rem + 2 * var(--frss-padding-flux-items));
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 45906f9c3..cc7153c5d 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -796,6 +796,10 @@ input[type="checkbox"]:focus-visible {
 	max-width: 95%;
 }
 
+.dynamictags .dropdown-menu label {
+	white-space: initial;
+}
+
 .dropdown-target:target ~ .dropdown-menu {
 	display: block;
 	z-index: 1000;
@@ -1316,7 +1320,7 @@ input[type="search"] {
 	position: relative;
 }
 
-.flux .flux_header .item {
+.flux .flux_header > .item {
 	white-space: nowrap;
 }
 
@@ -1334,6 +1338,7 @@ input[type="search"] {
 }
 
 .flux .item.manage,
+.flux .flux_header > .item.labels,
 .flux .flux_header > .item.share,
 .flux .item.link {
 	width: calc(1rem + 2 * var(--frss-padding-flux-items));