145 lines
3.1 KiB
Svelte
145 lines
3.1 KiB
Svelte
<script>
|
|
import Popup from '$lib/components/Popup.svelte';
|
|
import {
|
|
deleteVersion,
|
|
launchBlenderVersion,
|
|
toggleFavourite,
|
|
registerVersion,
|
|
selectVersion
|
|
} from '$lib/library';
|
|
import Button from '$lib/components/Button.svelte';
|
|
import Menu from '$lib/components/Menu.svelte';
|
|
import { show } from '$lib/components/Dialog.svelte';
|
|
|
|
let { version, selectedVersion } = $props();
|
|
let popup = $state();
|
|
|
|
let selected = $derived(version.version === selectedVersion?.version);
|
|
|
|
async function handleDelete() {
|
|
const prompt = await show({
|
|
title: 'Delete',
|
|
message: `This will remove Blender ${version.version} and all associated files from your system.`,
|
|
buttons: ['Cancel', 'Continue'],
|
|
type: 'warning'
|
|
});
|
|
if (prompt == 'Continue') {
|
|
deleteVersion(version);
|
|
}
|
|
}
|
|
|
|
async function handleDefault() {
|
|
const prompt = await show({
|
|
title: 'Set as Default',
|
|
message: `This will make Blender ${version.version} the default version on your system.`,
|
|
buttons: ['Cancel', 'Continue'],
|
|
type: 'info'
|
|
});
|
|
if (prompt == 'Continue') {
|
|
popup.pop(1500);
|
|
registerVersion(version);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Popup bind:this={popup} content="Version {version.version} is now the default on your system"
|
|
></Popup>
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
onkeydown={() => {}}
|
|
onclick={async () => {
|
|
await selectVersion(version);
|
|
}}
|
|
id="card"
|
|
class:selected
|
|
>
|
|
<div class="row">
|
|
{version.version}
|
|
<Button style="iconbutton" onclick={() => toggleFavourite(version)}
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
class="fav-btn {version.favourite ? 'fav' : ''}"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
<div class="row">
|
|
<Button onclick={() => launchBlenderVersion(version)}>Launch</Button>
|
|
<Menu>
|
|
{#snippet children({ close })}
|
|
<button
|
|
type="button"
|
|
class="menu-item"
|
|
onclick={async () => {
|
|
await handleDelete();
|
|
close();
|
|
}}>Delete</button
|
|
>
|
|
<button
|
|
type="button"
|
|
class="menu-item"
|
|
onclick={async () => {
|
|
await handleDefault();
|
|
close();
|
|
}}>Default</button
|
|
>
|
|
{/snippet}
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
aspect-ratio: 1 / 0.7;
|
|
width: 100%;
|
|
min-width: 170px;
|
|
max-width: 200px;
|
|
border-radius: 5px;
|
|
background-color: var(--light);
|
|
padding: 1rem;
|
|
}
|
|
#card.selected {
|
|
background-color: var(--light-accent);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
#card:hover {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
.fav-btn:hover {
|
|
fill: var(--accent);
|
|
}
|
|
.fav-btn.fav {
|
|
fill: var(--accent);
|
|
}
|
|
.menu-item {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
font-family: var(--font);
|
|
font-size: 1rem;
|
|
color: var(--black);
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
.menu-item:hover {
|
|
background-color: var(--light-accent);
|
|
}
|
|
</style>
|