matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Spice up profile manager

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-24 16:21:24 +01:00
parent 0d1434646b
commit 6394fa9f43
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ConfigSelect.vue
View File

@@ -4,7 +4,7 @@
v-for="(config, index) in config_tabs" v-for="(config, index) in config_tabs"
:key="config" :key="config"
:data-selected="current_tab===config.id" :data-selected="current_tab===config.id"
class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 data-[selected=true]:text-black border-solid border-0 border-b" class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
:class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'" :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()"> @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
<div> <div>

28
src/components/ProfileManager.vue
View File

@@ -27,9 +27,7 @@
<Separator /> <Separator />
<div v-if="filteredProfiles.length === 0"> <div v-if="filteredProfiles.length === 0">
<div class="flex flex-col items-center justify-center h-32"> <div class="flex flex-col items-center justify-center h-32">
<p class="text-sm text-muted-foreground"> <ScrambleText scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground" :text="$t('profiles.not_found')" />
{{ $t('profiles.not_found') }}
</p>
</div> </div>
</div> </div>
<div> <div>
@@ -43,12 +41,22 @@
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span> {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div v-for="profile in tagProfiles" :key="profile.id" class="h-12 flex profile-row"> <div
<button class="flex-1 h-full text-left hover:bg-zinc-900"> v-for="profile in tagProfiles" :key="profile.id"
<FileDigit class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground" /> class="h-12 flex profile-row">
<span>{{ profile.name }}</span> <span class="text-xs text-zinc-600">uID:{{ profile.id }}</span> <button
:data-selected="currentProfile===profile.id"
class="flex-1 h-full text-left data-[selected=true]:font-semibold hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black"
@click="currentProfile=profile.id; profileTitles[profile.id].scramble()">
<FileDigit
:data-selected="currentProfile===profile.id"
class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground data-[selected=true]:text-zinc-600" />
<ScrambleText :ref="el => { profileTitles[profile.id] = el }" :text="profile.name" />
<span class="text-xs text-zinc-600"> uID:{{ profile.id }}</span>
</button> </button>
<button class="h-full hover:bg-zinc-900 aspect-square hidden justify-center items-center delete-button"> <button
:data-selected="currentProfile===profile.id"
class="h-full hover:bg-zinc-900 aspect-square hidden justify-center items-center delete-button data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black">
<Trash class="h-4 w-4 text-muted-foreground" /> <Trash class="h-4 w-4 text-muted-foreground" />
</button> </button>
</div> </div>
@@ -70,6 +78,7 @@ import {
CollapsibleContent, CollapsibleContent,
CollapsibleTrigger, CollapsibleTrigger,
} from '@/components/ui/collapsible' } from '@/components/ui/collapsible'
import ScrambleText from '@/components/effects/ScrambleText.vue'
const maxProfiles = 32 const maxProfiles = 32
@@ -77,6 +86,9 @@ const profiles = ref([])
const filter = ref('') const filter = ref('')
const collapse = ref({}) const collapse = ref({})
const currentProfile = ref(null)
const profileTitles = ref({})
const filteredProfiles = computed(() => { const filteredProfiles = computed(() => {
if (!filter.value) { if (!filter.value) {
return profiles.value return profiles.value