8000 Stop Background scroll behind Modal by yashop7 · Pull Request #415 · block-core/angor · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Stop Background scroll behind Modal #415

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Stop Background scroll behind Modal #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 8 additions & 3 deletions src/Angor/Client/Pages/Create.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
@inject IHtmlStripperService HtmlStripperService;
@inject IJSRuntime JS;
@inject NavMenuState NavMenuState
@inject ModalScrollService ScrollService

@inject IWalletUIService _walletUIService;

Expand Down Expand Up @@ -1038,7 +1039,7 @@
return activeTab == tabNumber ? "active" : "";
}

private void ConfirmFinalizeNostrProfileCreation()
private async void ConfirmFinalizeNostrProfileCreation()
{
if (nostrMetadataCreated)
{
Expand All @@ -1055,6 +1056,7 @@
confirmationMessage = "Are you sure you want to create the Nostr Profile?";
finalizeAction = FinalizeNostrProfileCreation;
showConfirmationModal = true;
await ScrollService.LockScrollAsync();
}

private async void ConfirmFinalizeProjectInfoCreation()
Expand All @@ -1068,17 +1070,20 @@
confirmationMessage = "Are you sure you want to deploy the project info to Nostr?.";
finalizeAction = FinalizeProjectInfoCreation;
showConfirmationModal = true;
await ScrollService.LockScrollAsync();
}

private void CloseConfirmationModal()
private async void CloseConfirmationModal()
{
showConfirmationModal = false;
await ScrollService.UnlockScrollAsync();
StateHasChanged();
}

private void PerformFinalizeAction()
private async void PerformFinalizeAction()
{
showConfirmationModal = false;
await ScrollService.UnlockScrollAsync();
finalizeAction.Invoke();
}

Expand Down
40 changes: 34 additions & 6 deletions src/Angor/Client/Pages/Settings.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
@inject ILogger<Settings> Logger;
@inject NavigationManager _navManager
@inject IFeatureFlagService _featureFlagService
@inject ModalScrollService ScrollService
@inherits BaseComponent
<NotificationComponent @ref="notificationComponent" />

Expand Down Expand Up @@ -55,7 +56,7 @@
</div>
<div>

<button class="btn btn-border-danger" @ class="x x-first x-last">() => showChangeNetworkModal = true">
<button class="btn btn-border-danger" @ class="x x-first x-last">OpenChangeNetworkModal">
<Icon IconName="change" Height="24" Width="24" />
<span class="ms-2 d-none d-md-inline">Change Network</span>
</button>
Expand All @@ -71,7 +72,7 @@
<Icon IconName="network" Height="32" Width="32" class="me-2" />
<h5 class="modal-title">Change Network</h5>
</div>
<button class="btn-close-custom" @ class="x x-first x-last">() => showChangeNetworkModal = false">
<button class="btn-close-custom" @ class="x x-first x-last">CloseChangeNetworkModal">
<Icon IconName="close-circle" Height="24" Width="24" />
</button>
</div>
Expand Down Expand Up @@ -444,7 +445,7 @@
<p class="text-muted mb-0">Irreversible actions</p>
</div>
</div>
<button class="btn btn-border-danger" @ class="x x-first x-last">() => showWipeallModal = true">
<button class="btn btn-border-danger" @ class="x x-first x-last">OpenWipeModal">
<Icon IconName="delete" Height="24" Width="24" />
<span class="ms-2 d-none d-md-inline">Wipe Data</span>
</button>
Expand All @@ -462,7 +463,7 @@
<Icon IconName="remove" Height="32" Width="32" class="me-2" />
<h5 class="modal-title">Wipe Storage</h5>
</div>
<button class="btn-close-custom" @ class="x x-first x-last">() => showWipeallModal = false">
<button class="btn-close-custom" @ class="x x-first x-last">CloseWipeModal">
<Icon IconName="close-circle" Height="24" Width="24" />
</button>
</div>
Expand Down Expand Up @@ -552,6 +553,31 @@

return base.OnInitializedAsync();
}

private async Task OpenChangeNetworkModal()
{
showChangeNetworkModal = true;
await ScrollService.LockScrollAsync();
}

private async Task CloseChangeNetworkModal()
{
showChangeNetworkModal = false;
await ScrollService.UnlockScrollAsync();
}

private async Task CloseWipeModal()
{
showWipeallModal = false;
await ScrollService.UnlockScrollAsync();
}

private async Task OpenWipeModal()
{
showWipeallModal = true;
await ScrollService.LockScrollAsync();
}

private void OnFeatureFlagChanged(string key, bool value)
{
_featureFlags[key] = value;
Expand Down Expand Up @@ -868,7 +894,7 @@
}
}

private void WipeAllData()
private async void WipeAllData()
{
try
{
Expand All @@ -886,6 +912,7 @@
showWipeallModal = false;
showConfirmWipeMessage = false;
confirmWipe = false;
await ScrollService.UnlockScrollAsync();

// Update network settings
_networkService.CheckAndSetNetwork(_navManager.Uri.ToLower(), selectedNetwork);
Expand All @@ -911,7 +938,7 @@
}
}

private void ChangeNetwork()
private async void ChangeNetwork()
{
try
{
Expand All @@ -929,6 +956,7 @@
showChangeNetworkModal = false;
showConfirmWipeMessage = false;
confirmWipe = false;
await ScrollService.UnlockScrollAsync();

// Update network settings
_networkService.CheckAndSetNetwork(_navManager.Uri.ToLower(), selectedNetwork);
Expand Down
1 change: 1 addition & 0 deletions src/Angor/Client/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@

builder.Services.AddSingleton<ISerializer, Serializer>();
builder.Services.AddSingleton<INetworkConfiguration, NetworkConfiguration>();
builder.Services.AddSingleton<ModalScrollService>();
builder.Services.AddTransient<IHdOperations, HdOperations>();
builder.Services.AddTransient<IClientStorage, ClientStorage>();
builder.Services.AddTransient<INetworkStorage, ClientStorage>();
Expand Down
35 changes: 35 additions & 0 deletions src/Angor/Client/Services/ModalScrollService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class ModalScrollService
{
private readonly IJSRuntime _jsRuntime;
private int _openCount = 0;

public ModalScrollService(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}

public async Task LockScrollAsync()
{
if (_openCount == 0)
{
await _jsRuntime.InvokeVoidAsync("ModalScrollManager.enableScrollLock");
}
_openCount++;
}

public async Task UnlockScrollAsync()
{
if (_openCount <= 1)
{
await _jsRuntime.InvokeVoidAsync("ModalScrollManager.disableScrollLock");
_openCount = 0;
}
else
{
_openCount--;
}
}
}
10 changes: 7 additions & 3 deletions src/Angor/Client/Shared/PasswordComponent.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@inject IEncryptionService _encryptionService;
@inject IWalletStorage _walletStorage;
@inject IPasswordCacheService _passwordCacheService;
@inject ModalScrollService ScrollService

@if (walletPasswordConfirmModal)
{
Expand Down Expand Up @@ -137,9 +138,10 @@
await Submit();
}

public void ShowPassword(Func<Task> submit)
public async void ShowPassword(Func<Task> submit)
{
walletPasswordConfirmModal = true;
await ScrollService.LockScrollAsync();
Submit = submit;

StateHasChanged();
Expand All @@ -152,18 +154,20 @@
return !string.IsNullOrEmpty(_passwordCacheService.Data);
}

public void HidePassword()
public async void HidePassword()
{
walletPasswordConfirmModal = false;
walletPasswordError = null;
await ScrollService.UnlockScrollAsync();
StateHasChanged();
}

public void ClearPassword()
public async void ClearPassword()
{
_passwordCacheService.TryClear();
walletPasswordConfirmModal = false;
walletPasswordError = null;
await ScrollService.UnlockScrollAsync();
}

public async Task<bool> CheckPassword()
Expand Down
22 changes: 22 additions & 0 deletions src/Angor/Client/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,28 @@
<script src="nostr-tools-methods.js?v=1" type="module"></script>
<script src="/assets/js/appUpdate.js?v=1"></script>
<script src="/assets/js/app.js?v=1"></script>
<script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move this code to wwwroot/assets/ja/app.js

window.ModalScrollManager = {
enableScrollLock: function () {
const body = document.body;
if (!body.classList.contains('modal-open')) {
const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
if (scrollBarWidth > 0) {
body.style.paddingRight = scrollBarWidth + 'px';
}
body.classList.add('modal-open'); // this will disable scroll
}
},
disableScrollLock: function () {
const body = document.body;
if (body.classList.contains('modal-open')) {
body.classList.remove('modal-open');
body.style.paddingRight = '';
}
}
};
</script>

<script src="_framework/blazor.webassembly.js?v=1"></script>
</body>

Expand Down
0