mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-21 21:33:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix label name length (#822)

Browse Source 
* Fix label name length

The labels name were shortened to the max length of 20 characters and not taking advantage of extra space. And it was difficult to distinguish between labels with the same prefix.

* run task ui:fix

* fix label selector when creating an item

* feat: sort styles for line wrapping

---------

Co-authored-by: Tonya <tonya@tokia.dev>
This commit is contained in:
Natalí Paura
2025-08-21 15:52:10 -03:00
committed by GitHub
parent 900604661b
commit 8c87cda9ab
2 changed files with 12 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Label/Chip.vue
View File

@@ -42,6 +42,6 @@
<MdiArrowUp class="hidden group-hover/label-chip:block" /> <MdiArrowUp class="hidden group-hover/label-chip:block" />
</div> </div>
</div> </div>
{{ label.name.length > 20 ? `${label.name.substring(0, 20)}...` : label.name }} {{ label.name }}
</NuxtLink> </NuxtLink>
</template> </template>

29
frontend/components/Label/Selector.vue
View File

@@ -7,16 +7,16 @@
<TagsInput <TagsInput
v-model="modelValue" v-model="modelValue"
class="w-full gap-0 px-0" class="w-full gap-0 px-0"
:display-value="v => shortenedLabels.find(l => l.id === v)?.name ?? 'Loading...'" :display-value="v => props.labels.find(l => l.id === v)?.name ?? 'Loading...'"
> >
<div class="flex flex-wrap items-center gap-2 px-3"> <div class="flex flex-wrap items-center gap-2 overflow-hidden px-3">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item"> <TagsInputItem v-for="item in modelValue" :key="item" :value="item" class="h-auto overflow-hidden text-wrap">
<span <span
v-if="shortenedLabels.find(l => l.id === item)?.color" v-if="props.labels.find(l => l.id === item)?.color"
class="ml-2 inline-block size-4 rounded-full" class="ml-2 size-4 shrink-0 rounded-full"
:style="{ backgroundColor: shortenedLabels.find(l => l.id === item)?.color }" :style="{ backgroundColor: props.labels.find(l => l.id === item)?.color }"
/> />
<TagsInputItemText /> <TagsInputItemText class="py-0.5" />
<TagsInputItemDelete /> <TagsInputItemDelete />
</TagsInputItem> </TagsInputItem>
</div> </div>
@@ -61,9 +61,9 @@
" "
> >
<span <span
class="mr-2 inline-block size-4 rounded-full align-middle" class="mr-2 size-4 shrink-0 rounded-full align-middle"
:class="{ border: shortenedLabels.find(l => l.id === label.value)?.color }" :class="{ border: props.labels.find(l => l.id === label.value)?.color }"
:style="{ backgroundColor: shortenedLabels.find(l => l.id === label.value)?.color }" :style="{ backgroundColor: props.labels.find(l => l.id === label.value)?.color }"
/> />
{{ label.label }} {{ label.label }}
</CommandItem> </CommandItem>
@@ -114,16 +114,9 @@
const open = ref(false); const open = ref(false);
const searchTerm = ref(""); const searchTerm = ref("");
const shortenedLabels = computed(() => {
return props.labels.map(l => ({
...l,
name: l.name.length > 20 ? `${l.name.substring(0, 20)}...` : l.name,
}));
});
const filteredLabels = computed(() => { const filteredLabels = computed(() => {
const filtered = fuzzysort const filtered = fuzzysort
.go(searchTerm.value, shortenedLabels.value, { key: "name", all: true }) .go(searchTerm.value, props.labels, { key: "name", all: true })
.map(l => ({ .map(l => ({
value: l.obj.id, value: l.obj.id,
label: l.obj.name, label: l.obj.name,