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.

Sign up for GitHub

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

Jump to bottom

Epic: Settings UI Completion #6800

Open
17 of 25 tasks
zadjii-msft opened this issue Jul 6, 2020 · 2 comments
Open
17 of 25 tasks

Epic: Settings UI Completion #6800

zadjii-msft opened this issue Jul 6, 2020 · 2 comments
Assignees
@carlos-zamora
Labels
Area-Settings UI Anything specific to the SUI Issue-Scenario Product-Terminal The new Windows Terminal.
Milestone
Backlog

Comments

@zadjii-msft
Copy link
Member

zadjii-msft commented Jul 6, 2020 •
edited

written and maintained by @carlos-zamora

Settings UI Issue: #1564
Settings UI PR: #8048
Settings UI Spec & Design: #6720

Now that it has merged to main, there are a few follow-up items to work on. This scenario tracks follow-up tasks from that PR, and other features we are committing to for Windows Terminal v2.

Features

Styling

Tasks

Bugs

Backlog
@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 Jul 6, 2020
@zadjii-msft zadjii-msft changed the title [reserved] [Reserved for future use] Jul 6, 2020
@DHowett DHowett removed the Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting label Jul 6, 2020
@miniksa miniksa added ⛺ Reserved For future use and removed Needs-Tag-Fix Doesn't match tag requirements labels Jul 6, 2020
@carlos-zamora carlos-zamora changed the title [Reserved for future use] Epic: Settings UI Follow-Up Dec 11, 2020
@carlos-zamora carlos-zamora added Area-Settings UI Anything specific to the SUI Issue-Scenario Product-Terminal The new Windows Terminal. and removed ⛺ Reserved For future use labels Dec 11, 2020
@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Dec 11, 2020
@carlos-zamora carlos-zamora self-assigned this Dec 11, 2020
@carlos-zamora carlos-zamora removed the Needs-Tag-Fix Doesn't match tag requirements label Dec 11, 2020
@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Dec 11, 2020
@carlos-zamora carlos-zamora added Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. and removed Needs-Tag-Fix Doesn't match tag requirements labels Dec 11, 2020
@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Dec 11, 2020
@carlos-zamora carlos-zamora removed the Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. label Dec 11, 2020
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Dec 11, 2020
@DHowett DHowett added this to the Terminal v2.0 milestone Dec 11, 2020
@DHowett DHowett changed the title Epic: Settings UI Follow-Up Epic: Settings UI Completion Dec 11, 2020
DHowett added a commit that referenced this issue Dec 11, 2020
@DHowett @carlos-zamora
@cinnamon-msft @almedina-ms @xerootg @scott-armiger @vineeththomasalex @leonMSFT
Introduce the Terminal Settings Editor (#8048)
05f3ccb 
This commit introduces the terminal settings editor (to wit: the
Settings UI) as a standalone project. This project, and this commit, is
the result of two and a half months of work.

TSE started as a hackathon project in the Microsoft 2020 Hackathon, and
from there it's grown to be a bona-fide graphical settings editor.

There is a lot of xaml data binding in here, a number of views and a
number of view models, and a bunch of paradigms that we've been
reviewing and testing out and designing and refining.

Specified in #6720, #8269
Follow-up work in #6800
Closes #1564
Closes #8048 (PR)

Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>
Co-authored-by: Kayla Cinnamon <cinnamon@microsoft.com>
Co-authored-by: Alberto Medina Gutierrez <almedina@microsoft.com>
Co-authored-by: John Grandle <jograndl@microsoft.com>
Co-authored-by: xerootg <xerootg@users.noreply.github.com>
Co-authored-by: Scott <sarmiger1@gmail.com>
Co-authored-by: Vineeth Thomas Alex <vineeththomasalex@gmail.com>
Co-authored-by: Leon Liang <lelian@microsoft.com>
Co-authored-by: Dustin L. Howett <duhowett@microsoft.com>
Signed-off-by: Dustin L. Howett <duhowett@microsoft.com>
DHowett added a commit that referenced this issue Dec 11, 2020
@DHowett @carlos-zamora
@cinnamon-msft @almedina-ms @xerootg @scott-armiger @vineeththomasalex @leonMSFT
Introduce the Terminal Settings Editor (#8048)
3e2b943 
This commit introduces the terminal settings editor (to wit: the
Settings UI) as a standalone project. This project, and this commit, is
the result of two and a half months of work.

TSE started as a hackathon project in the Microsoft 2020 Hackathon, and
from there it's grown to be a bona-fide graphical settings editor.

There is a lot of xaml data binding in here, a number of views and a
number of view models, and a bunch of paradigms that we've been
reviewing and testing out and designing and refining.

Specified in #6720, #8269
Follow-up work in #6800
Closes #1564
Closes #8048 (PR)

Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>
Co-authored-by: Kayla Cinnamon <cinnamon@microsoft.com>
Co-authored-by: Alberto Medina Gutierrez <almedina@microsoft.com>
Co-authored-by: John Grandle <jograndl@microsoft.com>
Co-authored-by: xerootg <xerootg@users.noreply.github.com>
Co-authored-by: Scott <sarmiger1@gmail.com>
Co-authored-by: Vineeth Thomas Alex <vineeththomasalex@gmail.com>
Co-authored-by: Leon Liang <lelian@microsoft.com>
Co-authored-by: Dustin L. Howett <duhowett@microsoft.com>
Signed-off-by: Dustin L. Howett <duhowett@microsoft.com>
This was referenced Dec 12, 2020
Merged
Merged
ghost pushed a commit that referenced this issue Dec 17, 2020
@carlos-zamora
Add UI for adding, renaming, and deleting a color scheme (#8403)
33470ad 
Introduces the following UI controls to the ColorSchemes page:
- "Add new" button
  - next to dropdown selector
  - adds a new color scheme named ("Color Scheme #" where # is the number of color schemes you have)
- "Rename" Button
  - next to the selector
  - replaces the ComboBox with a TextBox and the accept/cancel buttons appear
- "Delete" button
  - bottom of the page
  - opens flyout, when confirmed, deletes the current color scheme and selects another one

This also adds a Delete button to the Profiles page. The Hide checkbox was moved above the Delete button.

## References
#1564 - Settings UI
#6800 - Settings UI Completion Epic

## Detailed Description of the Pull Request / Additional comments

**Color Schemes:**
- Deleting a color scheme selects another one from the list available
- Rename replaces the combobox with a textbox to allow editing
- The Add New button creates a new color scheme named "Color Scheme X" where X is the number of schemes defined
- In-box color schemes cannot be deleted

**Profile:**
- Deleting a profile selects another one from the list available
- the rename button does not exist (yet), because it needs a modification to the NavigationView's Header Template
- The delete button is disabled for in-box profiles (CMD and Windows Powershell) and dynamic profiles

## Validation Steps Performed
**Color Schemes - Add New**
✅ Creates a new color scheme named "Color Scheme X" (X being the number of color schemes)
✅ The new color scheme can be renamed/deleted/modified

**Color Schemes - Rename**
✅ You cannot rename an in-box color scheme
✅ The rename button has a tooltip
✅ Clicking the rename button replaces the combobox with a textbox
✅ Accept --> changes name
✅ Cancel --> does not change the name
✅ accepting/cancelling the rename operation updates the combo box appropriately

**Color Schemes - Delete**
✅ Clicking delete produces a flyout to confirm deletion
✅ Deleting a color scheme removes it from the list and select the one under it
✅ Deleting the last color scheme selects the last available color scheme after it's deleted
✅ In-box color schemes have the delete button disabled, and a disclaimer appears next to it

**Profile- Delete**
✅ Base layer presents a disclaimer at the top, and hides the delete button
✅ Dynamic and in-box profiles disable the delete button and show the appropriate disclaimer next to the disabled button
✅ Clicking delete produces a flyout to confirm deletion
✅ Regular profiles have a delete button that is styled appropriately
✅ Clicking the delete profile button opens a content dialog. Confirmation deletes the profile and navigates to the profile indexed under it (deleting the last one redirects to the last one)


## Demo
Refer to this post [here](#8403 (comment).
Confirmation flyout demo: #8403 (comment)
DHowett pushed a commit that referenced this issue Dec 18, 2020
@carlos-zamora
doc: document how to add a setting to Windows Terminal (#8566)
2485a63 
This guide serves as a reference on how to add a setting to Windows Terminal. It covers...
- Terminal Settings Model changes
- Settings UI changes
- `TerminalSettings` changes
- Actions and action arguments

As a part of #6800 (Settings UI Follow Up Tasks)
@skyline75489 skyline75489 mentioned this issue Dec 23, 2020
Open
@carlos-zamora carlos-zamora mentioned this issue Dec 28, 2020
Merged
ghost pushed a commit that referenced this issue Feb 19, 2021
@carlos-zamora
Enable text search on combo boxes (#9206)
2c22b68 
`ComboBox` has a text search function that allows users to type letters, and the `ComboBoxItem` starting with those letters is shown. In order to enable this functionality, the underlying items must be `IStringable`. This exposes a `ToString()` function and fixes all of our issues.

This PR adds the `IStringable` interface to `ColorScheme`, `Profile`, and `EnumEntry`.

## References
#6800 - Settings UI Epic
#8768 - Keyboard Navigation
microsoft/microsoft-ui-xaml#4182 - discussion with WinUI about how to overcome this issue

## Validation Steps Performed
Tested...
- Launch > Default Profile
- Color Schemes > Name
- Profile > Appearance > Color scheme
- Profile > Appearance > Font weight

Also tested radio buttons, but those still don't work, unfortunately. Looks like they don't have the same underlying mechanism.
ghost pushed a commit that referenced this issue Feb 19, 2021
@carlos-zamora
Redesign color schemes page (#9196)
bb0e1d3 
This PR performs a large overall polish of the color schemes page:
- Ensures keyboard navigation is holistically improved (i.e. fully
  accessible, no lost focus, etc...)
- Adds tooltips and automation properties to all controls
- Redesigns the page according to @mdtauk's approved design
  ([link](#8997 (comment))).
  Note, there are some minor modifications to the design that were
  approved by @cinnamon-msft.
- Automatically reflow's the color buttons when they do not fit in
  horizontal mode

## Detailed Description of the Pull Request / Additional comments
- Redesign
  - a data template was introduced to make color representation
    consistent and straightforward
  - `ContentControl` is used to hold a reference to the
    `ColorTableEntry` and represent it properly using the aforementioned
    data template.
  - The design is mainly a StackPanel holding two grids: color table &
    functional colors.
  - The color table is populated via code. After much thought, this
    seems to be the easiest way to correctly bind 16 controls that are
    very similar.
  - The functional colors are populated via XAML manually.
  - We need a grid to separate the text and the buttons. This allows for
    scenarios like "selection background is the longest string" to force
    the buttons and text to be aligned.
- Reflow
  - A `VisualStateManager` uses an `AdaptiveTrigger` to change the
    orientation of the color tables' stack panel. The adaptive trigger
    was carefully calculated to align with the navigation view's
    breakpoint.
- Keyboard Navigation
  - (a lesson from `SettingContainer`) `ContentControl` can be focused
    as opposed to the content inside of it. We don't want that, so we
    set `IsTabStop` to false on it. That basically fixes all of our
    keyboard navigation issues in this new design.
- Automation Properties and ToolTips
  - As in my previous PRs, I can't seem to figure out how to bind to a
    control's automation property to its own tooltip. So I had to do
    this in the code and add a few `x:Name` around.

## Validation Steps Performed
- Manually tested...
  - tab navigation
  - accessibility insights
  - NVDA
  - changing color schemes updates color table
- specific scenario:
  - change a color table color and a functional color
  - navigate to a different color scheme
  - navigate back to the first color scheme
  - if the colors persist, the changes were propagated to the settings model

References #8997 - Based on the work from @Chips1234
References #6800 - Settings UI Epic
Closes #8765 - Polish Color Schemes page
Closes #8899 - Automation Properties
Closes #8768 - Keyboard Navigation
This was referenced Feb 19, 2021
Merged
Merged
ghost pushed a commit that referenced this issue Feb 19, 2021
@carlos-zamora
Introduce setting override tracking and update SettingContainer (#9079)
eb0fb3e 
This PR adds improved override message generation for inheritance in
SUI. The settings model now has an `OriginTag` to be able to denote
where a `Profile` came from. This tag is used in the `SettingContainer`
to generate a more specific override message.

## References
#6800 - SUI Epic
#8919 - SUI Inheritance PR
#8804 - SUI Inheritance (old issue)

## Detailed Description of the Pull Request / Additional comments
- **Terminal Settings Model**
  - Introduced `PROJECTED_SETTING` as a macro to more easily declare the
    functions for each setting
  - Introduced `<setting>OverrideSource` which finds the `Profile` that
    has \<setting\> defined
  - Introduced `OriginTag Profile::Origin {Custom, InBox, Generated}` to
    trace where a profile came from
  - `DefaultProfileUtils` creates profiles for profile generators. So
    that now sets the `Origin` tag to `Generated`
  - `CascadiaSettings::LoadDefaults()` tags all profiles created as
    `InBox`.
  - The view model had to ingest the API change to be able to interact
    with `<setting>OverrideSource`
- **Override Message Generation**
  - The reset button now has a more specific tooltip
  - The reset button now only appears if base layer is being overridden
  - We use the settings model changes to determine the message to
    display for the target

## Validation Steps Performed
Tested the following cases:
- overrides nothing (inherited setting)
- overrides value inherited from...
  - base layer
  - a profile generator
  - in-box profile
- global settings should not have this feature
ghost pushed a commit that referenced this issue Feb 24, 2021
@carlos-zamora
Make Settings UI the default experience (#9224)
35e1168 
This makes the settings UI the default settings experience.

As shown below, the following bindings are now default:
- <kbd>ctrl+,</kbd> --> settings ui
- <kbd>ctrl+shift+,</kbd> --> settings.json
- <kbd>ctrl+alt+,</kbd> --> defaults.json

The dropdown settings button aligns with this heuristic:
- click --> settings ui
- shift+click --> settings.json
- alt+click --> defaults.json
- if alt and shift both pressed, open settings.json

#6800 - Settings UI Epic
This was referenced Feb 24, 2021
Merged
Merged
ghost pushed a commit that referenced this issue Feb 25, 2021
@carlos-zamora
Update dropdown's settings keyboard accelerator (#9294)
649c546 
Fixes a bug introduced by #9224 where the wrong keyboard accelerator
would appear in the new tab dropdown. We were looking for the "settings
file" version of the action, as opposed to the "settings UI" version. 

## References
#9224 - Settings UI as default
#6800 - Settings UI Epic
DHowett pushed a commit that referenced this issue Feb 25, 2021
@carlos-zamora @DHowett
Update dropdown's settings keyboard accelerator (#9294)
e295cc4 
Fixes a bug introduced by #9224 where the wrong keyboard accelerator
would appear in the new tab dropdown. We were looking for the "settings
file" version of the action, as opposed to the "settings UI" version.

## References
#9224 - Settings UI as default
#6800 - Settings UI Epic

(cherry picked from commit 649c546)
@zadjii-msft zadjii-msft mentioned this issue Mar 1, 2021
Closed
This was referenced Mar 1, 2021
Merged
Merged
ghost pushed a commit that referenced this issue Mar 4, 2021
@carlos-zamora
Change SettingsTab close icon to be smaller (#9324)
4a95341 
We were using the wrong close icon for the settings tab. This is a side effect of `TerminalTab` overriding `TabBase`'s implementation.

#6800 - Settings UI Epic

Closes #9317
ghost pushed a commit that referenced this issue Mar 8, 2021
@carlos-zamora
Represent font face as a combo box in SUI (#9275)
87fa526 
## Summary of the Pull Request

This replaces the Profiles > Font Face text box with a combo box.

## References
#6800 - Settings UI Epic

## Detailed Description of the Pull Request / Additional comments

- Enumerating the fonts
  - [This doc](https://docs.microsoft.com/en-us/windows/win32/directwrite/font-enumeration) was the main reference used to enumerate the fonts. It was mildly adapted to use WinRT instead of WRL.
- Updating the UI
  - Similar to other combo box settings, `Profiles` keeps a reference to the current value. We use that as a way to update the settings model. If an invalid value is used, we fallback to `Cascadia Mono`.
  - A checkbox was added to let the user select from all of the installed fonts, or just the monospace ones.

## Demo
![Font Face Combo Box Demo](https://user-images.githubusercontent.com/11050425/109342917-6cd3b600-7821-11eb-8df9-fb988b037e02.gif)
ghost pushed a commit that referenced this issue Mar 15, 2021
@carlos-zamora
Move TerminalSettings from TermApp to TerminalSettingsModel (#9318)
44f1ba6 
This accomplishes the first step towards embedding a preview on the Profiles/ColorSchemes page, by moving the `TerminalSettings` object over to the Terminal Settings Model project. We'll leverage this in a later PR to construct an embedded terminal in the settings UI.

`TerminalSettings` had to see a few more functions exposed in the IDL
(including some inheritance stuff).

Refresh the JSON to make TerminalSettings do it's thing across all the
open terminals.

References #9122 - Terminal Preview
References #6800 - SUI Epic
DHowett pushed a commit that referenced this issue Mar 15, 2021
@carlos-zamora @DHowett
Change SettingsTab close icon to be smaller (#9324)
cd68bd0 
We were using the wrong close icon for the settings tab. This is a side effect of `TerminalTab` overriding `TabBase`'s implementation.

#6800 - Settings UI Epic

Closes #9317

(cherry picked from commit 4a95341)
DHowett pushed a commit that referenced this issue Mar 15, 2021
@carlos-zamora @DHowett
Change SettingsTab close icon to be smaller (#9324)
fb4dab0 
We were using the wrong close icon for the settings tab. This is a side effect of `TerminalTab` overriding `TabBase`'s implementation.

#6800 - Settings UI Epic

Closes #9317

(cherry picked from commit 4a95341)
@carlos-zamora carlos-zamora mentioned this issue Mar 29, 2021
Merged
ghost pushed a commit that referenced this issue Mar 30, 2021
@carlos-zamora
Remove Base Layer from Settings UI (#9655)
19fb9b2 
Removes base layer (aka profiles.defaults) from the Settings UI. `SettingContainer` was also updated to not present a revert arrow when overriding a base layer value.

The new experience is now as follows:
- The revert arrow will only appear if you are overriding a value from a fragment extension.
- Users are still able to fully interact with `profiles.defaults` in their settings.json. Doing so still propagates those changes to their profiles as normal. In this case, the Settings UI presents the base layer value as the one that you selected.

#6800 - Settings UI Epic
Closes #9539
@zadjii-msft zadjii-msft modified the milestones: Terminal v2.0, Megathreads Jan 4, 2022
@zadjii-msft zadjii-msft mentioned this issue Feb 7, 2022
Closed
@carlos-zamora carlos-zamora mentioned this issue Jun 27, 2022
Open
66 tasks
@zadjii-msft zadjii-msft modified the milestones: Terminal v1.17, Backlog Jan 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@carlos-zamora carlos-zamora

Labels
Area-Settings UI Anything specific to the SUI Issue-Scenario Product-Terminal The new Windows Terminal.
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
5 participants
@DHowett @huang63 @carlos-zamora @miniksa @zadjii-msft