wip
This commit is contained in:
parent
e1cbaf2c5a
commit
cbdc06ad71
|
@ -32,36 +32,38 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const popover = this.$refs.popover as any;
|
this.$nextTick(() => {
|
||||||
|
const popover = this.$refs.popover as any;
|
||||||
|
|
||||||
const rect = this.source.getBoundingClientRect();
|
const rect = this.source.getBoundingClientRect();
|
||||||
const width = popover.offsetWidth;
|
const width = popover.offsetWidth;
|
||||||
const height = popover.offsetHeight;
|
const height = popover.offsetHeight;
|
||||||
|
|
||||||
if (this.compact) {
|
if (this.compact) {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||||
popover.style.left = (x - (width / 2)) + 'px';
|
popover.style.left = (x - (width / 2)) + 'px';
|
||||||
popover.style.top = (y - (height / 2)) + 'px';
|
popover.style.top = (y - (height / 2)) + 'px';
|
||||||
} else {
|
} else {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||||
popover.style.left = (x - (width / 2)) + 'px';
|
popover.style.left = (x - (width / 2)) + 'px';
|
||||||
popover.style.top = y + 'px';
|
popover.style.top = y + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: this.$refs.backdrop,
|
targets: this.$refs.backdrop,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: this.$refs.popover,
|
targets: this.$refs.popover,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
scale: [0.5, 1],
|
scale: [0.5, 1],
|
||||||
duration: 500
|
duration: 500
|
||||||
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -104,7 +106,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
$border-color = rgba(27, 31, 35, 0.15)
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
.mk-reaction-picker
|
.mk-reaction-picker
|
||||||
position initial
|
position initial
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeyDown" @dblclick="onDblClick">
|
<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeydown" @dblclick="onDblClick">
|
||||||
<div class="reply-to" v-if="p.reply">
|
<div class="reply-to" v-if="p.reply">
|
||||||
<mk-posts-post-sub post="p.reply"/>
|
<mk-posts-post-sub post="p.reply"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
<div class="text" ref="text">
|
<div class="text" ref="text">
|
||||||
<p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p>
|
<p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p>
|
||||||
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
||||||
<mk-post-html :ast="p.ast" :i="$root.$data.os.i"/>
|
<mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/>
|
||||||
<a class="quote" v-if="p.repost">RP:</a>
|
<a class="quote" v-if="p.repost">RP:</a>
|
||||||
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue