Skip to content

Commit 8ea6afc

Browse files
JamesNKJamesNK
committed
More style stuff
1 parent c735245 commit 8ea6afc

File tree

4 files changed

+71
-73
lines changed

4 files changed

+71
-73
lines changed

‎src/Aspire.Dashboard/Components/Layout/AspirePageContentLayout.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
{
1313
@PageTitleSection
1414

15-
<FluentToolbar Orientation="Orientation.Horizontal">
15+
<FluentToolbar Class="main-toolbar" Orientation="Orientation.Horizontal">
1616
@ToolbarSection
1717
</FluentToolbar>
1818
}

‎src/Aspire.Dashboard/Components/Pages/Resources.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,11 @@
9797
@{
9898
var indent = context.Depth * 16;
9999
}
100-
<span style="width:@(indent)px;">
100+
<span style="margin-left: @(indent)px;">
101101
<span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
102102
@if (context.Children.Count > 0)
103103
{
104-
<FluentButton Appearance="Appearance.Stealth" Class="main-grid-expand-button" Color="var(--info)" OnClick="@(() => OnToggleCollapse(context))">
104+
<FluentButton Appearance="Appearance.Stealth" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
105105
<FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
106106
</FluentButton>
107107
}

‎src/Aspire.Dashboard/Components/Pages/TraceDetail.razor

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -79,87 +79,83 @@
7979
ShowHover="true"
8080
ItemKey="@(r => r.Span.SpanId)"
8181
OnRowClick="@(r => r.ExecuteOnDefault(d => OnShowPropertiesAsync(d, buttonId: null)))">
82-
<AspireTemplateColumn ColumnId="@NameColumn" ColumnManager="@_manager" UseCustomHeaderTemplate="false" Title="@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailNameHeader)]" Class="expand-col">
83-
<div class="col-long-content" title="@context.GetTooltip(_applications)">
84-
@{
85-
var isServerOrConsumer = context.Span.Kind == OtlpSpanKind.Server || context.Span.Kind == OtlpSpanKind.Consumer;
86-
// Indent the span name based on the depth of the span.
87-
var marginLeft = (context.Depth - 1) * 15;
82+
<AspireTemplateColumn ColumnId="@NameColumn" ColumnManager="@_manager" UseCustomHeaderTemplate="false" Title="@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailNameHeader)]" Tooltip="true" TooltipText="@(c => c.GetTooltip(_applications))" Class="expand-col">
83+
@{
84+
var isServerOrConsumer = context.Span.Kind == OtlpSpanKind.Server || context.Span.Kind == OtlpSpanKind.Consumer;
85+
// Indent the span name based on the depth of the span.
86+
var marginLeft = (context.Depth - 1) * 15;
8887

89-
// We want to have consistent margin for both client and server spans.
90-
string spanNameContainerStyle;
91-
if (!isServerOrConsumer)
88+
// We want to have consistent margin for both client and server spans.
89+
string spanNameContainerStyle;
90+
if (!isServerOrConsumer)
9291
{
9392
// Client span has 19px extra content:
9493
// - 5px extra margin-left
9594
// - 5px border
9695
// - 9px padding-left
9796
spanNameContainerStyle = $"margin-left: 5px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 9px;";
9897
}
99-
else
100-
{
101-
// Span with icon has 19px extra content:
102-
// - 16px icon
103-
// - 3px padding-left
104-
spanNameContainerStyle = string.Empty;
105-
}
98+
else
99+
{
100+
// Span with icon has 19px extra content:
101+
// - 16px icon
102+
// - 3px padding-left
103+
spanNameContainerStyle = string.Empty;
106104
}
105+
}
107106

108-
<span style="margin-left: @(marginLeft)px;">
109-
<span class="span-collapse-symbol">
110-
@if (context.Children.Count > 0)
111-
{
112-
<span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
113-
<FluentButton Appearance="Appearance.Stealth" Style="width:20px;height:24px;min-width:20px;vertical-align:middle;" OnClick="@(() => OnToggleCollapse(context))">
114-
<FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
115-
</FluentButton>
116-
</span>
117-
}
118-
</span>
119-
<span class="span-name-container" style="@spanNameContainerStyle">
120-
@if (isServerOrConsumer)
121-
{
122-
<FluentIcon Class="span-kind-icon"
123-
Color="Color.Custom"
124-
CustomColor="@ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))"
125-
Value="@GetSpanIcon(context.Span)"/>
126-
}
107+
<span style="margin-left: @(marginLeft)px;">
108+
<span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
109+
@if (context.Children.Count > 0)
110+
{
111+
<FluentButton Appearance="Appearance.Stealth" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
112+
<FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
113+
</FluentButton>
114+
}
115+
</span>
116+
<span class="span-name-container" style="@spanNameContainerStyle">
117+
@if (isServerOrConsumer)
118+
{
119+
<FluentIcon Class="span-kind-icon"
120+
Color="Color.Custom"
121+
CustomColor="@ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))"
122+
Value="@GetSpanIcon(context.Span)"/>
123+
}
127124

128-
@if (context.IsError)
129-
{
130-
<FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon"/>
131-
}
132-
@GetResourceName(context.Span.Source)
133-
@if (context.HasUninstrumentedPeer)
134-
{
135-
<span class="uninstrumented-peer">
136-
@{
137-
Icon icon;
138-
if (context.Span.Attributes.HasKey("db.system"))
139-
{
140-
icon = new Icons.Filled.Size16.Database();
141-
}
142-
else if (context.Span.Attributes.HasKey("messaging.system"))
143-
{
144-
icon = new Icons.Filled.Size16.Mail();
145-
}
146-
else
147-
{
148-
// Everything else.
149-
icon = new Icons.Filled.Size16.ArrowCircleRight();
150-
}
125+
@if (context.IsError)
126+
{
127+
<FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon"/>
128+
}
129+
@GetResourceName(context.Span.Source)
130+
@if (context.HasUninstrumentedPeer)
131+
{
132+
<span class="uninstrumented-peer">
133+
@{
134+
Icon icon;
135+
if (context.Span.Attributes.HasKey("db.system"))
136+
{
137+
icon = new Icons.Filled.Size16.Database();
151138
}
152-
<FluentIcon
153-
Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")"
154-
Value="icon"
155-
Class="uninstrumented-peer-icon"/>
156-
@context.UninstrumentedPeer
157-
</span>
158-
}
159-
<span class="span-row-name">@SpanWaterfallViewModel.GetDisplaySummary(context.Span)</span>
160-
</span>
139+
else if (context.Span.Attributes.HasKey("messaging.system"))
140+
{
141+
icon = new Icons.Filled.Size16.Mail();
142+
}
143+
else
144+
{
145+
// Everything else.
146+
icon = new Icons.Filled.Size16.ArrowCircleRight();
147+
}
148+
}
149+
<FluentIcon
150+
Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")"
151+
Value="icon"
152+
Class="uninstrumented-peer-icon"/>
153+
@context.UninstrumentedPeer
154+
</span>
155+
}
156+
<span class="span-row-name">@SpanWaterfallViewModel.GetDisplaySummary(context.Span)</span>
161157
</span>
162-
</div>
158+
</span>
163159
</AspireTemplateColumn>
164160
<AspireTemplateColumn ColumnId="@TicksColumn" ColumnManager="@_manager" UseCustomHeaderTemplate="false">
165161
<HeaderCellItemTemplate>

‎src/Aspire.Dashboard/wwwroot/css/app.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ fluent-toolbar p {
1212

1313
fluent-toolbar[orientation=horizontal] {
1414
width: 100%;
15+
padding-left: calc(var(--design-unit) * 2px);
16+
padding-right: calc(var(--design-unit) * 2px);
1517
}
1618

1719
fluent-toolbar::part(positioning-region) {
@@ -179,7 +181,7 @@ h1 {
179181
height: 130px;
180182
}
181183

182-
fluent-toolbar[orientation=horizontal] {
184+
fluent-toolbar[orientation=horizontal].main-toolbar {
183185
padding-left: calc(var(--design-unit) * 2px);
184186
padding-right: calc(var(--design-unit) * 2px);
185187
}
@@ -206,7 +208,7 @@ h1 {
206208
height: 105px;
207209
}
208210

209-
fluent-toolbar[orientation=horizontal] {
211+
fluent-toolbar[orientation=horizontal].main-toolbar {
210212
padding-left: calc(var(--design-unit) * 4px);
211213
padding-right: calc(var(--design-unit) * 4px);
212214
}

0 commit comments

Comments
 (0)