Use key as text visualizer title in property grids (#5259)

* Use key as text visualizer title in property grids * Handle long titles
dotnet · Aug 12, 2024 · e584c15 · e584c15
1 parent fecfe0a
commit e584c15
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/src/Aspire.Dashboard/Components/Controls/GridValue.razor b/src/Aspire.Dashboard/Components/Controls/GridValue.razor
@@ -66,7 +66,7 @@
 
             <FluentMenuItem
                 Disabled="@(Value is null)"
-                AdditionalAttributes="@FluentUIExtensions.GetOpenTextVisualizerAdditionalAttributes(Value!, ValueDescription)">
+                AdditionalAttributes="@FluentUIExtensions.GetOpenTextVisualizerAdditionalAttributes(Value!, !string.IsNullOrEmpty(TextVisualizerTitle) ? TextVisualizerTitle : ValueDescription)">
                 <span slot="start">
                     <FluentIcon Style="display:inline; vertical-align: text-bottom" Icon="Icons.Regular.Size16.Open" Slot="start"/>
                 </span>

diff --git a/src/Aspire.Dashboard/Components/Controls/GridValue.razor.cs b/src/Aspire.Dashboard/Components/Controls/GridValue.razor.cs
@@ -17,6 +17,9 @@ public partial class GridValue
     [Parameter, EditorRequired]
     public required string ValueDescription { get; set; }
 
+    [Parameter]
+    public string? TextVisualizerTitle { get; set; }
+
     /// <summary>
     /// Content to include, if any, after the Value string
     /// </summary>

diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor b/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor
@@ -19,7 +19,8 @@
             ValueDescription="@(ValueColumnTitle ?? Loc[nameof(ControlsStrings.PropertyGridValueColumnHeader)])"
             Value="@ValueColumnValue(context)" HighlightText="@HighlightText"
             EnableMasking="@EnableValueMasking" IsMasked="@GetIsItemMasked(context)"
-            IsMaskedChanged="(newValue) => OnIsMaskedChanged(context, newValue)"/>
+            IsMaskedChanged="(newValue) => OnIsMaskedChanged(context, newValue)"
+            TextVisualizerTitle="@NameColumnValue(context)"/>
         @ExtraValueContent(context)
     </TemplateColumn>
 </FluentDataGrid>

diff --git a/src/Aspire.Dashboard/Components/Dialogs/TextVisualizerDialog.razor b/src/Aspire.Dashboard/Components/Dialogs/TextVisualizerDialog.razor
@@ -7,14 +7,14 @@
 @implements IDialogContentComponent<Aspire.Dashboard.Model.TextVisualizerDialogViewModel>
 
 <FluentDialogHeader ShowDismiss="true">
-    <FluentStack VerticalAlignment="VerticalAlignment.Center">
-        <FluentIcon Value="@(new Icons.Regular.Size24.SlideSearch())" />
-        <FluentLabel Typo="Typography.PaneHeader">
+    <div class="visualizer-title-grid">
+        <FluentIcon Value="@(new Icons.Regular.Size24.SlideSearch())" Style="grid-area: dialog-icon; align-self: center;" />
+        <FluentLabel Typo="Typography.PaneHeader" Class="col-long-content" Style="grid-area: dialog-title;">
             @Content.Description
         </FluentLabel>
 
-        <div style="margin-left: auto">
-            <FluentMenuButton id="@_openSelectFormatButtonId" slot="end"
+        <div Style="grid-area: dialog-format;">
+            <FluentMenuButton id="@_openSelectFormatButtonId"
                               ButtonAppearance="Appearance.Stealth"
                               IconEnd="@(new Icons.Regular.Size24.SlideTextEdit())"
                               Text="@(_currentValue ?? Loc[nameof(Dialogs.TextVisualizerSelectFormatType)])"
@@ -26,7 +26,7 @@
                 }
             </FluentMenuButton>
         </div>
-    </FluentStack>
+    </div>
 </FluentDialogHeader>
 
 <FluentDialogBody>

diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css
@@ -1,3 +1,10 @@
+.visualizer-title-grid {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "dialog-icon dialog-title dialog-format";
+    grid-column-gap: 8px;
+}
+
 fluent-toolbar fluent-switch,
 fluent-toolbar p {
     margin-inline-end: 15px;