feat(mobile-ux): implement auto-hiding bars on scroll and widen reader container
This commit is contained in:
@@ -20,10 +20,10 @@
|
||||
@inject NavigationManager Navigation
|
||||
@inject ILogger<ReaderCanvas> Logger
|
||||
|
||||
<div class="reader-canvas @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
|
||||
<div class="reader-canvas @(ThemeService.IsLightMode ? "theme-light" : "theme-dark") @(StateService.IsBarsHidden ? "immersive-zen-mode" : "")">
|
||||
@if (_isMobile && ViewModel != null)
|
||||
{
|
||||
<header class="nexus-mobile-reader-header">
|
||||
<header class="nexus-mobile-reader-header @(StateService.IsBarsHidden ? "immersive-zen-mode" : "")">
|
||||
<button class="nexus-mobile-escape-btn" @onclick="HandleEscape" aria-label="Powrót do pulpitu">
|
||||
<NexusIcon Name="chevron-left" Size="18" />
|
||||
<span>Pulpit</span>
|
||||
@@ -130,6 +130,7 @@
|
||||
ThemeService.OnThemeChanged += HandleThemeChanged;
|
||||
NavigationService.OnNavigationChanged += OnNavigationChanged;
|
||||
QuizService.OnQuizUpdated += HandleUpdate;
|
||||
StateService.OnBarsHiddenChanged += HandleBarsHiddenChanged;
|
||||
|
||||
InteractionService.OnScrollToBlockRequested += HandleScrollRequested;
|
||||
InteractionService.OnHighlightBlockRequested += HandleHighlightRequested;
|
||||
@@ -250,7 +251,7 @@
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await module.InvokeVoidAsync("initObserver", _selfReference, ".reader-flow-container", ".block-wrapper");
|
||||
_scrollListenerReference = await module.InvokeAsync<IJSObjectReference>("initScrollListener", _selfReference, ".reader-flow-container");
|
||||
_scrollListenerReference = await module.InvokeAsync<IJSObjectReference>("initScrollListener", _selfReference, ".reader-canvas");
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
@@ -266,6 +267,17 @@
|
||||
await InteractionService.NotifyScrollPercentChanged(percent);
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task HandleScrollDelta(bool hideBars)
|
||||
{
|
||||
if (StateService.IsBarsHidden != hideBars)
|
||||
{
|
||||
StateService.IsBarsHidden = hideBars;
|
||||
}
|
||||
}
|
||||
|
||||
private Task HandleBarsHiddenChanged() => InvokeAsync(StateHasChanged);
|
||||
|
||||
[JSInvokable]
|
||||
public async Task HandleBlockReached(string blockId, string content)
|
||||
{
|
||||
@@ -471,6 +483,7 @@
|
||||
ThemeService.OnThemeChanged -= HandleThemeChanged;
|
||||
NavigationService.OnNavigationChanged -= OnNavigationChanged;
|
||||
QuizService.OnQuizUpdated -= HandleUpdate;
|
||||
StateService.OnBarsHiddenChanged -= HandleBarsHiddenChanged;
|
||||
|
||||
InteractionService.OnScrollToBlockRequested -= HandleScrollRequested;
|
||||
InteractionService.OnHighlightBlockRequested -= HandleHighlightRequested;
|
||||
|
||||
Reference in New Issue
Block a user