feat(web): add sticky date headers#25887
feat(web): add sticky date headers#25887didekoning wants to merge 14 commits intoimmich-app:mainfrom
Conversation
… into feature/sticky_headers
|
I'll do a perf test on this within the next few days |
bwees
changed the title
|
I tested the perf (synthetically) and even though translate3d is faster (in the absolute sense) it is only microseconds faster, and doesn't impact 60fps (16ms per frame) or 120fps (8ms per frame) rendering. |
danieldietzler
left a comment
danieldietzler
left a comment
There was a problem hiding this comment.
When scrolling back up or when using the scrubber, the header sometimes disappears
| data-group | ||
| style:position="absolute" | ||
| style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`} | ||
| style:left={`${absoluteWidth}px`} |
There was a problem hiding this comment.
This should be style:inset-inline-start for RTL languages, see also #26513
There was a problem hiding this comment.
Yes, I need to find some time to find a way that both works with my change and works with RTL languages. Since the change to left was intentional to fix some issues with the fixed header.
There was a problem hiding this comment.
inset-inline-start is just the logical/rtl-friendly css property for offsetting something from the 'left' margin that we're used to. In general, it is always correct to replace left with inset-inline-start, unless you're dealing for example with pixel offsets of the face bounding boxes in an image.
4 participants
Description
I’ve made the day headers sticky, as requested in #1667. This makes it much easier to keep track of the date photos were taken while scrolling through large timelines.
This implementation replaces the transform-based positioning used for the Month sections with top and left positioning, since position: sticky does not work correctly when an element is inside a transformed parent container. This change may have a small performance impact, but because the original transform positioning was not actively animated (except during resize), the impact should be minimal.
To help mitigate any performance concerns, I also improved the month title checkbox animation by switching it from animating width to animating transform, which is generally more performant.
This makes it easier to see what date photos were taken when you are halfway through scrolling a large section of the timeline.
Fixes # #1667
How Has This Been Tested?
Screenshots (if appropriate)
immich_demo_small.mov
Checklist:
src/services/uses repositories implementations for database calls, filesystem operations, etc.src/repositories/is pretty basic/simple and does not have any immich specific logic (that belongs insrc/services/)Please describe to which degree, if any, an LLM was used in creating this pull request.
An LLM was used for code explaination and to help find the correct Tailwind classes.
...