natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-02-07 15:34:08 +09:00
parent 0c2b79aced
commit ea70350dcc
1 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/web/app/common/tags/reaction-picker.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="backdrop" ref="backdrop" @click="close"></div> <div class="backdrop" ref="backdrop" @click="close"></div>
<div class="popover" :data-compact="compact" ref="popover"> <div class="popover" :data-compact="compact" ref="popover">
<p if={ !opts.compact }>{ title }</p> <p v-if="!compact">{{ title }}</p>
<div> <div>
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button> <button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button> <button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
@ -22,10 +22,15 @@
import anime from 'animejs'; import anime from 'animejs';
import api from '../scripts/api'; import api from '../scripts/api';
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
export default { export default {
props: ['post', 'cb'], props: ['post', 'cb'],
data: {
title: placeholder
},
methods: { methods: {
react: function (reaction) { react: function(reaction) {
api('posts/reactions/create', { api('posts/reactions/create', {
post_id: this.post.id, post_id: this.post.id,
reaction: reaction reaction: reaction
@ -33,6 +38,12 @@
if (this.cb) this.cb(); if (this.cb) this.cb();
this.$destroy(); this.$destroy();
}); });
},
onMouseover: function(e) {
this.title = e.target.title;
},
onMouseout: function(e) {
this.title = placeholder;
} }
} }
}; };
@ -42,22 +53,6 @@
this.post = this.opts.post; this.post = this.opts.post;
this.source = this.opts.source; this.source = this.opts.source;
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
this.title = placeholder;
this.onmouseover = e => {
this.update({
title: e.target.title
});
};
this.onmouseout = () => {
this.update({
title: placeholder
});
};
this.on('mount', () => { this.on('mount', () => {
const rect = this.source.getBoundingClientRect(); const rect = this.source.getBoundingClientRect();
const width = this.refs.popover.offsetWidth; const width = this.refs.popover.offsetWidth;