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

Show mouse controls on hover instead of focus

Browse source 
Saves a click in most scenarios.
This commit is contained in:
Joscha 2025-02-07 22:19:07 +01:00
parent 9ce2169931
commit 32193376bc
1 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,10 @@ const children = computed(() => {
const mayOpen = computed(() => children.value.length > 0); const mayOpen = computed(() => children.value.length > 0);
const open = computed(() => mayOpen.value && ui.openPaths.has(props.path)); const open = computed(() => mayOpen.value && ui.openPaths.has(props.path));
const focused = computed(() => ui.focusPath === props.path); const focused = computed(() => ui.focusPath === props.path);
const hover = ref(false);
const creating = ref(false); const creating = ref(false);
// Ensure we're open if we need to be. // Ensure we're open if we need to be.
@ -77,6 +80,10 @@ function onClick() {
toggleOpen(); toggleOpen();
} }
function onCreateClick() {
creating.value = true;
}
function onChildEditorClose() { function onChildEditorClose() {
creating.value = false; creating.value = false;
} }
@ -89,17 +96,19 @@ function onChildEditorFinish(text: string) {
</script> </script>
<template> <template>
<div class="relative flex flex-col"> <div class="flex flex-col">
<div <div
class="flex min-h-6 pl-1" class="relative flex min-h-6 pl-1"
:class="focused ? ['bg-neutral-200'] : ['hover:bg-neutral-100']" :class="focused ? 'bg-neutral-200' : hover ? 'bg-neutral-100' : ''"
@mouseenter="hover = true"
@mouseleave="hover = false"
@click="onClick" @click="onClick"
> >
<!-- Fold/unfold symbol --> <!-- Fold/unfold symbol -->
<div class="flex h-6 items-center"> <div class="flex h-6 items-center">
<div <div
class="rounded" class="rounded"
:class="focused ? ['hover:bg-neutral-300'] : ['hover:bg-neutral-200']" :class="focused ? 'hover:bg-neutral-300' : 'hover:bg-neutral-200'"
@click.stop="toggleOpen()" @click.stop="toggleOpen()"
> >
<RiArrowDownSLine v-if="open && props.forceOpen" size="16px" class="text-neutral-400" /> <RiArrowDownSLine v-if="open && props.forceOpen" size="16px" class="text-neutral-400" />
@ -115,6 +124,13 @@ function onChildEditorFinish(text: string) {
</div> </div>
<div v-else-if="note" class="px-1 font-light italic">empty</div> <div v-else-if="note" class="px-1 font-light italic">empty</div>
<div v-else class="px-1 font-light italic">note not found</div> <div v-else class="px-1 font-light italic">note not found</div>
<!-- Controls -->
<div v-if="hover" class="absolute right-0 flex h-6 items-center gap-0.5">
<CNoteButton @click.stop="onCreateClick">
<RiStickyNoteAddLine size="16px" />
</CNoteButton>
</div>
</div> </div>
<!-- Children --> <!-- Children -->
@ -136,12 +152,5 @@ function onChildEditorFinish(text: string) {
<CNoteEditor class="flex-1" @close="onChildEditorClose" @finish="onChildEditorFinish" /> <CNoteEditor class="flex-1" @close="onChildEditorClose" @finish="onChildEditorFinish" />
</div> </div>
<!-- Controls -->
<div v-if="focused" class="absolute right-0 flex h-6 items-center gap-0.5">
<CNoteButton @click="creating = true">
<RiStickyNoteAddLine size="16px" />
</CNoteButton>
</div>
</div> </div>
</template> </template>