heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-02-13 12:50:42 +09:00
parent e1cbaf2c5a
commit cbdc06ad71
2 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/web/app/common/views/components/reaction-picker.vue
View File

@ -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

4
src/web/app/desktop/views/components/posts-post.vue
View File

@ -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>