paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Correct unread-pulse on collapsed views.

Browse Source
This commit is contained in:
Karl Stolley
2025-08-13 14:43:35 -05:00
committed by Tim Abbott
parent 0b13129f54
commit 2174f55b87
3 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/styles/app_variables.css
View File

@@ -384,6 +384,9 @@
/* Legacy values */
--legacy-body-line-height-unitless: calc(20 / 14);
/* Special effects */
--pulse-unread-scale-max: 1.5;
/* Message area */
/* In the legacy layout at 16px/1em density, 918.6px is
the widest the message area gets, so we preserve this

19
web/styles/left_sidebar.css
View File

@@ -1076,8 +1076,23 @@ li.active-sub-filter {
the icon width (15px/2) plus 2px. This keeps the
unread dot in correct proximity to the view icon,
no matter how the row flexes or what information-
density values a user has set. 9.5px at 12px/1em. */
transform: translateX(0.7917em);
density values a user has set. 9.5px at 12px/1em.
We set this and its scaled counterpart as variables
for use in the pulse-unread animation to maintain the
dot's correct position relative to the view icon. */
--unread-dot-x-offset: 0.7917em;
/* To make sure the unread dot appears to scale from the
offset dot's center in collapsed Views, we need to
adjust the translateX offset by the same amount we
scale. calc() does not play nicely with animations,
so it's critical that we calculate this value here,
well before its needed. */
--unread-dot-x-offset-scaled: calc(
var(--unread-dot-x-offset) / var(--pulse-unread-scale-max)
);
transform: translateX(var(--unread-dot-x-offset));
width: 0.5em;
height: 0.5em;
padding: 0;

10
web/styles/zulip.css
View File

@@ -844,16 +844,20 @@ strong {
}
@keyframes pulse-unread {
/* Only unread dots in collapsed Views
have offset variables set; all others
will fall back to 0 (no offset). */
0% {
transform: scale(1);
transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
}
50% {
transform: scale(1.5);
transform: scale(var(--pulse-unread-scale-max))
translateX(var(--unread-dot-x-offset-scaled, 0));
}
100% {
transform: scale(1);
transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
}
}