Улучшена адаптивность для телефонов. Добавлен новый ContextActionBarService

2026-04-22 13:55:30 +03:00
parent 45b8a168a1
commit 0f9dd1a8d8
6 changed files with 150 additions and 70 deletions
--- a/PlaylistShared.Pwa/App.razor
+++ b/PlaylistShared.Pwa/App.razor
@@ -11,7 +11,7 @@
                    }
                    else
                    {
-                        <p role="alert">You are not authorized to access this resource.</p>
+                        <p role="alert">У вас нет прав доступа к этому ресурсу.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
--- a/PlaylistShared.Pwa/Components/Global/ContextualBarContent.razor
+++ b/PlaylistShared.Pwa/Components/Global/ContextualBarContent.razor
@@ -0,0 +1,33 @@
+@implements IDisposable
+@inject ContextualActionBarService ContextualActionBarService
+
+@code {
+    [Parameter] public bool Bottom { get; set; } = false; 
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        bool isChanged = false;
+
+        if (ContextualActionBarService.Content != ChildContent)
+        {
+            ContextualActionBarService.Content = ChildContent;
+            isChanged = true;
+        }
+
+        if (ContextualActionBarService.Bottom != Bottom)
+        {
+            ContextualActionBarService.Bottom = Bottom;
+            isChanged = true;
+        }
+
+        if (isChanged) ContextualActionBarService.ChangeParameters();
+    }
+
+    public void Dispose()
+    {
+        ContextualActionBarService.Content = null;
+        ContextualActionBarService.Bottom = null;
+        ContextualActionBarService.ChangeParameters();
+    }
+}
--- a/PlaylistShared.Pwa/Layout/MainLayout.razor
+++ b/PlaylistShared.Pwa/Layout/MainLayout.razor
@@ -2,6 +2,7 @@
@inherits LayoutComponentBase
@inject PwaUpdateService PwaUpdateService
@inject IJSRuntime JSRuntime
+@inject ContextualActionBarService ContextualActionBarService

 <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
@@ -9,36 +10,40 @@
 <MudSnackbarProvider />

 <MudLayout>
-    <MudAppBar Elevation="1">
+    <MudAppBar Elevation="1" Contextual Bottom = "@_actionBarBottom" Fixed>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
-        <MudSpacer />
-        <LoginDisplay />
-        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" Class="ml-2" />
-        <MudLink Href="https://git.frigat.duckdns.org/FrigaT/PlaylistShared" Target="_blank" Color="Color.Inherit" Underline="Underline.None" Class="ml-4">
-            <MudIcon Icon="@Icons.Custom.Brands.GitHub" Size="Size.Small" Class="mr-1" /> Git
-        </MudLink>
+        @if (_actionBarContent != null)
+        {
+            @_actionBarContent
+        }
+        else
+        {
+            <MudSpacer />
+            <LoginDisplay />
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" Class="ml-2" />
+            <MudLink Href="https://git.frigat.duckdns.org/FrigaT/PlaylistShared" Target="_blank" Color="Color.Inherit" Underline="Underline.None" Class="ml-4">
+                <MudIcon Icon="@Icons.Custom.Brands.GitHub" Size="Size.Small" Class="mr-1" /> Git
+            </MudLink>
+        }
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    
-    <MudMainContent Class="pt-16 d-flex flex-column" Style="height: 100vh;">
-        <MudItem Class="flex-grow-1 overflow-y-auto">
-            @Body
-        </MudItem>
-
-        <MudItem>
-            <AudioPlayer />
-        </MudItem>
+    <MudMainContent Class="@("d-flex flex-column" + (_actionBarBottom ? " pt-0 pb-16" : ""))" Style="height: 100dvh;">
+        @Body
    </MudMainContent>
 </MudLayout>

@code {
+    private RenderFragment? _actionBarContent;
+    private bool _actionBarBottom = false;
+
    private bool _drawerOpen = true;
    private bool _isDarkMode = true;
    private MudTheme? _theme;
-    
+
    private DotNetObjectReference<PwaUpdateService>? _dotNetRef;

    protected override void OnInitialized()
@@ -51,6 +56,8 @@
            PaletteDark = _darkPalette,
            LayoutProperties = new LayoutProperties()
        };
+
+        ContextualActionBarService.OnChanged += OnContextualChangedHandler;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -62,6 +69,13 @@
        }
    }

+    private void OnContextualChangedHandler()
+    {
+        _actionBarContent = ContextualActionBarService.Content;
+        _actionBarBottom = ContextualActionBarService.Bottom ?? false;
+        StateHasChanged();
+    }
+
    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
--- a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
+++ b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
@@ -2,6 +2,7 @@
 <PageTitle>@_playlist?.Title - Playlist Share</PageTitle>

@using PlaylistShared.Pwa.Components.Common
+@using PlaylistShared.Pwa.Components.Global
@using PlaylistShared.Pwa.Components.SharedPlaylist
@using PlaylistShared.Pwa.Components.SharedPlaylist.Cards
@using PlaylistShared.Shared.DTO
@@ -16,60 +17,73 @@
@inject IDialogService DialogService

 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
-    @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
-    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
-        <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
-            <MudItem xs="12" md="6" Style="height: 100%;">
-                @PlaylistCardContent
-            </MudItem>
+    <MudStack Style="height: 100%;" StretchItems="StretchItems.Start" Spacing="2">
+        @*Первый элемент растянется на всю высоту*@
+        <MudItem Style="min-height: 0; height: 100%;">

-            @if (_canAdd)
-            {
-                <MudItem xs="12" md="6" Style="height: 100%;">
-                    @AddTrackCardContent
-                </MudItem>
-            }
-        </MudGrid>
-    </MudHidden>
-        
-    @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
-    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
-        <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
-        
-            @* Область контента: оба компонента здесь всегда *@
-            <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
-                <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                    <div class="flex-grow-1 overflow-auto pb-1">
+            @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
+            <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
+                <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
+                    <MudItem xs="12" md="6" Style="height: 100%; overflow-y: auto;">
                        @PlaylistCardContent
-                    </div>
-                </div>
-                
-                @if (_canAdd)
-                {
-                <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                    <div class="flex-grow-1 overflow-auto pb-1">
-                        @AddTrackCardContent
-                    </div>
-                </div>
-                }
-            </div>
+                    </MudItem>

-            @* Кастомная панель навигации внизу *@
-            @if (_canAdd)
-            {
-                <MudPaper Elevation="0" Class="py-1">
-                    <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
-                        <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
-                                        Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
-                                        OnClick="() => _activeMobileTab = 0" />
+                    @if (_canAdd)
+                    {
+                        <MudItem xs="12" md="6" Style="height: 100%; overflow-y: auto;">
+                            @AddTrackCardContent
+                        </MudItem>
+                    }
+                </MudGrid>
+                <ContextualBarContent />
+            </MudHidden>
+        
+            @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
+            <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
+                <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
+        
+                    @* Область контента: оба компонента здесь всегда *@
+                    <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
+                        <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                            <div class="flex-grow-1 overflow-auto pb-1">
+                                @PlaylistCardContent
+                            </div>
+                        </div>
+                
+                        @if (_canAdd)
+                        {
+                        <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                            <div class="flex-grow-1 overflow-auto pb-1">
+                                @AddTrackCardContent
+                            </div>
+                        </div>
+                        }
+                    </div>
+
+                    @* Кастомная панель навигации внизу *@
+                    <ContextualBarContent Bottom>
+                        <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
+                            <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
+                                            Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
+                                            OnClick="() => _activeMobileTab = 0" />
+                            @if (_canAdd)
+                            {   
                            <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
                                            Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
                                            OnClick="() => _activeMobileTab = 1" />
-                    </MudNavMenu>
-                </MudPaper>
-            }
-        </div>
-    </MudHidden>
+                            }
+                        </MudNavMenu>
+                    
+                    </ContextualBarContent>
+                </div>
+            </MudHidden>
+        </MudItem>
+
+        @*Второй элемент - плеер. Привязан к нижней части контейнера*@
+        <MudItem>
+            <AudioPlayer />
+        </MudItem>
+    </MudStack>
 </MudContainer>

 <style>
@@ -97,7 +111,7 @@
    private RenderFragment PlaylistCardContent => __builder =>
    {
        <MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
-            <MudCardHeader>
+            <MudCardHeader Class="py-0">
                <CardHeaderContent>
                    @if(_loading)
                    {
@@ -113,7 +127,7 @@
                </CardHeaderActions>
            </MudCardHeader>

-            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column py-0">
                @if (_loading || _tracksLoading)
                {
                    <TrackItemSkeleton />
@@ -150,8 +164,8 @@
    private RenderFragment AddTrackCardContent => __builder =>
    {
        <MudCard Class="d-flex flex-column" Elevation="0" Style="height: 100%;">
-            <MudCardHeader>
-                <MudStack Style="width: 100%;">
+            <MudCardHeader Class="py-0">
+                <MudStack Style="width: 100%;" Spacing="0">
                    <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
                    <MudTextField @bind-Value="_searchQuery"
                                  @bind-Value:after="OnSearchQueryChanged"
@@ -177,7 +191,7 @@
                </MudStack>
            </MudCardHeader>

-            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column py-0">
                @if (_isSearching)
                {

--- a/PlaylistShared.Pwa/Program.cs
+++ b/PlaylistShared.Pwa/Program.cs
@@ -25,6 +25,7 @@ internal class Program
        builder.Services.AddScoped<PlayerStorage>();
        builder.Services.AddScoped<AuthStateProvider>();
        builder.Services.AddScoped<AuthenticationStateProvider>(sp => sp.GetRequiredService<AuthStateProvider>());
+        builder.Services.AddScoped<ContextualActionBarService>();
        builder.Services.AddScoped<ApiClient>();
        builder.Services.AddScoped<IAudioPlayerService, AudioPlayerService>();

--- a/PlaylistShared.Pwa/Services/ContextualActionBarService.cs
+++ b/PlaylistShared.Pwa/Services/ContextualActionBarService.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace PlaylistShared.Pwa.Services;
+
+public class ContextualActionBarService
+{
+    // Событие, которое будет вызываться при изменении содержимого панели
+    public event Action? OnChanged;
+
+    public RenderFragment? Content { get; set; } = null;
+
+    public bool? Bottom { get; set; }
+
+    public void ChangeParameters()
+    {
+        OnChanged?.Invoke();
+    }
+}