Corrected the distance between popups (#2176)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-06-30 06:47:18 +03:00 committed by GitHub
parent bf6780a32f
commit 4e21858b1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 2 deletions

View File

@ -82,7 +82,7 @@
showPopup( showPopup(
action.component, action.component,
action.props, action.props,
{ getBoundingClientRect: () => target.getBoundingClientRect(), position: { v: 'top', h: 'right' } }, { getBoundingClientRect: () => target.getBoundingClientRect(), kind: 'submenu' },
(evt) => { (evt) => {
dispatch('close') dispatch('close')
}, },

View File

@ -150,10 +150,24 @@ export function fitPopupPositionedElement (
const rect = alignment.getBoundingClientRect() const rect = alignment.getBoundingClientRect()
const rectPopup = modalHTML.getBoundingClientRect() const rectPopup = modalHTML.getBoundingClientRect()
const docWidth = document.body.clientWidth const docWidth = document.body.clientWidth
const docHeight = document.body.clientHeight
newProps.left = newProps.right = newProps.top = newProps.bottom = '' newProps.left = newProps.right = newProps.top = newProps.bottom = ''
newProps.maxHeight = newProps.height = '' newProps.maxHeight = newProps.height = ''
newProps.maxWidth = newProps.width = '' newProps.maxWidth = newProps.width = ''
if (alignment.position !== undefined) { if (alignment?.kind === 'submenu') {
const dirH =
docWidth - rect.right - rectPopup.width - 16 > 0 ? 'right' : rect.left > docWidth - rect.right ? 'left' : 'right'
const dirV =
docHeight - rect.top - rectPopup.height - 16 > 0
? 'bottom'
: rect.bottom > docHeight - rect.top
? 'top'
: 'bottom'
if (dirH === 'right') newProps.left = `${rect.right - 4}px`
else newProps.right = `${docWidth - rect.left - 4}px`
if (dirV === 'bottom') newProps.top = `${rect.top - 4}px`
else newProps.bottom = `${docHeight - rect.bottom - 4}px`
} else if (alignment.position !== undefined) {
if (alignment.position.v === 'top') { if (alignment.position.v === 'top') {
newProps.top = `${rect.top}px` newProps.top = `${rect.top}px`
} else if (alignment.position.v === 'bottom') { } else if (alignment.position.v === 'bottom') {

View File

@ -121,6 +121,7 @@ export interface PopupPositionElement {
v: VerticalAlignment v: VerticalAlignment
h: HorizontalAlignment h: HorizontalAlignment
} }
kind?: 'submenu'
} }
export type PopupPosAlignment = 'right' | 'top' | 'float' | 'account' | 'full' | 'content' | 'middle' export type PopupPosAlignment = 'right' | 'top' | 'float' | 'account' | 'full' | 'content' | 'middle'