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

Hide mouse buttons using visibility: hidden

Browse source
This commit is contained in:
Joscha 2025-02-11 19:28:39 +01:00
parent 7a58ac37f7
commit 4b6732ccd0
2 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -176,14 +176,14 @@ function onCreateEditorFinish(text: string): void {
<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 --> <!-- Controls -->
<div v-if="hover || pinned" class="absolute right-0 flex h-6 items-center gap-0.5"> <div class="absolute right-0 flex h-6 items-center gap-0.5">
<CNoteButton v-if="hover" @click.stop="onEditButtonClick"> <CNoteButton :visible="hover" @click.stop="onEditButtonClick">
<RiEditLine size="16px" /> <RiEditLine size="16px" />
</CNoteButton> </CNoteButton>
<CNoteButton v-if="hover" @click.stop="onCreateButtonClick"> <CNoteButton :visible="hover" @click.stop="onCreateButtonClick">
<RiStickyNoteAddLine size="16px" /> <RiStickyNoteAddLine size="16px" />
</CNoteButton> </CNoteButton>
<CNoteButton :inverted="pinned" @click.stop="onPinButtonClick"> <CNoteButton :visible="hover || pinned" :inverted="pinned" @click.stop="onPinButtonClick">
<RiPushpinFill v-if="pinned" size="16px" /> <RiPushpinFill v-if="pinned" size="16px" />
<RiPushpinLine v-else size="16px" /> <RiPushpinLine v-else size="16px" />
</CNoteButton> </CNoteButton>

13
gdn-app/src/components/CNoteButton.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ const { visible, inverted = false } = defineProps<{
visible: boolean;
inverted?: boolean; inverted?: boolean;
}>(); }>();
</script> </script>
@ -7,11 +8,11 @@ const props = defineProps<{
<template> <template>
<div <div
class="flex select-none items-center rounded-sm border p-0.5 transition hover:bg-neutral-200 active:scale-95" class="flex select-none items-center rounded-sm border p-0.5 transition hover:bg-neutral-200 active:scale-95"
:class=" :class="{
props.inverted 'bg-white text-black': !inverted,
? 'border-black bg-black text-white hover:bg-neutral-600' 'border-black bg-black text-white hover:bg-neutral-600': inverted,
: 'bg-white text-black' hidden: !visible,
" }"
> >
<slot></slot> <slot></slot>
</div> </div>