remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (stacked notes) breadcrumb on the right too.

Browse Source
This commit is contained in:
Julien Calixte
2021-04-04 10:17:43 +02:00
parent 24668fb23d
commit 118f6e568b
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/hooks/useNoteOverlay.hook.ts
View File

@@ -2,12 +2,14 @@ import { computed, onMounted, ref } from '@vue/runtime-core'
import { NOTE_WIDTH } from '@/constants/note-width' import { NOTE_WIDTH } from '@/constants/note-width'
import { useOverlay } from '@/hooks/useOverlay.hook' import { useOverlay } from '@/hooks/useOverlay.hook'
import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
const BOOKMARK_WIDTH = 2 const BOOKMARK_WIDTH = 2
export const useNoteOverlay = (className: string, index: number) => { export const useNoteOverlay = (className: string, index: number) => {
const { x, y, isMobile } = useOverlay() const { x, y, isMobile } = useOverlay()
const noteHeight = ref(0) const noteHeight = ref(0)
const displayNoteOverlay = computed(() => { const displayNoteOverlay = computed(() => {
if (isMobile.value) { if (isMobile.value) {
return y.value > index * noteHeight.value return y.value > index * noteHeight.value
@@ -17,6 +19,7 @@ export const useNoteOverlay = (className: string, index: number) => {
}) })
onMounted(() => { onMounted(() => {
const { stackedNotes } = useQueryStackedNotes()
const noteElement = document.querySelector( const noteElement = document.querySelector(
`.${className}` `.${className}`
) as HTMLElement | null ) as HTMLElement | null
@@ -30,6 +33,10 @@ export const useNoteOverlay = (className: string, index: number) => {
noteElement.style.top = `0` noteElement.style.top = `0`
} else { } else {
noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem` noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
noteElement.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
.length -
index) *
BOOKMARK_WIDTH}rem)`
} }
}) })