From a08fc0921f858ce6500c923678e0cbbd1290ed77 Mon Sep 17 00:00:00 2001 From: Guilherme <57814418+DevLGuilherme@users.noreply.github.com> Date: Wed, 10 Dec 2025 22:25:45 -0300 Subject: [PATCH] [CmdPal] Introduce Small, Medium, and Large sizing options for Details (#43956) ## Summary of the Pull Request This PR introduces 3 new sizing options to the Details Panel in the Extensions API. - `Small` (Default) - `Medium` - `Large` ## PR Checklist - [x] Closes: #43251 - [ ] **Communication:** I've discussed this with core contributors already. If the work hasn't been agreed, this work might be rejected - [ ] **Tests:** Added/updated and all pass - [ ] **Localization:** All end-user-facing strings can be localized - [ ] **Dev docs:** Added/updated - [ ] **New binaries:** Added on the required places - [ ] [JSON for signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json) for new binaries - [ ] [WXS for installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs) for new binaries and localization folder - [ ] [YML for CI pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml) for new test projects - [ ] [YML for signed pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml) - [ ] **Documentation updated:** If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys) and link it here: #xxx ## Detailed Description of the Pull Request / Additional comments Here's how it looks like: ```csharp new ListItem(new NoOpCommand()) { Title = "Details on ListItems (Medium)", Details = new Details() { Title = "This item has medium details size", Body = "Each of these items can have a `Body` formatted with **Markdown**", Size = ContentSize.Medium, }, }, ``` ### Moving Pictures ![DetailsSize](https://github.com/user-attachments/assets/ae11b767-ecba-4b39-bd81-3e77eec93ed0) ## Validation Steps Performed --- .../DetailsViewModel.cs | 17 ++++++++ .../DetailsSizeToGridLengthConverter.cs | 39 +++++++++++++++++++ .../Microsoft.CmdPal.UI/Pages/ShellPage.xaml | 3 +- .../Pages/SampleListPageWithDetails.cs | 27 +++++++++++-- .../Details.cs | 20 +++++++++- .../Microsoft.CommandPalette.Extensions.idl | 9 +++++ 6 files changed, 110 insertions(+), 5 deletions(-) create mode 100644 src/modules/cmdpal/Microsoft.CmdPal.UI/Converters/DetailsSizeToGridLengthConverter.cs diff --git a/src/modules/cmdpal/Core/Microsoft.CmdPal.Core.ViewModels/DetailsViewModel.cs b/src/modules/cmdpal/Core/Microsoft.CmdPal.Core.ViewModels/DetailsViewModel.cs index a381cfda6b..1e8642fff7 100644 --- a/src/modules/cmdpal/Core/Microsoft.CmdPal.Core.ViewModels/DetailsViewModel.cs +++ b/src/modules/cmdpal/Core/Microsoft.CmdPal.Core.ViewModels/DetailsViewModel.cs @@ -19,6 +19,8 @@ public partial class DetailsViewModel(IDetails _details, WeakReference Metadata { get; private set; } = []; @@ -40,6 +42,21 @@ public partial class DetailsViewModel(IDetails _details, WeakReference 3.0, + ContentSize.Medium => 2.0, + ContentSize.Large => 1.0, + _ => 3.0, + }; + + return new GridLength(starValue, GridUnitType.Star); + } + + return new GridLength(3.0, GridUnitType.Star); + } + + public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException(); +} diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml index 04b4ca6c16..ba9b8e736c 100644 --- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml +++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml @@ -26,6 +26,7 @@ EmptyValue="Collapsed" NotEmptyValue="Visible" /> + - + diff --git a/src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs b/src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs index abf80e3d1e..738a82c762 100644 --- a/src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs +++ b/src/modules/cmdpal/ext/SamplePagesExtension/Pages/SampleListPageWithDetails.cs @@ -5,7 +5,6 @@ using System; using Microsoft.CommandPalette.Extensions; using Microsoft.CommandPalette.Extensions.Toolkit; -using Microsoft.UI.Xaml; namespace SamplePagesExtension; @@ -23,14 +22,34 @@ internal sealed partial class SampleListPageWithDetails : ListPage return [ new ListItem(new NoOpCommand()) { - Title = "This page demonstrates Details on ListItems", + Title = "Details on ListItems (Small)", Details = new Details() { - Title = "List Item 1", + Title = "This item has default details size", Body = "Each of these items can have a `Body` formatted with **Markdown**", }, }, new ListItem(new NoOpCommand()) + { + Title = "Details on ListItems (Medium)", + Details = new Details() + { + Title = "This item has medium details size", + Body = "Each of these items can have a `Body` formatted with **Markdown**", + Size = ContentSize.Medium, + }, + }, + new ListItem(new NoOpCommand()) + { + Title = "Details on ListItems (Large)", + Details = new Details() + { + Title = "This item has large details size", + Body = "Each of these items can have a `Body` formatted with **Markdown**", + Size = ContentSize.Large, + }, + }, + new ListItem(new NoOpCommand()) { Title = "This one has a subtitle too", Subtitle = "Example Subtitle", @@ -70,11 +89,13 @@ internal sealed partial class SampleListPageWithDetails : ListPage new ListItem(new NoOpCommand()) { Title = "This one has metadata", + Subtitle = "And Large Details panel", Tags = [], Details = new Details() { Title = "Metadata Example", Body = "Each of the sections below is some sample metadata", + Size = ContentSize.Large, Metadata = [ new DetailsElement() { diff --git a/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Details.cs b/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Details.cs index f466f2fd71..43ca618994 100644 --- a/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Details.cs +++ b/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions.Toolkit/Details.cs @@ -1,10 +1,11 @@ // Copyright (c) Microsoft Corporation // The Microsoft Corporation licenses this file to you under the MIT license. // See the LICENSE file in the project root for more information. +using Windows.Foundation.Collections; namespace Microsoft.CommandPalette.Extensions.Toolkit; -public partial class Details : BaseObservable, IDetails +public partial class Details : BaseObservable, IDetails, IExtendedAttributesProvider { public virtual IIconInfo HeroImage { @@ -53,4 +54,21 @@ public partial class Details : BaseObservable, IDetails } = []; + + public virtual ContentSize Size + { + get; + set + { + field = value; + OnPropertyChanged(nameof(Size)); + } + } + += ContentSize.Small; + + public IDictionary? GetProperties() => new ValueSet() + { + { "Size", (int)Size }, + }; } diff --git a/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl b/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl index 68fd928955..b302ce6d75 100644 --- a/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl +++ b/src/modules/cmdpal/extensionsdk/Microsoft.CommandPalette.Extensions/Microsoft.CommandPalette.Extensions.idl @@ -160,6 +160,15 @@ namespace Microsoft.CommandPalette.Extensions [uuid("6a6dd345-37a3-4a1e-914d-4f658a4d583d")] [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)] interface IDetailsData {} + + [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)] + enum ContentSize + { + Small = 0, + Medium = 1, + Large = 2, + }; + [contract(Microsoft.CommandPalette.Extensions.ExtensionsContract, 1)] interface IDetailsElement { String Key { get; };