Адаптивность шаринга
This commit is contained in:
FrigaT
@@ -14,7 +14,7 @@
|
||||
@inject AuthenticationStateProvider AuthProvider
|
||||
@inject IDialogService DialogService
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4" Style="height: 100%;">
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
|
||||
@if (_loading)
|
||||
{
|
||||
<MudProgressCircular Indeterminate />
|
||||
@@ -25,67 +25,105 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
|
||||
<FirstPanel>
|
||||
<MudCard Class="d-flex flex-column" Style="height: 100%;">
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<PlaylistHeader Playlist="@_playlist" />
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
@* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
|
||||
<MudGrid Spacing="2" Class="flex-grow-1" Style="height: 100%;">
|
||||
<MudItem xs="12" md="6" Style="height: 100%;">
|
||||
@PlaylistCardContent
|
||||
</MudItem>
|
||||
|
||||
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
|
||||
<MudItem>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
|
||||
</MudItem>
|
||||
|
||||
<MudTable Items="@_tracks"
|
||||
Virtualize
|
||||
Hover
|
||||
Elevation="0"
|
||||
Class="d-flex flex-grow-1 flex-column"
|
||||
Style="min-height: 0;"
|
||||
Breakpoint="Breakpoint.Sm"
|
||||
Loading="@_tracksLoading">
|
||||
<RowTemplate>
|
||||
<MudTd Class="pa-1" Style="width: 100%;">
|
||||
<TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
|
||||
</MudTd>
|
||||
@if (_canRemove)
|
||||
{
|
||||
<MudTd Class="pa-1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => RemoveTrack(context)" />
|
||||
</MudTd>
|
||||
}
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
</FirstPanel>
|
||||
<SecondPanel>
|
||||
@if (_canAdd)
|
||||
{
|
||||
<MudCard Class="d-flex flex-column" Style="height: 100%;">
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h5" Color="Color.Primary">Добавление треков</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
|
||||
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
|
||||
<AddTrackSection ShareToken="@Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
<MudItem xs="12" md="6" Style="height: 100%;">
|
||||
@AddTrackCardContent
|
||||
</MudItem>
|
||||
}
|
||||
</SecondPanel>
|
||||
</MudSplitPanel>
|
||||
</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">
|
||||
@PlaylistCardContent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@* Кастомная панель навигации внизу *@
|
||||
@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" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"
|
||||
Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
|
||||
OnClick="() => _activeMobileTab = 1" />
|
||||
</MudNavMenu>
|
||||
</MudPaper>
|
||||
}
|
||||
</div>
|
||||
</MudHidden>
|
||||
}
|
||||
</MudContainer>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public string Token { get; set; }
|
||||
|
||||
private RenderFragment PlaylistCardContent => __builder =>
|
||||
{
|
||||
<MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<PlaylistHeader Playlist="@_playlist" />
|
||||
</CardHeaderContent>
|
||||
<CardHeaderActions>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" />
|
||||
</CardHeaderActions>
|
||||
</MudCardHeader>
|
||||
|
||||
<MudCardContent Class="flex-grow-1 overflow-auto flex-column">
|
||||
<MudTable Items="@_tracks" Virtualize Hover Elevation="0" Breakpoint="Breakpoint.None" Class="d-flex flex-grow-1 flex-column" Style="min-height: 0;">
|
||||
<RowTemplate>
|
||||
<MudTd Class="pa-1" Style="width: 100%;">
|
||||
<TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
|
||||
</MudTd>
|
||||
@if (_canRemove)
|
||||
{
|
||||
<MudTd Class="pa-1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => RemoveTrack(context)" />
|
||||
</MudTd>
|
||||
}
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
};
|
||||
|
||||
private RenderFragment AddTrackCardContent => __builder =>
|
||||
{
|
||||
<MudPaper Class="pa-4 d-flex flex-column" Elevation="1" Style="height: 100%; overflow: hidden;">
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
|
||||
<MudItem class="flex-grow-1 overflow-auto">
|
||||
<AddTrackSection ShareToken="@Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
|
||||
</MudItem>
|
||||
</MudPaper>
|
||||
};
|
||||
|
||||
private int _activeMobileTab = 0;
|
||||
|
||||
private HashSet<string> _existingTrackIds = new();
|
||||
private bool _firstLoadExistingTrackIds;
|
||||
private List<YandexTrack> _tracks = new();
|
||||
@@ -164,6 +202,7 @@
|
||||
if (response?.Success == true)
|
||||
{
|
||||
_playlist = response.Data;
|
||||
_activeMobileTab = 0;
|
||||
|
||||
await ConfigurePermissions();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user