mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2024-12-20 17:01:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reworked runners selection list

Browse source
This commit is contained in:
Observer KRypt0n_ 2022-01-07 19:45:20 +02:00
parent 255810a7d2
commit 3aa0e2859b
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
3 changed files with 88 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/components/RunnerSelectionList.svelte
View file

@ -3,16 +3,18 @@
export let recommendable = true;
import Runners from '../ts/core/Runners';
import type { Runner, RunnerFamily } from '../ts/types/Runners';
import Runners from '../ts/core/Runners';
import Delete from '../assets/images/delete.png';
import Download from '../assets/images/download.png';
import Arrow from '../assets/svgs/arrow.svg';
let runners: RunnerFamily[] = [],
installedRunners = {},
disabledRunners = {},
openedFamily,
selectedVersion;
Runners.list().then((list) => {
@ -26,7 +28,12 @@
}
});
Runners.current().then((current) => selectedVersion = current?.name);
Runners.current().then((current) => {
selectedVersion = current;
if (current)
openedFamily = current.family;
});
let progress = {}, applying = {};
@ -48,7 +55,7 @@
progress[runner.name] = undefined;
selectedVersion = runner.name;
selectedVersion = runner;
Runners.current(runner);
});
@ -69,39 +76,49 @@
<div class="list">
{#each runners as family}
<h2>{ family.title }</h2>
<div
class="list-title"
class:list-title-open={openedFamily === family.title}
on:click={() => openedFamily = openedFamily != family.title ? family.title : null}
>
<span>{family.title}</span>
{#each family.runners as runner}
<div
class="list-item"
class:list-item-downloaded={installedRunners[runner.name]}
class:list-item-active={runner.name === selectedVersion}
class:list-item-hidden={recommendable && !runner.recommended}
class:list-item-downloading={progress[runner.name]}
class:list-item-applying={applying[runner.name]}
class:list-item-disabled={disabledRunners[runner.name]}
<img src={Arrow} alt="" />
</div>
on:click|self={() => {
if (installedRunners[runner.name] && selectedVersion !== runner.name)
{
selectedVersion = runner.name;
{#if openedFamily === family.title}
{#each family.runners as runner}
<div
class="list-item"
class:list-item-downloaded={installedRunners[runner.name]}
class:list-item-active={runner.name === selectedVersion.name}
class:list-item-hidden={recommendable && !runner.recommended}
class:list-item-downloading={progress[runner.name]}
class:list-item-applying={applying[runner.name]}
class:list-item-disabled={disabledRunners[runner.name]}
Runners.current(runner);
}
}}
>
{ runner.title }
on:click|self={() => {
if (installedRunners[runner.name] && selectedVersion.name !== runner.name)
{
selectedVersion = runner;
<div>
<span>{progress[runner.name] ?? ''}</span>
Runners.current(runner);
}
}}
>
{ runner.title }
<!-- svelte-ignore a11y-missing-attribute -->
<img class="item-delete" src={Delete} on:click={() => deleteRunner(runner)}>
<div>
<span>{progress[runner.name] ?? ''}</span>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="item-download" src={Download} on:click={() => downloadRunner(runner)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="item-delete" src={Delete} on:click={() => deleteRunner(runner)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="item-download" src={Download} on:click={() => downloadRunner(runner)}>
</div>
</div>
</div>
{/each}
{/each}
{/if}
{/each}
</div>

3
src/components/SelectionBox.svelte
View file

@ -68,7 +68,6 @@
>
<span>{ $_(items[selectedValue]) }</span>
<!-- svelte-ignore a11y-missing-attribute -->
<img src={Arrow} />
<img src={Arrow} alt="" />
</div>
</div>

39
src/sass/components/selectionList.sass
View file

@ -2,6 +2,45 @@
@mixin themable($theme-name, $theme-map)
body[data-theme=#{$theme-name}]
.list-title
display: inline-flex
align-items: center
background-color: map.get($theme-map, "background2")
width: calc(100% - 32px)
height: 48px
border-radius: 16px
margin: 4px 0
padding: 0 16px
cursor: pointer
&:first-child
margin-top: 16px
&:last-child
margin-bottom: 16px
span
font-size: larger
img
height: 12px
width: 12px
margin: 0 16px 0 auto
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.list-title-open
margin: 16px 0
img
transform: rotate(90deg)
.list-item
display: flex
align-items: center