Visual markers to number panes

[sglyon]

It would be great to visually number panes so users know which one they are jumping to. Refs #65 #72

This comment has potential suggestions for where to put the numbers

[dvcrn]

How about this? On space, we currently dim the editor panel and catch all user inputs anyway. What we could do is add some more logic and just show a big number (like in tmux) with the pane index.

Not sure about the implementation details yet though and if it could conflict with non-editor panes (https://github.com/dvcrn/proton/pull/90)

[dvcrn]

Here's a short test I did with some css positioning.

I post the css / html code down here in case someone wants to tackle it. It makes sure the number is always inside the center of the panel, on top of everything else.

<div class="mytest" style="
    position: absolute;
    color: white;
    font-size: 155px;
    display: flex;
    align-items: center;
    z-index: 10000;
    width: 100%;
    height: 100%;
"><div style="margin: auto;">1</div></div>

But to be honest, I think this might do better as a completely separate plugin alltogether. I'll see if I can find some time to hack something together :)

[sglyon]

I like this, but I think that I would like it even more if the numbers were a bit more subtle. Right now the current UI is pretty "slick" and the very large numbers don't have that same feeling to me.

[dvcrn]

It was just a mockup :smile: Feel free to slap a different font, color and size on how you like it most

[t9md]

Someone work on this? I want this feature as independent package and I'm willing to implement it.

@dvcrn Help me, when you achieve above screenshot with code(HTML/css) you put, where did you put that code? I believe you appended div to each pane by appendChild, but what is parent node?

[t9md]

released choose-pane

[dvcrn]

@t9md that was fast! I'll try to integrate it into proton soon, thank you 👍