allotment
allotment copied to clipboard
johnwalley
Permanently visible sash
Hi. I am trying to use the library to show resize handles (sashes?) permanently.
It seems like the current solution floats the overlay on top of the content, showing the blue bar when hovered. I would like to produce a handle that is either 10px wide or tall, dependant on orientation, and 'pushes' the other content away from it, such that this 10px handle produces a gap between the two panes. I then also plan to add an icon indicating that the divider itself is a drag handle, to visually aid users.
Given the divider is permanently floating on top of the content, and not actually affecting the gap between two panels, I don't see a way to implement this common use-case with Allotment.
Here is an example demonstrating my intentions, with rather large drag handles (30px wide/tall) that have a visual indicator as a background-image, and demonstrates the handle eating into the space of the panels rather than being laid on top of it.
Please could you advise if this is a use-case you plan to support? The support for visual indication & large drag handles that don't cut-off content by floating above it are high-priority for users with visual impairment, which I am obligated to support.
Thanks in advance.
Hi @michaelbull. Thanks for taking the time to write up this issue. I believe I understand what you're asking for and it definitely makes sense. Your point about supporting users with visual impairment is important. I will investigate if VS Code makes any affordances for such users.
This project builds on the VS Code split view implementation which does overlay the interactive element over the content. This isn't to say it can't be done differently, but just to make it clear that one of the guiding principles for this library is to stay as close to the VS Code implementation as possible (mainly because it makes my life easier, and this is a hobby I do in my spare time).
This isn't a use-case I plan to support in the near future. I mean that more in the sense that you shouldn't base your decision to use allotment on the feature being added. I'm open to spending some time thinking about solutions but I can't give any guarantees. There have been other requests to support customising the 'separator' between panes and I wonder if that might get us some of the way to supporting your use-case. In particular, if the separator border size were customisable (and it pushed aside the content) that could be a good start. Adding an icon could be done outside this library with some css, if suitable classes are made available.
When I find the time to look into this in more detail I'll update this issue.
Similar requests requests recently came in #280. I'l bump this up the priority list.
I keep revisiting this and trying out different ideas. Nothing terribly successful yet.
Here's a quick proof of concept of a permanently visible sash and adding some appropriate padding to the panes to ensure their content does not get hidden under the sash.
It's not clear to me how this approach would interact with the other options. For example, in this example minSize is 30 but because the sash has width 20 it effectively means the minSize for the pane content is 10. This can all be untangled but feels messy.
The most direct, but most significant, approach would be to introduce the concept of a splitter/gutter to the underlying VS Code implementation. It's a major change that starts us on the road of diverging from VS Code. Probably worth it but it won't be quick.
Hey! Any news on this? I'm also in the need for this behaviour, thanks in advance!
