Abbreviate selected repo name if too long

This commit is contained in:
Joscha 2025-01-28 02:30:55 +01:00
parent 45d97388ee
commit 4d798dd2e2
2 changed files with 12 additions and 8 deletions

View file

@ -4,12 +4,12 @@ import NavbarDropdown from "./NavbarDropdown.vue";
</script> </script>
<template> <template>
<div class="flex justify-between bg-black p-2 text-white"> <div class="flex justify-between gap-1 bg-black p-2 text-white">
<NavbarDropdown /> <NavbarDropdown />
<div <div
class="flex items-center rounded-md bg-neutral-800 px-1 hover:bg-neutral-700 active:bg-neutral-500" class="flex items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
> >
<RiSettings3Fill class="h-4" /> <RiSettings3Fill size="16px" class="inline" />
</div> </div>
</div> </div>
</template> </template>

View file

@ -32,14 +32,18 @@ function onAddNewRepo() {
<!-- Navbar entry --> <!-- Navbar entry -->
<div <div
ref="reference" ref="reference"
class="relative cursor-default rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700 active:bg-neutral-500" class="relative flex flex-shrink cursor-default overflow-hidden whitespace-nowrap rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700 active:bg-neutral-500"
@click="open = !open" @click="open = !open"
> >
<span v-if="repos.selectedRepo">{{ repos.selectedRepo.name }}</span> <span v-if="repos.selectedRepo">{{ repos.selectedRepo.name }}</span>
<span v-else class="italic">no repo selected</span> <span v-else class="overflow-hidden overflow-ellipsis italic">
no repo selected
</span>
<RiArrowDropUpLine v-if="open" class="inline" /> <div>
<RiArrowDropDownLine v-else class="inline" /> <RiArrowDropUpLine v-if="open" class="inline" />
<RiArrowDropDownLine v-else class="inline" />
</div>
</div> </div>
<!-- Close dropdown when clicking outside it --> <!-- Close dropdown when clicking outside it -->
@ -63,7 +67,7 @@ function onAddNewRepo() {
> >
<hr v-if="repos.reposByName.length > 0" class="m-1 text-neutral-700" /> <hr v-if="repos.reposByName.length > 0" class="m-1 text-neutral-700" />
<NavbarDropdownEntry class="italic" @click="onAddNewRepo"> <NavbarDropdownEntry class="italic" @click="onAddNewRepo">
<RiAddLine class="-ml-2 inline h-4" />add new repo <RiAddLine size="16px" class="-ml-1 inline" /> add new repo
</NavbarDropdownEntry> </NavbarDropdownEntry>
</div> </div>
</template> </template>