experimental disjointed popups

This commit is contained in:
Henry Jameson 2022-05-20 00:56:23 +03:00
parent c83657a072
commit fd831a27f4
4 changed files with 26 additions and 14 deletions

View file

@ -54,6 +54,7 @@
<PostStatusModal />
<SettingsModal />
<div id="modal" />
<div id="popovers" />
<GlobalNoticeList />
</div>
</template>

View file

@ -43,6 +43,7 @@ const Popover = {
methods: {
containerBoundingClientRect () {
const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
console.log(container)
return container.getBoundingClientRect()
},
updateStyles () {
@ -125,10 +126,17 @@ const Popover = {
// Note, separate translateX and translateY avoids blurry text on chromium,
// single translate or translate3d resulted in blurry text.
console.log(translateX + screenBox.x + screenBox.width)
console.log(Math.round(parentBounds.width))
this.styles = {
opacity: 1,
transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
// transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`,
top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`,
maxWidth: `${Math.round(parentBounds.width)}px`,
position: 'fixed'
}
console.log(this.styles)
},
showPopover () {
const wasHidden = this.hidden

View file

@ -11,19 +11,21 @@
>
<slot name="trigger" />
</button>
<div
v-if="!hidden"
ref="content"
:style="styles"
class="popover"
:class="popoverClass || 'popover-default'"
>
<slot
name="content"
class="popover-inner"
:close="hidePopover"
/>
</div>
<teleport to="#popovers">
<div
v-if="!hidden"
ref="content"
:style="styles"
class="popover"
:class="popoverClass || 'popover-default'"
>
<slot
name="content"
class="popover-inner"
:close="hidePopover"
/>
</div>
</teleport>
</div>
</template>

View file

@ -6,6 +6,7 @@
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
popover-class="ReactButton popover-default"
@show="focusInput"
>
<template v-slot:content="{close}">