fix(navbar): invert tooltip direction when in bottom mode

dvcol · dvcol · commit 171dbd21ae75 · 2024-10-10T02:52:09.000+02:00
diff --git a/src/components/AppComponent.vue b/src/components/AppComponent.vue
@@ -79,7 +79,11 @@ const onBack = () => {
             <template v-if="Component" #drawer="{ parentElement }">
               <Transition name="scale" mode="out-in">
                 <KeepAlive>
-                  <component :is="Component" :parent-element="parentElement" />
+                  <component
+                    :is="Component"
+                    :parent-element="parentElement"
+                    :reverse="reverse"
+                  />
                 </KeepAlive>
               </Transition>
             </template>
diff --git a/src/components/common/buttons/ButtonLinkExternal.vue b/src/components/common/buttons/ButtonLinkExternal.vue
@@ -2,6 +2,8 @@
 import { NButton, NIcon, NTooltip } from 'naive-ui';
 import { type Component, type PropType, ref } from 'vue';
 
+import type { TooltipProps } from 'naive-ui';
+
 import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
 
 defineOptions({
@@ -31,6 +33,11 @@ defineProps({
     required: false,
     default: false,
   },
+  placement: {
+    type: String as PropType<TooltipProps['placement']>,
+    required: false,
+    default: 'bottom',
+  },
 });
 
 const anchor = ref();
@@ -41,7 +48,7 @@ const anchor = ref();
     class="button-link-external-tooltip"
     :disabled="disabled || !label || !href"
     :show-arrow="false"
-    placement="bottom"
+    :placement="placement"
     :delay="300"
     trigger="hover"
     :to="anchor"
diff --git a/src/components/common/navbar/NavbarPageSizeSelect.vue b/src/components/common/navbar/NavbarPageSizeSelect.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { NIcon, NSelect, NTooltip } from 'naive-ui';
 
-import { computed, defineProps, onMounted, ref, toRefs, watch } from 'vue';
+import { computed, defineProps, onMounted, type PropType, ref, toRefs, watch } from 'vue';
+
+import type { TooltipProps } from 'naive-ui';
 
 import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
 import IconPage from '~/components/icons/IconPage.vue';
@@ -25,6 +27,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  placement: {
+    type: String as PropType<TooltipProps['placement']>,
+    required: false,
+    default: 'bottom',
+  },
 });
 
 const emit = defineEmits<{
@@ -48,7 +55,7 @@ const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPag
     class="page-size-tooltip"
     :disabled="open"
     :show-arrow="false"
-    placement="bottom"
+    :placement="placement"
     :delay="300"
     trigger="hover"
     :to="parentElement"
diff --git a/src/components/views/calendar/CalendarNavbar.vue b/src/components/views/calendar/CalendarNavbar.vue
@@ -14,11 +14,16 @@ import { useCalendarStore, useCalendarStoreRefs } from '~/stores/data/calendar.s
 import { useI18n } from '~/utils/i18n.utils';
 import { useDebouncedSearch } from '~/utils/store.utils';
 
-defineProps({
+const { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const i18n = useI18n('navbar', 'calendar');
@@ -46,6 +51,8 @@ const external = computed(() => {
   return ResolveExternalLinks.trakt.calendar();
 });
 
+const placement = computed(() => (reverse ? 'top' : 'bottom'));
+
 const open = ref(false);
 </script>
 
@@ -58,7 +65,7 @@ const open = ref(false);
       type="date"
       :to="parentElement"
       :disabled="loading"
-      placement="bottom"
+      :placement="placement"
       update-value-on-close
       close-on-select
       clearable
@@ -70,7 +77,7 @@ const open = ref(false);
     <NTooltip
       class="calendar-tooltip"
       :show-arrow="false"
-      placement="bottom"
+      :placement="placement"
       :delay="100"
       trigger="focus"
       :to="parentElement"
@@ -90,7 +97,11 @@ const open = ref(false);
         </NInput>
       </template>
     </NTooltip>
-    <ButtonLinkExternal :href="external" :label="i18n('calendar', 'common', 'link')" />
+    <ButtonLinkExternal
+      :href="external"
+      :label="i18n('calendar', 'common', 'link')"
+      :placement="placement"
+    />
   </NFlex>
 </template>
 
diff --git a/src/components/views/history/HistoryNavbar.vue b/src/components/views/history/HistoryNavbar.vue
@@ -33,11 +33,16 @@ const external = computed(() =>
   }),
 );
 
-defineProps({
+const { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const pickerValues = computed<[number, number] | null>(() => {
@@ -51,6 +56,7 @@ const onDateChange = debounce((values?: [number, number]) => {
   setHistoryRange({ start: new Date(start), end: new Date(end) });
 }, 350);
 
+const placement = computed(() => (reverse ? 'top' : 'bottom'));
 const open = ref(false);
 </script>
 
@@ -62,7 +68,7 @@ const open = ref(false);
       type="daterange"
       :to="parentElement"
       :default-value="[Date.now(), Date.now()]"
-      placement="bottom"
+      :placement="placement"
       update-value-on-close
       close-on-select
       clearable
@@ -90,8 +96,13 @@ const open = ref(false);
       v-model:page-size="pageSize"
       :parent-element="parentElement"
       :disabled="loading"
+      :placement="placement"
+    />
+    <ButtonLinkExternal
+      :href="external"
+      :label="i18n('history', 'common', 'link')"
+      :placement="placement"
     />
-    <ButtonLinkExternal :href="external" :label="i18n('history', 'common', 'link')" />
   </NFlex>
 </template>
 
diff --git a/src/components/views/releases/ReleasesNavbar.vue b/src/components/views/releases/ReleasesNavbar.vue
@@ -10,11 +10,16 @@ import { useReleasesStore, useReleasesStoreRefs } from '~/stores/data/releases.s
 import { useI18n } from '~/utils/i18n.utils';
 import { useActiveAndDocumentVisible } from '~/utils/store.utils';
 
-defineProps({
+const { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const i18n = useI18n('navbar', 'releases');
@@ -46,6 +51,7 @@ const regionOptions = computed<SelectOption[]>(() =>
   })),
 );
 
+const placement = computed(() => (reverse ? 'top' : 'bottom'));
 const open = ref(false);
 
 onActivated(() => fetchRegions());
@@ -63,6 +69,7 @@ useActiveAndDocumentVisible({
       :options="typesOptions"
       :to="parentElement"
       :disabled="loading"
+      :placement="placement"
     />
     <NDatePicker
       v-model:show="open"
@@ -71,7 +78,7 @@ useActiveAndDocumentVisible({
       type="date"
       :to="parentElement"
       :disabled="loading"
-      placement="bottom"
+      :placement="placement"
       update-value-on-close
       close-on-select
       clearable
diff --git a/src/components/views/search/SearchNavbar.vue b/src/components/views/search/SearchNavbar.vue
@@ -62,11 +62,16 @@ const historyOptions = computed(() =>
   filteredHistory.value.map(value => ({ value, label: value })),
 );
 
-defineProps({
+const { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const selectedValues = computed({
@@ -160,6 +165,8 @@ const inputRef = ref();
 
 const route = useRoute();
 
+const placement = computed(() => (reverse ? 'top' : 'bottom'));
+
 onActivated(() => {
   if (!search.value) inputRef.value?.focus();
   if (typeof route?.query?.search === 'string') search.value = route.query.search;
@@ -177,6 +184,7 @@ onActivated(() => {
       :render-label="renderLabel"
       :max-tag-count="1"
       :clearable="false"
+      :placement="placement"
       :ellipsis-tag-popover-props="{ disabled: true }"
       multiple
     >
@@ -188,7 +196,7 @@ onActivated(() => {
     <NTooltip
       class="search-tooltip"
       :class="{ active: tooltipHover }"
-      placement="bottom"
+      :placement="placement"
       trigger="focus"
       :show-arrow="false"
       :disabled="!query"
@@ -230,8 +238,13 @@ onActivated(() => {
       v-model:page-size="pageSize"
       :parent-element="parentElement"
       :disabled="loading"
+      :placement="placement"
+    />
+    <ButtonLinkExternal
+      :href="external"
+      :label="i18n('search', 'common', 'link')"
+      :placement="placement"
     />
-    <ButtonLinkExternal :href="external" :label="i18n('search', 'common', 'link')" />
 
     <NSwitch
       v-if="false"
diff --git a/src/components/views/watchlist/WatchlistNavbar.vue b/src/components/views/watchlist/WatchlistNavbar.vue
@@ -71,13 +71,20 @@ const selectValue = computed({
 
 const debouncedSearch = useDebouncedSearch(searchList);
 
-defineProps({
+const { reverse } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
+const placement = computed(() => (reverse ? 'top' : 'bottom'));
+
 watchUserChange({
   fetch: fetchLists,
   userChange: ({ active, authenticated }) => {
@@ -117,6 +124,7 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
       :render-label="renderLabel"
       :render-tag="renderTag"
       filterable
+      :placement="placement"
     >
       <template #arrow>
         <NIcon :component="open ? IconLoop : selectedIcon" />
@@ -137,8 +145,13 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
       v-model:page-size="pageSize"
       :parent-element="parentElement"
       :disabled="listLoading"
+      :placement="placement"
+    />
+    <ButtonLinkExternal
+      :href="external"
+      :label="i18n('list', 'common', 'link')"
+      :placement="placement"
     />
-    <ButtonLinkExternal :href="external" :label="i18n('list', 'common', 'link')" />
   </NFlex>
 </template>
 
