mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-09 09:20:54 +00:00
Corrected display of Popups and Tooltips
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
parent
70c704d468
commit
0027dc2858
@ -12,11 +12,23 @@
|
|||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
-->
|
-->
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
let fullScreenMode: boolean = false
|
||||||
|
|
||||||
|
export function getFullScreenMode (): boolean {
|
||||||
|
return fullScreenMode
|
||||||
|
}
|
||||||
|
function setFullScreenMode (value: boolean): void {
|
||||||
|
fullScreenMode = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { popupstore as popups } from '../popups'
|
import { popupstore as popups } from '../popups'
|
||||||
import { modalStore as modals } from '../modals'
|
import { modalStore as modals } from '../modals'
|
||||||
|
|
||||||
import PopupInstance from './PopupInstance.svelte'
|
import PopupInstance from './PopupInstance.svelte'
|
||||||
|
import { onDestroy, onMount } from 'svelte'
|
||||||
|
|
||||||
export let contentPanel: HTMLElement | undefined = undefined
|
export let contentPanel: HTMLElement | undefined = undefined
|
||||||
export let fullScreen: boolean = false
|
export let fullScreen: boolean = false
|
||||||
@ -27,11 +39,18 @@
|
|||||||
instances.forEach((p) => p.fitPopupInstance())
|
instances.forEach((p) => p.fitPopupInstance())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (fullScreen) setFullScreenMode(true)
|
||||||
|
})
|
||||||
|
onDestroy(() => {
|
||||||
|
if (fullScreen) setFullScreenMode(false)
|
||||||
|
})
|
||||||
|
|
||||||
const shouldDisplayPopup = (popup: any): boolean => {
|
const shouldDisplayPopup = (popup: any): boolean => {
|
||||||
return (
|
return (
|
||||||
(fullScreen && document.fullscreenElement != null && popup.element !== 'full-centered') ||
|
(fullScreen && fullScreenMode && popup.element !== 'full-centered') ||
|
||||||
(!fullScreen && document.fullscreenElement != null && popup.element === 'full-centered') ||
|
(!fullScreen && fullScreenMode && popup.element === 'full-centered') ||
|
||||||
(!fullScreen && document.fullscreenElement == null)
|
(!fullScreen && !fullScreenMode)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,8 +12,19 @@
|
|||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
-->
|
-->
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
let fullScreenMode: boolean = false
|
||||||
|
|
||||||
|
export function getFullScreenMode (): boolean {
|
||||||
|
return fullScreenMode
|
||||||
|
}
|
||||||
|
function setFullScreenMode (value: boolean): void {
|
||||||
|
fullScreenMode = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { afterUpdate, onDestroy } from 'svelte'
|
import { afterUpdate, onDestroy, onMount } from 'svelte'
|
||||||
import { resizeObserver } from '../resize'
|
import { resizeObserver } from '../resize'
|
||||||
import { closeTooltip, tooltipstore as tooltip } from '../tooltips'
|
import { closeTooltip, tooltipstore as tooltip } from '../tooltips'
|
||||||
import { modalStore as modals } from '../modals'
|
import { modalStore as modals } from '../modals'
|
||||||
@ -66,8 +77,14 @@
|
|||||||
visibility: 'hidden',
|
visibility: 'hidden',
|
||||||
classList: ''
|
classList: ''
|
||||||
}
|
}
|
||||||
const shouldHideTooltip = (): boolean =>
|
|
||||||
(fullScreen && document.fullscreenElement == null) || (!fullScreen && document.fullscreenElement != null)
|
onMount(() => {
|
||||||
|
if (fullScreen) setFullScreenMode(true)
|
||||||
|
})
|
||||||
|
onDestroy(() => {
|
||||||
|
if (fullScreen) setFullScreenMode(false)
|
||||||
|
})
|
||||||
|
const shouldHideTooltip = (): boolean => (fullScreen && !fullScreenMode) || (!fullScreen && fullScreenMode)
|
||||||
|
|
||||||
const clearStyles = (): void => {
|
const clearStyles = (): void => {
|
||||||
shown = false
|
shown = false
|
||||||
|
@ -109,6 +109,10 @@ export function showPopup (
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
closePopupOp()
|
closePopupOp()
|
||||||
|
const anchor = document.activeElement as HTMLElement
|
||||||
|
const editable = anchor?.isContentEditable || anchor?.tagName === 'INPUT' || anchor?.tagName === 'TEXTAREA'
|
||||||
|
if (anchor != null && !editable) anchor.blur()
|
||||||
|
|
||||||
const _element = element instanceof HTMLElement ? getPopupPositionElement(element) : element
|
const _element = element instanceof HTMLElement ? getPopupPositionElement(element) : element
|
||||||
const data: Omit<CompAndProps, 'is'> = {
|
const data: Omit<CompAndProps, 'is'> = {
|
||||||
id,
|
id,
|
||||||
|
Loading…
Reference in New Issue
Block a user