Enable bottom bar for Gallery download progress.

This commit is contained in:
Unnoen 2022-01-20 21:19:10 +11:00
parent 3352657911
commit 052b173876
No known key found for this signature in database
GPG Key ID: 8F8E42252BA20553
6 changed files with 43 additions and 27 deletions

View File

@ -2,17 +2,29 @@
<footer id="bottom-bar"> <footer id="bottom-bar">
<div class="image"> <div class="image">
<img src="https://raw.githubusercontent.com/wabbajack-tools/mod-lists/master/total-skyrim-overhaul/2020.01.21-01.26.png" alt=""> <img src="@Image" alt="">
</div> </div>
<div class="info"> <div class="info">
<div class="subtitle">[Subtitle]</div> <div class="subtitle">@Subtitle</div>
<div class="title">[Title]</div> <div class="title">@Title</div>
</div> </div>
<div class="progress"> <div class="inside-content">
<ProgressBar/> @ChildContent
</div> </div>
</footer> </footer>
@code { @code {
[Parameter]
public string Title { get; set; }
[Parameter]
public string Subtitle { get; set; }
[Parameter]
public string Image { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
} }

View File

@ -36,8 +36,7 @@
} }
} }
.progress { .inside-content {
height: 20px;
flex: 1; flex: 1;
margin: 5rem; margin: 5rem;
} }

View File

@ -4,7 +4,7 @@
<div id="progress-bar"> <div id="progress-bar">
<progress value="@Percentage.Value"></progress> <progress value="@Percentage.Value"></progress>
<span class="text">[Centre Text]</span> <span class="text">@Text</span>
</div> </div>
@code { @code {
@ -12,4 +12,7 @@
[Parameter] [Parameter]
public Percent Percentage { get; set; } public Percent Percentage { get; set; }
[Parameter]
public string Text { get; set; }
} }

View File

@ -1,6 +1,7 @@
@page "/Gallery" @page "/Gallery"
@using Wabbajack.DTOs @using Wabbajack.DTOs
@using Wabbajack.RateLimiter
@namespace Wabbajack.App.Blazor.Pages @namespace Wabbajack.App.Blazor.Pages
@ -12,4 +13,12 @@
<InteractionIcon Icon="images/icons/info.svg" Label="Information" Size="75px" OnClick="@(() => OnClickInformation(modlist))"/> <InteractionIcon Icon="images/icons/info.svg" Label="Information" Size="75px" OnClick="@(() => OnClickInformation(modlist))"/>
</ModlistItem> </ModlistItem>
} }
@if (DownloadProgress != Percent.Zero)
{
<BottomBar Image="@DownloadingMetaData.Links.ImageUri" Title="Downloading..." Subtitle="@DownloadingMetaData.Title">
<div style="height:1.5rem;">
<ProgressBar Percentage="@DownloadProgress" Text="@DownloadProgress.Value.ToString()"/>
</div>
</BottomBar>
}
</div> </div>

View File

@ -25,7 +25,8 @@ public partial class Gallery
[Inject] private Client _client { get; set; } [Inject] private Client _client { get; set; }
[Inject] private ModListDownloadMaintainer _maintainer { get; set; } [Inject] private ModListDownloadMaintainer _maintainer { get; set; }
public Percent DownloadProgress { get; set; } public Percent DownloadProgress { get; set; } = Percent.Zero;
public ModlistMetadata DownloadingMetaData { get; set; } = new ModlistMetadata();
private List<ModlistMetadata> _listItems { get; set; } = new(); private List<ModlistMetadata> _listItems { get; set; } = new();
@ -61,6 +62,7 @@ public partial class Gallery
private async Task Download(ModlistMetadata metadata) private async Task Download(ModlistMetadata metadata)
{ {
GlobalState.NavigationAllowed = false; GlobalState.NavigationAllowed = false;
DownloadingMetaData = metadata;
await using Timer timer = new(_ => InvokeAsync(StateHasChanged)); await using Timer timer = new(_ => InvokeAsync(StateHasChanged));
timer.Change(TimeSpan.FromMilliseconds(250), TimeSpan.FromMilliseconds(250)); timer.Change(TimeSpan.FromMilliseconds(250), TimeSpan.FromMilliseconds(250));
try try
@ -73,6 +75,7 @@ public partial class Gallery
dispose.Dispose(); dispose.Dispose();
AbsolutePath path = KnownFolders.EntryPoint.Combine("downloaded_mod_lists", metadata.Links.MachineURL).WithExtension(Ext.Wabbajack); AbsolutePath path = KnownFolders.EntryPoint.Combine("downloaded_mod_lists", metadata.Links.MachineURL).WithExtension(Ext.Wabbajack);
GlobalState.ModListPath = path;
NavigationManager.NavigateTo("/Configure"); NavigationManager.NavigateTo("/Configure");
} }
catch (Exception e) catch (Exception e)

View File

@ -1,22 +1,12 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
@namespace Wabbajack.App.Blazor.Shared @namespace Wabbajack.App.Blazor.Shared
<CascadingValue Value="@(this)"> <div id="background"></div>
<div id="background"></div> <SideBar/>
<SideBar/> <div id="wrapper">
<div id="wrapper">
<TopBar/> <TopBar/>
<div id="page"> <div id="page">
@Body @Body
</div> </div>
@if (ShowFooter) </div>
{
<BottomBar/>
}
</div>
</CascadingValue>
@code
{
public bool ShowFooter { get; set; } = false;
}