natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

✌️

This commit is contained in:
syuilo 2018-02-23 21:45:59 +09:00
parent 96bc49adc6
commit cd9fc9a717
7 changed files with 97 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/app/common/views/components/messaging-room.message.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="message" :data-is-me="isMe"> <div class="message" :data-is-me="isMe">
<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank"> <router-link class="avatar-anchor" :to="`/${message.user.username}`" :title="message.user.username" target="_blank">
<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/> <img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
</a> </router-link>
<div class="content-container"> <div class="content-container">
<div class="balloon"> <div class="balloon">
<p class="read" v-if="isMe && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p> <p class="read" v-if="isMe && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>

56
src/web/app/desktop/views/components/notifications.vue
View File

@ -5,84 +5,84 @@
<div class="notification" :class="notification.type" :key="notification.id"> <div class="notification" :class="notification.type" :key="notification.id">
<mk-time :time="notification.created_at"/> <mk-time :time="notification.created_at"/>
<template v-if="notification.type == 'reaction'"> <template v-if="notification.type == 'reaction'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
<mk-reaction-icon :reaction="notification.reaction"/> <mk-reaction-icon :reaction="notification.reaction"/>
<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a> <router-link :to="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'repost'"> <template v-if="notification.type == 'repost'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:retweet% <p>%fa:retweet%
<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:quote-left% <p>%fa:quote-left%
<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'follow'"> <template v-if="notification.type == 'follow'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:user-plus% <p>%fa:user-plus%
<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a> <router-link :to="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
</p> </p>
</div> </div>
</template> </template>
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:reply% <p>%fa:reply%
<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:at% <p>%fa:at%
<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
</div> </div>
</template> </template>
<template v-if="notification.type == 'poll_vote'"> <template v-if="notification.type == 'poll_vote'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p>%fa:chart-pie%<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p> <p>%fa:chart-pie%<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
</div> </div>

29
src/web/app/desktop/views/components/post-detail.sub.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<div class="sub" :title="title"> <div class="sub" :title="title">
<a class="avatar-anchor" href={ '/' + post.user.username }> <router-link class="avatar-anchor" :to="`/${post.user.username}`">
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" v-user-preview={ post.user_id }/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
</a> </router-link>
<div class="main"> <div class="main">
<header> <header>
<div class="left"> <div class="left">
<a class="name" href={ '/' + post.user.username } v-user-preview={ post.user_id }>{ post.user.name }</a> <router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
<span class="username">@{ post.user.username }</span> <span class="username">@{{ post.user.username }}</span>
</div> </div>
<div class="right"> <div class="right">
<a class="time" href={ '/' + post.user.username + '/' + post.id }> <router-link class="time" :to="`/${post.user.username}/${post.id}`">
<mk-time time={ post.created_at }/> <mk-time :time="post.created_at"/>
</a> </router-link>
</div> </div>
</header> </header>
<div class="body"> <div class="body">
<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/> <mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
<div class="media" v-if="post.media"> <div class="media" v-if="post.media">
<mk-images images={ post.media }/> <mk-images :images="post.media"/>
</div> </div>
</div> </div>
</div> </div>
@ -108,9 +108,10 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
color #c0c0c0 color #c0c0c0
> .body </style>
> .text <style lang="stylus" module>
.text
cursor default cursor default
display block display block
margin 0 margin 0
@ -118,8 +119,4 @@ export default Vue.extend({
overflow-wrap break-word overflow-wrap break-word
font-size 1em font-size 1em
color #717171 color #717171
> .mk-url-preview
margin-top 8px
</style> </style>

11
src/web/app/desktop/views/components/post-preview.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<div class="mk-post-preview" :title="title"> <div class="mk-post-preview" :title="title">
<a class="avatar-anchor" :href="`/${post.user.username}`"> <router-link class="avatar-anchor" :to="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
</a> </router-link>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a> <router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
<span class="username">@{{ post.user.username }}</span> <span class="username">@{{ post.user.username }}</span>
<a class="time" :href="`/${post.user.username}/${post.id}`"> <router-link class="time" :to="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/></a> <mk-time :time="post.created_at"/>
</router-link>
</header> </header>
<div class="body"> <div class="body">
<mk-sub-post-content class="text" :post="post"/> <mk-sub-post-content class="text" :post="post"/>

10
src/web/app/desktop/views/components/posts.post.sub.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="sub" :title="title"> <div class="sub" :title="title">
<a class="avatar-anchor" :href="`/${post.user.username}`"> <router-link class="avatar-anchor" :to="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
</a> </router-link>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a> <router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
<span class="username">@{{ post.user.username }}</span> <span class="username">@{{ post.user.username }}</span>
<a class="created-at" :href="`/${post.user.username}/${post.id}`"> <router-link class="created-at" :to="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/> <mk-time :time="post.created_at"/>
</a> </router-link>
</header> </header>
<div class="body"> <div class="body">
<mk-sub-post-content class="text" :post="post"/> <mk-sub-post-content class="text" :post="post"/>

60
src/web/app/mobile/views/components/notification.vue
View File

@ -3,99 +3,99 @@
<mk-time :time="notification.created_at"/> <mk-time :time="notification.created_at"/>
<template v-if="notification.type == 'reaction'"> <template v-if="notification.type == 'reaction'">
<a class="avatar-anchor" :href="`/${notification.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
<mk-reaction-icon :reaction="notification.reaction"/> <mk-reaction-icon :reaction="notification.reaction"/>
<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a> <router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }} %fa:quote-left%{{ getPostSummary(notification.post) }}
%fa:quote-right% %fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'repost'"> <template v-if="notification.type == 'repost'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:retweet% %fa:retweet%
<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:quote-left% %fa:quote-left%
<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'follow'"> <template v-if="notification.type == 'follow'">
<a class="avatar-anchor" :href="`/${notification.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:user-plus% %fa:user-plus%
<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a> <router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
</p> </p>
</div> </div>
</template> </template>
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:reply% %fa:reply%
<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:at% %fa:at%
<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a> <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
</div> </div>
</template> </template>
<template v-if="notification.type == 'poll_vote'"> <template v-if="notification.type == 'poll_vote'">
<a class="avatar-anchor" :href="`/${notification.user.username}`"> <router-link class="avatar-anchor" :to="`/${notification.user.username}`">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="text"> <div class="text">
<p> <p>
%fa:chart-pie% %fa:chart-pie%
<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a> <router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
</a> </router-link>
</div> </div>
</template> </template>
</div> </div>

10
src/web/app/mobile/views/components/post-preview.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="mk-post-preview"> <div class="mk-post-preview">
<a class="avatar-anchor" :href="`/${post.user.username}`"> <router-link class="avatar-anchor" :to="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`">{{ post.user.name }}</a> <router-link class="name" :to="`/${post.user.username}`">{{ post.user.name }}</router-link>
<span class="username">@{{ post.user.username }}</span> <span class="username">@{{ post.user.username }}</span>
<a class="time" :href="`/${post.user.username}/${post.id}`"> <router-link class="time" :to="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/> <mk-time :time="post.created_at"/>
</a> </router-link>
</header> </header>
<div class="body"> <div class="body">
<mk-sub-post-content class="text" :post="post"/> <mk-sub-post-content class="text" :post="post"/>