wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-17 13:54:11 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

UBER-525: fixed popup logic placement for top (#3448)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-06-22 13:28:40 +03:00 committed by GitHub
parent ef3acfbf7c
commit 54b74caf63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui/src/components/PanelInstance.svelte
View File

@ -19,7 +19,8 @@
import { closePanel, PanelProps, panelstore } from '../panelup'
import { fitPopupElement, popupstore } from '../popups'
import type { AnySvelteComponent, PopupOptions } from '../types'
import { deviceOptionsStore as deviceInfo } from '..'
import type { AnySvelteComponent, PopupOptions, DeviceOptions } from '../types'
import Spinner from './Spinner.svelte'
export let contentPanel: HTMLElement
@ -79,7 +80,8 @@
const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
if (modalHTML) {
options = fitPopupElement(modalHTML, props.element, contentPanel)
const device: DeviceOptions = $deviceInfo
options = fitPopupElement(modalHTML, device, props.element, contentPanel)
}
}

7
packages/ui/src/components/PopupInstance.svelte
View File

@ -16,7 +16,7 @@
<script lang="ts">
import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
import { fitPopupElement } from '../popups'
import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement, DeviceOptions } from '../types'
export let is: AnySvelteComponent
export let props: object
@ -77,12 +77,13 @@
element: PopupAlignment | undefined,
contentPanel: HTMLElement | undefined
): void => {
const device: DeviceOptions = $deviceInfo
if ((fullSize || docSize) && (element === 'float' || element === 'centered')) {
options = fitPopupElement(modalHTML, 'full', contentPanel, clientWidth, clientHeight)
options = fitPopupElement(modalHTML, device, 'full', contentPanel, clientWidth, clientHeight)
options.props.maxHeight = '100vh'
if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
} else {
options = fitPopupElement(modalHTML, element, contentPanel, clientWidth, clientHeight)
options = fitPopupElement(modalHTML, device, element, contentPanel, clientWidth, clientHeight)
if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
}
options.fullSize = fullSize

9
packages/ui/src/popups.ts
View File

@ -8,7 +8,8 @@ import type {
PopupAlignment,
PopupOptions,
PopupPositionElement,
VerticalAlignment
VerticalAlignment,
DeviceOptions
} from './types'
export interface CompAndProps {
@ -182,6 +183,7 @@ export function fitPopupPositionedElement (
*/
export function fitPopupElement (
modalHTML: HTMLElement,
device: DeviceOptions,
element?: PopupAlignment,
contentPanel?: HTMLElement,
clientWidth?: number,
@ -206,14 +208,15 @@ export function fitPopupElement (
newProps.maxWidth = '50%'
show = true
} else if (element === 'top') {
newProps.top = '15vh'
newProps.maxHeight = '75vh'
const fullHeight = clientHeight !== undefined && clientHeight / device.docHeight > 0.745
if (clientWidth !== undefined && clientHeight !== undefined) {
newProps.left = `calc(50% - ${clientWidth / 2}px`
} else {
newProps.left = '50%'
newProps.transform = 'translateX(-50%)'
}
newProps.top = fullHeight ? `${(device.docHeight - clientHeight) / 2}px` : '15vh'
newProps.maxHeight = fullHeight ? 'calc(100vh - 2rem)' : '75vh'
show = true
} else if (element === 'float') {
newProps.top = 'calc(var(--status-bar-height) + 4px)'