From f035dc26b8baf5c1413b1d4a979ad2f4e55c7604 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Mon, 11 Sep 2023 22:32:28 +0200
Subject: [PATCH] Dialog changes

---
 OTLPView/Components/FilterDialog.razor | 24 +++++++++++++-----------
 OTLPView/Pages/LogViewer.razor.cs      | 11 +++--------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/OTLPView/Components/FilterDialog.razor b/OTLPView/Components/FilterDialog.razor
index 6840560..3d33cff 100644
--- a/OTLPView/Components/FilterDialog.razor
+++ b/OTLPView/Components/FilterDialog.razor
@@ -1,17 +1,19 @@
 @using Microsoft.Fast.Components.FluentUI;
 
-<FluentStack>
-    <FluentCombobox Items=@Parameters @bind-Value="@Parameter" Width="100px" />
+<FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
+    <FluentCombobox Items=@Parameters @bind-Value="@Parameter" Width="100%" />
 
-    <FluentSelect TOption="FilterCondition" Items="@Conditions.Keys" @bind-SelectedOption="@Condition" OptionText="@(i => Conditions[i])" Width="100px" />
+    <FluentSelect TOption="FilterCondition" Items="@Conditions.Keys" @bind-SelectedOption="@Condition" OptionText="@(i => Conditions[i])" Width="100%" />
 
-    <FluentTextField @bind-Value="Value" Placeholder="Value" />
-</FluentStack>
+    <FluentTextField @bind-Value="Value" Placeholder="Value" Style="width: 100%;" />
 
-<FluentButton OnClick="Cancel">Cancel</FluentButton>
-<FluentButton Color="Color.Primary" OnClick="Apply">Apply Filter</FluentButton>
-@if (Content is { })
-{
-    <FluentButton Appearance="Appearance.Stealth" aria-label="Remove Filter" OnClick="Delete"><FluentIcon Value="@(new Icons.Regular.Size16.Delete())" /></FluentButton>
-}
+    <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="8">
+        <FluentButton OnClick="Cancel">Cancel</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="Apply">Apply Filter</FluentButton>
+        @if (Content is { })
+        {
+            <FluentButton Appearance="Appearance.Stealth" aria-label="Remove Filter" OnClick="Delete"><FluentIcon Value="@(new Icons.Regular.Size16.Delete())" /></FluentButton>
+        }
+    </FluentStack>
+</FluentStack>
 
diff --git a/OTLPView/Pages/LogViewer.razor.cs b/OTLPView/Pages/LogViewer.razor.cs
index 40ac4ce..8f451fa 100644
--- a/OTLPView/Pages/LogViewer.razor.cs
+++ b/OTLPView/Pages/LogViewer.razor.cs
@@ -116,18 +116,13 @@ private void OpenFilter(LogFilter entry)
         Fluent.DialogParameters<LogFilter> parameters = new()
         {
             OnDialogResult = DialogService.CreateDialogCallback(this, HandleDialog),
-            ShowTitle = false,
-            ShowDismiss = false,
-            
-            Width = "600px",
-            Height = "100px",
+            Title = "Filter",
+            Alignment = Fluent.HorizontalAlignment.Right,
             Content = entry,
-            TrapFocus = true,
-            Modal = true,
             PrimaryAction = null,
             SecondaryAction = null,
         };
-        DialogService.ShowDialog<FilterDialog, LogFilter>(parameters);
+        DialogService.ShowPanel<FilterDialog, LogFilter>(parameters);
     }
 
     private async Task HandleDialog(Fluent.DialogResult result)