Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dropdown alignment #841

Merged
merged 3 commits into from
Mar 11, 2024
Merged

Fix dropdown alignment #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26f521d
Add Bootstrap + Popper JS bundle to fix dropdown alignment.
bitbound Mar 7, 2024
c6c1c21
Convert modals to using JS instead of C# for displaying.
bitbound Mar 7, 2024
002c4dd
Removed unused field.
bitbound Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Server/Components/App.razor
View file
Open in desktop
Original file line number Diff 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
39 changes: 4 additions & 35 deletions Server/Components/DropdownButton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
dkattan marked this conversation as resolved.
Show resolved Hide resolved
private bool _isExpanded;

[Parameter]
public string? ButtonClass { get; set; }

Expand All @@ -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();
}

}
37 changes: 14 additions & 23 deletions Server/Components/ModalHarness.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -27,48 +28,38 @@
<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>
</div>

@code {
private string? _showClass;

Check warning on line 40 in Server/Components/ModalHarness.razor

View workflow job for this annotation

GitHub Actions / build (Release) 

The field 'ModalHarness._showClass' is never used
private string? _displayStyle;

Check warning on line 41 in Server/Components/ModalHarness.razor

View workflow job for this annotation

GitHub Actions / build (Release) 

The field 'ModalHarness._displayStyle' is never used

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;
}
}
8 changes: 8 additions & 0 deletions Server/Components/ModalHarness.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
*
* @param {HTMLElement} modal
*/
export function showModal(modal) {
const modalApi = new bootstrap.Modal(modal);
modalApi.show();
}
7 changes: 7 additions & 0 deletions Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions Server/wwwroot/lib/bootstrap/bootstrap.bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading