Skip to content

News 47877: Improve Timeline Panel Visual Layout - #11689

Open
matheuszych wants to merge 1 commit into
ILIAS-eLearning:trunkfrom
matheuszych:nw/47877
Open

matheuszych wants to merge 1 commit into
ILIAS-eLearning:trunkfrom
matheuszych:nw/47877

Conversation

@matheuszych

Copy link
Copy Markdown
Contributor

See: https://mantis.ilias.de/view.php?id=47877

The timeline panel header and footer used float-based spacing and shy
buttons with vertical dividers, which produced an uneven layout. Switched
the header to flexbox, aligned footer actions with
ilTimelinePanelFooter, promoted Like and Notes triggers to standard
buttons, removed the separators, and updated related language strings and
styles.

/cc @thojou

@matheuszych

Copy link
Copy Markdown
Contributor Author

The changes unfortunately couldn’t be limited to the news module. We also had to update the Like and Notes components to make this work, so you can expect some related changes in other areas as well.

@alex40724 I’d kindly ask you to review these proposed changes.

@BettyFromHH BettyFromHH added css/html Pull requests that propose changes to CSS/SCSS or HTML files. improvement labels Jun 23, 2026
@BettyFromHH
BettyFromHH requested a review from alex40724 June 23, 2026 14:20
@thojou thojou self-assigned this Jun 26, 2026
@thojou
thojou requested a review from fhelfer June 26, 2026 09:15

@fhelfer fhelfer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @matheuszych,

changing the button to standard is definitely the right choice.

However the PR changes like#like from “Like” to “React” / “Reagieren”. That key is shared and must stay the label for the 👍 reaction type, not the popover trigger.

It is still used in:

  1. ilLikeGUI::getExpressionText() (components/ILIAS/Like/classes/class.ilLikeGUI.php, ~369) – maps TYPE_LIKE to $lng->txt("like"). Called from ilMembershipCronNotifications::parseNewsItem() (components/ILIAS/Membership/classes/Cron/class.ilMembershipCronNotifications.php, ~301) for course/group notification mails. After this change, thumbs-up reactions appear as “React” / “Reagieren” instead of “Like”.
    Looks like this
Kurs "My Course": "sadfsdf" - sdfsdf
Neue Reaktionen (14)
[dummy5006], 26. Jun 2026, 12:04: Angry
[dummy5003], 26. Jun 2026, 12:04: Laugh
[dummy5002], 26. Jun 2026, 12:04: Love
[dummy5001], 26. Jun 2026, 12:04: Dislike
[dummy5000], 26. Jun 2026, 12:04: Reagieren
[dummy5005], 26. Jun 2026, 12:04: Sad
[dummy5004], 26. Jun 2026, 12:04: Astounded
  1. Emoji counter buttons – Button renderer sets aria-label via getSymbolLabel() → txt("like") for the like glyph (with counter).

The trigger button in getHTML() (~140) may use a new key (e.g. react / add_reaction); like should remain for the expression type.

@matheuszych

Copy link
Copy Markdown
Contributor Author

Hello @fhelfer ,
thank you for your feedback!

I added a new language variable like#:#react#:#.

Best regards
@matheuszych

@matheuszych
matheuszych requested a review from fhelfer June 29, 2026 05:47

@fhelfer fhelfer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @matheuszych, looks good for the changes to the Like-Component

@matheuszych
matheuszych force-pushed the nw/47877 branch 2 times, most recently from 45036a7 to 7aa757d Compare September 16, 2026 07:45
@matheuszych

Copy link
Copy Markdown
Contributor Author

Hello @alex40724 ,
could you please take a look at some of the proposed changes?
Thank you in advance!

Best regards
@matheuszych

@alex40724

Copy link
Copy Markdown
Member

Hi @matheuszych

Thank you a lot for contributing to ILIAS.

Please answer the following questions:

  • Which contexts are intended to hide the initial “no comments” message, and why is this behavior changed globally in ilCommentGUI? The PR changes the shared Notes renderer used by Wiki, Blog, DataCollection, and other contexts, although the stated goal is a News timeline layout improvement.
  • Could you provide the UI rationale or mockups for removing the empty state and changing the Notes actions? Without this, it is difficult to determine whether the resulting behavior is intended in all these contexts.

Please consider the following suggestions:

  • Use an explicit context/behavior flag for suppressing an empty-state message instead of using an empty string from getNoEntriesText() as control flow in getNoteListHTML(). This would keep presentation text separate from the decision whether a caller should render its empty state.

Please implement the following changes:

  • Define and preserve the intended empty-list behavior for each shared Notes context before removing notes_no_comments. With the current changes to ilCommentGUI::getNoEntriesText() and getNoteListHTML(), an empty Wiki comment list no longer receives NOTES_LIST at all, and the same behavior affects every other caller using ilCommentGUI.

kindly,
@alex40724

@alex40724 alex40724 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above.

@matheuszych

Copy link
Copy Markdown
Contributor Author

Hallo @alex40724,
first of all thank you for your feedback.

Primarily we intended to change the behaviour of the comments inside of the news timeline but we believe it is a good idea to keep this uniform across every context.

We decided to remove the message because it was causing a visual bug. After further testing with the most recent changes, it seems that said bug does not exist anymore, and thus we can keep the message.

This makes it of course much easier and less invasive.

I reworked some of the changes and made them much slimmer.

Could you please take a quick look again?

Best regards
@mzych

@thojou

thojou commented Oct 27, 2026

Copy link
Copy Markdown
Contributor

Hey @alex40724,

@matheuszych adjusted the implementation according to your feedback.

Some parts from the earlier review have been changed completely, so there may be some drift from the open objections.

Are there still any open objections from your side?

Kind regards,
@thojou

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`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

css/html Pull requests that propose changes to CSS/SCSS or HTML files. improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants