Workspace Windowing & Layout Strategy
Open CodeEdit windows can have various states depending on the circumstance. It is important to know about these window states and how they can change during the lifecycle of the file/project to get feedback from the community on this approach.
Our goal is to provide a simple UI when creating or viewing individual files that can be scaled up if need be. Projects will have a more comprehensive UI to accommodate navigation and other project needs.
To set the stage, upon launching CodeEdit, we start at the welcome screen which looks like this.
From here, the user can perform the following actions, each of which we will discuss.
- Create a new file
- Open a file
- Open a folder (cloning an existing project will also in the end open a folder)
Once the user clicks one of these options, CodeEdit will open a Workspace.
A Workspace is a space in which the user works on a particular project. Multiple Workspaces can be open at once. A Workspace is comprised of the following:
- Navigator Area - in the left sidebar, has a set of icon tabs for each Navigator (commonly referred to as the sidebar dock)
- Inspector Area - in the right sidebar, has a set of icon tabs for each Navigator
- Debug Area - in the bottom drawer
- Editor Area - in the center, can have multiple Editors in a split layout. Each editor has the following:
- Tab Bar
- Breadcrumb Bar
The visibility of each of these UI components can be toggled and there are situations where some of these components will be hidden by default.
To learn more see Terminology.
When a user creates a new file it might look like this.
The user can then show the Navigator sidebar and they will see a zero-state in place of the folder structure with a button that allows them to open a folder in this Workspace.
Alternatively, the user can drag a folder onto an empty window to open the folder as well.
When the folder is dropped, the Navigator is revealed to show the folder's tree.
If the user opens an existing file or saves a newly created file, it might look like this.
To open a folder, the user can show the Navigator sidebar, and click one of the buttons below to open a folder. Because the file already exists in a folder, we can provide an option for the user to open the containing folder in addition to opening something else.
Our goal here is to seamlessly allow the user to transition between states easily as needs change. Consider the following scenario:
- User opens CodeEdit
- Welcome screen is displayed
- User creates new file
- User saves new file in a new directory
- User needs to view a folder including this new file in the project navigator.
So the question was, what are we to display in the project navigator in this scenario?
Our thought was that it may cause some frustration if we showed the containing folder structure of the file originally saved. We would be making the unsafe assumption that the user wants to use this folder as the project root. We need to consider the likely possibility that the file that was open may be in a nested folder structure and the desired project root may be a few levels up.
So we will show a zero-state in place of the folder structure in the project navigator along with two buttons – one to open the containing folder and the other to allow the user to select which folder to open as shown above.
If the user opens an existing project it might look like this.
If the user drags a tab inside the window it will create a split editor layout like so.
If the user drags a tab outside of the window to break it out like this.
Then it would create a new window like so.
Let's take a closer look. Now that we have popped the file out into it's own window, you will see a few differences when compared to the previous two single file windows.
First, you will notice a new button to the right in the titlebar. This indicates that this is a child file window that belongs to a parent project window and when clicking this button, it pops it back into the original project window as a tab.
Second, you will notice that the Navigator sidebar toggle button and the debugger drawer toggle button are missing. This is for the same reason. This is a child window to a parent project window and there is no reason for a navigator or debug area within this window. The user will still be able to access the Inspector sidebar, however it is hidden by default.
When the parent project window is closed, these child windows will close as well. There is in a sense a link between all these windows of the same project.
The Open in Project button is visible and the Navigator sidebar toggle button is hidden because when the new window was created, it stores a reference to the original window it came from - if no reference is present, there is no Open in Project button and the Navigator sidebar toggle remains visible.
This is what that would look like...
User has breakout window.
User drags tab to left of breakout window.
Tab is dropped. Breakout window now has split layout.
Notice tabs are now visible and title becomes project folder name.
User has breakout window
User drags tab to center of breakout window.
Tab is dropped and is merged into breakout window.
Again notice that the tab bar is now visible and window title is now project folder name.
Another tab is dragged to the right side of the breakout window.
Tab is dropped and split view is created.
Windows only intended to display a single file (new files, open files, and files popped out of a project window) will have the navigator sidebar, inspector sidebar, debug area, breadcrumbs bar and tab bar all hidden by default. We may have a "Hide Interface" menu item in the View menu that does this instead of having to manually hide/show each.
When the tab bar is hidden, the window title becomes the filename (instead of the project folder name).
If there is anything missing or if we could be handling this better, please comment on the our discussion here.