fix: align DayAnimated sticky header with inline separators (Telegram-style push)#2749
Closed
kesha-antonov wants to merge 1 commit into
Closed
fix: align DayAnimated sticky header with inline separators (Telegram-style push)#2749kesha-antonov wants to merge 1 commit into
kesha-antonov wants to merge 1 commit into
Conversation
…-style push) The floating day header is an overlay while the day separators are rendered inline in the list, so the two must hand off at exactly the same screen line to read as a single sticky header. They were misaligned: the floating header pinned at DAY_PIN_OFFSET but the inline separator's pill sits DAY_MARGIN_TOP lower (Day's container marginTop), while the floating overrides that margin to 0. The handoff used the wrong threshold (the inline stayed fully visible until it scrolled well past the floating), producing a brief duplicate date badge and a vertical jump at every day boundary. Introduce a shared DAY_HANDOFF_OFFSET (= DAY_PIN_OFFSET - DAY_MARGIN_TOP) used by both the floating header (which day is stuck, and the push offset) and the inline separator's fade-out, so the incoming inline separator fades out at the exact pixel the floating header takes over. The push now rests the floating pill's bottom on the rising separator's pill (top = min(DAY_PIN_OFFSET, nextSeparatorScreenTop + DAY_MARGIN_TOP - headerHeight)) so the outgoing date slides up and off as the incoming arrives - a single clean sticky push. Also tighten the fade timing to match Telegram (fast fade-in, short idle delay then fade-out) behind a DEBUG_TIME_SCALE knob for future frame-by-frame tuning, and drop the now-unused messages prop from DayAnimated.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The animated day header (
DayAnimated) is a floating overlay, while the day separators are rendered inline in the list. For the effect to read as a single iOS-Telegram-style sticky header, the two must hand off at the exact same screen line. They didn't:DAY_PIN_OFFSET, but an inline separator's pill sitsDAY_MARGIN_TOPlower (theDaycontainer'smarginTop), while the floating header overrides that margin to0.Result, visible at every day boundary while scrolling: a brief duplicate date badge (same date shown twice) and a vertical jump as the date switched.
Fix
Introduce a shared
DAY_HANDOFF_OFFSET = DAY_PIN_OFFSET - DAY_MARGIN_TOPused by both sides so they hand off at the same pixel:separatorScreenTop <= DAY_HANDOFF_OFFSET, and the next (newer) day's separator pushes it up:top = min(DAY_PIN_OFFSET, nextSeparatorScreenTop + DAY_MARGIN_TOP - headerHeight), so the floating pill's bottom rests exactly on the rising separator's pill. The outgoing date slides up and off as the incoming arrives - a single clean push.[DAY_HANDOFF_OFFSET, DAY_HANDOFF_OFFSET + fade], i.e. exactly as it reaches the line where the floating header takes over. No duplicate, no gap, no jump.Fade timing tightened to match Telegram (fast fade-in, short idle delay, then fade-out), behind a
DEBUG_TIME_SCALEconstant (=1) for future frame-by-frame tuning. Also dropped the now-unusedmessagesprop fromDayAnimated.Validation
Validated on the Android simulator with a 7-day data set, stepping through day boundaries frame-by-frame: