experimental disjointed popups
This commit is contained in:
parent
c83657a072
commit
fd831a27f4
4 changed files with 26 additions and 14 deletions
|
@ -54,6 +54,7 @@
|
|||
<PostStatusModal />
|
||||
<SettingsModal />
|
||||
<div id="modal" />
|
||||
<div id="popovers" />
|
||||
<GlobalNoticeList />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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}">
|
||||
|
|
Loading…
Reference in a new issue