add buttons to note editor

This commit is contained in:
2023-05-12 20:15:41 +02:00
parent 606a1f99d2
commit 1381bc0f29
4 changed files with 34 additions and 16 deletions

View File

@@ -32,19 +32,29 @@ const references = computed<Note[]>(() => {
</script>
<template>
<div class="flex flex-col">
<h1
class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
>
<i
class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
v-if="props.note.isRoot"
></i>
<input
type="text"
class="flex-1 bg-transparent py-1 outline-none"
v-model="noteTitle"
/>
</h1>
<div class="flex items-center mb-2">
<h1
class="flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200 mr-2"
>
<i
class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
v-if="props.note.isRoot"
></i>
<input
type="text"
class="flex-1 bg-transparent py-1 outline-none"
v-model="noteTitle"
/>
</h1>
<div class="btn-group flex items-center">
<button class="btn-sm btn">
<i class="fas fa-fw fa-trash" />
</button>
<button class="btn-sm btn">
<i class="fas fa-fw fa-sitemap" />
</button>
</div>
</div>
<NoteEditor
class="h-100 flex-1 overflow-auto"
:note="activeNote"
@@ -75,3 +85,11 @@ const references = computed<Note[]>(() => {
</div>
</div>
</template>
<style scoped lang="scss">
.btn-group .btn {
@apply border-[1px] border-neutral-200 text-opacity-70;
&:not(:first-child) {
@apply ml-[-1px];
}
}
</style>