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
This commit is contained in:
Andrew Dolgov 2021-10-24 20:11:49 +03:00
parent 9f734c9050
commit 933913410c
9 changed files with 118 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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;
}
}
}

View File

@ -22,6 +22,7 @@ body.ttrss_main {
.left, .right {
display : flex;
align-items : center;
}
.row {

View File

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

View File

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