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

Resize note creator input to fit contents

Browse source
This commit is contained in:
Joscha 2025-02-07 14:06:34 +01:00
parent cda2ddee32
commit 5fa8a0466e
2 changed files with 28 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
gdn-app/src/components/CNote.vue
View file

@ -126,10 +126,7 @@ function onClick() {
</div>
<!-- Controls -->
<div
v-if="focused"
class="absolute right-0.5 flex h-6 items-center gap-0.5"
>
<div v-if="focused" class="absolute right-0 flex h-6 items-center gap-0.5">
<CNoteButton @click="creating = true">
<RiStickyNoteAddLine size="16px" />
</CNoteButton>

41
gdn-app/src/components/CNoteCreator.vue
View file

@ -8,36 +8,49 @@ const emit = defineEmits<{
(e: "finish", text: string): void;
}>();
const input = useTemplateRef<HTMLInputElement>("input");
const input = useTemplateRef<HTMLTextAreaElement>("input");
const text = ref("");
onMounted(() => input.value?.focus());
onMounted(() => {
input.value?.focus();
updateTextareaHeight();
});
function updateTextareaHeight() {
if (!input.value) return;
input.value.style.height = "0px";
input.value.style.height = `${input.value.scrollHeight}px`;
}
</script>
<template>
<div class="flex flex-row items-center gap-1 pl-1 pr-0.5">
<div class="flex flex-row items-start pl-1">
<!-- Fold/unfold symbol -->
<div class="flex items-center">
<div class="flex h-6 items-center">
<div class="rounded">
<RiAddLine size="16px" />
</div>
</div>
<!-- Text -->
<input
<textarea
ref="input"
v-model="text"
type="text"
class="z-1 flex-1 bg-neutral-100"
class="z-1 flex-1 resize-none bg-neutral-100 px-1 outline-none"
autofocus
/>
@input="updateTextareaHeight()"
></textarea>
<CNoteButton @click="emit('finish', text)">
<RiCheckLine size="16px" />
</CNoteButton>
<div class="ml-0.5 flex h-6 items-center">
<CNoteButton @click="emit('finish', text)">
<RiCheckLine size="16px" />
</CNoteButton>
</div>
<CNoteButton @click="emit('close')">
<RiCloseLine size="16px" />
</CNoteButton>
<div class="ml-0.5 flex h-6 items-center">
<CNoteButton @click="emit('close')">
<RiCloseLine size="16px" />
</CNoteButton>
</div>
</div>
</template>