FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

[Client] ✌️

Browse source
This commit is contained in:
syuilo 2017-02-06 17:00:22 +09:00
parent 7c6357c633
commit b2f696bdde
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/web/app/desktop/tags/notifications.tag
View file

@ -3,36 +3,42 @@
<virtual each={ notification, i in notifications }> <virtual each={ notification, i in notifications }>
<div class="notification { notification.type }"> <div class="notification { notification.type }">
<mk-time time={ notification.created_at }></mk-time> <mk-time time={ notification.created_at }></mk-time>
<div class="main" 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 == '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>
<div class="text"> <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><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>
</div> </div>
</div> </virtual>
<div class="main" 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> <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>
<div class="text"> <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> <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> </div>
</div> </virtual>
<div class="main" 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> <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>
<div class="text"> <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> <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> </div>
</div> </virtual>
<div class="main" 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> <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>
<div class="text"> <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> <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> </div>
</div> </virtual>
<div class="main" 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> <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>
<div class="text"> <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> <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> </div>
</div> </virtual>
<div class="main" 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> <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>
<div class="text"> <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> <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> </div>
</div> </virtual>
</div> </div>
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p> <p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
</virtual> </virtual>
@ -49,6 +55,7 @@
> .notification > .notification
margin 0 margin 0
padding 16px padding 16px
word-wrap break-word
font-size 0.9em font-size 0.9em
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px rgba(0, 0, 0, 0.05)
@ -64,17 +71,17 @@
color rgba(0, 0, 0, 0.6) color rgba(0, 0, 0, 0.6)
font-size small font-size small
> .main
word-wrap break-word
&:after &:after
content "" content ""
display block display block
clear both clear both
.avatar-anchor > .avatar-anchor
display block display block
float left float left
position -webkit-sticky
position sticky
top 16px
img img
min-width 36px min-width 36px
@ -83,7 +90,7 @@
max-height 36px max-height 36px
border-radius 6px border-radius 6px
.text > .text
float right float right
width calc(100% - 36px) width calc(100% - 36px)
padding-left 8px padding-left 8px