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> </div>
<!-- Controls --> <!-- Controls -->
<div <div v-if="focused" class="absolute right-0 flex h-6 items-center gap-0.5">
v-if="focused"
class="absolute right-0.5 flex h-6 items-center gap-0.5"
>
<CNoteButton @click="creating = true"> <CNoteButton @click="creating = true">
<RiStickyNoteAddLine size="16px" /> <RiStickyNoteAddLine size="16px" />
</CNoteButton> </CNoteButton>

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

@ -8,36 +8,49 @@ const emit = defineEmits<{
(e: "finish", text: string): void; (e: "finish", text: string): void;
}>(); }>();
const input = useTemplateRef<HTMLInputElement>("input"); const input = useTemplateRef<HTMLTextAreaElement>("input");
const text = ref(""); 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> </script>
<template> <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 --> <!-- Fold/unfold symbol -->
<div class="flex items-center"> <div class="flex h-6 items-center">
<div class="rounded"> <div class="rounded">
<RiAddLine size="16px" /> <RiAddLine size="16px" />
</div> </div>
</div> </div>
<!-- Text --> <!-- Text -->
<input <textarea
ref="input" ref="input"
v-model="text" v-model="text"
type="text" class="z-1 flex-1 resize-none bg-neutral-100 px-1 outline-none"
class="z-1 flex-1 bg-neutral-100"
autofocus autofocus
/> @input="updateTextareaHeight()"
></textarea>
<div class="ml-0.5 flex h-6 items-center">
<CNoteButton @click="emit('finish', text)"> <CNoteButton @click="emit('finish', text)">
<RiCheckLine size="16px" /> <RiCheckLine size="16px" />
</CNoteButton> </CNoteButton>
</div>
<div class="ml-0.5 flex h-6 items-center">
<CNoteButton @click="emit('close')"> <CNoteButton @click="emit('close')">
<RiCloseLine size="16px" /> <RiCloseLine size="16px" />
</CNoteButton> </CNoteButton>
</div> </div>
</div>
</template> </template>