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!

3 files changed, 31 insertions, 4 deletions

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