Merge pull request #78 from Moonlight-Panel/AddedFileViewAnimation
Implemented file view loading animation
This commit is contained in:
Marcel Baumgartner
@@ -35,88 +35,90 @@
|
|||||||
<table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" style="width: 100%;">
|
<table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" style="width: 100%;">
|
||||||
<tbody class="fw-semibold text-gray-600">
|
<tbody class="fw-semibold text-gray-600">
|
||||||
<LazyLoader Load="Load">
|
<LazyLoader Load="Load">
|
||||||
<tr class="even">
|
<ContentBlock @ref="ContentBlock" AllowContentOverride="true">
|
||||||
<td class="w-10px">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span class="icon-wrapper">
|
|
||||||
<i class="bx bx-md bx-up-arrow-alt text-primary"></i>
|
|
||||||
</span>
|
|
||||||
<a href="#" @onclick:preventDefault @onclick="GoUp" class="ms-3 text-gray-800 text-hover-primary">
|
|
||||||
<TL>Go up</TL>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td></td>
|
|
||||||
<td class="text-end">
|
|
||||||
<div class="d-flex justify-content-end">
|
|
||||||
<div class="ms-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@foreach (var file in Data)
|
|
||||||
{
|
|
||||||
<tr class="even">
|
<tr class="even">
|
||||||
<td class="w-10px">
|
<td class="w-10px">
|
||||||
@if (!HideSelect)
|
|
||||||
{
|
|
||||||
<div class="form-check form-check-sm form-check-custom form-check-solid">
|
|
||||||
@{
|
|
||||||
var toggle = ToggleStatusCache.ContainsKey(file) && ToggleStatusCache[file];
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (toggle)
|
|
||||||
{
|
|
||||||
<input @onclick="() => SetToggleState(file, false)" class="form-check-input" type="checkbox" checked="checked">
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<input @onclick="() => SetToggleState(file, true)" class="form-check-input" type="checkbox">
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<span class="icon-wrapper">
|
<span class="icon-wrapper">
|
||||||
@if (file.IsFile)
|
<i class="bx bx-md bx-up-arrow-alt text-primary"></i>
|
||||||
{
|
|
||||||
<i class="bx bx-md bx-file text-primary"></i>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<i class="bx bx-md bx-folder text-primary"></i>
|
|
||||||
}
|
|
||||||
</span>
|
</span>
|
||||||
<a href="#" @onclick:preventDefault @onclick="() => OnClicked(file)" class="ms-3 text-gray-800 text-hover-primary">@(file.Name)</a>
|
<a href="#" @onclick:preventDefault @onclick="GoUp" class="ms-3 text-gray-800 text-hover-primary">
|
||||||
|
<TL>Go up</TL>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>@(Formatter.FormatSize(file.Size))</td>
|
<td></td>
|
||||||
<td class="text-end">
|
<td class="text-end">
|
||||||
<div class="d-flex justify-content-end">
|
<div class="d-flex justify-content-end">
|
||||||
<div class="ms-2 me-6">
|
<div class="ms-2">
|
||||||
@if (ContextActions.Any())
|
|
||||||
{
|
|
||||||
<ContextMenuTrigger MenuId="triggerMenu" MouseButtonTrigger="MouseButtonTrigger.Both" Data="file">
|
|
||||||
<button class="btn btn-sm btn-icon btn-light btn-active-light-primary me-2">
|
|
||||||
<span class="svg-icon svg-icon-5 m-0">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect x="10" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
|
||||||
<rect x="17" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
|
||||||
<rect x="3" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</ContextMenuTrigger>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
@foreach (var file in Data)
|
||||||
|
{
|
||||||
|
<tr class="even">
|
||||||
|
<td class="w-10px">
|
||||||
|
@if (!HideSelect)
|
||||||
|
{
|
||||||
|
<div class="form-check form-check-sm form-check-custom form-check-solid">
|
||||||
|
@{
|
||||||
|
var toggle = ToggleStatusCache.ContainsKey(file) && ToggleStatusCache[file];
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (toggle)
|
||||||
|
{
|
||||||
|
<input @onclick="() => SetToggleState(file, false)" class="form-check-input" type="checkbox" checked="checked">
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<input @onclick="() => SetToggleState(file, true)" class="form-check-input" type="checkbox">
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="icon-wrapper">
|
||||||
|
@if (file.IsFile)
|
||||||
|
{
|
||||||
|
<i class="bx bx-md bx-file text-primary"></i>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<i class="bx bx-md bx-folder text-primary"></i>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<a href="#" @onclick:preventDefault @onclick="() => OnClicked(file)" class="ms-3 text-gray-800 text-hover-primary">@(file.Name)</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>@(Formatter.FormatSize(file.Size))</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<div class="d-flex justify-content-end">
|
||||||
|
<div class="ms-2 me-6">
|
||||||
|
@if (ContextActions.Any())
|
||||||
|
{
|
||||||
|
<ContextMenuTrigger MenuId="triggerMenu" MouseButtonTrigger="MouseButtonTrigger.Both" Data="file">
|
||||||
|
<button class="btn btn-sm btn-icon btn-light btn-active-light-primary me-2">
|
||||||
|
<span class="svg-icon svg-icon-5 m-0">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="10" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
||||||
|
<rect x="17" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
||||||
|
<rect x="3" y="10" width="4" height="4" rx="2" fill="currentColor"></rect>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</ContextMenuTrigger>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</ContentBlock>
|
||||||
</LazyLoader>
|
</LazyLoader>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -138,12 +140,13 @@
|
|||||||
|
|
||||||
@code
|
@code
|
||||||
{
|
{
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public FileAccess Access { get; set; }
|
public FileAccess Access { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public Func<FileData, Task<bool>>? OnElementClicked { get; set; }
|
public Func<FileData, Task<bool>>? OnElementClicked { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public Func<Task>? OnSelectionChanged { get; set; }
|
public Func<Task>? OnSelectionChanged { get; set; }
|
||||||
|
|
||||||
@@ -155,7 +158,7 @@
|
|||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool DisableScrolling { get; set; } = false;
|
public bool DisableScrolling { get; set; } = false;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public Func<FileData, bool>? Filter { get; set; }
|
public Func<FileData, bool>? Filter { get; set; }
|
||||||
|
|
||||||
@@ -169,15 +172,19 @@
|
|||||||
private Dictionary<FileData, bool> ToggleStatusCache = new();
|
private Dictionary<FileData, bool> ToggleStatusCache = new();
|
||||||
private bool AllToggled = false;
|
private bool AllToggled = false;
|
||||||
|
|
||||||
|
private ContentBlock ContentBlock;
|
||||||
|
|
||||||
public async Task Refresh()
|
public async Task Refresh()
|
||||||
{
|
{
|
||||||
|
ContentBlock?.SetBlocking(true);
|
||||||
|
|
||||||
var list = new List<FileData>();
|
var list = new List<FileData>();
|
||||||
|
|
||||||
foreach (var fileData in await Access.Ls())
|
foreach (var fileData in await Access.Ls())
|
||||||
{
|
{
|
||||||
if (Filter != null)
|
if (Filter != null)
|
||||||
{
|
{
|
||||||
if(Filter.Invoke(fileData))
|
if (Filter.Invoke(fileData))
|
||||||
list.Add(fileData);
|
list.Add(fileData);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
@@ -185,7 +192,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
Data = list.ToArray();
|
Data = list.ToArray();
|
||||||
|
|
||||||
ToggleStatusCache.Clear();
|
ToggleStatusCache.Clear();
|
||||||
AllToggled = false;
|
AllToggled = false;
|
||||||
|
|
||||||
@@ -196,6 +203,8 @@
|
|||||||
|
|
||||||
await InvokeAsync(StateHasChanged);
|
await InvokeAsync(StateHasChanged);
|
||||||
OnSelectionChanged?.Invoke();
|
OnSelectionChanged?.Invoke();
|
||||||
|
|
||||||
|
ContentBlock?.SetBlocking(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task Load(LazyLoader arg)
|
private async Task Load(LazyLoader arg)
|
||||||
@@ -257,7 +266,7 @@
|
|||||||
if (canceled)
|
if (canceled)
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
await Access.Up();
|
await Access.Up();
|
||||||
await Refresh();
|
await Refresh();
|
||||||
}
|
}
|
||||||
@@ -273,4 +282,4 @@
|
|||||||
|
|
||||||
return Task.CompletedTask;
|
return Task.CompletedTask;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
52
Moonlight/Shared/Components/Partials/ContentBlock.razor
Normal file
52
Moonlight/Shared/Components/Partials/ContentBlock.razor
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
@if (AllowContentOverride)
|
||||||
|
{
|
||||||
|
if (IsBlocking)
|
||||||
|
{
|
||||||
|
<div class="overlay overlay-block">
|
||||||
|
<div class="overlay-wrapper p-5">
|
||||||
|
@(ChildContent)
|
||||||
|
</div>
|
||||||
|
<div class="overlay-layer">
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
@ChildContent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="@(IsBlocking ? "overlay overlay-block" : "")">
|
||||||
|
<div class="@(IsBlocking ? "overlay-wrapper p-5" : "")">
|
||||||
|
@(ChildContent)
|
||||||
|
</div>
|
||||||
|
@if (IsBlocking)
|
||||||
|
{
|
||||||
|
<div class="overlay-layer">
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public bool AllowContentOverride { get; set; } = false;
|
||||||
|
|
||||||
|
private bool IsBlocking = false;
|
||||||
|
|
||||||
|
public async Task SetBlocking(bool b)
|
||||||
|
{
|
||||||
|
IsBlocking = b;
|
||||||
|
|
||||||
|
await InvokeAsync(StateHasChanged);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user