Add initial settings UI spec (#6720)
## Summary of the Pull Request This is the spec for the overall functionality of the settings UI - #1564. There are proposals for the launch method and editing and saving settings that we should discuss. ## Detailed Description of the Pull Request / Additional comments ### [spec.md](https://github.com/microsoft/terminal/blob/cinnamon/spec-settings-ui/doc/specs/%231564%20-%20Settings%20UI/spec.md) ### [design.md](https://github.com/microsoft/terminal/blob/cinnamon/spec-settings-ui/doc/specs/%231564%20-%20Settings%20UI/design.md)
This commit is contained in:
Kayla Cinnamon
GitHub
parent
c5cf7b817a
commit
1c7ee65c5f
BIN
doc/specs/#1564 - Settings UI/appearance.png
Normal file
BIN
doc/specs/#1564 - Settings UI/appearance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
112
doc/specs/#1564 - Settings UI/design.md
Normal file
112
doc/specs/#1564 - Settings UI/design.md
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
author: Kayla Cinnamon @cinnamon-msft
|
||||
created on: 2020-07-13
|
||||
last updated: 2020-08-11
|
||||
issue id: #1564
|
||||
---
|
||||
|
||||
# Settings UI Design
|
||||
|
||||
## Abstract
|
||||
|
||||
This design document describes how each page of the settings UI will be laid out along with design mockups to display how the UI will appear. The mock ups are for appearance purposes and some layouts and naming may be different in this doc. This doc should be considered the final say.
|
||||
|
||||
## UI Design
|
||||
|
||||
### Overall navigation with Startup page
|
||||
|
||||
This is the list of the top-level navigation items that will appear on the left nav bar:
|
||||
|
||||
- General
|
||||
- Startup
|
||||
- Interaction
|
||||
- Rendering
|
||||
- Appearance
|
||||
- Global
|
||||
- Color schemes
|
||||
- Themes*
|
||||
- Profiles
|
||||
- Defaults
|
||||
- Enumerate profiles
|
||||
- Add new
|
||||
- Keyboard
|
||||
- Mouse*
|
||||
- Command Palette*
|
||||
- Marketplace*
|
||||
|
||||
\* Themes, mouse, command palette, and marketplace will be added once they're implemented.
|
||||
|
||||
|
||||
|
||||
### Profile appearance page
|
||||
|
||||
This page requires special design because it includes the TerminalControl window to preview appearance changes. This preview window will appear on the following pages:
|
||||
|
||||
- Appearance - Color Schemes
|
||||
- Profiles - Appearance
|
||||
|
||||
|
||||
|
||||
### Keyboard page
|
||||
|
||||
The keyboard page will list the enabled key bindings and provide a way for users to add and remove them.
|
||||
|
||||
|
||||
|
||||
When someone hovers over one of the items in the table, the Edit and Delete buttons will appear. Below is what the modal looks like if they were to click Edit on a command that does not have any arguments/actions. In the future, we would want this text box to be able to listen for key combinations. This would add a "listen" button to the UI.
|
||||
|
||||
|
||||
|
||||
If the command they select has additional arguments/actions, the modal will dynamically size as arguments/actions are added.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Settings layout
|
||||
|
||||
Below is the list of all settings on their respective pages in the settings UI. The title row aligns with the navigation view on the left of the UI. Bolded headers in those columns align with top nav on the page.
|
||||
|
||||
| General - Startup | General - Interaction | General - Rendering | Appearance - Global | Appearance - Color Schemes | Profiles - Global | Profiles - Enumerate profiles | Profiles - Add new |
|
||||
| ---------------- | --------------------- | ------------------- | ------------------- | -------------------------- | ----------------- | ----------------------------- | ------------------ |
|
||||
| Default profile (dropdown) | Copy after selection is made (checkbox) | Software rendering (checkbox) | Theme (radio) | Name (text box) | **General** | **General** | **General** | **General** |
|
||||
| Launch on startup (checkbox) | Copy formatting (checkbox) | Screen redrawing (checkbox) | Show/Hide the title bar (checkbox) | Cursor color (color picker) | Command line (text box) | Scrollbar visibility (radio) | Scrollbar visibility (radio) |
|
||||
| Launch size (radio) | Word delimiters (text box) | | Show terminal title in title bar (checkbox) | Selection background (color picker) | Starting directory (browse button) | Command line (browse button) | Command line (browse button) |
|
||||
| Launch position (text box) | Window resize behavior (checkbox) | | Always show tabs (checkbox) | Background (color picker) | Icon (browse button) | Starting directory (browse button) | Starting directory (browse button) |
|
||||
| Columns on first launch (number picker) | | | Tab width mode (radio) | Foreground (color picker) | Tab title (text box) | Name (text box) | Name (text box) |
|
||||
| Rows on first launch (number picker) | | | Hide close all tabs popup (checkbox) | Black (color picker) | Scrollbar visibility (radio) | Icon (browse button) | Icon (browse button) |
|
||||
| Automatically create new profiles when new shells are installed (checkbox) | | | | Blue (color picker) | **Appearance** | Tab title (text box) | Tab title (text box) |
|
||||
| | | | | Cyan (color picker) | Font face (text box) | **Appearance** | **Appearance** |
|
||||
| | | | | Green (color picker) | Font size (number picker) | Retro terminal effects (checkbox) | Retro terminal effects (checkbox) |
|
||||
| | | | | Purple (color picker) | Font weight (dropdown) | Font face (text box) | Font face (text box) |
|
||||
| | | | | Red (color picker) | Padding (text box) | Font size (number picker) | Font size (number picker) |
|
||||
| | | | | White (color picker) | Cursor shape (radio) | Font weight (dropdown) | Font weight (dropdown) |
|
||||
| | | | | Yellow (color picker) | Cursor color (color picker) | Padding (text box) | Padding (text box) |
|
||||
| | | | | Bright black (color picker) | Cursor height (number picker) | Cursor shape (radio) | Cursor shape (radio) |
|
||||
| | | | | Bright blue (color picker) | Color scheme (dropdown) | Cursor color (color picker) | Cursor color (color picker) |
|
||||
| | | | | Bright cyan (color picker) | Foreground color (color picker) | Cursor height (number picker) | Cursor height (number picker) |
|
||||
| | | | | Bright green (color picker) | Background color (color picker) | Color scheme (dropdown) | Color scheme (dropdown) |
|
||||
| | | | | Bright purple (color picker) | Selection background color (color picker) | Foreground color (color picker) | Foreground color (color picker) |
|
||||
| | | | | Bright red (color picker) | Enable acrylic (checkbox) | Background color (color picker) | Background color (color picker) |
|
||||
| | | | | Bright white (color picker) | Acrylic opacity (number picker) | Selection background color (color picker) | Selection background color (color picker) |
|
||||
| | | | | Bright yellow (color picker) | Background image (browse button) | Enable acrylic (checkbox) | Enable acrylic (checkbox) |
|
||||
| | | | | | Background image stretch mode (radio) | Acrylic opacity (number picker) | Acrylic opacity (number picker) |
|
||||
| | | | | | Background image alignment (dropdown) | Background image (browse button) | Background image (browse button) |
|
||||
| | | | | | Background image opacity (number picker) | Background image stretch mode (radio) | Background image stretch mode (radio) |
|
||||
| | | | | | Retro terminal effects (checkbox) | Background image alignment (dropdown) | Background image alignment (dropdown) |
|
||||
| | | | | | **Advanced** | Background image opacity (number picker) | Background image opacity (number picker) |
|
||||
| | | | | | Hide profile from dropdown (checkbox) | **Advanced** | **Advanced** |
|
||||
| | | | | | Suppress title changes (checkbox) | GUID (text box) | GUID (text box) |
|
||||
| | | | | | Antialiasing text (radio) | Hide profile from dropdown (checkbox) | Hide profile from dropdown (checkbox) |
|
||||
| | | | | | AltGr aliasing (checkbox) | Suppress title changes (checkbox) | Suppress title changes (checkbox) |
|
||||
| | | | | | Scroll to input when typing (checkbox) | Antialiasing text (radio) | Antialiasing text (radio) |
|
||||
| | | | | | History size (number picker) | AltGr aliasing (checkbox) | AltGr aliasing (checkbox) |
|
||||
| | | | | | How the profile closes (radio) | Scroll to input when typing (checkbox) | Scroll to input when typing (checkbox) |
|
||||
| | | | | | | History size (number picker) | History size (number picker) |
|
||||
| | | | | | | How the profile closes (radio) | How the profile closes (radio) |
|
||||
|
||||
## Potential Issues
|
||||
|
||||
## Future considerations
|
||||
|
||||
## Resources
|
||||
BIN
doc/specs/#1564 - Settings UI/keyboard-modal-add.png
Normal file
BIN
doc/specs/#1564 - Settings UI/keyboard-modal-add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
doc/specs/#1564 - Settings UI/keyboard-modal-args.png
Normal file
BIN
doc/specs/#1564 - Settings UI/keyboard-modal-args.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
doc/specs/#1564 - Settings UI/keyboard-modal.png
Normal file
BIN
doc/specs/#1564 - Settings UI/keyboard-modal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
doc/specs/#1564 - Settings UI/keyboard.png
Normal file
BIN
doc/specs/#1564 - Settings UI/keyboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
BIN
doc/specs/#1564 - Settings UI/navigation-2.png
Normal file
BIN
doc/specs/#1564 - Settings UI/navigation-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
doc/specs/#1564 - Settings UI/navigation.png
Normal file
BIN
doc/specs/#1564 - Settings UI/navigation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
122
doc/specs/#1564 - Settings UI/spec.md
Normal file
122
doc/specs/#1564 - Settings UI/spec.md
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
---
|
||||
author: Kayla Cinnamon @cinnamon-msft
|
||||
created on: 2020-06-29
|
||||
last updated: 2020-08-10
|
||||
issue id: #1564
|
||||
---
|
||||
|
||||
# Settings UI Implementation
|
||||
|
||||
## Abstract
|
||||
|
||||
This spec describes the basic functionality of the settings UI, including disabling it, the navigation items, launch methods, and editing of settings. The specific layout of each page will defined in later design reviews.
|
||||
|
||||
## Inspiration
|
||||
|
||||
We have been wanting a settings UI since the dawn of Terminal time, so we need to define how it will interact with the application and how users should expect to interact with it.
|
||||
|
||||
## Solution Design
|
||||
|
||||
The settings UI will be the default experience. We will provide users an option to skip the settings UI and edit the raw JSON file.
|
||||
|
||||
### Ability to disable displaying the settings UI
|
||||
|
||||
Some users don't want a UI for the settings. We can update the `openSettings` key binding with a `settingsUI` option.
|
||||
|
||||
If people still like the UI but want to access the JSON file, we can provide an "Open the JSON file" button at the bottom of the navigation menu.
|
||||
|
||||
### Launch method: launch in a new tab
|
||||
|
||||
Clicking the settings button in the dropdown menu will open the settings UI in a new tab. This helps us take steps toward supporting non-terminal content in a tab. Users will be able to see their visual changes by using the preview window inside the settings UI on relevant pages.
|
||||
|
||||
#### We also considered: launch in a new window
|
||||
|
||||
Clicking the settings button in the dropdown menu will open the settings UI in a new window. This allows the user to edit their settings and see the Terminal live update with their changes.
|
||||
|
||||
In the Windows taskbar, the icon will appear as if Terminal has multiple windows open.
|
||||
|
||||
### Editing and saving settings: implement a save button
|
||||
|
||||
Users will only see their settings changes take place once they click "Save". Clicking "Save" will write to the settings.json file. This aligns with the functionality that exists today by editing the settings.json file in a text editor and saving it.
|
||||
|
||||
We will also be adding a TerminalControl inside the settings UI to preview what the changes will look like before actually saving them to the settings.json file.
|
||||
|
||||
#### We also considered: automatically save settings
|
||||
|
||||
As users edit fields in the settings UI, they are automatically saved and written to the JSON file. This allows the user to see their settings changes taking place in real time.
|
||||
|
||||
## UI/UX Design
|
||||
|
||||
Layout of all of the settings per page can be found in the [design doc](./design.md).
|
||||
|
||||
### Top-level navigation: more descriptive navigation
|
||||
|
||||
The navigation menu is broken up into more digestible sections. This aligns more closely to other terminals. The following are the proposed navigation items:
|
||||
|
||||
- General
|
||||
- Startup
|
||||
- Interaction
|
||||
- Rendering
|
||||
- Appearance
|
||||
- Global
|
||||
- Color schemes
|
||||
- Themes*
|
||||
- Profiles
|
||||
- Defaults
|
||||
- Enumerate profiles
|
||||
- Add new
|
||||
- Keyboard
|
||||
- Mouse*
|
||||
- Command Palette*
|
||||
- Marketplace*
|
||||
|
||||
\* Themes, mouse, command palette, and marketplace will be added once they're implemented.
|
||||
|
||||
|
||||
|
||||
#### We also considered: align with JSON
|
||||
|
||||
The settings UI could have top-level navigation that aligns with the overall structure of the settings.json file. The following are the proposed navigation items:
|
||||
|
||||
- Globals
|
||||
- Profiles
|
||||
- Color schemes
|
||||
- Bindings
|
||||
|
||||
For Bindings, it would have key bindings, mouse bindings, and command palette inside it.
|
||||
|
||||
|
||||
|
||||
## Capabilities
|
||||
|
||||
### Accessibility
|
||||
|
||||
This will have to undergo full accessibility testing because it is a new UI element. All items inside the settings UI should be accessible by a screen reader and the keyboard. Additionally, all of the settings UI will have to be localized.
|
||||
|
||||
### Security
|
||||
|
||||
This does not impact security.
|
||||
|
||||
### Reliability
|
||||
|
||||
This will not improve reliability.
|
||||
|
||||
### Compatibility
|
||||
|
||||
This will change the default experience to open the UI, rather than the JSON file in a text editor. This behavior can be reverted with the setting listed [above](#ability-to-disable-displaying-the-settings-ui).
|
||||
|
||||
### Performance, Power, and Efficiency
|
||||
|
||||
This does not affect performance, power, nor efficiency.
|
||||
|
||||
## Potential Issues
|
||||
|
||||
## Future considerations
|
||||
|
||||
- We will have to have design reviews for all of the content pages.
|
||||
- The `hidden` property will need special consideration. Ideally, all profiles will appear in the settings regardless if `hidden` is set to `true`.
|
||||
- We should have undo functionality. In a text editor, you can type `Ctrl+Z` however the settings UI is a bit more complex.
|
||||
- Once we have a marketplace for themes and extensions, this should be added to the top-level navigation.
|
||||
- As we add more features, the top-level navigation is subject to change in favor of improved usability.
|
||||
|
||||
## Resources
|
||||
Loading…
Reference in a new issue