hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 11:31:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

UBER-295: Fix blur'y popups (#3278)

Browse Source 
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2023-05-29 20:33:19 +07:00 committed by GitHub
parent 6b7e83ce8c
commit 16629be0d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
// limitations under the License.
-->
<script lang="ts">
import { deviceOptionsStore as deviceInfo } from '..'
import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
import { fitPopupElement } from '../popups'
import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
@ -34,6 +34,9 @@
let docSize: boolean = false
let fullSize: boolean = false
let clientWidth = -1
let clientHeight = -1
let options: PopupOptions = {
props: {
top: '',
@ -74,11 +77,11 @@
contentPanel: HTMLElement | undefined
): void => {
if ((fullSize || docSize) && (element === 'float' || element === 'centered')) {
options = fitPopupElement(modalHTML, 'full', contentPanel)
options = fitPopupElement(modalHTML, 'full', contentPanel, clientWidth, clientHeight)
options.props.maxHeight = '100vh'
if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
} else {
options = fitPopupElement(modalHTML, element, contentPanel)
options = fitPopupElement(modalHTML, element, contentPanel, clientWidth, clientHeight)
if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
}
options.fullSize = fullSize
@ -107,6 +110,8 @@
let oldModalHTML: HTMLElement | undefined = undefined
$: if (modalHTML !== undefined && oldModalHTML !== modalHTML) {
clientWidth = -1
clientHeight = -1
oldModalHTML = modalHTML
fitPopup(modalHTML, element, contentPanel)
showing = true
@ -152,6 +157,11 @@
style:min-width={options.props.minWidth}
style:min-height={options.props.minHeight}
style:transform={options.props.transform}
use:resizeObserver={(element) => {
clientWidth = element.clientWidth
clientHeight = element.clientHeight
fitPopupInstance()
}}
>
<svelte:component
this={is}

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

@ -183,7 +183,9 @@ export function fitPopupPositionedElement (
export function fitPopupElement (
modalHTML: HTMLElement,
element?: PopupAlignment,
contentPanel?: HTMLElement
contentPanel?: HTMLElement,
clientWidth?: number,
clientHeight?: number
): PopupOptions {
let show = true
const newProps: Record<string, string | number> = {}
@ -205,9 +207,13 @@ export function fitPopupElement (
show = true
} else if (element === 'top') {
newProps.top = '15vh'
newProps.left = '50%'
newProps.maxHeight = '75vh'
if (clientWidth !== undefined && clientHeight !== undefined) {
newProps.left = `calc(50% - ${clientWidth / 2}px`
} else {
newProps.left = '50%'
newProps.transform = 'translateX(-50%)'
}
show = true
} else if (element === 'float') {
newProps.top = 'calc(var(--status-bar-height) + 4px)'
@ -216,9 +222,14 @@ export function fitPopupElement (
newProps.right = '4px'
show = true
} else if (element === 'center') {
if (clientWidth !== undefined && clientHeight !== undefined) {
newProps.top = `calc(50% - ${clientHeight / 2}px`
newProps.left = `calc(50% - ${clientWidth / 2}px`
} else {
newProps.top = '50%'
newProps.left = '50%'
newProps.transform = 'translate(-50%, -50%)'
}
show = true
} else if (element === 'centered') {
newProps.top = newProps.bottom = '15%'
@ -285,18 +296,28 @@ export function fitPopupElement (
newProps.top = '15%'
}
newProps.bottom = '12px'
if (clientWidth !== undefined && clientHeight !== undefined) {
newProps.left = `calc(50% - ${clientWidth / 2}px`
} else {
newProps.left = '50%'
newProps.transform = 'translateX(-50%)'
}
} else if (element === 'help-center') {
newProps.top = 'calc(var(--status-bar-height) + 12px)'
newProps.bottom = '12px'
newProps.right = '12px'
show = true
}
} else {
if (clientWidth !== undefined && clientHeight !== undefined) {
newProps.top = `calc(50% - ${clientHeight / 2}px`
newProps.left = `calc(50% - ${clientWidth / 2}px`
} else {
newProps.top = '50%'
newProps.left = '50%'
newProps.transform = 'translate(-50%, -50%)'
}
show = true
}
// applyStyle(newProps, modalHTML)