sticky controls - #5106
sticky controls#5106
Conversation
ValJed
left a comment
ValJed
left a comment
There was a problem hiding this comment.
Neat feature 👍🏼
Minor feedback.
One thing: Are you sure we cannot use position: sticky to do this with less complexity.
I quickly tried to put the controls inside the guard and it looks almost working (the scroll thing), still should handle the admin bar etc.
Just checking with you since it would make the code way easier to maintain.
For the cypress tests, you can verify that when a widget is half visible, the controls are still visible for example. Would also make sense to run existing to be sure it breaks nothing.
|
|
||
| this.scrollTicking = true; | ||
| } | ||
| }, |
There was a problem hiding this comment.
This one could be splitted in two.
this function in charge of the overall logic, and another function in charge of computing the newStyles and returning it.
Would make the code more readable, and remove hard to track reassignment.
There was a problem hiding this comment.
I did this by
- statically composing the
defaultandbottompositions insidedataas these don't change and aren't subject to the window - Add a method computing the floating style, as it requires the latest
widgetRectto compute therightprop - Add a method for conditionally updating the styles that both handlers use
lmk what you think
| this.stickyControlsStyles = newStyles; | ||
| } | ||
|
|
||
| this.scrollTicking = false; |
There was a problem hiding this comment.
This is set to false on every frame, is it intentional?
It's purpose is to know if some scroll logic is running right?
Maybe this.scrollTicking = true; should be at the start of the frame cb?
There was a problem hiding this comment.
it’s set to true right after scheduling (not inside) because requestAnimationFrame is async — setting it earlier prevents multiple frames from being queued before the first one runs. it’s reset to false at the end of the callback to allow the next frame.
|
tests passing here https://github.com/apostrophecms/testbed/actions/runs/18569369623 |
* main: enforce empty state font (#5113) sticky controls (#5106) Layout widget icon (#5112) Feature layout widget (#5031) PRO-8435: log what widget type was missing (#5110) fix changelog (#5108) take aspect ratio into account to calculate min size constrain (#5087) PRO-8343: render-areas=inline support when using an external frontend (#5092)
* main: add locale picker (#5090) enforce empty state font (#5113) sticky controls (#5106) Layout widget icon (#5112) Feature layout widget (#5031) PRO-8435: log what widget type was missing (#5110) fix changelog (#5108) take aspect ratio into account to calculate min size constrain (#5087) PRO-8343: render-areas=inline support when using an external frontend (#5092)
…ation * main: (23 commits) PRO-8538: fix layout bug in mobile breakpoint preview that causes tiny collapsed columns (#5127) give color button a testable data attr (#5124) PRO-8530 autodetect ES bundles (#5120) Emphasize but unfocus in layout mode (#5125) Simplify layout max width (#5123) max width, anchors, labels (#5122) refactor and inject admin UI styles for layout (#5116) Color field swatches (#5118) Pro 8285 login case insensitive (#5100) fix paste bug (#5119) Implement change outlined on Discord (#5117) PRO-8374: Mute tooltip when edit is disabled (#5114) fix sticky when controls are disabled (#5115) enable logout and whoami routes if localLogin is false (#5098) add locale picker (#5090) enforce empty state font (#5113) sticky controls (#5106) Layout widget icon (#5112) Feature layout widget (#5031) PRO-8435: log what widget type was missing (#5110) ...
2 participants
Custom sticky positioning for widget controls
sticky.mp4