[PR #13269] [MERGED] Rejuvenate the color schemes page #29446

Open
opened 2026-01-31 09:34:58 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/microsoft/terminal/pull/13269
Author: @PankajBhojwani
Created: 6/10/2022
Status: Merged
Merged: 8/31/2022
Merged by: @carlos-zamora

Base: mainHead: dev/pabhoj/sui_schemes_page


📝 Commits (10+)

📊 Changes

23 files changed (+1100 additions, -520 deletions)

View changed files

📝 src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp (+23 -2)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h (+12 -6)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl (+5 -3)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp (+39 -59)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemes.h (+4 -8)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml (+196 -376)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp (+55 -46)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h (+6 -6)
📝 src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl (+12 -5)
src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp (+142 -0)
src/cascadia/TerminalSettingsEditor/EditColorScheme.h (+35 -0)
src/cascadia/TerminalSettingsEditor/EditColorScheme.idl (+14 -0)
src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml (+455 -0)
📝 src/cascadia/TerminalSettingsEditor/MainPage.cpp (+25 -0)
📝 src/cascadia/TerminalSettingsEditor/MainPage.h (+1 -0)
📝 src/cascadia/TerminalSettingsEditor/MainPage.idl (+2 -1)
📝 src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj (+15 -0)
📝 src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters (+1 -0)
📝 src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw (+33 -1)
📝 src/cascadia/TerminalSettingsEditor/SettingContainer.cpp (+19 -6)

...and 3 more files

📄 Description

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


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/microsoft/terminal/pull/13269 **Author:** [@PankajBhojwani](https://github.com/PankajBhojwani) **Created:** 6/10/2022 **Status:** ✅ Merged **Merged:** 8/31/2022 **Merged by:** [@carlos-zamora](https://github.com/carlos-zamora) **Base:** `main` ← **Head:** `dev/pabhoj/sui_schemes_page` --- ### 📝 Commits (10+) - [`d447166`](https://github.com/microsoft/terminal/commit/d447166863504e4cff4e8fa90db960409214b299) invoking rightmost breadcrumb does nothing - [`5430de6`](https://github.com/microsoft/terminal/commit/5430de6e098d330e35538bfa0902632bccafe47e) partway through color scheme MVVM - [`447c1be`](https://github.com/microsoft/terminal/commit/447c1be9f20ba851d35999fe6c716a558fce0912) main page now holds vector of csvms - [`1342d92`](https://github.com/microsoft/terminal/commit/1342d92c124ecd7a28ec883d61ae4caa34c6bec9) conflict - [`93b8ecb`](https://github.com/microsoft/terminal/commit/93b8ecbc0ca077ae43c0476c0e8699c451077a27) need to update event handlers - [`987002e`](https://github.com/microsoft/terminal/commit/987002ee1e8ce7dcd16d2c9efffdc7db56c93c08) propagate changes to scheme - [`f5fef4e`](https://github.com/microsoft/terminal/commit/f5fef4ee84d478946e66455caf470abf65630376) color table colors ... - [`152974d`](https://github.com/microsoft/terminal/commit/152974da5ecb7ec32b4fc3254458fcb600e02812) delete works - [`65fc789`](https://github.com/microsoft/terminal/commit/65fc789a8f52aba1280dcfe8077d8869eea577f5) page view model is up - [`a51c166`](https://github.com/microsoft/terminal/commit/a51c166e55277dcbc168de70ed286b53545bfeeb) rename and delete work ### 📊 Changes **23 files changed** (+1100 additions, -520 deletions) <details> <summary>View changed files</summary> 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.cpp` (+23 -2) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h` (+12 -6) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl` (+5 -3) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp` (+39 -59) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemes.h` (+4 -8) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml` (+196 -376) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.cpp` (+55 -46) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.h` (+6 -6) 📝 `src/cascadia/TerminalSettingsEditor/ColorSchemesPageViewModel.idl` (+12 -5) ➕ `src/cascadia/TerminalSettingsEditor/EditColorScheme.cpp` (+142 -0) ➕ `src/cascadia/TerminalSettingsEditor/EditColorScheme.h` (+35 -0) ➕ `src/cascadia/TerminalSettingsEditor/EditColorScheme.idl` (+14 -0) ➕ `src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml` (+455 -0) 📝 `src/cascadia/TerminalSettingsEditor/MainPage.cpp` (+25 -0) 📝 `src/cascadia/TerminalSettingsEditor/MainPage.h` (+1 -0) 📝 `src/cascadia/TerminalSettingsEditor/MainPage.idl` (+2 -1) 📝 `src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj` (+15 -0) 📝 `src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters` (+1 -0) 📝 `src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw` (+33 -1) 📝 `src/cascadia/TerminalSettingsEditor/SettingContainer.cpp` (+19 -6) _...and 3 more files_ </details> ### 📄 Description 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> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-31 09:34:58 +00:00
Sign in to join this conversation.
No Label pull-request
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#29446