feat: multi-profile progress
This commit is contained in:
@ -6,58 +6,82 @@ const prf = usePrfStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-4 flex flex-wrap align-middle gap-4">
|
||||
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
|
||||
<Button
|
||||
:disabled="prf.list.length > 0"
|
||||
label="O.N.G.E.K.I. profile"
|
||||
icon="pi pi-plus"
|
||||
class="ongeki-button"
|
||||
class="ongeki-button profile-button"
|
||||
@click="() => prf.create('ongeki')"
|
||||
/>
|
||||
<Button
|
||||
:disabled="prf.list.length > 0"
|
||||
label="CHUNITHM profile"
|
||||
icon="pi pi-plus"
|
||||
class="chunithm-button"
|
||||
class="chunithm-button profile-button"
|
||||
@click="() => prf.create('chunithm')"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
|
||||
<div v-for="p in prf.list">
|
||||
<Button
|
||||
:disabled="
|
||||
prf.current?.game === p.game && prf.current?.name === p.name
|
||||
"
|
||||
:label="p.name"
|
||||
:class="
|
||||
(p.game === 'chunithm'
|
||||
? 'chunithm-button'
|
||||
: 'ongeki-button') +
|
||||
' ' +
|
||||
'self-center grow'
|
||||
"
|
||||
@click="prf.switchTo(p.game, p.name)"
|
||||
/>
|
||||
<div class="flex flex-row flex-wrap align-middle gap-2">
|
||||
<Button
|
||||
:disabled="
|
||||
prf.current?.game === p.game &&
|
||||
prf.current?.name === p.name
|
||||
"
|
||||
:label="p.name"
|
||||
:class="
|
||||
(p.game === 'chunithm'
|
||||
? 'chunithm-button'
|
||||
: 'ongeki-button') +
|
||||
' ' +
|
||||
'self-center profile-button'
|
||||
"
|
||||
@click="prf.switchTo(p.game, p.name)"
|
||||
/>
|
||||
<Button
|
||||
rounded
|
||||
icon="pi pi-trash"
|
||||
severity="danger"
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
class="self-center ml-2"
|
||||
style="width: 2rem; height: 2rem"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Button
|
||||
rounded
|
||||
icon="pi pi-clone"
|
||||
severity="warn"
|
||||
aria-label="duplicate"
|
||||
size="small"
|
||||
class="self-center"
|
||||
style="width: 2rem; height: 2rem"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Button
|
||||
rounded
|
||||
icon="pi pi-pencil"
|
||||
severity="help"
|
||||
aria-label="duplicate"
|
||||
size="small"
|
||||
class="self-center"
|
||||
style="width: 2rem; height: 2rem"
|
||||
:disabled="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-button {
|
||||
background-color: var(--p-green-400);
|
||||
border-color: var(--p-green-400);
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.create-button:hover,
|
||||
.create-button:active {
|
||||
background-color: var(--p-green-300) !important;
|
||||
border-color: var(--p-green-300) !important;
|
||||
.profile-button {
|
||||
width: 14em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ongeki-button {
|
||||
background-color: var(--p-pink-400);
|
||||
border-color: var(--p-pink-400);
|
||||
width: 14em;
|
||||
}
|
||||
|
||||
.ongeki-button:hover,
|
||||
@ -69,7 +93,6 @@ const prf = usePrfStore();
|
||||
.chunithm-button {
|
||||
background-color: var(--p-yellow-400);
|
||||
border-color: var(--p-yellow-400);
|
||||
width: 14em;
|
||||
}
|
||||
.chunithm-button:hover,
|
||||
.chunithm-button:active {
|
||||
|
Reference in New Issue
Block a user