Launche on version card + dropdown

This commit is contained in:
valerio
2026-10-19 14:24:23 +02:00
parent 0d375a4474
commit 7c84ff3f74
2 changed files with 56 additions and 2 deletions
+22 -1
View File
@@ -36,7 +36,21 @@
{#each release.links as link, i (link.version)} {#each release.links as link, i (link.version)}
<option value={i} selected={i === linkIndex}>{link.version}</option> <option value={i} selected={i === linkIndex}>{link.version}</option>
{/each} {/each}
</select> </select>
<svg
class="arrow"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="14"
height="14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="6 9 12 15 18 9"></polyline></svg
>
</div> </div>
<div class="progress" class:downloading={downloading || installed}> <div class="progress" class:downloading={downloading || installed}>
@@ -78,6 +92,13 @@
box-sizing: border-box; box-sizing: border-box;
width: 5.5rem; width: 5.5rem;
min-width: 5.5rem; min-width: 5.5rem;
display: flex;
flex-direction: row;
align-items: center;
}
.arrow {
pointer-events: none;
flex-shrink: 0;
} }
.progress { .progress {
flex: 1; flex: 1;
@@ -103,7 +124,7 @@
transition: color 0.3s ease; transition: color 0.3s ease;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
select:hover { .selectVersion:hover {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
} }
select.disabled { select.disabled {
+34 -1
View File
@@ -16,6 +16,7 @@
let { version, selectedVersion } = $props(); let { version, selectedVersion } = $props();
let selected = $derived(version.version === selectedVersion?.version); let selected = $derived(version.version === selectedVersion?.version);
let hovering = $state(false);
async function handleDelete() { async function handleDelete() {
const prompt = await show({ const prompt = await show({
@@ -74,7 +75,20 @@
/> />
</svg> </svg>
</Button> </Button>
{version.version} <div
id="version-tag"
role="button"
tabindex="0"
onkeydown={() => {}}
onmouseenter={() => (hovering = true)}
onmouseleave={() => (hovering = false)}
onclick={async (e) => {
e.stopPropagation();
await launchBlenderVersion(version);
}}
>
<p>{hovering ? 'Launch' : version.version}</p>
</div>
<Menu> <Menu>
{#snippet children({ close })} {#snippet children({ close })}
<MenuItem <MenuItem
@@ -123,4 +137,23 @@
.fav-btn.fav { .fav-btn.fav {
fill: var(--accent); fill: var(--accent);
} }
#version-tag{
cursor: pointer;
border-radius: var(--round);
}
#version-tag p{
padding: .1rem .5rem ;
}
#version-tag:hover{
border-radius: 5px;
background-color: var(--accent);
}
#version-tag:active{
background-color: var(--black);
}
#version-tag:hover p {
color: var(--light);
}
</style> </style>