Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#298

Browse source
This commit is contained in:
syuilo 2017-03-20 04:24:19 +09:00
parent 516d3d600a
commit b05bee58d2
23 changed files with 371 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/web/app/common/tags/index.js
View file

@ -26,3 +26,6 @@ require('./messaging/form.tag');
require('./stream-indicator.tag');
require('./public-timeline.tag');
require('./activity-table.tag');
require('./reaction-picker.tag');
require('./reactions-viewer.tag');
require('./reaction-icon.tag');

12
src/web/app/common/tags/reaction-icon.tag Normal file
View file

@ -0,0 +1,12 @@
<mk-reaction-icon>
<virtual if={ opts.reaction == 'like' }>👍</virtual>
<virtual if={ opts.reaction == 'love' }>❤️</virtual>
<virtual if={ opts.reaction == 'laugh' }>😆</virtual>
<virtual if={ opts.reaction == 'hmm' }>🤔</virtual>
<virtual if={ opts.reaction == 'surprise' }>😮</virtual>
<virtual if={ opts.reaction == 'congrats' }>🎉</virtual>
<style>
:scope
display inline
</style>
</mk-reaction-icon>

58
src/web/app/common/tags/reaction-picker.tag Normal file
View file

@ -0,0 +1,58 @@
<mk-reaction-picker>
<div class="backdrop" onclick={ unmount }></div>
<div class="popover" ref="popover">
<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'laugh') } tabindex="3" title="笑"><mk-reaction-icon reaction='laugh'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'hmm') } tabindex="4" title="ふぅ～む"><mk-reaction-icon reaction='hmm'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'surprise') } tabindex="5" title="驚き"><mk-reaction-icon reaction='surprise'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'congrats') } tabindex="6" title="おめでとう"><mk-reaction-icon reaction='congrats'></mk-reaction-icon></button>
</div>
<style>
:scope
display block
position initial
> .backdrop
position fixed
top 0
left 0
z-index 10000
width 100%
height 100%
background rgba(0, 0, 0, 0.1)
> .popover
position absolute
z-index 10001
background #fff
border 1px solid rgba(27, 31, 35, 0.15)
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
> button
font-size 24px
</style>
<script>
this.mixin('api');
this.post = this.opts.post;
this.on('mount', () => {
const width = this.refs.popover.offsetWidth;
this.refs.popover.style.top = this.opts.top + 'px';
this.refs.popover.style.left = (this.opts.left - (width / 2)) + 'px';
});
this.react = reaction => {
this.api('posts/reactions/create', {
post_id: this.post.id,
reaction: reaction
}).then(() => {
if (this.opts.cb) this.opts.cb();
this.unmount();
});
};
</script>
</mk-reaction-picker>

29
src/web/app/common/tags/reactions-viewer.tag Normal file
View file

@ -0,0 +1,29 @@
<mk-reactions-viewer>
<virtual if={ reactions }>
<span if={ reactions.like }><mk-reaction-icon reaction='like'></mk-reaction-icon><span>{ reactions.like }</span></span>
<span if={ reactions.love }><mk-reaction-icon reaction='love'></mk-reaction-icon><span>{ reactions.love }</span></span>
<span if={ reactions.laugh }><mk-reaction-icon reaction='laugh'></mk-reaction-icon><span>{ reactions.laugh }</span></span>
<span if={ reactions.hmm }><mk-reaction-icon reaction='hmm'></mk-reaction-icon><span>{ reactions.hmm }</span></span>
<span if={ reactions.surprise }><mk-reaction-icon reaction='surprise'></mk-reaction-icon><span>{ reactions.surprise }</span></span>
<span if={ reactions.congrats }><mk-reaction-icon reaction='congrats'></mk-reaction-icon><span>{ reactions.congrats }</span></span>
</virtual>
<style>
:scope
display block
> span
margin-right 8px
> mk-reaction-icon
font-size 20px
> span
margin-left 4px
font-size 16px
color #444
</style>
<script>
this.reactions = this.opts.post.reaction_counts;
</script>
</mk-reactions-viewer>