Abbreviate selected repo name if too long
This commit is contained in:
parent
45d97388ee
commit
4d798dd2e2
2 changed files with 12 additions and 8 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue