Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag & Drop Tabs to create a Pane #4587

Open
simonferquel opened this issue Feb 14, 2020 · 29 comments
Open

Drag & Drop Tabs to create a Pane #4587

simonferquel opened this issue Feb 14, 2020 · 29 comments
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. Product-Terminal The new Windows Terminal.
Milestone

Comments

@simonferquel
Copy link

Description of the new feature/enhancement

The current way of splitting panes using written commands or shortcuts is awesome but difficult to discover.
There is already some drag & drop support for reordering tabs. It would be awesome to be able to drag & drop a tab to split a pane in the previous tab. An exemple of user interaction sequence:

  • Open Windows terminal: it shows a single tab with a single pane with powershell
  • Hit ctrl+shift+3 to open a ubuntu tab
  • drag the ubuntu tab > it shows me the previous tab (powershell)
  • using my mouse I can move the ubuntu tab into sensitive zones an preview the resulting split (a bit like Visual Studio/code UI)
  • I can then drop, and get a nice splitted pane.

Optionally, show a popup saying "Want to automate that ? click here to copy an automation script to your clipboard", which would copy a script that would do the same thing.

Proposed technical implementation details (optional)

Well, I am sure it is possible to do that by writing some code :)

@simonferquel simonferquel added the Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. label Feb 14, 2020
@ghost ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Feb 14, 2020
@simonferquel
Copy link
Author

In this context, hard to discover means also "easy to forget"

@zadjii-msft

This comment was marked as outdated.

@ghost

This comment was marked as outdated.

@ghost ghost closed this as completed Feb 18, 2020
@ghost ghost added Resolution-Duplicate There's another issue on the tracker that's pretty much the same thing. and removed Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Feb 18, 2020
@simonferquel

This comment was marked as outdated.

@zadjii-msft zadjii-msft added Area-User Interface Issues pertaining to the user interface of the Console or Terminal Product-Terminal The new Windows Terminal. and removed Resolution-Duplicate There's another issue on the tracker that's pretty much the same thing. labels Feb 24, 2020
@zadjii-msft

This comment was marked as outdated.

@zadjii-msft zadjii-msft reopened this Feb 24, 2020
@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Feb 24, 2020
@zadjii-msft zadjii-msft added this to the Terminal Backlog milestone Feb 24, 2020
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Feb 24, 2020
@zadjii-msft zadjii-msft changed the title [UI] Drag & Drop for horizontal/vertical splits Drag & Drop Tabs to create a Pane Feb 24, 2020
@randomascii
Copy link

I thought about filing a separate issue but decided to comment on this one instead. In the web browser world it is now assumed that users can drag tabs out of windows, back into windows, etc. This tearing off of tabs is an essential and elegant tool. The Windows Terminal should copy this UI paradigm. That is, in addition to being able to drag tabs to rearrange their order, and drag tabs to create panes, users should also be able to drag panes to other terminal windows, or drag them out to create new terminal windows.

@DHowett-MSFT
Copy link
Contributor

I actually really like the WPF/Visual Studio tab hover/drag/drop controls. I'd love to see us implement something like that.

@DHowett-MSFT
Copy link
Contributor

DHowett-MSFT commented Mar 17, 2020

(I thought they were obnoxious at first, but now that I'm older and either more or less opinionated, I find them "usable" 😁)

@DHowett
Copy link
Member

DHowett commented May 18, 2020

@randomascii I realized I never saw your comment. We've got an issue tracking tab tearoff/window merging, and we're evaluating it for the post-v1 timeframe. That's over in #1256!

@davkean
Copy link
Member

davkean commented May 20, 2020

Just to add my +1, I could have sworn that I saw that you could split tabs - I spent a long time trying to figure out how to do it and gave up. Only figured out how to do this when I read the settings file and saw there was a shortcut for it. I also like VS approach and was my first attempt at splitting panels (note: I work on VS, I am biased).

@zadjii-msft
Copy link
Member

From @schuelermine in #6291:

Currently, dragging a tab allows you to rearrange the tab order.

I suggest that it should also be possible to adjust panes this way. Please see the attached image.

Dragging a tab onto a seam between to panes or near the edge of a tab should create a new pane there and place the tab in there. It should also be possible to swap a tab and a pane by dragging onto the center.

The upper-right example is dubious, as it requires the addition of a draggable icon to every pane. It has been greyed out to clarify this.

pane-rearrangement-illustration-wt-3 edited

@Andrei-Paul
Copy link

Andrei-Paul commented Jun 3, 2020

I would very much prefer if panes also had a tab indicator, maybe grouping panes in consecutive tabs marked with the same color to mark a pane group, or a single "fatter" tab with some markings from each contained pane. Clicking on the "sub-tab" could directly bring that pane to focus.

But I can work with just drag-drop-able tabs / panes. 😁

@schuelermine
Copy link

@zadjii-msft I've made a slightly better version of that mockup, you might want to replace that image with this one: https://drive.google.com/file/d/1h6YLEPTmdB0woqNMep-npFMqTEJGY3HX/view?usp=sharing

@zadjii-msft
Copy link
Member

image

Meh, I'll just upload the new version here, that's easier 😉

@lucianotres
Copy link

Please don't forget the drag out to create new window, like browser tabs do. It's very quickly and easy when you have more than one screen.

@luzhkovvv
Copy link

I'd like to vote this feature up by describing important use-case.
That feature is more than only cosmetics or "mouse-friendly" way to split tab vs keyboard-only. The main point of that feature for me is moving existing tab (session) with all context into split view.
Every now and then I find myself working in several tabs with several servers, multiple sessions to one server, different virtual environments, opening different files and applications, and then thinking "this is it! I have to view that session side-by-side with that one". And it takes time to recreate the session again in a new empty split pane. Sometimes it may take so much time that I keep working in different tabs constantly switching (like, logging to some server, optionally through an intermediate server, executing some actions, waiting for results, etc).
To be honest, I almost never know I will need split-tab before I have some active sessions I'd like to split. It may (should) be problems with me planning the work, but so it is, and I think that problem is pretty common. 😉
Also, the need for the split view is sometimes dynamic, when at one point you need session1 + session2, than session1 + session3, than session2 and session3 and so on, so you can't work this around by planning layout in advance or sacrificing screen space to split view everything you may need.

@jonathanmarston
Copy link

I would like to echo @luzhkovvv's comment. This would be very useful as I frequently find myself starting multiple tabs initially to get stuff kicked off, and then moving more into a "monitoring" mode, where I'd like to move the existing sessions into panes so I can see them all at once.

I'd be willing to contribute some coding time to make this happen if it is approved and up for grabs.

ghost pushed a commit that referenced this issue Aug 12, 2021
<!-- Enter a brief description/summary of your PR here. What does it fix/what does it change/how was it tested (even manually, if necessary)? -->
## Summary of the Pull Request
Add functionality to move a pane to another tab. If the tab index is greater than the number of current tabs a new tab will be created with the pane as its root. Similarly, if the last pane on a tab is moved to another tab, the original tab will be closed.

This is largely complete, but I know that I'm messing around with things that I am unfamiliar with, and would like to avoid footguns where possible. 

<!-- Other than the issue solved, is this relevant to any other issues/existing PRs? --> 
## References
#4587 

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist
* [x] Closes #7075
* [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA
* [ ] Tests added/passed
* [x] Documentation updated. If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/terminal) and link it here: #xxx
* [x] Schema updated.
* [ ] I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx

<!-- Provide a more detailed description of the PR, other things fixed or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments
Things done:
- Moving a pane to a new tab appears to work. Moving a pane to an existing tab mostly works. Moving a pane back to its original tab appears to work.
- Set up {Attach,Detach}Pane methods to add or remove a pane from a pane. Detach is slightly different than Close in that we want to persist the tree structure and terminal controls.
- Add `Detached` event on a pane that can be subscribed to to remove other event handlers if desired. 
- Added simple WalkTree abstraction for one-off recursion use cases that calls a provided function on each pane in order (and optionally terminates early).
- Fixed an in-prod bug with closing panes. Specifically, if you have a tree (1; 2 3) and close the 1 pane, then 3 will lose its borders because of these lines clearing the border on both children https://github.com/microsoft/terminal/blob/main/src/cascadia/TerminalApp/Pane.cpp#L1197-L1201 .

To do:
- Right now I have `TerminalTab` as a friend class of `Pane` so I can access some extra properties in my `WalkTree` callbacks, but there is probably a better choice for the abstraction boundary.

Next Steps:
- In a future PR Drag & Drop handlers could be added that utilize the Attach/Detach infrastructure to provide a better UI.
- Similarly once this is working, it should be possible to convert an entire tab into a pane on an existing tab (Tab::DetachRoot on original tab followed by Tab::AttachPane on the target tab).
- Its been 10 years, I just really want to use concepts already.

<!-- Describe how you validated the behavior. Add automated tests wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
Manual testing by creating pane(s), and moving them between tabs and creating new tabs and destroying tabs by moving the last remaining pane.
@zadjii-msft zadjii-msft modified the milestones: Terminal Backlog, Backlog Jan 4, 2022
@piradata
Copy link

piradata commented Jul 5, 2022

Also one use case for this would be to reorganize the position of existing tabs for time when you badly positioned then and there is too much info on one pane horizontally like a running a "docker ps" or a "kubectl get pods -o wide"

image

And we get

image

If I am not mistaken, the Terminator terminal already permit this, could be useful looking at their code for reference.

https://terminator-gtk3.readthedocs.io/en/latest/gettingstarted.html

image

@dhirschfeld
Copy link

If you're looking for some prior-art to guide the implementation I think the JupyterLab experience is an excellent (and battle-tested) UI/UX.

The tab drag & drop functionality is provided by the lumino DockPanel widget - e.g.

https://lumino.readthedocs.io/en/latest/examples/dockpanel/index.html

@SinanAkkoyun

This comment was marked as off-topic.

@zadjii-msft

This comment was marked as off-topic.

@bar0n36
Copy link

bar0n36 commented Aug 21, 2023

The lack of this functionality is incredibly frustrating when you are setting up something in one tab, pop a new one to do something else and want to be able to watch them side-by-side. The non-intuitive, non-standard 'well right click and split tabs first' would be wonderful except nothing else does this. This is my biggest issue and makes me want to use a different terminal emulator every time I encounter it.

@piradata
Copy link

by the way, if this were to be implemented, where would be the "drag region"? like, we don't have currently anything in the terminal that is draggable or is a panel indicator in each panel, as they have a clean design and I think they should remain that way.

Any suggestions?

@zadjii-msft
Copy link
Member

Dragging and dropping a tab to create a pane is pretty straightforward - we could have some sort of overlay like VS or VSCode.

Dragging a Pane to somewhere else would probably require #4717 first, so that there's something attached to the pane to drag.

@SinanAkkoyun

This comment was marked as off-topic.

@zadjii-msft

This comment was marked as off-topic.

@piradata
Copy link

piradata commented Aug 30, 2023

yea, dragging a tab is ok, my point was the pane part. personally i think it is a little ugly the idea of pane title because i like how the windows terminal is "clean" compared to others like terminator, but we also need something draggable

@klkvsk
Copy link

klkvsk commented Nov 13, 2023

Here's an idea I want to share, what can be done instead of permanently visible drag handles:

So, by default we have alt-shift-arrow hotkeys to resize pane, alt-shift-plus/minus to create a pane. It is mnemonical that all pane modifications are done with alt-shift.

I suggest a alt-shift-control combo, that while pressed would enable an overlay mode called Pane Control Mode.

windows-terminal_pane-control-mode_mockup

While alt-shift-control is down, we get

  • Pane index hints, because we have "Move pane, index: X" actions, but as of now, how does the user know the correct index? Also, "Focus/Close pane, index: X" actions can be added later.
    This is also a visible marker to know that you're in pane control mode.
  • Borders of panes become resizable with a mouse.
  • Panes become draggable. Dragging one pane to another switches their positions. Dragging pane to tab bar ejects in to a new tab. Dragging out of window ejects to new window.
  • (debatable) hovering over edges of an active pane shows "+" button to add a pane from that side.

@piradata
Copy link

I suggest a alt-shift-control combo, that while pressed would enable an overlay mode called Pane Control Mode.

I like this idea @klkvsk , and if we combine this with the lumino demo that @dhirschfeld mentioned would be perfect.

https://lumino.readthedocs.io/en/latest/examples/dockpanel/index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. Product-Terminal The new Windows Terminal.
Projects
None yet
Development

No branches or pull requests