Garmelon/gedaechtnas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AdSelect and delete repos

Browse source
This commit is contained in:
Joscha 2025-01-28 12:53:27 +01:00
parent 136e736a51
commit ccc41f96d8
3 changed files with 38 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
gdn-app/src/components/Navbar.vue
View file

@ -1,13 +1,31 @@
<script setup lang="ts">
import { RiSettings3Fill } from "@remixicon/vue";
import { RiDeleteBinFill, RiSettings3Fill } from "@remixicon/vue";
import NavbarDropdown from "./NavbarDropdown.vue";
import { useReposStore } from "@/stores/repos";
const repos = useReposStore();
</script>
<template>
<div class="flex justify-between gap-1 bg-black p-2 text-white">
<NavbarDropdown />
<div class="flex gap-1 bg-black p-2 text-white">
<!-- The div is necessary because of the delete button, otherwise I could
just use justify-between -->
<div class="mr-auto overflow-hidden">
<NavbarDropdown />
</div>
<!-- Temporary delete button until I add proper repo settings -->
<div
class="flex items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
v-show="repos.selectedRepo !== undefined"
class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
@click="repos.removeRepo(repos.selectedRepoId)"
>
<RiDeleteBinFill size="16px" class="inline" />
</div>
<!-- Nothing hooked up yet -->
<div
class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
>
<RiSettings3Fill size="16px" class="inline" />
</div>

17
gdn-app/src/components/NavbarDropdown.vue
View file

@ -22,25 +22,33 @@ const { floatingStyles } = useFloating(reference, floating, {
});
function onAddNewRepo() {
repos.addRepo({ id: "test", name: "test" });
const id = crypto.randomUUID();
repos.addRepo({ id, name: id });
console.log(repos.selectedRepo);
open.value = false;
}
function onSelectRepo(id: string) {
repos.selectRepo(id);
open.value = false;
}
</script>
<template>
<!-- Navbar entry -->
<div
ref="reference"
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"
class="relative flex cursor-default whitespace-nowrap rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700"
@click="open = !open"
>
<span v-if="repos.selectedRepo">{{ repos.selectedRepo.name }}</span>
<span v-if="repos.selectedRepo" class="overflow-hidden overflow-ellipsis">{{
repos.selectedRepo.name
}}</span>
<span v-else class="overflow-hidden overflow-ellipsis italic">
no repo selected
</span>
<div>
<div class="text-neutral-400">
<RiArrowDropUpLine v-if="open" class="inline" />
<RiArrowDropDownLine v-else class="inline" />
</div>
@ -63,6 +71,7 @@ function onAddNewRepo() {
<NavbarDropdownEntry
v-for="repo of repos.reposByName"
:class="{ 'font-medium': repo.id === repos.selectedRepoId }"
@click="onSelectRepo(repo.id)"
>{{ repo.name }}</NavbarDropdownEntry
>
<hr v-if="repos.reposByName.length > 0" class="m-1 text-neutral-700" />