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>
<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 />
<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>
</template>

View file

@ -32,14 +32,18 @@ function onAddNewRepo() {
<!-- Navbar entry -->
<div
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"
>
<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" />
<RiArrowDropDownLine v-else class="inline" />
<div>
<RiArrowDropUpLine v-if="open" class="inline" />
<RiArrowDropDownLine v-else class="inline" />
</div>
</div>
<!-- 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" />
<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>
</div>
</template>