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:
parent
9f734c9050
commit
933913410c
|
@ -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);
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -22,6 +22,7 @@ body.ttrss_main {
|
|||
|
||||
.left, .right {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue