This commit is contained in:
syuilo
@ -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
12
src/web/app/common/tags/reaction-icon.tag
Normal 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
58
src/web/app/common/tags/reaction-picker.tag
Normal 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
29
src/web/app/common/tags/reactions-viewer.tag
Normal 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>
|
||||
@ -3,44 +3,58 @@
|
||||
<virtual each={ notification, i in notifications }>
|
||||
<div class="notification { notification.type }">
|
||||
<mk-time time={ notification.created_at }></mk-time>
|
||||
<virtual if={ notification.type == 'like' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<virtual if={ notification.type == 'reaction' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-thumbs-o-up"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'repost' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-retweet"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'quote' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-quote-left"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'follow' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-user-plus"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'reply' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-reply"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'mention' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-at"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'poll_vote' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-pie-chart"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
</div>
|
||||
@ -105,7 +119,7 @@
|
||||
p
|
||||
margin 0
|
||||
|
||||
i
|
||||
i, mk-reaction-icon
|
||||
margin-right 4px
|
||||
|
||||
.post-preview
|
||||
@ -128,10 +142,6 @@
|
||||
&:after
|
||||
content "\f10e"
|
||||
|
||||
&.like
|
||||
.text p i
|
||||
color #FFAC33
|
||||
|
||||
&.repost, &.quote
|
||||
.text p i
|
||||
color #77B255
|
||||
|
||||
@ -45,42 +45,18 @@
|
||||
<mk-poll if={ p.poll } post={ p }></mk-poll>
|
||||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }></mk-reactions-viewer>
|
||||
<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
|
||||
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
|
||||
<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
|
||||
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button onclick={ NotImplementedException }><i class="fa fa-ellipsis-h"></i></button>
|
||||
<button><i class="fa fa-ellipsis-h"></i></button>
|
||||
</footer>
|
||||
<div class="reposts-and-likes">
|
||||
<div class="reposts" if={ reposts && reposts.length > 0 }>
|
||||
<header>
|
||||
<a>{ p.repost_count }</a>
|
||||
<p>Repost</p>
|
||||
</header>
|
||||
<ol class="users">
|
||||
<li class="user" each={ reposts }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + user.username } title={ user.name } data-user-preview={ user.id }>
|
||||
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/></a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="likes" if={ likes && likes.length > 0 }>
|
||||
<header><a>{ p.likes_count }</a>
|
||||
<p>いいね</p>
|
||||
</header>
|
||||
<ol class="users">
|
||||
<li class="user" each={ likes }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + username } title={ name } data-user-preview={ id }>
|
||||
<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/></a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="replies">
|
||||
<virtual each={ post in replies }>
|
||||
@ -271,68 +247,9 @@
|
||||
margin 0 0 0 8px
|
||||
color #999
|
||||
|
||||
&.liked
|
||||
&.reacted
|
||||
color $theme-color
|
||||
|
||||
> .reposts-and-likes
|
||||
display flex
|
||||
justify-content center
|
||||
padding 0
|
||||
margin 16px 0
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> .reposts
|
||||
> .likes
|
||||
display flex
|
||||
flex 1 1
|
||||
padding 0
|
||||
border-top solid 1px #F2EFEE
|
||||
|
||||
> header
|
||||
flex 1 1 80px
|
||||
max-width 80px
|
||||
padding 8px 5px 0px 10px
|
||||
|
||||
> a
|
||||
display block
|
||||
font-size 1.5em
|
||||
line-height 1.4em
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
font-size 0.7em
|
||||
line-height 1em
|
||||
font-weight normal
|
||||
color #a0a2a5
|
||||
|
||||
> .users
|
||||
display block
|
||||
flex 1 1
|
||||
margin 0
|
||||
padding 10px 10px 10px 5px
|
||||
list-style none
|
||||
|
||||
> .user
|
||||
display block
|
||||
float left
|
||||
margin 4px
|
||||
padding 0
|
||||
|
||||
> .avatar-anchor
|
||||
display:block
|
||||
|
||||
> .avatar
|
||||
vertical-align bottom
|
||||
width 24px
|
||||
height 24px
|
||||
border-radius 4px
|
||||
|
||||
> .reposts + .likes
|
||||
margin-left 16px
|
||||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid #eef0f2
|
||||
@ -356,6 +273,8 @@
|
||||
}).then(post => {
|
||||
const isRepost = post.repost != null;
|
||||
const p = isRepost ? post.repost : post;
|
||||
p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||
|
||||
this.update({
|
||||
fetching: false,
|
||||
post: post,
|
||||
@ -385,26 +304,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Get likes
|
||||
this.api('posts/likes', {
|
||||
post_id: this.p.id,
|
||||
limit: 8
|
||||
}).then(likes => {
|
||||
this.update({
|
||||
likes: likes
|
||||
});
|
||||
});
|
||||
|
||||
// Get reposts
|
||||
this.api('posts/reposts', {
|
||||
post_id: this.p.id,
|
||||
limit: 8
|
||||
}).then(reposts => {
|
||||
this.update({
|
||||
reposts: reposts
|
||||
});
|
||||
});
|
||||
|
||||
// Get replies
|
||||
this.api('posts/replies', {
|
||||
post_id: this.p.id,
|
||||
@ -429,22 +328,13 @@
|
||||
});
|
||||
};
|
||||
|
||||
this.like = () => {
|
||||
if (this.p.is_liked) {
|
||||
this.api('posts/likes/delete', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = false;
|
||||
this.update();
|
||||
});
|
||||
} else {
|
||||
this.api('posts/likes/create', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = true;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
this.react = () => {
|
||||
const rect = this.refs.reactButton.getBoundingClientRect();
|
||||
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset,
|
||||
post: this.p
|
||||
});
|
||||
};
|
||||
|
||||
this.loadContext = () => {
|
||||
|
||||
@ -46,14 +46,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }></mk-reactions-viewer>
|
||||
<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
|
||||
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
|
||||
<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
|
||||
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button>
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
@ -313,7 +314,7 @@
|
||||
margin 0 0 0 8px
|
||||
color #999
|
||||
|
||||
&.liked
|
||||
&.reacted
|
||||
color $theme-color
|
||||
|
||||
&:last-child
|
||||
@ -333,14 +334,14 @@
|
||||
this.mixin('api');
|
||||
this.mixin('user-preview');
|
||||
|
||||
this.isDetailOpened = false;
|
||||
|
||||
this.post = this.opts.post;
|
||||
this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
|
||||
this.p = this.isRepost ? this.post.repost : this.post;
|
||||
|
||||
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||
this.title = dateStringify(this.p.created_at);
|
||||
|
||||
this.url = `/${this.p.user.username}/${this.p.id}`;
|
||||
this.isDetailOpened = false;
|
||||
|
||||
this.on('mount', () => {
|
||||
if (this.p.text) {
|
||||
@ -375,22 +376,13 @@
|
||||
});
|
||||
};
|
||||
|
||||
this.like = () => {
|
||||
if (this.p.is_liked) {
|
||||
this.api('posts/likes/delete', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = false;
|
||||
this.update();
|
||||
});
|
||||
} else {
|
||||
this.api('posts/likes/create', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = true;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
this.react = () => {
|
||||
const rect = this.refs.reactButton.getBoundingClientRect();
|
||||
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset,
|
||||
post: this.p
|
||||
});
|
||||
};
|
||||
|
||||
this.toggleDetail = () => {
|
||||
|
||||
@ -47,8 +47,8 @@
|
||||
<p>投稿する。</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="like-write"/>
|
||||
<p>いいねしたりいいね解除する。</p>
|
||||
<input type="checkbox" value="reaction-write"/>
|
||||
<p>リアクションしたりリアクションをキャンセルする。</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="following-write"/>
|
||||
|
||||
@ -1,40 +1,47 @@
|
||||
<mk-notification-preview class={ notification.type }>
|
||||
<virtual if={ notification.type == 'like' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'reaction' }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-thumbs-o-up"></i>{ notification.user.name }</p>
|
||||
<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>{ notification.user.name }</p>
|
||||
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'repost' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'repost' }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-retweet"></i>{ notification.post.user.name }</p>
|
||||
<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'quote' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'quote' }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-quote-left"></i>{ notification.post.user.name }</p>
|
||||
<p class="post-preview">{ getPostSummary(notification.post) }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'follow' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'follow' }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-user-plus"></i>{ notification.user.name }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'reply' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'reply' }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-reply"></i>{ notification.post.user.name }</p>
|
||||
<p class="post-preview">{ getPostSummary(notification.post) }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'mention' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'mention' }>
|
||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-at"></i>{ notification.post.user.name }</p>
|
||||
<p class="post-preview">{ getPostSummary(notification.post) }</p>
|
||||
</div>
|
||||
</virtual>
|
||||
<virtual if={ notification.type == 'poll_vote' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<virtual if={ notification.type == 'poll_vote' }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<div class="text">
|
||||
<p><i class="fa fa-pie-chart"></i>{ notification.user.name }</p>
|
||||
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
||||
@ -70,7 +77,7 @@
|
||||
p
|
||||
margin 0
|
||||
|
||||
i
|
||||
i, mk-reaction-icon
|
||||
margin-right 4px
|
||||
|
||||
.post-ref
|
||||
@ -89,10 +96,6 @@
|
||||
&:after
|
||||
content "\f10e"
|
||||
|
||||
&.like
|
||||
.text p i
|
||||
color #FFAC33
|
||||
|
||||
&.repost, &.quote
|
||||
.text p i
|
||||
color #77B255
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<mk-notification class={ notification.type }>
|
||||
<mk-time time={ notification.created_at }></mk-time>
|
||||
<virtual if={ notification.type == 'like' }>
|
||||
<virtual if={ notification.type == 'reaction' }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }>
|
||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
</a>
|
||||
<div class="text">
|
||||
<p>
|
||||
<i class="fa fa-thumbs-o-up"></i>
|
||||
<mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>
|
||||
<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
|
||||
</p>
|
||||
<a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||
@ -123,7 +123,7 @@
|
||||
p
|
||||
margin 0
|
||||
|
||||
i
|
||||
i, mk-reaction-icon
|
||||
margin-right 4px
|
||||
|
||||
.post-preview
|
||||
@ -146,10 +146,6 @@
|
||||
&:after
|
||||
content "\f10e"
|
||||
|
||||
&.like
|
||||
.text p i
|
||||
color #FFAC33
|
||||
|
||||
&.repost, &.quote
|
||||
.text p i
|
||||
color #77B255
|
||||
|
||||
@ -46,41 +46,18 @@
|
||||
<mk-time time={ p.created_at } mode="detail"></mk-time>
|
||||
</a>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }></mk-reactions-viewer>
|
||||
<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
|
||||
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
|
||||
<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
|
||||
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button onclick={ NotImplementedException }><i class="fa fa-ellipsis-h"></i></button>
|
||||
<button><i class="fa fa-ellipsis-h"></i></button>
|
||||
</footer>
|
||||
<div class="reposts-and-likes">
|
||||
<div class="reposts" if={ reposts && reposts.length > 0 }>
|
||||
<header><a>{ p.repost_count }</a>
|
||||
<p>Repost</p>
|
||||
</header>
|
||||
<ol class="users">
|
||||
<li class="user" each={ reposts }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + user.username } title={ user.name }>
|
||||
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/></a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="likes" if={ likes && likes.length > 0 }>
|
||||
<header><a>{ p.likes_count }</a>
|
||||
<p>いいね</p>
|
||||
</header>
|
||||
<ol class="users">
|
||||
<li class="user" each={ likes }>
|
||||
<a class="avatar-anchor" href={ CONFIG.url + '/' + username } title={ name }>
|
||||
<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/></a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="replies">
|
||||
<virtual each={ post in replies }>
|
||||
@ -273,68 +250,9 @@
|
||||
margin 0 0 0 8px
|
||||
color #999
|
||||
|
||||
&.liked
|
||||
&.reacted
|
||||
color $theme-color
|
||||
|
||||
> .reposts-and-likes
|
||||
display flex
|
||||
justify-content center
|
||||
padding 0
|
||||
margin 16px 0
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> .reposts
|
||||
> .likes
|
||||
display flex
|
||||
flex 1 1
|
||||
padding 0
|
||||
border-top solid 1px #F2EFEE
|
||||
|
||||
> header
|
||||
flex 1 1 80px
|
||||
max-width 80px
|
||||
padding 8px 5px 0px 10px
|
||||
|
||||
> a
|
||||
display block
|
||||
font-size 1.5em
|
||||
line-height 1.4em
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
font-size 0.7em
|
||||
line-height 1em
|
||||
font-weight normal
|
||||
color #a0a2a5
|
||||
|
||||
> .users
|
||||
display block
|
||||
flex 1 1
|
||||
margin 0
|
||||
padding 10px 10px 10px 5px
|
||||
list-style none
|
||||
|
||||
> .user
|
||||
display block
|
||||
float left
|
||||
margin 4px
|
||||
padding 0
|
||||
|
||||
> .avatar-anchor
|
||||
display:block
|
||||
|
||||
> .avatar
|
||||
vertical-align bottom
|
||||
width 24px
|
||||
height 24px
|
||||
border-radius 4px
|
||||
|
||||
> .reposts + .likes
|
||||
margin-left 16px
|
||||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid #eef0f2
|
||||
@ -358,6 +276,8 @@
|
||||
}).then(post => {
|
||||
const isRepost = post.repost != null;
|
||||
const p = isRepost ? post.repost : post;
|
||||
p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||
|
||||
this.update({
|
||||
fetching: false,
|
||||
post: post,
|
||||
@ -387,26 +307,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Get likes
|
||||
this.api('posts/likes', {
|
||||
post_id: this.p.id,
|
||||
limit: 8
|
||||
}).then(likes => {
|
||||
this.update({
|
||||
likes: likes
|
||||
});
|
||||
});
|
||||
|
||||
// Get reposts
|
||||
this.api('posts/reposts', {
|
||||
post_id: this.p.id,
|
||||
limit: 8
|
||||
}).then(reposts => {
|
||||
this.update({
|
||||
reposts: reposts
|
||||
});
|
||||
});
|
||||
|
||||
// Get replies
|
||||
this.api('posts/replies', {
|
||||
post_id: this.p.id,
|
||||
@ -434,22 +334,13 @@
|
||||
});
|
||||
};
|
||||
|
||||
this.like = () => {
|
||||
if (this.p.is_liked) {
|
||||
this.api('posts/likes/delete', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = false;
|
||||
this.update();
|
||||
});
|
||||
} else {
|
||||
this.api('posts/likes/create', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = true;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
this.react = () => {
|
||||
const rect = this.refs.reactButton.getBoundingClientRect();
|
||||
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset,
|
||||
post: this.p
|
||||
});
|
||||
};
|
||||
|
||||
this.loadContext = () => {
|
||||
|
||||
@ -43,14 +43,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }></mk-reactions-viewer>
|
||||
<button onclick={ reply }><i class="fa fa-reply"></i>
|
||||
<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ liked: p.is_liked } onclick={ like }><i class="fa fa-thumbs-o-up"></i>
|
||||
<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton"><i class="fa fa-plus"></i>
|
||||
<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
@ -300,7 +301,7 @@
|
||||
margin 0 0 0 8px
|
||||
color #999
|
||||
|
||||
&.liked
|
||||
&.reacted
|
||||
color $theme-color
|
||||
|
||||
</style>
|
||||
@ -314,6 +315,7 @@
|
||||
this.post = this.opts.post;
|
||||
this.isRepost = this.post.repost != null && this.post.text == null;
|
||||
this.p = this.isRepost ? this.post.repost : this.post;
|
||||
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||
this.summary = getPostSummary(this.p);
|
||||
this.url = `/${this.p.user.username}/${this.p.id}`;
|
||||
|
||||
@ -353,22 +355,13 @@
|
||||
});
|
||||
};
|
||||
|
||||
this.like = () => {
|
||||
if (this.p.is_liked) {
|
||||
this.api('posts/likes/delete', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = false;
|
||||
this.update();
|
||||
});
|
||||
} else {
|
||||
this.api('posts/likes/create', {
|
||||
post_id: this.p.id
|
||||
}).then(() => {
|
||||
this.p.is_liked = true;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
this.react = () => {
|
||||
const rect = this.refs.reactButton.getBoundingClientRect();
|
||||
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
|
||||
top: rect.top + window.pageYOffset,
|
||||
left: rect.left + window.pageXOffset,
|
||||
post: this.p
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-timeline-post>
|
||||
|
||||
Reference in New Issue
Block a user