diff --git a/gdn-app/src/components/CNote.vue b/gdn-app/src/components/CNote.vue index 93efbd0..ea8497b 100644 --- a/gdn-app/src/components/CNote.vue +++ b/gdn-app/src/components/CNote.vue @@ -6,6 +6,7 @@ import { RiAddLine, RiArrowDownSLine, RiArrowRightSLine, + RiEditLine, RiStickyNoteAddLine, } from "@remixicon/vue"; import { computed, ref, watchEffect } from "vue"; @@ -41,8 +42,10 @@ const mayOpen = computed(() => children.value.length > 0); const open = computed(() => mayOpen.value && ui.openPaths.has(props.path)); const focused = computed(() => ui.focusPath === props.path); -const hover = ref(false); +const hover = computed(() => hovering.value && !editing.value); +const hovering = ref(false); +const editing = ref(false); const creating = ref(false); // Ensure we're open if we need to be. @@ -80,18 +83,32 @@ function onClick() { toggleOpen(); } -function onCreateClick() { +function onEditButtonClick() { + focusOnThis(); + editing.value = true; +} + +function onEditEditorClose() { + editing.value = false; +} + +function onEditEditorFinish(text: string) { + if (note.value) note.value.text = text; + onEditEditorClose(); +} + +function onCreateButtonClick() { creating.value = true; } -function onChildEditorClose() { +function onCreateEditorClose() { creating.value = false; } -function onChildEditorFinish(text: string) { +function onCreateEditorFinish(text: string) { notes.appendNewChildNote(props.noteId, text); ui.focusPath = pathAppend(props.path, children.value.length - 1); - onChildEditorClose(); + onCreateEditorClose(); } @@ -100,8 +117,8 @@ function onChildEditorFinish(text: string) {
@@ -119,7 +136,14 @@ function onChildEditorFinish(text: string) {
-
+ +
{{ note.text }}
empty
@@ -127,7 +151,10 @@ function onChildEditorFinish(text: string) {
- + + + +
@@ -150,7 +177,7 @@ function onChildEditorFinish(text: string) {
- + diff --git a/gdn-app/src/components/CNoteEditor.vue b/gdn-app/src/components/CNoteEditor.vue index 2b47ae2..d9cb76c 100644 --- a/gdn-app/src/components/CNoteEditor.vue +++ b/gdn-app/src/components/CNoteEditor.vue @@ -3,13 +3,17 @@ import { RiCheckLine, RiCloseLine } from "@remixicon/vue"; import { onMounted, ref, useTemplateRef } from "vue"; import CNoteButton from "./CNoteButton.vue"; +const props = defineProps<{ + initialText?: string; +}>(); + const emit = defineEmits<{ (e: "close"): void; (e: "finish", text: string): void; }>(); const textarea = useTemplateRef("textarea"); -const text = ref(""); +const text = ref(props.initialText || ""); onMounted(() => { textarea.value?.focus(); @@ -48,16 +52,17 @@ function onKeyPress(ev: KeyboardEvent) { autofocus @input="onInput" @keypress="onKeyPress" + @click.stop >
- +
- +