fix: code formatting and arrow positioning

noi-techpark · Dec 10, 2024 · f814fad · f814fad
1 parent b275c35
commit f814fad
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 25 deletions.
diff --git a/databrowser/src/components/popover/PopoverCustom.vue b/databrowser/src/components/popover/PopoverCustom.vue
@@ -42,16 +42,18 @@ import { useFloatingUi } from '../utils/useFloatingUi';
 import { computed, ref } from 'vue';
 import PopoverTransition from './PopoverTransition.vue';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     fullScreenWidth?: boolean;
     zIndex?: number;
     hasArrow?: boolean;
+    leftOffset?: number;
   }>(),
   {
     fullScreenWidth: true,
     zIndex: undefined,
     hasArrow: false,
+    leftOffset: undefined,
   }
 );
 
@@ -61,6 +63,7 @@ const [trigger, container, placement] = useFloatingUi({
   placement: 'bottom-start',
   offset: 8,
   arrow,
+  leftOffset: props.leftOffset,
 });
 
 const arrowClasses = computed(() =>

diff --git a/databrowser/src/components/popover/PopoverCustomButton.vue b/databrowser/src/components/popover/PopoverCustomButton.vue
@@ -12,14 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     :class="{
       relative: triggerOnHover,
     }"
-    @click="onPopoverButtonClick"
   >
     <slot :open="open" :close="close"></slot>
     <span
       v-if="triggerOnHover"
       ref="triggerHoverRef"
       class="absolute left-0 top-0 h-full w-full"
-      @click="onTriggerHoverClick()"
+      @click.stop="onTriggerHoverClick()"
       @mouseover="onTriggerMouseHover(open)"
       @mouseleave="onTriggerMouseLeave(close)"
     >
@@ -32,7 +31,7 @@ import { ref } from 'vue';
 import { PopoverButton } from '@headlessui/vue';
 import { useTimeoutFn } from '@vueuse/core';
 
-const props = defineProps<{ disabled?: boolean; triggerOnHover?: boolean }>();
+defineProps<{ disabled?: boolean; triggerOnHover?: boolean }>();
 
 const emit = defineEmits(['triggerClick']);
 
@@ -56,14 +55,6 @@ const onTriggerHoverClick = () => {
   emit('triggerClick');
 };
 
-const onPopoverButtonClick = (e: PointerEvent) => {
-  if (!e.pointerType || !props.triggerOnHover) {
-    return;
-  }
-
-  e.preventDefault();
-};
-
 const {
   isPending: isPopoverButtonClickPending,
   start: startPopoverButtonClick,

diff --git a/databrowser/src/components/utils/useFloatingUi.ts b/databrowser/src/components/utils/useFloatingUi.ts
@@ -17,6 +17,7 @@ export interface UseFloatingUi {
   placement: Placement;
   matchReferenceWidth?: boolean;
   offset?: number;
+  leftOffset?: number;
   arrow?: Ref<any>;
 }
 
@@ -55,8 +56,14 @@ export const useFloatingUi = (
           middleware,
         }).then(({ x, y, placement: currentPlacement, middlewareData }) => {
           // Position tooltip
+          const [staticPlacement, dynamicPlacement] =
+            currentPlacement.split('-');
+
+          const leftOffset =
+            (options.leftOffset || 0) * (dynamicPlacement === 'end' ? 1 : -1);
+
           Object.assign(tooltipEl.style, {
-            left: `${x}px`,
+            left: `${x + leftOffset}px`,
             top: `${y}px`,
           });
 
@@ -66,22 +73,16 @@ export const useFloatingUi = (
           // If arrow element is provided, handle its positioning
           if (middlewareData.arrow != null) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const splittedPlacement = currentPlacement.split('-')[0];
-
-            const { x: tooltipX } = tooltipEl.getBoundingClientRect();
-            const { x: arrowWindowX } = arrowEl.getBoundingClientRect();
-
-            const leftOffset = tooltipX > arrowWindowX ? 5 : -5;
 
             const staticSide = {
               top: 'bottom',
               right: 'left',
               bottom: 'top',
               left: 'right',
-            }[splittedPlacement]!;
+            }[staticPlacement]!;
 
             Object.assign(arrowEl.style, {
-              left: arrowX != null ? `${arrowX + leftOffset}px` : '',
+              left: arrowX != null ? `${arrowX - leftOffset}px` : '',
               top: arrowY != null ? `${arrowY}px` : '',
               right: '',
               bottom: '',

diff --git a/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue b/databrowser/src/domain/datasets/ui/tableView/SortAndFilterHeader.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <div class="flex items-center justify-between gap-1">
     {{ title }}
     <div class="flex items-center justify-end gap-1">
-      <PopoverCustom v-if="isDeprecated" has-arrow>
+      <PopoverCustom v-if="isDeprecated" has-arrow :left-offset="5">
         <template #trigger>
           <PopoverCustomButton class="flex">
             <div class="size-2 rounded-full bg-deprecated"></div>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </template>
       </PopoverCustom>
 
-      <PopoverCustom v-if="isReference" has-arrow>
+      <PopoverCustom v-if="isReference" has-arrow :left-offset="5">
         <template #trigger>
           <PopoverCustomButton class="flex">
             <div class="size-2 rounded-full bg-reference"></div>
@@ -61,8 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 @click="onGoToReference()"
                 >View original dataset ({{ referenceName }})
               </ButtonCustom>
-            </PopoverContent></PopoverCustomPanel
-          >
+            </PopoverContent>
+          </PopoverCustomPanel>
         </template>
       </PopoverCustom>