Fix: article footer + improve: labeling (#4306)

* icon = open dropdown

* label icon

* added: link to edit labels

* dropdown-menu label: padding and hover

* improve input row

* CSS

* Update main.js

* Update main.js

* Update main.js

* fix

* make addItem button selectable via tabbing

* Fixed theme: Ansum

* tags menu: use the new icon

* Fixed theme: Flat design

make the manage button visible

* fixed Theme: Mapco

* Fixed theme: Pafat

17 files changed, 173 insertions, 26 deletions

diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 02b1563b1..c7270b39e 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -42,7 +42,7 @@
 
 	.dropdown-header {
 		// padding: 0 5px 5px;
-		margin: 1.75rem 0 0.5rem 2rem;
+		margin: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -63,11 +63,11 @@
 			line-height: 2.5em;
 		}
 
-		&:hover {
+		&:not(.addItem):hover {
 			background: variables.$main-first;
 			color: variables.$white;
 
-			a, button {
+			a, button, label {
 				text-decoration: none;
 				color: variables.$white;
 			}
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 2ef77113f..ab9116d3c 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -180,6 +180,24 @@
 	}
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: variables.$grey-light;
+	background-position: center;
+	background-repeat: no-repeat;
+
+	@include mixins.transition(all, 0.15s, ease-in-out);
+
+	&:hover {
+		background-color: variables.$grey-medium-light;
+	}
+
+	&.active {
+		background-color: variables.$main-first;
+	}
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 7cdb2eed5..c2629e55c 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -241,7 +241,7 @@ form th {
 	right: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 0 0.5rem 2rem;
+	margin: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -257,15 +257,15 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
-.dropdown-menu .item:hover .icon {
+.dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item[aria-checked=true] a::before {
@@ -901,6 +901,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #f5f0ec;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #e4d8cc;
+}
+.btn.active {
+	background-color: #ca7227;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 458460573..42c373349 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -241,7 +241,7 @@ form th {
 	left: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 2rem 0.5rem 0;
+	margin: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -257,15 +257,15 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
-.dropdown-menu .item:hover .icon {
+.dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item[aria-checked=true] a::before {
@@ -901,6 +901,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #f5f0ec;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #e4d8cc;
+}
+.btn.active {
+	background-color: #ca7227;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index dd4d991b1..ce2a2fe20 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -768,7 +768,7 @@ a.btn {
 	padding: 5px 0;
 }
 
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
+.dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
 	background-color: #95a5a6;
 	border-radius: 3px;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 0b6f4b7ba..90b836539 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -768,7 +768,7 @@ a.btn {
 	padding: 5px 0;
 }
 
-#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
+.dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
 	background-color: #95a5a6;
 	border-radius: 3px;
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index f54170c0a..91fa2126d 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -42,7 +42,7 @@
 
 	.dropdown-header {
 		// padding: 0 5px 5px;
-		margin: 1.75rem 0 0.5rem 2rem;
+		margin: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -62,11 +62,11 @@
 			line-height: 2.5em;
 		}
 
-		&:hover {
+		&:not(.addItem):hover {
 			background: variables.$main-first;
 			color: variables.$white;
 
-			a, button {
+			a, button, label {
 				text-decoration: none;
 				color: variables.$white;
 			}
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 30feb9f19..0e49854d5 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -183,6 +183,24 @@
 	}
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: variables.$grey-light;
+	background-position: center;
+	background-repeat: no-repeat;
+
+	@include mixins.transition(all, 0.15s, ease-in-out);
+
+	&:hover {
+		background-color: variables.$grey-medium-light;
+	}
+
+	&.active {
+		background-color: variables.$main-first;
+	}
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index b8a2281ba..b1497b777 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -238,7 +238,7 @@ form th {
 	right: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 0 0.5rem 2rem;
+	margin: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -254,11 +254,11 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
@@ -888,6 +888,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #eff0f2;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #d5d8db;
+}
+.btn.active {
+	background-color: #36c;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index f38c8837e..63b16b0f9 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -238,7 +238,7 @@ form th {
 	left: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 2rem 0.5rem 0;
+	margin: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -254,11 +254,11 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
@@ -888,6 +888,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #eff0f2;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #d5d8db;
+}
+.btn.active {
+	background-color: #36c;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 948438707..9ef183de1 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -383,11 +383,16 @@ a.btn {
 }
 
 .dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu > .item > button:hover,
+.dropdown-menu > .item > label:hover:not(.noHover) {
 	background: #0062be;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	padding: 0;
+}
+
 .dropdown-menu > .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 526dd4530..69974ebec 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -383,11 +383,16 @@ a.btn {
 }
 
 .dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu > .item > button:hover,
+.dropdown-menu > .item > label:hover:not(.noHover) {
 	background: #0062be;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	padding: 0;
+}
+
 .dropdown-menu > .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index ad37cbc15..89e80f5b9 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -116,7 +116,6 @@ form th {
 .stick {
 	vertical-align: middle;
 	font-size: 0;
-	min-width: 215px;
 }
 
 .stick input,
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index cf460ce7c..1a9a0a265 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -116,7 +116,6 @@ form th {
 .stick {
 	vertical-align: middle;
 	font-size: 0;
-	min-width: 215px;
 }
 
 .stick input,
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index c1a34cf87..df0f6d323 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -223,6 +223,22 @@ input[type="checkbox"] {
 	margin-right: .5em;
 }
 
+.dropdown-menu .item .checkboxNewTag {
+	display: none;
+}
+
+.dropdown-menu .item.addItem {
+	padding: 0 0.5em;
+}
+
+.dropdown-menu .item.addItem .stick {
+	width: 100%
+}
+
+.dropdown-menu .item.addItem .stick input[type=text] {
+	width: 100%;
+}
+
 button.as-link,
 button.as-link:hover,
 button.as-link:active {
@@ -1103,6 +1119,10 @@ a.website:hover .favicon {
 	list-style-type: decimal;
 }
 
+.flux_content .bottom .dropdown-toggle .icon {
+	margin-right: 5px;
+}
+
 /*=== Feed article content */
 .hide_posts > .flux:not(.active) > .flux_content {
 	display: none;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 61ce3b0d2..be934009b 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -223,6 +223,22 @@ input[type="checkbox"] {
 	margin-left: .5em;
 }
 
+.dropdown-menu .item .checkboxNewTag {
+	display: none;
+}
+
+.dropdown-menu .item.addItem {
+	padding: 0 0.5em;
+}
+
+.dropdown-menu .item.addItem .stick {
+	width: 100%
+}
+
+.dropdown-menu .item.addItem .stick input[type=text] {
+	width: 100%;
+}
+
 button.as-link,
 button.as-link:hover,
 button.as-link:active {
@@ -1103,6 +1119,10 @@ a.website:hover .favicon {
 	list-style-type: decimal;
 }
 
+.flux_content .bottom .dropdown-toggle .icon {
+	margin-left: 5px;
+}
+
 /*=== Feed article content */
 .hide_posts > .flux:not(.active) > .flux_content {
 	display: none;
diff --git a/p/themes/icons/label.svg b/p/themes/icons/label.svg
new file mode 100644
index 000000000..fcb878c5b
--- /dev/null
+++ b/p/themes/icons/label.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
+  <path fill="#666" d="M4.07055 12.2189c-1.14935 0-2.0748.92544-2.0748 2.0748v29.95786c0 1.14936.92545 2.0743 2.0748 2.0743h37.31297l16.2264-15.96802c.58275-.60118.58275-1.56922 0-2.17041l-16.2264-15.96854H4.07055zM43.679 26.77252a2.5 2.5 0 0 1 2.5001 2.5001 2.5 2.5 0 0 1-2.5001 2.49959 2.5 2.5 0 0 1-2.4996-2.49959 2.5 2.5 0 0 1 2.4996-2.5001z" paint-order="markers fill stroke"/>
+</svg>