feat(badges): enhance badge display and styling#1494
feat(badges): enhance badge display and styling#1494dauriamarco wants to merge 1 commit intomainfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the badge display in collapsible panels by adding a badge on the icon in the collapsed state and formatting badge numbers greater than 99 to display as '+99'. The changes look good overall. I've added a couple of suggestions to improve code readability and consistency in the component's template and TypeScript logic. The snapshot updates are consistent with the implemented changes.
projects/element-ng/accordion/si-collapsible-panel.component.html
Outdated
Show resolved
Hide resolved
|
Documentation. Coverage Reports: |
dauriamarco
force-pushed
the
fix/side-panel-notifications
branch
from
e52a9b5 to
c2fa98e
Compare
| {{ badge() }} | ||
| </span> | ||
| } | ||
| <span class="position-relative"> |
There was a problem hiding this comment.
| <span class="position-relative"> | |
| <span class="d-flex position-relative"> |
then you can remove the styling overrides of the badge-text
There was a problem hiding this comment.
are you sure? it seems like I would still need the overrides
There was a problem hiding this comment.
with that it would be same as in the application-header.
I guess the problem is, that the icon size is wrong.
In header and navbar-vertical we have 24px (icon-lg).
There was a problem hiding this comment.
should I change the icon size separately to 24px in the side-panel @panch1739? however, a part from that, I think the main issue would be the anchoring, meaning that the badge in this case should grow towards the left when multiple digits are present as the side-panel is aligned to the right of the screen, and that's why I used inset-inline-end instead
There was a problem hiding this comment.
I don't like that we would have different behavior of .badge-text. Can we change behavior in general?
There was a problem hiding this comment.
I would agree, I had a similar thought but I wasn't sure especially because, in addition to the css overrides, I had to change a little bit the template structure as well so it seemed complicated. But, anyway, I can think of a more general/flexible solution for the template structure and introducing something like .badge-text-left .badge-text-right or an additional .badge-left or .left / .badge-right or .right class for the alignment (?)
dauriamarco
force-pushed
the
fix/side-panel-notifications
branch
from
c2fa98e to
8ddaf8b
Compare
|
|
3 participants
Closes #1402.