css: make plugin button container a flexbox

backend: pass plugin button generated code through domdocument to ensure
its correctness; set data-plugin-name attribute on children to make
them sortable via css

9 files changed, 118 insertions, 4 deletions

diff --git a/classes/feeds.php b/classes/feeds.php
index db62bd6a8..819fdacb0 100755
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -230,17 +230,43 @@ class Feeds extends Handler_Protected {
 
 				$line["feed_title"] = $line["feed_title"] ?? "";
 
+				$button_doc = new DOMDocument();
+
 				$line["buttons_left"] = "";
 				PluginHost::getInstance()->chain_hooks_callback(PluginHost::HOOK_ARTICLE_LEFT_BUTTON,
-					function ($result) use (&$line) {
-						$line["buttons_left"] .= $result;
+					function ($result, $plugin) use (&$line, &$button_doc) {
+						if ($button_doc->loadXML($result)) {
+
+							/** @var DOMElement|null */
+							$child = $button_doc->firstChild;
+
+							if ($child) {
+								do {
+									$child->setAttribute('data-plugin-name', get_class($plugin));
+								} while ($child = $child->nextSibling);
+
+								$line["buttons_left"] .= $button_doc->saveXML($button_doc->firstChild);
+							}
+						}
 					},
 					$line);
 
 				$line["buttons"] = "";
 				PluginHost::getInstance()->chain_hooks_callback(PluginHost::HOOK_ARTICLE_BUTTON,
-					function ($result) use (&$line) {
-						$line["buttons"] .= $result;
+					function ($result, $plugin) use (&$line, &$button_doc) {
+						if ($button_doc->loadXML($result)) {
+
+							/** @var DOMElement|null */
+							$child = $button_doc->firstChild;
+
+							if ($child) {
+								do {
+									$child->setAttribute('data-plugin-name', get_class($plugin));
+								} while ($child = $child->nextSibling);
+
+								$line["buttons"] .= $button_doc->saveXML($button_doc->firstChild);
+							}
+						}
 					},
 					$line);
 
diff --git a/themes/compact.css b/themes/compact.css
index fc63f5f77..687175499 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -43,6 +43,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1302,9 +1303,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #777;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 3fd4d2e43..df0ec8363 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -43,6 +43,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1302,9 +1303,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #999;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css
index 7ff872a59..25322b2a4 100644
--- a/themes/light-high-contrast.css
+++ b/themes/light-high-contrast.css
@@ -43,6 +43,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1302,9 +1303,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #777;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
diff --git a/themes/light.css b/themes/light.css
index f983f4d80..cc9f48488 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -43,6 +43,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1302,9 +1303,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #777;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 5641a0380..71288b023 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -98,8 +98,23 @@
 			color : @color-icon;
 		}
 
+		.left, .right {
+			display : flex;
+			align-items : center;
+		}
+
 		.left {
 			flex-grow : 2;
+
+			> * {
+				margin-right : 4px;
+			}
+		}
+
+		.right {
+			> * {
+				margin-left : 4px;
+			}
 		}
 	}
 
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 0e85d53fb..db286ee5f 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -22,6 +22,7 @@ body.ttrss_main {
 
 			.left, .right {
 				display : flex;
+				align-items : center;
 			}
 
 			.row {
diff --git a/themes/night.css b/themes/night.css
index 19e3182bc..4294f2568 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -44,6 +44,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1303,9 +1304,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #999;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 94bec2181..648bb175b 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -44,6 +44,7 @@ body.ttrss_main .post .header {
 body.ttrss_main .post .header .left,
 body.ttrss_main .post .header .right {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .post .header .row {
   display: flex;
@@ -1303,9 +1304,20 @@ body.ttrss_utility hr {
 .cdm .footer i.material-icons {
   color: #999;
 }
+.cdm .footer .left,
+.cdm .footer .right {
+  display: flex;
+  align-items: center;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }
+.cdm .footer .left > * {
+  margin-right: 4px;
+}
+.cdm .footer .right > * {
+  margin-left: 4px;
+}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;