diff --git a/apps/web/src/components/JalaliDateInput.vue b/apps/web/src/components/JalaliDateInput.vue index 609568b..d34fcbd 100644 --- a/apps/web/src/components/JalaliDateInput.vue +++ b/apps/web/src/components/JalaliDateInput.vue @@ -360,7 +360,7 @@ function place() { function liftAboveOverlays() { let z = 120; - for (const el of document.querySelectorAll('.ant-modal-wrap, .ant-drawer, .ant-popover')) { + for (const el of document.querySelectorAll('.ant-modal-wrap, .ant-drawer, .ant-popover, [data-lead-filter]')) { const zi = Number.parseInt(window.getComputedStyle(el).zIndex, 10); if (Number.isFinite(zi)) z = Math.max(z, zi + 20); } diff --git a/apps/web/src/views/LeadsView.vue b/apps/web/src/views/LeadsView.vue index 249761a..6ee10ac 100644 --- a/apps/web/src/views/LeadsView.vue +++ b/apps/web/src/views/LeadsView.vue @@ -22,7 +22,6 @@ import { Modal, Modal as AModal, Pagination as APagination, - Popover as APopover, RadioButton as ARadioButton, RadioGroup as ARadioGroup, Row as ARow, @@ -340,6 +339,20 @@ function toggleFilterSection(name: NonNullable) { const filterAnchor = ref(null); const filterPopoverMaxHeight = ref('min(70vh, 32rem)'); +const filterPanelStyle = computed(() => ({ + position: 'absolute' as const, + top: 'calc(100% + 6px)', + insetInlineStart: '0', + zIndex: 1050, + width: 'min(20rem, calc(100vw - 1.5rem))', + maxHeight: filterPopoverMaxHeight.value, + overflow: 'auto', + background: token.value.colorBgElevated, + borderRadius: `${token.value.borderRadiusLG}px`, + boxShadow: token.value.boxShadowSecondary, + padding: `${token.value.paddingSM}px`, +})); + function placeFilterPopover() { const el = filterAnchor.value; if (!el) return; @@ -347,18 +360,26 @@ function placeFilterPopover() { filterPopoverMaxHeight.value = `${Math.max(220, space)}px`; } -function onFilterPopover(open: boolean) { - if (!open && document.getElementById('jalali-picker')) return; - if (open) placeFilterPopover(); - moreFiltersOpen.value = open; - if (open) { - window.addEventListener('resize', placeFilterPopover); - window.addEventListener('scroll', placeFilterPopover, true); - } else { +function onFilterDocPointer(event: Event) { + const target = event.target; + if (!(target instanceof Node)) return; + if (filterAnchor.value?.contains(target)) return; + if (document.getElementById('jalali-picker')?.contains(target)) return; + moreFiltersOpen.value = false; + filterSection.value = null; + document.removeEventListener('pointerdown', onFilterDocPointer, true); +} + +function toggleFilterPopover() { + if (moreFiltersOpen.value) { + moreFiltersOpen.value = false; filterSection.value = null; - window.removeEventListener('resize', placeFilterPopover); - window.removeEventListener('scroll', placeFilterPopover, true); + document.removeEventListener('pointerdown', onFilterDocPointer, true); + return; } + placeFilterPopover(); + moreFiltersOpen.value = true; + document.addEventListener('pointerdown', onFilterDocPointer, true); } function dateFacetLabel(value: string) { @@ -1531,13 +1552,12 @@ onMounted(async () => { onBeforeUnmount(() => { stopImportPoll(); revokeLogoUrls(); - window.removeEventListener('resize', placeFilterPopover); - window.removeEventListener('scroll', placeFilterPopover, true); + document.removeEventListener('pointerdown', onFilterDocPointer, true); }); -
- + - - - - {{ filterBtnLabel }} - - - - - +