106 lines
2.3 KiB
Svelte
106 lines
2.3 KiB
Svelte
<script>
|
|
import {
|
|
deleteVersion,
|
|
launchBlenderVersion,
|
|
toggleFavourite,
|
|
registerVersion
|
|
} from '$lib/library';
|
|
import Button from '$lib/components/Button.svelte';
|
|
import Menu from '$lib/components/Menu.svelte';
|
|
let { version } = $props();
|
|
</script>
|
|
|
|
<div id="card">
|
|
<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={() => deleteVersion(version) && close()}
|
|
onkeydown={(e) =>
|
|
(e.key === 'Enter' || e.key === ' ') && deleteVersion(version) && close()}
|
|
>Delete</button
|
|
>
|
|
<button
|
|
type="button"
|
|
class="menu-item"
|
|
onclick={close}
|
|
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}>Option 2</button
|
|
>
|
|
<button
|
|
type="button"
|
|
class="menu-item"
|
|
onclick={() => registerVersion(version) && close()}
|
|
onkeydown={(e) =>
|
|
(e.key === 'Enter' || e.key === ' ') && registerVersion(version) && 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;
|
|
background-color: var(--white);
|
|
border-radius: 5px;
|
|
background-color: var(--light);
|
|
padding: 1rem;
|
|
}
|
|
.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>
|