Repository navigation
✨ Split Editors #338
Description
Is your feature request related to a problem? Please describe.
Users might want to see more than one editor at once.
Describe the solution you'd like
We need the ability to open editors in a split side-by-side layout, vertically and horizontally.
Mockups
Step 1: User mouses over to editor tab that they would like to go in a new split editor
Step 2: User drags tab out of the tab bar
To the bottom half of the editor to split down
Or to the right half of the editor to split right
Step 3: User releases mouse and new split editor view is added to the right
Step 4: User drags addition tab to right split editor view
To add it to the existing split view, the user can drag the tab into the tab bar of the right split or over the center of the split view like so...
To split the right split view again to the right...
Note: This will create three columns equal in width. Dragging to the right side of the left split and the left side of the right split will do the same thing, create a new split view in the middle of the two existing split views.
Or to the bottom to create a bottom split within the existing right split...
Describe alternatives you've considered
n/a
Additional context
See Workspace Windowing & Layout Strategy.
Notice the close editor button on the left and split icon on the right. When right clicking this split icon you might see an option to split vertically as well. We might have an icon that puts that pane in fullscreen like Xcode
We may also consider a setting that closes the editor pane on close of the last tab in that pane.
VSCode Split Editors
Complex layouts are possible
Related Issues
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
[-][FEAT] - Split Editors[/-][+]✨ Split Editors[/+]austincondiff commentedon May 16, 2022
Please note, this issue is blocked and is dependent on the completion of the following issue:
.codeedit/selection.jsonto UserDefaults/AppStorage #513Matejkob commentedon Jul 3, 2022
I can try to do it. 🚀
[CodeEditApp#338] Add `SplitEditors` and `SplitEditorsTests` targets;…
Matejkob commentedon Jul 3, 2022
I noticed that on the mockups when a user drags the tab out and puts it in the editor, it splits the editor and placeholder into two independent views. We can handle it in a bit different way - in the same way, as VS code handles this. Instead of creating two independent views embedded into
VStackorHStack, we can create an overlay above the editor. Moreover, we can go a bit further behind VS code idea and let a user option to put a new editor in one of the following positions:leading,trailing,top,bottomorcenter. Positioncenterprobably isn't required when a user drags the tab out of the tab bar, but if we add dragging a file out directly from the navigator, it would be necessary. Thanks to this solution interface would be a bit more user-friendly and a bit more smooth during choosing positions for the new editor. I'm attaching the recording with POC.Screen.Recording.2022-07-03.at.7.14.47.PM.mov
Split Layouts WIP (#702)
Sparkle updates (#759)
andyPark commentedon Oct 3, 2022
I'm actively working on this, could you assign it to me? @austincondiff
2 remaining items
andyPark commentedon Nov 5, 2022
@austincondiff Hey I got dragged into another project, sorry but I can't finish this task at the moment!
austincondiff commentedon Nov 5, 2022
No worries. Anybody else care to take this on?
austincondiff commentedon Dec 14, 2022
I just updated the mockups in main issue description. Per @Matejkob's comment:
These updated mockups reflect this by floating the placeholders on top of the editor view instead of splitting the view as the user is dragging as this could lead to a frustrating UX.
austincondiff commentedon Dec 14, 2022
I am assigning this to @bombardier200. @Matejkob could you brief him on the work you started?