wip
This commit is contained in:
syuilo
parent
7f7fdbd678
commit
c30fff623d
@ -1,5 +1,11 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import ui from './ui.vue';
|
||||
import home from './home.vue';
|
||||
import timeline from './timeline.vue';
|
||||
import posts from './posts.vue';
|
||||
|
||||
Vue.component('mk-ui', ui);
|
||||
Vue.component('mk-home', home);
|
||||
Vue.component('mk-timeline', timeline);
|
||||
Vue.component('mk-posts', posts);
|
||||
|
||||
@ -1,58 +1,62 @@
|
||||
<template>
|
||||
<div class="mk-posts-post" :class="{ repost: isRepost }">
|
||||
<div class="post" :class="{ repost: isRepost }">
|
||||
<div class="reply-to" v-if="p.reply">
|
||||
<mk-timeline-post-sub post={ p.reply }/>
|
||||
<x-sub :post="p.reply"/>
|
||||
</div>
|
||||
<div class="repost" v-if="isRepost">
|
||||
<p>
|
||||
<a class="avatar-anchor" href={ '/' + post.user.username }>
|
||||
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
</a>
|
||||
%fa:retweet%{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
|
||||
<router-link class="avatar-anchor" :to="`/${post.user.username}`">
|
||||
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
%fa:retweet%
|
||||
{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}
|
||||
<router-link class="name" :to="`/${post.user.username}`">{{ post.user.name }}</router-link>
|
||||
{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}
|
||||
</p>
|
||||
<mk-time time={ post.created_at }/>
|
||||
<mk-time :time="post.created_at"/>
|
||||
</div>
|
||||
<article>
|
||||
<a class="avatar-anchor" href={ '/' + p.user.username }>
|
||||
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=96' } alt="avatar"/>
|
||||
</a>
|
||||
<router-link class="avatar-anchor" :to="`/${p.user.username}`">
|
||||
<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div class="main">
|
||||
<header>
|
||||
<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
|
||||
<router-link class="name" :to="`/${p.user.username}`">{{ p.user.name }}</router-link>
|
||||
<span class="is-bot" v-if="p.user.is_bot">bot</span>
|
||||
<span class="username">@{ p.user.username }</span>
|
||||
<a class="created-at" href={ url }>
|
||||
<mk-time time={ p.created_at }/>
|
||||
</a>
|
||||
<span class="username">@{{ p.user.username }}</span>
|
||||
<router-link class="created-at" :to="url">
|
||||
<mk-time :time="p.created_at"/>
|
||||
</router-link>
|
||||
</header>
|
||||
<div class="body">
|
||||
<div class="text" ref="text">
|
||||
<p class="channel" v-if="p.channel != null"><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
|
||||
<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
|
||||
<a class="reply" v-if="p.reply">
|
||||
%fa:reply%
|
||||
</a>
|
||||
<p class="dummy"></p>
|
||||
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||
<a class="quote" v-if="p.repost != null">RP:</a>
|
||||
</div>
|
||||
<div class="media" v-if="p.media">
|
||||
<mk-images images={ p.media }/>
|
||||
<mk-images :images="p.media"/>
|
||||
</div>
|
||||
<mk-poll v-if="p.poll" post={ p } ref="pollViewer"/>
|
||||
<span class="app" v-if="p.app">via <b>{ p.app.name }</b></span>
|
||||
<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
|
||||
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
|
||||
<div class="repost" v-if="p.repost">%fa:quote-right -flip-h%
|
||||
<mk-post-preview class="repost" post={ p.repost }/>
|
||||
<mk-post-preview class="repost" :post="p.repost"/>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
|
||||
<mk-reactions-viewer :post="p" ref="reactionsViewer"/>
|
||||
<button @click="reply">
|
||||
%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
|
||||
%fa:reply%<p class="count" v-if="p.replies_count > 0">{{ p.replies_count }}</p>
|
||||
</button>
|
||||
<button @click="repost" title="Repost">
|
||||
%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
|
||||
%fa:retweet%<p class="count" v-if="p.repost_count > 0">{{ p.repost_count }}</p>
|
||||
</button>
|
||||
<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton">
|
||||
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
|
||||
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
|
||||
</button>
|
||||
<button class="menu" @click="menu" ref="menuButton">
|
||||
%fa:ellipsis-h%
|
||||
@ -65,7 +69,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import openPostForm from '../scripts/open-post-form';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['post'],
|
||||
@ -154,7 +157,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-posts-post
|
||||
.post
|
||||
font-size 12px
|
||||
border-bottom solid 1px #eaeaea
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="mk-posts">
|
||||
<slot name="head"></slot>
|
||||
<template v-for="(post, i) in _posts">
|
||||
<mk-posts-post :post="post" :key="post.id"/>
|
||||
<x-post :post="post" :key="post.id"/>
|
||||
<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
|
||||
<span>%fa:angle-up%{{ post._datetext }}</span>
|
||||
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
|
||||
@ -14,7 +14,12 @@
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XPost from './posts.post.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XPost
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="mk-ui-header">
|
||||
<div class="header">
|
||||
<mk-special-message/>
|
||||
<div class="main">
|
||||
<div class="backdrop"></div>
|
||||
<div class="content">
|
||||
<button class="nav" @click="parent.toggleDrawer">%fa:bars%</button>
|
||||
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
|
||||
<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</template>
|
||||
<h1>
|
||||
<slot>Misskey</slot>
|
||||
@ -83,7 +83,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-ui-header
|
||||
.header
|
||||
$height = 48px
|
||||
|
||||
position fixed
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="mk-ui-nav" :style="{ display: isOpen ? 'block' : 'none' }">
|
||||
<div class="nav" :style="{ display: isOpen ? 'block' : 'none' }">
|
||||
<div class="backdrop" @click="parent.toggleDrawer"></div>
|
||||
<div class="body">
|
||||
<router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`">
|
||||
@ -97,7 +97,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-ui-nav
|
||||
.nav
|
||||
.backdrop
|
||||
position fixed
|
||||
top 0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user