diff options
| author | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-07 18:41:48 +0900 |
|---|---|---|
| committer | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-07 18:41:48 +0900 |
| commit | 853b846c4017d0edd7d4d0f23812f674d598d6d3 (patch) | |
| tree | d0188d51dc1a2b88104c10c81bf30b8459807e16 /src/web | |
| parent | wip (diff) | |
| download | misskey-853b846c4017d0edd7d4d0f23812f674d598d6d3.tar.gz misskey-853b846c4017d0edd7d4d0f23812f674d598d6d3.tar.bz2 misskey-853b846c4017d0edd7d4d0f23812f674d598d6d3.zip | |
wip
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/common/tags/reactions-viewer.vue | 78 |
1 files changed, 36 insertions, 42 deletions
diff --git a/src/web/app/common/tags/reactions-viewer.vue b/src/web/app/common/tags/reactions-viewer.vue index ad126ff1d5..18002c9727 100644 --- a/src/web/app/common/tags/reactions-viewer.vue +++ b/src/web/app/common/tags/reactions-viewer.vue @@ -1,55 +1,49 @@ <template> <div> <template v-if="reactions"> - <span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{ reactions.like }</span></span> - <span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{ reactions.love }</span></span> - <span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{ reactions.laugh }</span></span> - <span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{ reactions.hmm }</span></span> - <span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{ reactions.surprise }</span></span> - <span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{ reactions.congrats }</span></span> - <span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{ reactions.angry }</span></span> - <span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{ reactions.confused }</span></span> - <span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{ reactions.pudding }</span></span> + <span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span> + <span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span> + <span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span> + <span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span> + <span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span> + <span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span> + <span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span> + <span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span> + <span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span> </template> </div> </template> +<script> + export default { + props: ['post'], + computed: { + reactions: function() { + return this.post.reaction_counts; + } + } + }; +</script> -<mk-reactions-viewer> - <virtual v-if="reactions"> - - </virtual> - <style lang="stylus" scoped> - :scope - display block - border-top dashed 1px #eee - border-bottom dashed 1px #eee - margin 4px 0 +<style lang="stylus" scoped> + :scope + display block + border-top dashed 1px #eee + border-bottom dashed 1px #eee + margin 4px 0 - &:empty - display none + &:empty + display none - > span - margin-right 8px - - > mk-reaction-icon - font-size 1.4em + > span + margin-right 8px - > span - margin-left 4px - font-size 1.2em - color #444 + > mk-reaction-icon + font-size 1.4em - </style> - <script> - this.post = this.opts.post; - - this.on('mount', () => { - this.update(); - }); + > span + margin-left 4px + font-size 1.2em + color #444 - this.on('update', () => { - this.reactions = this.post.reaction_counts; - }); - </script> -</mk-reactions-viewer> +</style> |