sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#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

29
src/web/app/mobile/tags/notification-preview.tag
View File

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

10
src/web/app/mobile/tags/notification.tag
View File

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

137
src/web/app/mobile/tags/post-detail.tag
View File

@@ -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 = () => {

31
src/web/app/mobile/tags/timeline-post.tag
View File

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