mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-12-16 23:58:54 +09:00
Code

wip

Browse Source
This commit is contained in:
syuilo 2018-02-22 05:30:37 +09:00
parent 7f7fdbd678
commit c30fff623d
5 changed files with 47 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/web/app/mobile/views/components/index.ts
View File

@ -1,5 +1,11 @@
import Vue from 'vue'; import Vue from 'vue';
import ui from './ui.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-ui', ui);
Vue.component('mk-home', home);
Vue.component('mk-timeline', timeline);
Vue.component('mk-posts', posts);

57
src/web/app/mobile/views/components/posts-post.vue → src/web/app/mobile/views/components/posts.post.vue
View File

@ -1,58 +1,62 @@
<template> <template>
<div class="mk-posts-post" :class="{ repost: isRepost }"> <div class="post" :class="{ repost: isRepost }">
<div class="reply-to" v-if="p.reply"> <div class="reply-to" v-if="p.reply">
<mk-timeline-post-sub post={ p.reply }/> <x-sub :post="p.reply"/>
</div> </div>
<div class="repost" v-if="isRepost"> <div class="repost" v-if="isRepost">
<p> <p>
<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>
%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)} %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> </p>
<mk-time time={ post.created_at }/> <mk-time :time="post.created_at"/>
</div> </div>
<article> <article>
<a class="avatar-anchor" href={ '/' + p.user.username }> <router-link class="avatar-anchor" :to="`/${p.user.username}`">
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=96' } alt="avatar"/> <img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
</a> </router-link>
<div class="main"> <div class="main">
<header> <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="is-bot" v-if="p.user.is_bot">bot</span>
<span class="username">@{ p.user.username }</span> <span class="username">@{{ p.user.username }}</span>
<a class="created-at" href={ url }> <router-link class="created-at" :to="url">
<mk-time time={ p.created_at }/> <mk-time :time="p.created_at"/>
</a> </router-link>
</header> </header>
<div class="body"> <div class="body">
<div class="text" ref="text"> <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"> <a class="reply" v-if="p.reply">
%fa:reply% %fa:reply%
</a> </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> <a class="quote" v-if="p.repost != null">RP:</a>
</div> </div>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images images={ p.media }/> <mk-images :images="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" post={ p } ref="pollViewer"/> <mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
<span class="app" v-if="p.app">via <b>{ p.app.name }</b></span> <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% <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>
</div> </div>
<footer> <footer>
<mk-reactions-viewer post={ p } ref="reactionsViewer"/> <mk-reactions-viewer :post="p" ref="reactionsViewer"/>
<button @click="reply"> <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>
<button @click="repost" title="Repost"> <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>
<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton"> <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>
<button class="menu" @click="menu" ref="menuButton"> <button class="menu" @click="menu" ref="menuButton">
%fa:ellipsis-h% %fa:ellipsis-h%
@ -65,7 +69,6 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import openPostForm from '../scripts/open-post-form';
export default Vue.extend({ export default Vue.extend({
props: ['post'], props: ['post'],
@ -154,7 +157,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-posts-post .post
font-size 12px font-size 12px
border-bottom solid 1px #eaeaea border-bottom solid 1px #eaeaea

7
src/web/app/mobile/views/components/posts.vue
View File

@ -2,7 +2,7 @@
<div class="mk-posts"> <div class="mk-posts">
<slot name="head"></slot> <slot name="head"></slot>
<template v-for="(post, i) in _posts"> <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"> <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-up%{{ post._datetext }}</span>
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
@ -14,7 +14,12 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import XPost from './posts.post.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XPost
},
props: { props: {
posts: { posts: {
type: Array, type: Array,

6
src/web/app/mobile/views/components/ui.header.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mk-ui-header"> <div class="header">
<mk-special-message/> <mk-special-message/>
<div class="main"> <div class="main">
<div class="backdrop"></div> <div class="backdrop"></div>
<div class="content"> <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> <template v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</template>
<h1> <h1>
<slot>Misskey</slot> <slot>Misskey</slot>
@ -83,7 +83,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header .header
$height = 48px $height = 48px
position fixed position fixed

4
src/web/app/mobile/views/components/ui.nav.vue
View File

@ -1,5 +1,5 @@
<template> <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="backdrop" @click="parent.toggleDrawer"></div>
<div class="body"> <div class="body">
<router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`"> <router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`">
@ -97,7 +97,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-nav .nav
.backdrop .backdrop
position fixed position fixed
top 0 top 0