fix: config not working, wrong tooltip position

CatsJuice · Jul 22, 2023 · be0ee53 · be0ee53
1 parent 5f9f0e1
commit be0ee53
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/components/SvgCanvas.vue b/src/components/SvgCanvas.vue
@@ -73,6 +73,7 @@ const brushworkLines = computed(() => lines.value.map((line) => {
 
 watch([
   () => props.replayOptions,
+  () => props.drawOptions,
   () => props.width,
   () => props.height,
 ], submitSvg, { deep: true })

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -74,7 +74,7 @@ function onShare(e: MouseEvent) {
   const url = createShareUrl(svgRef.value?.lines, { drawOptions, replayOptions, brushOptions, width: width.value, height: height.value })
   copy(url)
   const target = e.target as HTMLElement
-  createToast(target, 'Share link copied!')
+  createToast(target, 'Share link copied!', { position: 'top' })
 }
 
 function debugPane() {

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -50,11 +50,13 @@ html {
   content: "";
   display: block;
   position: absolute;
-  bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border: 0.25rem solid transparent;
-  border-bottom-color: #222;
+}
+.toast--top::after {
+  top: 100%;
+  border-top-color: #222;
 }
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
@@ -15,7 +15,11 @@ export function createToast(
   toast.style.position = 'fixed'
   toast.style.zIndex = '999'
   toast.style.left = `${rect.left + rect.width / 2}px`
-  toast.style.top = `${rect.bottom + 10}px`
+  if (options?.position === 'top')
+    toast.style.bottom = `${window.innerHeight - rect.top + 10}px`
+  else if (options?.position === 'bottom')
+    toast.style.top = `${rect.bottom + 10}px`
+
   toast.style.transform = 'translateX(-50%)'
   toast.style.opacity = '1'
   toast.style.transition = 'opacity 0.3s ease'