Rejuvenate the color schemes page #13269

PankajBhojwani · 2022-06-10T22:02:22Z

Update the color schemes page with the new Win 11 style.
With the rejuvenated experience, we now have two pages:

ColorSchemes.xaml: "color scheme selection" page
- This is the starting page for the "color schemes" nav view
  item. It is intended to have the user select a color scheme
  they want to modify. The user can also click the "Add new"
  button to add a new color scheme or the "delete" button to
  delete the selected scheme.
- If a scheme cannot be deleted, the delete button is disabled
  and a disclaimer is shown.
- A "set as default" button sets the selected scheme as the
  color scheme for profiles.default (aka "base layer").
- The list view item for each scheme includes the name of the
  scheme, the default tag (if the scheme is the one set in base
  layer), a text preview of the foreground/background, and a
  grid of 16 color chips showing the colors for the scheme.
- Implementation details:
  - View - ColorSchemes:
    - "Enter" --> edit the selected scheme
    - "Delete" --> delete the selected scheme
    - if the selected scheme cannot be deleted, we
      show the disclaimer
  - View model - ColorSchemesPageViewModel
    - when possible, the XAML binds directly to the
      view model functions. Thus, we include logic
      to delete, edit, and set the selected scheme
      as default.
    - store the current page, so that we know which
      page to navigate to upon saving/discarding
      changes.
EditColorScheme.xaml: "color scheme modification" page
- a terminal preview of the color scheme is shown at the top of
  the page.
- all colors for the scheme are displayed as color chips in an
  expander that starts as expanded.
- renaming a color scheme is also inside an expander, but
  there's no need for "renaming mode" anymore
- Implementation details:
  - View - EditColorScheme:
    - include logic to display the disclaimer and
      add the automation properties
    - include logic for "Enter" and "Escape" in the
      rename editor
  - View Model - ColorSchemeViewModel:
    - as before, when possible, the XAML binds
      directly to the view model functions.
    - To enable the "default" tag functionality, we
      had to expose knowledge of being the default
      via "IsDefaultScheme()" which compares the
      current name to the one in the settings model.
Miscellaneous implementation details:
- to get the expander to start as expanded, we had to modify the
  setting container style.
- Since "set as default" is a button on the selector page, we
  needed a way to refresh the view model's knowledge of being
  the default. So we added a RefreshIsDefault API to the
  ColorSchemeViewModel to notify changes.
- With the new layout, we no longer need an 'enter rename mode'
  button, so all that logic has been removed
- Add logic to MainPage to handle navigating to the correct
  page upon saving/discarding changes.

Closes #9775

Co-authored-by: Carlos Zamora cazamor@microsoft.com

…pander

carlos-zamora · 2022-08-30T00:29:09Z

Screenshots for 5a6ab36

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp

src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp

src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw

DHowett · 2022-08-30T22:46:42Z

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp

@@ -49,6 +50,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
        return _Name;
    }

+    bool ColorSchemeViewModel::IsDefaultScheme()
+    {
+        return _Name == _settings.ProfileDefaults().DefaultAppearance().ColorSchemeName();


clever. renaming a scheme updates all profiles using it, so this will be true after a rename too. very clever.

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml

DHowett

Let's do this and fix the issues in post eh?

ghost · 2022-08-31T20:33:28Z

Hello @carlos-zamora!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.

DHowett · 2022-08-31T20:35:49Z

src/cascadia/WindowsTerminal/AppHost.cpp

-    // when the window has already been closed.. We feel this is okay though,
-    // because WE'RE ALREADY IN TEARDOWN! The app is exiting. We don't want a
-    // XAML bug here to create a crash bucket.
-    _app.UnhandledException([](auto&& /*sender*/, const UnhandledExceptionEventArgs& args) {


i didn't notice this sneak in. gosh!

carlos-zamora · 2022-08-31T21:14:49Z

Huh, I guess the bot's broken today. Merging!

## Summary of the Pull Request Fix a bug where if you pressed the "Save" button, WT would crash. This was caused by adding the possibility that no color scheme is selected in the main page. With no "current scheme", attempting to get its "name" would cause a null ptr exception. The fix is simple: just check if we actually have a current scheme. Bonus points: if we don't have a current scheme, don't bother looking throught the color schemes for a match because we'll never find one. ## References #13269 - Color Schemes Rejuv

ghost · 2022-09-13T17:06:53Z

🎉Windows Terminal Preview v1.16.252 has been released which incorporates this pull request.:tada:

Handy links:

PankajBhojwani and others added 26 commits February 2, 2022 11:41

invoking rightmost breadcrumb does nothing

d447166

partway through color scheme MVVM

5430de6

main page now holds vector of csvms

447c1be

conflict

1342d92

need to update event handlers

93b8ecb

propagate changes to scheme

987002e

color table colors ...

f5fef4e

delete works

152974d

page view model is up

65fc789

rename and delete work

a51c166

add new works

d0c9881

remove nav state

946f10a

some fixes

9be1b68

select last selected scheme

322766d

move to header

ac75ed3

neaten

c91ade5

update settings

219a329

Format

0fe0612

nits

79d92d4

nits

face837

rename property

264f4dd

fix settings reload issue

d76c3c3

don't expose model object

44cf7f6

rename

003f9fc

init in ctor

eee069d

omg i forgot to add the labels back in

9c297b6

PankajBhojwani changed the title ~~start revamping cs page~~ Rejuvenate the color schemes page in the SUI to follow Win 11 style guidelines Jun 10, 2022

PankajBhojwani and others added 3 commits June 10, 2022 15:08

start revamping cs page

cb0fafa

get rid of rename mode stuff, first step of moving color grid into ex…

c311955

…pander

color chips

2b25c98

carlos-zamora added 2 commits August 29, 2022 15:46

add icons to buttons & test w/ narrator

ba499ad

add 'default' tag

5a7ab36

carlos-zamora reviewed Aug 30, 2022

View reviewed changes

src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp Show resolved Hide resolved

carlos-zamora assigned DHowett Aug 30, 2022

DHowett reviewed Aug 30, 2022

View reviewed changes

src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp Show resolved Hide resolved

DHowett reviewed Aug 30, 2022

View reviewed changes

src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw Outdated Show resolved Hide resolved

DHowett reviewed Aug 30, 2022

View reviewed changes

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml Show resolved Hide resolved

DHowett reviewed Aug 30, 2022

View reviewed changes

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml Outdated Show resolved Hide resolved

address Dustin's PR feedback

b042918

DHowett added the Needs-Second It's a PR that needs another sign-off label Aug 31, 2022

ghost requested a review from lhecker August 31, 2022 18:40

DHowett approved these changes Aug 31, 2022

View reviewed changes

zadjii-msft approved these changes Aug 31, 2022

View reviewed changes

DHowett changed the title ~~Rejuvenate the color schemes page in the SUI to follow Win 11 style guidelines~~ Rejuvenate the color schemes page Aug 31, 2022

last second polish

acd8b71

carlos-zamora unassigned DHowett Aug 31, 2022

carlos-zamora added AutoMerge Marked for automatic merge by the bot when requirements are met and removed Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something Needs-Second It's a PR that needs another sign-off labels Aug 31, 2022

carlos-zamora mentioned this pull request Aug 31, 2022

Improve accessibility for "default" tag in color schemes page #13891

Closed

DHowett reviewed Aug 31, 2022

View reviewed changes

carlos-zamora merged commit 7076613 into main Aug 31, 2022

carlos-zamora deleted the dev/pabhoj/sui_schemes_page branch August 31, 2022 21:15

carlos-zamora mentioned this pull request Sep 1, 2022

Fix crash on save in rejuv'd Color Schemes page #13902

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rejuvenate the color schemes page #13269

Rejuvenate the color schemes page #13269

PankajBhojwani commented Jun 10, 2022 •

edited by DHowett

Loading

carlos-zamora commented Aug 30, 2022

DHowett Aug 30, 2022

DHowett left a comment

ghost commented Aug 31, 2022

DHowett Aug 31, 2022

carlos-zamora commented Aug 31, 2022

ghost commented Sep 13, 2022

Rejuvenate the color schemes page #13269

Rejuvenate the color schemes page #13269

Conversation

PankajBhojwani commented Jun 10, 2022 • edited by DHowett Loading

carlos-zamora commented Aug 30, 2022

DHowett Aug 30, 2022

Choose a reason for hiding this comment

DHowett left a comment

Choose a reason for hiding this comment

ghost commented Aug 31, 2022

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.

DHowett Aug 31, 2022

Choose a reason for hiding this comment

carlos-zamora commented Aug 31, 2022

ghost commented Sep 13, 2022

PankajBhojwani commented Jun 10, 2022 •

edited by DHowett

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.