Mirrored_Repos/wabbajack
1
0
Fork 0
mirror of https://github.com/wabbajack-tools/wabbajack.git synced 2024-08-30 18:42:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign and placeholder installer view.

Browse Source
This commit is contained in:
Unnoen 2022-01-11 14:00:54 +11:00
parent 60f4de0fdc
commit 9d38ff26ac
No known key found for this signature in database
GPG Key ID: 8F8E42252BA20553
30 changed files with 425 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Wabbajack.App.Blazor/Components/Logo.razor
View File

@ -1,6 +0,0 @@
<img class="logo" src="images/Logo_Dark_Transparent.png" alt="Wabbajack Logo">
<img class="letters" src="images/Letters_Dark_Transparent.png" alt="Wabbajack Logo">
@code {
}

19
Wabbajack.App.Blazor/Components/Logo.razor.scss
View File

@ -1,19 +0,0 @@
.logo {
padding: 0.5rem 4rem;
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
max-width: 100%;
height: auto;
}
.letters {
padding: 0.5rem 2rem;
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
max-width: 100%;
height: auto;
}

34
Wabbajack.App.Blazor/Components/ModlistItem.razor
View File

@ -1,17 +1,21 @@
<div class="item">
<img src="@ImageURL" alt="@Title Image">
<div class="info">
<div class="title">@Title</div>
<div class="description">@Description</div>
@namespace Wabbajack.App.Blazor.Components
<div class="item">
<div class="display">
<img src="@Metadata.Links.ImageUri" class="image" alt="@Metadata.Title Image">
<div class="interaction">
<img src="images/icons/install.svg" class="install" alt="Install" @onclick="Download">
<img src="images/icons/info.svg" class="more" alt="Information">
</div>
</div>
@if (Status == DownloadStatus.Downloading)
{
<Progress Percentage=PercentDownloaded></Progress>
}
<div class="info">
<div class="title">@Metadata.Title</div>
<div class="author">@Metadata.Author</div>
<div class="description">@Metadata.Description</div>
</div>
<div class="tags"></div>
</div>
@code {
[Parameter]
public string ImageURL { get; set; }
[Parameter]
public string Title { get; set; }
[Parameter]
public string Description { get; set; }
}

64
Wabbajack.App.Blazor/Components/ModlistItem.razor.cs Normal file
View File

@ -0,0 +1,64 @@
using System;
using System.Diagnostics;
using System.Reactive.Disposables;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.CodeAnalysis;
using Microsoft.Extensions.Logging;
using Wabbajack.DTOs;
using Wabbajack.Networking.WabbajackClientApi;
using Wabbajack.RateLimiter;
using Wabbajack.Services.OSIntegrated.Services;
namespace Wabbajack.App.Blazor.Components
{
public partial class ModlistItem
{
//[Inject] private ILogger _logger { get; set; }
[Inject] private ModListDownloadMaintainer _maintainer { get; set; }
//[Inject] private Client _wjClient { get; set; }
[Parameter] public ModlistMetadata Metadata { get; set; }
public DownloadStatus Status { get; set; }
public double PercentDownloaded { get; set; }
private CompositeDisposable _disposables { get; set; }
private async Task Download()
{
await using Timer timer = new(_ => InvokeAsync(StateHasChanged));
timer.Change(TimeSpan.FromMilliseconds(500), TimeSpan.FromMilliseconds(500));
try
{
_disposables = new CompositeDisposable();
Status = DownloadStatus.Downloading;
(IObservable<Percent> progress, Task task) = _maintainer.DownloadModlist(Metadata);
IDisposable dispose = progress.Subscribe(p =>
{
PercentDownloaded = p.Value * 100;
});
await task;
//await _wjClient.SendMetric("downloading", Metadata.Title);
//await UpdateStatus();
Debug.Print("##### WE DOWNLOADED THE THING!");
dispose.Dispose();
}
catch (Exception e)
{
Debug.Print(e.Message);
}
await timer.DisposeAsync();
}
public enum DownloadStatus
{
NotDownloaded,
Downloading,
Downloaded
}
}
}

77
Wabbajack.App.Blazor/Components/ModlistItem.razor.scss
View File

@ -1,28 +1,89 @@
.item {
@import "../Shared/Globals.scss";
$display-height: 225px;
$hover-icon-size: 75px;
.item {
width: 400px;
height: 400px;
border-radius: 0.75rem;
overflow: hidden;
margin: 1rem;
margin: 0.5rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.31);
&:hover .display .image {
filter: blur(2px) brightness(70%);
}
&:hover .display .interaction {
opacity: 1;
}
.display {
position: relative;
height: $display-height;
display: flex;
justify-content: center;
align-items: center;
.image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 250ms ease-in-out;
}
.interaction {
position: absolute;
opacity: 0;
transition: all 250ms ease-in-out;
img {
width: 100%;
height: 225px;
object-fit: cover;
border-radius: 0.75rem;
width: $hover-icon-size;
height: $hover-icon-size;
margin: 0;
transition: all 150ms ease-in-out;
&:hover {
margin-left: 10px;
margin-right: 10px;
transform: scale(1.25);
}
}
}
}
.info {
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
.title {
color: white;
font-weight: 100;
font-size: 2.25rem;
font-size: 2rem;
line-height: 2.5rem;
margin: 0;
}
.author {
color: lightgray;
font-size: 1rem;
}
.description {
color: grey;
font-size: 0.9rem;
}
}
.tags {
border-radius: 0.5rem;
}
}

11
Wabbajack.App.Blazor/Components/Navbar.razor
View File

@ -1,11 +0,0 @@
<nav>
<a href="">Home</a>
<a href="/gallery">Gallery</a>
<a href="">Install</a>
<a href="">Compile</a>
<a href="">Settings</a>
</nav>
@code {
}

20
Wabbajack.App.Blazor/Components/Navbar.razor.scss
View File

@ -1,20 +0,0 @@
@use "../Shared/Globals";
nav {
font-weight: 100;
font-size: 1.5em;
line-height: 2rem;
padding-top: 1rem;
}
a {
color: white;
display: block;
padding: 0.5rem 2rem;
text-decoration: none;
transition: background-color .25s ease-in-out;
&:hover {
background-color: Globals.$accent-color;
}
}

7
Wabbajack.App.Blazor/Components/Progress.razor Normal file
View File

@ -0,0 +1,7 @@
<progress value="@Percentage" max="100"> </progress>
@code {
[Parameter]
public double Percentage { get; set; }
}

5
Wabbajack.App.Blazor/Components/Progress.razor.scss Normal file
View File

@ -0,0 +1,5 @@
progress {
width: 100%;
height: 3px;
appearance: none;
}

7
Wabbajack.App.Blazor/Components/Sidebar.razor
View File

@ -1,7 +0,0 @@
<div class="sidebar">
<Logo/>
<Navbar/>
</div>
@code {
}

7
Wabbajack.App.Blazor/Components/Sidebar.razor.scss
View File

@ -1,7 +0,0 @@
@use "../Shared/Globals";
.sidebar {
background-color: Globals.$secondary-background-color;
color: white;
width: 18rem;
}

21
Wabbajack.App.Blazor/Components/TopBar.razor Normal file
View File

@ -0,0 +1,21 @@
<header id="top-bar">
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/gallery">Gallery</a>
</li>
<li>
<a href="/install">Install</a>
</li>
<li>
<a href="/">Compile</a>
</li>
<li>
<a href="/">Settings</a>
</li>
</ul>
</nav>
</header>

39
Wabbajack.App.Blazor/Components/TopBar.razor.scss Normal file
View File

@ -0,0 +1,39 @@
@import "../Shared/Globals.scss";
#top-bar {
position: fixed;
width: calc(100% - #{$sidebar-width});
height: $header-height;
background-color: transparent;
backdrop-filter: blur(5px) grayscale(10%);
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 10px;
nav {
font-weight: 100;
font-size: 1.1em;
line-height: 2rem;
}
ul {
li {
display: inline-block;
margin-right: 10px;
a {
color: white;
display: block;
padding: 0.5rem 2rem;
text-decoration: none;
transition: background-color .25s ease-in-out;
&:hover {
border-bottom: 2px solid $accent-color;
}
}
}
}
}

2
Wabbajack.App.Blazor/MainWindow.xaml
View File

@ -6,7 +6,7 @@
xmlns:local="clr-namespace:Wabbajack.App.Blazor"
xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1000" MinHeight="600" MinWidth="900">
Title="MainWindow" Height="750" Width="1200" MinHeight="600" MinWidth="900">
<Grid Background="#121212">
<blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{StaticResource services}" x:Name="blazorWebView1">
<blazor:BlazorWebView.RootComponents>

25
Wabbajack.App.Blazor/Pages/Gallery.razor
View File

@ -8,35 +8,24 @@
@inject Client _client
<div id="content">
@foreach (ModListItem item in listItems)
@if (_listItems.Count > 0)
{
<ModlistItem ImageURL=@item.ImageURL Title=@item.Title Description=@item.Description></ModlistItem>
foreach (ModlistMetadata item in _listItems)
{
<ModlistItem Metadata=@item></ModlistItem>
}
}
</div>
@code {
List<ModListItem> listItems = new();
private class ModListItem
{
public readonly string Title;
public readonly string Description;
public readonly string ImageURL;
public ModListItem(string title, string description, string imageUrl)
{
Description = description;
ImageURL = imageUrl;
Title = title;
}
}
List<ModlistMetadata> _listItems = new();
protected override async Task OnInitializedAsync()
{
try
{
ModlistMetadata[] modLists = await _client.LoadLists();
listItems = modLists.Select(x => new ModListItem(x.Title, x.Description, x.Links.ImageUri)).ToList();
_listItems = modLists.ToList();
StateHasChanged();
}
catch (Exception ex)

26
Wabbajack.App.Blazor/Pages/Install.razor Normal file
View File

@ -0,0 +1,26 @@
@page "/install"
@layout Shared.MainLayout
<div id="content">
<div class="image"></div>
<div class="info">
<div class="step">Downloading</div>
<div class="description">Downloading missing archives...</div>
<div class="number">16 of 228 archives downloaded</div>
<div class="number">128.27 GB remaining</div>
<div class="number">5.6 MB/s</div>
<div class="log">
<p>Downloaded A Cool Mod</p>
<p>Downloaded Some Mod With a Long Name</p>
<p>Downloaded An Even Longer Name Why Do They Do This</p>
<p>Downloaded An Archive From MEGA Wow It's a Miracle</p>
<p>Downloaded Archive Mod Something Long</p>
</div>
</div>
<div class="preview">
<div class="mod-image"></div>
<div class="mod-name">Manbeast - A Werewolf Overhaul</div>
<div class="mod-author">Simon Magus and colinswrath</div>
<div class="mod-info">Manbeast is a complete overhaul of Skyrim’s Werewolf system designed to balance existing Werewolf mechanics and add powerful new lycanthropic abilities to the game.</div>
</div>
</div>

5
Wabbajack.App.Blazor/Pages/Install.razor.cs Normal file
View File

@ -0,0 +1,5 @@
namespace Wabbajack.App.Blazor.Pages;
public partial class Install
{
}

77
Wabbajack.App.Blazor/Pages/Install.razor.scss Normal file
View File

@ -0,0 +1,77 @@
@import "../Shared/Globals.scss";
#content {
display: flex;
height: 100%;
align-content: center;
justify-content: space-around;
align-items: center;
color: white;
.image {
position: absolute;
background-image: url("images/modlist-image.png");
width: calc(100% - #{$sidebar-width});
height: calc(100% - #{$header-height});
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(25px) brightness(50%);
z-index: -1;
}
.info {
width: fit-content;
height: fit-content;
.step {
margin-left: -20px;
font-size: 5rem;
font-weight: 100;
}
.description {
margin-left: -10px;
font-size: 2rem;
font-weight: 100;
}
.number {
color: rgba(255, 255, 255, 0.75);
}
.log {
margin-top: 20px;
color: rgba(255, 255, 255, 0.5);
}
}
.preview {
width: 800px;
height: 450px;
margin-top: -150px;
.mod-feature {
margin-left: -10px;
font-size: 2rem;
font-weight: 100;
}
.mod-image {
background-image: url("https://staticdelivery.nexusmods.com/mods/1704/images/44746/44746-1611463256-105629958.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.mod-name {
font-size: 2rem;
font-weight: 100;
}
.mod-author {
font-size: 1.1rem;
font-weight: 100;
}
.mod-info {
margin-top: 20px;
margin-left: 10px;
color: rgba(255, 255, 255, 0.75);
}
}
}

3
Wabbajack.App.Blazor/Shared/Globals.scss
View File

@ -1,3 +1,6 @@
$primary-background-color: #121212;
$secondary-background-color: #0A0A0A;
$accent-color: #5E437F;
$header-height: 65px;
$sidebar-width: 75px;

14
Wabbajack.App.Blazor/Shared/MainLayout.razor
View File

@ -1,13 +1,13 @@
@using Components
@inherits LayoutComponentBase
@inherits LayoutComponentBase
@* This is required because layout components can't access scoped CSS. *@
<link rel="stylesheet" href="MainLayout.Razor.css" >
<link rel="stylesheet" href="MainLayout.Razor.css">
<div class="main">
<Sidebar/>
<div class="page">
<div id="background"></div>
<SideBar/>
<div id="wrapper">
<TopBar/>
<div id="page">
@Body
</div>
</div>

25
Wabbajack.App.Blazor/Shared/MainLayout.razor.scss
View File

@ -1,13 +1,20 @@
@use "Globals";
@import "./Globals.scss";
.main {
position: relative;
display: flex;
background-color: Globals.$primary-background-color;
min-height: 100vh;
#background {
position: fixed;
height: 100vh;
width: 100%;
background: linear-gradient(320deg, #151022, #1f0d2a, #100214);
z-index: -1;
}
.page {
padding: 0.5rem;
flex: 1 1 0;
#wrapper {
width: calc(100% - #{$sidebar-width});
float: right;
height: 100%;
}
#page {
margin-top: $header-height;
height: calc(100% - #{$sidebar-width});
}

3
Wabbajack.App.Blazor/Wabbajack.App.Blazor.csproj
View File

@ -26,6 +26,9 @@
<ItemGroup>
<Content Remove="Pages\*.scss" />
<Content Include="Pages\*.scss" Watch="false" />
<Content Update="wwwroot\*">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>

7
Wabbajack.App.Blazor/wwwroot/images/icons/discord.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path d="M9.593 10.971c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c.011-.581-.427-1.055-.968-1.055zm3.468 0c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c-.001-.581-.427-1.055-.968-1.055z"
fill="#FFF"/>
<path d="M17.678 3H4.947A1.952 1.952 0 0 0 3 4.957v12.844c0 1.083.874 1.957 1.947 1.957H15.72l-.505-1.759l1.217 1.131l1.149 1.064L19.625 22V4.957A1.952 1.952 0 0 0 17.678 3zM14.01 15.407s-.342-.408-.626-.771c1.244-.352 1.719-1.13 1.719-1.13c-.39.256-.76.438-1.093.562a6.679 6.679 0 0 1-3.838.398a7.944 7.944 0 0 1-1.396-.41a5.402 5.402 0 0 1-.693-.321c-.029-.021-.057-.029-.085-.048a.117.117 0 0 1-.039-.03c-.171-.094-.266-.16-.266-.16s.456.76 1.663 1.121c-.285.36-.637.789-.637.789c-2.099-.067-2.896-1.444-2.896-1.444c0-3.059 1.368-5.538 1.368-5.538c1.368-1.027 2.669-.998 2.669-.998l.095.114c-1.71.495-2.499 1.245-2.499 1.245s.21-.114.561-.275c1.016-.446 1.823-.57 2.156-.599c.057-.009.105-.019.162-.019a7.756 7.756 0 0 1 4.778.893s-.751-.712-2.366-1.206l.133-.152s1.302-.029 2.669.998c0 0 1.368 2.479 1.368 5.538c0-.001-.807 1.376-2.907 1.443z"
fill="#FFF"/>
</svg>

8
Wabbajack.App.Blazor/wwwroot/images/icons/disk.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36">
<path class="clr-i-outline clr-i-outline-path-1"
d="M34 21.08L30.86 8.43A2 2 0 0 0 28.94 7H7.06a2 2 0 0 0-1.93 1.47L2 21.08a1 1 0 0 0 0 .24V29a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2v-7.69a1 1 0 0 0 0-.23zM4 29v-7.56L7.06 9h21.87L32 21.44V29z"
fill="#FFF"/>
<path class="clr-i-outline clr-i-outline-path-2" d="M6 20h24v2H6z" fill="#FFF"/>
<path class="clr-i-outline clr-i-outline-path-3" d="M26 24h4v2h-4z" fill="#FFF"/>
</svg>

8
Wabbajack.App.Blazor/wwwroot/images/icons/github.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
fill="#FFF"/>
</g>
</svg>

7
Wabbajack.App.Blazor/wwwroot/images/icons/info.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
fill="#FFF"/>
<path d="M464 336a48 48 0 1 0 96 0a48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
fill="#FFF"/>
</svg>

5
Wabbajack.App.Blazor/wwwroot/images/icons/install.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024" height="1024" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
fill="#FFF"/>
</svg>

5
Wabbajack.App.Blazor/wwwroot/images/icons/patreon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<circle cx="14.508" cy="9.831" r="6.496" fill="#FFF"/>
<path d="M2.996 3.335H6.17v17.33H2.996z" fill="#FFF"/>
</svg>

7
Wabbajack.App.Blazor/wwwroot/images/icons/play.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
width="1024px" height="1024px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372z"
fill="#FFF"/>
<path d="M719.4 499.1l-296.1-215A15.9 15.9 0 0 0 398 297v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215a15.9 15.9 0 0 0 0-25.8zm-257.6 134V390.9L628.5 512L461.8 633.1z"
fill="#FFF"/>
</svg>

BIN
Wabbajack.App.Blazor/wwwroot/images/modlist-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB