From 9b5c1312aa72ade58a9439271c08569989481cd6 Mon Sep 17 00:00:00 2001 From: Matheus Zych Date: Mon, 8 Jun 2026 07:39:05 +0200 Subject: [PATCH] News: Use Standard Buttons in Timeline Footer See: https://mantis.ilias.de/view.php?id=47877 News timeline items displayed Like and Notes as shy buttons with vertical dividers next to reaction counters, and the header relied on floats. That produced an uneven panel footer. Layout now uses flexbox (`ilTimelinePanelFooter`), standard buttons for Like and Notes, and no vertical dividers. The Like control label calls `txt('react')`; the missing `react` entries in `like_de.po` and `like_en.po` are added so the button no longer shows `-react-`. Notes comment labels use `notes_add_edit_comment`. --- .../ILIAS/Like/classes/class.ilLikeGUI.php | 6 +- components/ILIAS/Like/lang/like_de.po | 3 + components/ILIAS/Like/lang/like_en.po | 3 + .../templates/default/tpl.emo_counters.html | 2 +- .../templates/default/tpl.timeline.html | 2 +- .../classes/class.ilNewsTimelineItemGUI.php | 2 +- .../templates/default/tpl.timeline_item.html | 2 +- .../ILIAS/Notes/Note/class.ilNoteGUI.php | 55 +++++++++---------- components/ILIAS/Notes/lang/notes_de.po | 2 +- components/ILIAS/Notes/lang/notes_en.po | 2 +- .../legacy/Services/_component_like.scss | 5 -- .../legacy/Services/_component_news.scss | 41 +++++++------- templates/default/delos.css | 33 +++++------ 13 files changed, 75 insertions(+), 83 deletions(-) diff --git a/components/ILIAS/Like/classes/class.ilLikeGUI.php b/components/ILIAS/Like/classes/class.ilLikeGUI.php index d72251e718fb..8c72c5be1bb0 100755 --- a/components/ILIAS/Like/classes/class.ilLikeGUI.php +++ b/components/ILIAS/Like/classes/class.ilLikeGUI.php @@ -137,7 +137,7 @@ public function getHTML(): string $ctrl->setParameter($this, "repl_sig", $popover->getReplaceContentSignal()->getId()); $asyn_url = $ctrl->getLinkTarget($this, "renderEmoticons", "", true, false); $popover = $popover->withAsyncContentUrl($asyn_url); - $button = $f->button()->shy($lng->txt("like"), '#') + $button = $f->button()->standard($lng->txt("react"), '#') ->withOnClick($popover->getShowSignal()); $tpl->setVariable("LIKE", $r->render([$popover, $button])); @@ -190,10 +190,6 @@ protected function renderEmoCounters( $tpl->setVariable("ID", $this->dom_id); } - if (count($comps) > 0 && $modal_signal !== null) { - $tpl->setVariable("SEP", $r->render($f->divider()->vertical())); - } - return $tpl->get(); } diff --git a/components/ILIAS/Like/lang/like_de.po b/components/ILIAS/Like/lang/like_de.po index 6f078331b921..115f137176fa 100644 --- a/components/ILIAS/Like/lang/like_de.po +++ b/components/ILIAS/Like/lang/like_de.po @@ -11,5 +11,8 @@ msgstr "" msgid "like" msgstr "Like" +msgid "react" +msgstr "Reagieren" + msgid "reaction" msgstr "Reaktion" diff --git a/components/ILIAS/Like/lang/like_en.po b/components/ILIAS/Like/lang/like_en.po index ec904ee6c16f..ac62ea69434e 100644 --- a/components/ILIAS/Like/lang/like_en.po +++ b/components/ILIAS/Like/lang/like_en.po @@ -11,5 +11,8 @@ msgstr "" msgid "like" msgstr "Like" +msgid "react" +msgstr "React" + msgid "reaction" msgstr "Reaction" diff --git a/components/ILIAS/Like/templates/default/tpl.emo_counters.html b/components/ILIAS/Like/templates/default/tpl.emo_counters.html index f7bec58cbaad..a1daf303c568 100755 --- a/components/ILIAS/Like/templates/default/tpl.emo_counters.html +++ b/components/ILIAS/Like/templates/default/tpl.emo_counters.html @@ -1 +1 @@ -{MODAL_TRIGGER}{SEP} \ No newline at end of file +{MODAL_TRIGGER} \ No newline at end of file diff --git a/components/ILIAS/News/Timeline/templates/default/tpl.timeline.html b/components/ILIAS/News/Timeline/templates/default/tpl.timeline.html index b7b2502990be..401c48bde535 100755 --- a/components/ILIAS/News/Timeline/templates/default/tpl.timeline.html +++ b/components/ILIAS/News/Timeline/templates/default/tpl.timeline.html @@ -6,7 +6,7 @@

{DAY}

{MONTH}

{CONTENT} -
+
{FOOTER}
diff --git a/components/ILIAS/News/classes/class.ilNewsTimelineItemGUI.php b/components/ILIAS/News/classes/class.ilNewsTimelineItemGUI.php index ddc6fb94047d..62e2df04a696 100755 --- a/components/ILIAS/News/classes/class.ilNewsTimelineItemGUI.php +++ b/components/ILIAS/News/classes/class.ilNewsTimelineItemGUI.php @@ -109,7 +109,7 @@ public function render(): string $obj_id = $this->news_item->getContextObjId(); // edited? - if ($this->news_item->getCreationDate() !== $this->news_item->getUpdateDate()) { + if ($this->news_item->getCreationDate() != $this->news_item->getUpdateDate()) { $tpl->setCurrentBlock("edited"); $update_date = new ilDateTime($this->news_item->getUpdateDate()->format('c'), IL_CAL_DATETIME); $tpl->setVariable("TXT_EDITED", $this->lng->txt("cont_news_edited")); diff --git a/components/ILIAS/News/templates/default/tpl.timeline_item.html b/components/ILIAS/News/templates/default/tpl.timeline_item.html index 621792afbcea..998f66431bd0 100755 --- a/components/ILIAS/News/templates/default/tpl.timeline_item.html +++ b/components/ILIAS/News/templates/default/tpl.timeline_item.html @@ -1,4 +1,4 @@ -
+
{USER_AVATAR} diff --git a/components/ILIAS/Notes/Note/class.ilNoteGUI.php b/components/ILIAS/Notes/Note/class.ilNoteGUI.php index ec823422d266..5b47a469e2dd 100755 --- a/components/ILIAS/Notes/Note/class.ilNoteGUI.php +++ b/components/ILIAS/Notes/Note/class.ilNoteGUI.php @@ -342,10 +342,7 @@ protected function getNotes(): array } } - $ascending = $this->manager->getSortAscending(); - if ($this->only_latest) { - $order = false; - } + $ascending = !$this->only_latest && $this->manager->getSortAscending(); $author_id = ($this->note_type === Note::PRIVATE) ? $ilUser->getId() : 0; @@ -1508,34 +1505,34 @@ public function getWidget(): string $ctrl->setParameter($this, "hash", $hash); $update_url = $ctrl->getLinkTarget($this, "updateWidget", "", true, false); $query_url = $ctrl->getLinkTarget($this, "getListHtml", "", true, false); - $comps = array(); + + $additional_on_load_code = static fn(string $id): string => << ilNotes.clickTrigger(event)); + JS; + if ($cnt > 0) { - $c = $f->counter()->status((int) $cnt); - $comps[] = $f->button()->shy('', '#') - ->withSymbol($f->symbol()->glyph()->comment()->withCounter($c)) - ->withAdditionalOnLoadCode(function ($id) use ($hash, $query_url) { - $code = "$('#$id').attr('data-note-key','$hash');\n"; - $code .= "$('#$id').attr('data-note-ui-type','trigger');\n"; - $code .= "$('#$id').attr('data-note-query-url','" . $query_url . "');\n"; - $code .= "$(\"#$id\").click(function(event) { ilNotes.clickTrigger(event)});"; - return $code; - }); - $comps[] = $f->divider()->vertical(); - $tpl->setVariable("GLYPH", $r->render($comps)); - $tpl->setVariable("TXT_LATEST", $this->getLatestItemText()); - } + $b = $f + ->button() + ->shy('', '#') + ->withSymbol( + $f->symbol()->glyph()->comment()->withCounter( + $f->counter()->status((int) $cnt) + ) + ) + ->withAdditionalOnLoadCode($additional_on_load_code); - $b = $f->button()->shy($this->getAddEditItemText(), "#")->withAdditionalOnLoadCode(function ($id) use ($hash, $query_url) { - $code = "$('#$id').attr('data-note-key','$hash');\n"; - $code .= "$('#$id').attr('data-note-ui-type','trigger');\n"; - $code .= "$('#$id').attr('data-note-query-url','" . $query_url . "');\n"; - $code .= "$(\"#$id\").click(function(event) { ilNotes.clickTrigger(event)});"; - return $code; - }); - if ($ctrl->isAsynch()) { - $tpl->setVariable("SHY_BUTTON", $r->renderAsync($b)); + $tpl->setVariable("GLYPH", $r->render($b)); + $tpl->setVariable("TXT_LATEST", $this->getLatestItemText()); } else { - $tpl->setVariable("SHY_BUTTON", $r->render($b)); + $b = $f + ->button() + ->standard($this->getAddEditItemText(), '#') + ->withAdditionalOnLoadCode($additional_on_load_code); + + $tpl->setVariable("SHY_BUTTON", $ctrl->isAsynch() ? $r->renderAsync($b) : $r->render($b)); } $this->widget_header = $tpl->get(); diff --git a/components/ILIAS/Notes/lang/notes_de.po b/components/ILIAS/Notes/lang/notes_de.po index 07e030b29c9d..7b6726b6b54c 100644 --- a/components/ILIAS/Notes/lang/notes_de.po +++ b/components/ILIAS/Notes/lang/notes_de.po @@ -45,7 +45,7 @@ msgid "notes_add_comment" msgstr "Kommentar hinzufügen" msgid "notes_add_edit_comment" -msgstr "Kommentar hinzufügen/editieren" +msgstr "Kommentieren" msgid "notes_add_edit_message" msgstr "Mitteilung hinzufügen/editieren" diff --git a/components/ILIAS/Notes/lang/notes_en.po b/components/ILIAS/Notes/lang/notes_en.po index 2b1cd158629e..f605529cc813 100644 --- a/components/ILIAS/Notes/lang/notes_en.po +++ b/components/ILIAS/Notes/lang/notes_en.po @@ -45,7 +45,7 @@ msgid "notes_add_comment" msgstr "Add Comment" msgid "notes_add_edit_comment" -msgstr "Add/Edit Comment" +msgstr "Comment" msgid "notes_add_edit_message" msgstr "Add/Edit Message" diff --git a/templates/default/070-components/legacy/Services/_component_like.scss b/templates/default/070-components/legacy/Services/_component_like.scss index 9a7920615f6f..eaaaf567053d 100755 --- a/templates/default/070-components/legacy/Services/_component_like.scss +++ b/templates/default/070-components/legacy/Services/_component_like.scss @@ -1,10 +1,5 @@ @use "../../../010-settings/" as *; -.ilLike { - padding: 5px 0px; - text-align: right; -} - .ilLike .modal { text-align: left; } diff --git a/templates/default/070-components/legacy/Services/_component_news.scss b/templates/default/070-components/legacy/Services/_component_news.scss index 2525169aa9d2..23c79eee7f4f 100755 --- a/templates/default/070-components/legacy/Services/_component_news.scss +++ b/templates/default/070-components/legacy/Services/_component_news.scss @@ -118,6 +118,12 @@ span.ilNewsRssIcon { .panel h2 { display: none; } + .ilTimelinePanelFooter { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 8px; + } } > .ilTimelineBadge { color: white; @@ -206,30 +212,27 @@ span.ilNewsRssIcon { z-index: 500; } -.ilNewsTimelineUserImage { - float: left; - overflow: hidden; - width: 100px; +.ilNewsTimelineHeader { + display: flex; + gap: 20px; - @media only screen and (max-width: $il-grid-float-breakpoint-max) { - width: 50px; - } -} + .ilNewsTimelineUserImage { + flex-shrink: 0; -.ilNewsTimelineUserImage img { - width: 75px; - height: 75px; + img { + width: 75px; + height: 75px; - @media only screen and (max-width: $il-grid-float-breakpoint-max) { - width: 40px; - height: 40px; + @media only screen and (max-width: $il-grid-float-breakpoint-max) { + width: 40px; + height: 40px; + } + } } -} -.ilNewsTimelineContentSection { - padding-left: 100px; - @media only screen and (max-width: $il-grid-float-breakpoint-max) { - padding-left: 50px; + .ilNewsTimelineContentSection { + flex: 1; + min-width: 0; } } diff --git a/templates/default/delos.css b/templates/default/delos.css index b8000a356b53..ce196ff87364 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -20329,11 +20329,6 @@ div.ilStartupSection form.form-horizontal { padding: 3px 9px; } -.ilLike { - padding: 5px 0px; - text-align: right; -} - .ilLike .modal { text-align: left; } @@ -20913,6 +20908,12 @@ span.ilNewsRssIcon:hover { .ilTimeline > li > .ilTimelinePanel .panel h2 { display: none; } +.ilTimeline > li > .ilTimelinePanel .ilTimelinePanelFooter { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 8px; +} .ilTimeline > li > .ilTimelineBadge { color: white; width: 50px; @@ -21006,15 +21007,13 @@ span.ilNewsRssIcon:hover { z-index: 500; } -.ilNewsTimelineUserImage { - float: left; - overflow: hidden; - width: 100px; +.ilNewsTimelineHeader { + display: flex; + gap: 20px; } -@media only screen and (max-width: 991px) { - .ilNewsTimelineUserImage { - width: 50px; - } + +.ilNewsTimelineUserImage { + flex-shrink: 0; } .ilNewsTimelineUserImage img { @@ -21029,12 +21028,8 @@ span.ilNewsRssIcon:hover { } .ilNewsTimelineContentSection { - padding-left: 100px; -} -@media only screen and (max-width: 991px) { - .ilNewsTimelineContentSection { - padding-left: 50px; - } + flex: 1; + min-width: 0; } .ilNewsTimelineEditInfo {