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!

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');

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

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"' : '' ?>

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 } ?>

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

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>
 

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

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);

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));

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));