origin/overview_marianna #1494
origin/overview_marianna #1494
Conversation
| * [Tool windows](#tool-windows) that surround the editor on the right, left, and bottom. | ||
| * [Stripes](#stripes) on the left and right sides that provide quick access to tool windows. | ||
| * [Editor area](#editor-area). | ||
| * [Status bar](#status-bar) at the bottom. |
There was a problem hiding this comment.
A very small thing: possibly remove periods in the end list items? These are not complete sentences, a period in the "Editor area." looks a bit redundant
| <img src="ui_overview_main_toolbar.png" alt="Main toolbar" width="1000"/> | ||
|
|
||
| ### Project widget | ||
| Dropdown for opening projects or creating new ones: |
There was a problem hiding this comment.
Should this sentence have a verb? Like "The drop-down control allows opening..."
| <img src="ui_overview_project_widget.png" width="706" alt="Project widget"/> | ||
|
|
||
| ### VCS widget | ||
| Dropdown for choosing VCS branches. Available if the current project is under VCS |
There was a problem hiding this comment.
Not only choosing but creating and other stuff. Possibly "managing"?
|
|
||
| ### VCS widget | ||
| Dropdown for choosing VCS branches. Available if the current project is under VCS | ||
|
|
There was a problem hiding this comment.
It's also available if the project is not under VCS — in this case it allows creating a repository for it. Possibly just omit this part, an extra detail for an overview
| <img src="ui_overview_main_toolbar_windows.png" alt="Main toolbar on Windows" width="1000"/> | ||
|
|
||
| When the main menu is shown, all the widgets are moved down: | ||
|
|
There was a problem hiding this comment.
By default, the main menu expands to the right, I think Eldar should have mockups for it in the Main Toolbar figma file. The state with a separte main toolbar at the top is a setting
There was a problem hiding this comment.
I'm not sure if we need to state all the options for the main menu here. But if we want, there are 3 options: Hamburger, Merged, and Separate. I can provide mockups for all the versions
|
|
||
| <img src="ui_overview_tool_window.png" alt="Terminal tool window" width="706"/> | ||
|
|
||
| See more in [Tool windows](tool_windows.md). |
There was a problem hiding this comment.
The SDK article opens by this link. We have a UI guides article about tool windows, possibly link to it?
| ## Stripes | ||
|
|
||
| The left and right sides of the main window feature vertical stripes containing tool window buttons. | ||
| These appear as icons by default but can be configured to display truncated tool window names beneath them: |
There was a problem hiding this comment.
Not all are truncated :) Possibly remove "truncated"?
|
|
||
| ### Navigation bar | ||
| The left part of the status bar by default is occupied by the navigation bar that is a compact alternative for the Project tool window. | ||
| It shows a path to the opened file and allows you to go to other files and directories using this path: |
There was a problem hiding this comment.
Navbar also shows path to a file selected anywhere where a file could be selected, like Project or Commit tool windows
| @@ -0,0 +1,134 @@ | |||
| # User interface overview | |||
|
|
|||
There was a problem hiding this comment.
The article's name is "user inteface overview" but it overviews only the main window. I suppose, the other major parts are dialogs, popups, menus, and notifications (these also include alerts). Possibly could also be added to the overview as short sections with a single example in each?
| @@ -0,0 +1,134 @@ | |||
| # User interface overview | |||
|
|
|||
There was a problem hiding this comment.
I suggest adding a link to this article to the "UI Guidelines" landing page — instead of the "Layout" card, because the layout article is about some basic controls, not that relevant.
Also, possibly shorten the landing text "Refer to these guidelines to create consistent and usable interfaces for IntelliJ IDEs or plugins." → "Create consistent and usable interfaces for IntelliJ IDEs or plugins."
| The main application window of all IntelliJ-based IDEs by default includes the following parts: | ||
| * [Main toolbar](#main-toolbar) at the top. | ||
| * [Tool windows](#tool-windows) that surround the editor on the right, left, and bottom. | ||
| * [Stripes](#stripes) on the left and right sides that provide quick access to tool windows. |
There was a problem hiding this comment.
I suggest moving the Stripes above the Tool windows to preserve hierarchy as the Stripes are the entry points to the tool windows
| <img src="ui_overview_main_toolbar_windows.png" alt="Main toolbar on Windows" width="1000"/> | ||
|
|
||
| When the main menu is shown, all the widgets are moved down: | ||
|
|
There was a problem hiding this comment.
I'm not sure if we need to state all the options for the main menu here. But if we want, there are 3 options: Hamburger, Merged, and Separate. I can provide mockups for all the versions
|
|
||
| Hints that show additional information like parameter types or variable values and interactive controls for showing annotations, usages, refactorings, and more. | ||
|
|
||
| <img src="ui_overview_inlays.png" alt="Inlays" width="706"/> |
There was a problem hiding this comment.
Have we already have these new designs implemented? I remember Vika mentioned that someone in the VCS made them, and they also appear in the AIA but not as a platform component(?)
|
|
||
| <img src="ui_overview_floating_toolbar.png" alt="Floating toolbar" width="706"/> | ||
|
|
||
| See more in [Floating toolbar](https://www.jetbrains.com/help/idea/working-with-source-code.html#floating_toolbar). |
There was a problem hiding this comment.
Line selection here looks a bit weird because the colour is the same as of the BG. Maybe change it slightly to make the visual contrast? The same happens above in the image of the gutter
No description provided.