spbyrne
commented
4 years ago Hey @weibenfalk, this looks great! Testing locally and I like the behaviour.
I started playing around with the code locally to address a few things:
- Throttle the scroll event; not sure what a good level of throttling is for this kind of thing.
- When the menu reaches the bottom of the WYSIWYG it should be un-stuck.
- There should be a placeholder to 'hold' the space of the toolbar when it's fixed, so that the moment it becomes fixed things don't move around.
For 3 I thought maybe having a wrapper that's position relative, making the placeholder always there, and then toggling the toolbar itself between position absolute & fixed could work. Here's roughly what I was doing to experiment with that approach:
const MenuContainer = styled.div`
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
width: 100%;
max-width: 100%;
background-color: white;
border-radius: ${radius()};
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
border: 1px solid ${color.grey(2)};
overflow: visible;
display: flex;
flex: 0 0 auto;
z-index: 10;
margin: 0 0 0.75rem 0;
`
const MeneuPlaceholder = styled.div`
position: relative;
opacity: 0;
visibility: hidden;
pointer-events: none;
user-select: none;
`
const MenuWrapper = styled(
({ menuFixed, menuWidth, menuRef, children, ...styleProps }) => {
return (
<div ref={menuRef} {...styleProps}>
<MenuContainer>{children}</MenuContainer>
<MeneuPlaceholder>Test</MeneuPlaceholder>
</div>
)
}
)`
position: relative;
${MenuContainer}, ${MeneuPlaceholder} {
max-width: ${({ menuWidth }) => `${menuWidth}px`};
}
${props =>
props.menuFixed &&
css`
${MenuContainer} {
position: fixed;
}
`}
`Unfortunately I don't have time to continue this right now as we're looking to get the improved blocks UI out ASAP. If you want to look at these changes let me know! Otherwise I can return to this once the blocks UI is shipped.
👍
weibenfalk
kendallstrautman
ncphillips
Hey.
This may seem a little much for this functionality. But check it out. I think it's necessary as the structure on things are now. It isn't possible to just set the positioning to "sticky"
Thomas