wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-22 16:27:22 +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 { closePanel, PanelProps, panelstore } from '../panelup'
import { fitPopupElement, popupstore } from '../popups' 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' import Spinner from './Spinner.svelte'
export let contentPanel: HTMLElement export let contentPanel: HTMLElement
@ -79,7 +80,8 @@
const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => { const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
if (modalHTML) { 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"> <script lang="ts">
import { deviceOptionsStore as deviceInfo, resizeObserver } from '..' import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
import { fitPopupElement } from '../popups' 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 is: AnySvelteComponent
export let props: object export let props: object
@ -77,12 +77,13 @@
element: PopupAlignment | undefined, element: PopupAlignment | undefined,
contentPanel: HTMLElement | undefined contentPanel: HTMLElement | undefined
): void => { ): void => {
const device: DeviceOptions = $deviceInfo
if ((fullSize || docSize) && (element === 'float' || element === 'centered')) { 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' options.props.maxHeight = '100vh'
if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize') if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
} else { } 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') if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
} }
options.fullSize = fullSize options.fullSize = fullSize

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

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