Merge pull request #841 from immense/fix-dropdown-alignment

Fix dropdown alignment
immense · Mar 11, 2024 · fb9a3f7 · fb9a3f7
2 parents 28ffab5 + 002c4dd
commit fb9a3f7
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 58 deletions.
diff --git a/Server/Components/App.razor b/Server/Components/App.razor
@@ -30,6 +30,7 @@
 <body>
     <Routes @rendermode="RenderModeForPage" />
     <script src="_framework/blazor.web.js"></script>
+    <script src="/lib/bootstrap/bootstrap.bundle.min.js"></script>
 </body>
 </html>
 

diff --git a/Server/Components/DropdownButton.razor b/Server/Components/DropdownButton.razor
@@ -1,23 +1,17 @@
 @inject IJsInterop JsInterop
 
-<div class="@WrapperClass" @onmouseout="MouseLeft" @onmouseover="MouseEnter">
-    <button class="btn dropdown-toggle @ButtonClass @_showClass"
+<div class="@WrapperClass">
+    <button class="btn dropdown-toggle @ButtonClass"
             type="button"
-            data-bs-toggle="dropdown"
-            aria-expanded="@_isExpanded"
-            @onclick="ToggleShown">
+            data-bs-toggle="dropdown">
         @ButtonContent
     </button>
-    <ul class="dropdown-menu @DropDownMenuClass @_showClass" @onclick="ToggleShown" >
+    <ul class="dropdown-menu @DropDownMenuClass" >
         @ChildListItems
     </ul>
 </div>
 
 @code {
-    private System.Timers.Timer? _collapseTimer;
-    private string? _showClass;
-    private bool _isExpanded;
-
     [Parameter]
     public string? ButtonClass { get; set; }
 
@@ -33,29 +27,4 @@
 
     [Parameter]
     public RenderFragment? ChildListItems { get; set; }
-
-    private void ToggleShown()
-    {
-        _isExpanded = !_isExpanded;
-        _showClass = _isExpanded ? "show" : "";
-    }
-
-    private void MouseEnter()
-    {
-        _collapseTimer?.Dispose();
-    }
-
-    private void MouseLeft()
-    {
-        _collapseTimer?.Dispose();
-        _collapseTimer = new System.Timers.Timer(1500);
-        _collapseTimer.Elapsed += (sender, args) =>
-        {
-            _isExpanded = false;
-            _showClass = "";
-            InvokeAsync(StateHasChanged);
-        };
-        _collapseTimer.Start();
-    }
-
 }
diff --git a/Server/Components/ModalHarness.razor b/Server/Components/ModalHarness.razor
@@ -1,12 +1,13 @@
 @inject IModalService ModalService
 @inject IJsInterop JsInterop
+@inject IJSRuntime JsRuntime
 
-<div class="modal fade @_showClass" style="display: @_displayStyle; background-color: rgba(0,0,0,0.35)" @onclick="CloseModal">
+<div @ref="_modalRef" id="defaultModal" class="modal fade" style="background-color: rgba(0,0,0,0.35)">
     <div class="modal-dialog modal-dialog-scrollable" role="document" @onclick:stopPropagation>
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">@ModalService.Title</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" @onclick="CloseModal"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body" >
                 @if (ModalService.RenderBody is not null)
@@ -27,9 +28,9 @@
             <div class="modal-footer">
                 @foreach (var button in ModalService.Buttons)
                 {
-                    <button @key="button" type="button" class="@button.Class" @onclick="() => ExecuteButtonAction(button.OnClick)">@button.Text</button>
+                    <button @key="button" type="button" data-bs-dismiss="modal" class="@button.Class" @onclick="() => ExecuteButtonAction(button.OnClick)">@button.Text</button>
                 }
-                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="CloseModal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
@@ -39,36 +40,26 @@
     private string? _showClass;
     private string? _displayStyle;
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
+    private IJSObjectReference? _module;
+    private ElementReference _modalRef;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            _module = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/ModalHarness.razor.js");
             ModalService.ModalShown += async (sender, args) =>
             {
-                _displayStyle = "block";
-                await InvokeAsync(StateHasChanged);
-                // The fade animation won't work without a delay here.
-                await Task.Delay(100);
-                _showClass = "show";
+                await _module.InvokeVoidAsync("showModal", _modalRef);
                 await InvokeAsync(StateHasChanged);
             };
         }
-        return base.OnAfterRenderAsync(firstRender);
-    }
-
-
-    private async Task CloseModal()
-    {
-        _showClass = null;
-        await InvokeAsync(StateHasChanged);
-        await Task.Delay(100);
-        _displayStyle = null;
-        await InvokeAsync(StateHasChanged);
+        await base.OnAfterRenderAsync(firstRender);
     }
 
-    private async Task ExecuteButtonAction(Action onclick)
+    private Task ExecuteButtonAction(Action onclick)
     {
         onclick.Invoke();
-        await CloseModal();
+        return Task.CompletedTask;
     }
 }
diff --git a/Server/Components/ModalHarness.razor.js b/Server/Components/ModalHarness.razor.js
@@ -0,0 +1,8 @@
+/**
+ * 
+ * @param {HTMLElement} modal
+ */
+export function showModal(modal) {
+    const modalApi = new bootstrap.Modal(modal);
+    modalApi.show();
+}
diff --git a/Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js b/Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js
diff --git a/Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js.map b/Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ @@
     <body>
         <Routes @rendermode="RenderModeForPage" />
         <script src="_framework/blazor.web.js"></script>
+        <script src="/lib/bootstrap/bootstrap.bundle.min.js"></script>
     </body>
     </html>
@@ Expand Down @@