natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-02-22 17:32:58 +09:00
parent 463a38d606
commit 47efc83f16
10 changed files with 133 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,10 @@ import imagesImage from './images-image.vue';
import drive from './drive.vue'; import drive from './drive.vue';
import postPreview from './post-preview.vue'; import postPreview from './post-preview.vue';
import subPostContent from './sub-post-content.vue'; import subPostContent from './sub-post-content.vue';
import postCard from './post-card.vue';
import userCard from './user-card.vue';
import postDetail from './post-detail.vue';
import followButton from './follow-button.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-home', home); Vue.component('mk-home', home);
@ -17,3 +21,7 @@ Vue.component('mk-images-image', imagesImage);
Vue.component('mk-drive', drive); Vue.component('mk-drive', drive);
Vue.component('mk-post-preview', postPreview); Vue.component('mk-post-preview', postPreview);
Vue.component('mk-sub-post-content', subPostContent); Vue.component('mk-sub-post-content', subPostContent);
Vue.component('mk-post-card', postCard);
Vue.component('mk-user-card', userCard);
Vue.component('mk-post-detail', postDetail);
Vue.component('mk-follow-button', followButton);

23
src/web/app/mobile/views/components/post-detail-sub.vue → src/web/app/mobile/views/components/post-detail.sub.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="mk-post-detail-sub"> <div class="root sub">
<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"/>
</div> </div>
</div> </div>
</div> </div>
@ -26,8 +26,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-post-detail-sub .root.sub
margin 0
padding 8px padding 8px
font-size 0.9em font-size 0.9em
background #fdfdfd background #fdfdfd

95
src/web/app/mobile/views/components/post-detail.vue
View File

@ -1,58 +1,63 @@
<template> <template>
<div class="mk-post-detail"> <div class="mk-post-detail">
<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" @click="loadContext" disabled={ loadingContext }> <button
class="more"
v-if="p.reply && p.reply.reply_id && context == null"
@click="fetchContext"
:disabled="fetchingContext"
>
<template v-if="!contextFetching">%fa:ellipsis-v%</template> <template v-if="!contextFetching">%fa:ellipsis-v%</template>
<template v-if="contextFetching">%fa:spinner .pulse%</template> <template v-if="contextFetching">%fa:spinner .pulse%</template>
</button> </button>
<div class="context"> <div class="context">
<template each={ post in context }> <x-sub v-for="post in context" :key="post.id" :post="post"/>
<mk-post-detail-sub post={ post }/>
</template>
</div> </div>
<div class="reply-to" v-if="p.reply"> <div class="reply-to" v-if="p.reply">
<mk-post-detail-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=32' } alt="avatar"/></a> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
%fa:retweet%<a class="name" href={ '/' + post.user.username }> </router-link>
{ post.user.name } %fa:retweet%
</a> <router-link class="name" :to="`/${post.user.username}`">
{{ post.user.name }}
</router-link>
がRepost がRepost
</p> </p>
</div> </div>
<article> <article>
<header> <header>
<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=64' } alt="avatar"/> <img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
</a> </router-link>
<div> <div>
<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="username">@{ p.user.username }</span> <span class="username">@{{ p.user.username }}</span>
</div> </div>
</header> </header>
<div class="body"> <div class="body">
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/> <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"/> <mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<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 }/> <mk-poll v-if="p.poll" :post="p"/>
</div> </div>
<a class="time" href={ '/' + p.user.username + '/' + p.id }> <router-link class="time" :to="`/${p.user.username}/${p.id}`">
<mk-time time={ p.created_at } mode="detail"/> <mk-time :time="p.created_at" mode="detail"/>
</a> </router-link>
<footer> <footer>
<mk-reactions-viewer post={ p }/> <mk-reactions-viewer :post="p"/>
<button @click="reply" title="%i18n:mobile.tags.mk-post-detail.reply%"> <button @click="reply" title="%i18n:mobile.tags.mk-post-detail.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" title="%i18n:mobile.tags.mk-post-detail.reaction%"> <button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%">
%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 @click="menu" ref="menuButton"> <button @click="menu" ref="menuButton">
%fa:ellipsis-h% %fa:ellipsis-h%
@ -60,19 +65,21 @@
</footer> </footer>
</article> </article>
<div class="replies" v-if="!compact"> <div class="replies" v-if="!compact">
<template each={ post in replies }> <x-sub v-for="post in replies" :key="post.id" :post="post"/>
<mk-post-detail-sub post={ post }/>
</template>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import getPostSummary from '../../../../common/get-post-summary.ts'; import MkPostMenu from '../../../common/views/components/post-menu.vue';
import openPostForm from '../scripts/open-post-form'; import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './post-detail.sub.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XSub
},
props: { props: {
post: { post: {
type: Object, type: Object,
@ -135,6 +142,34 @@ export default Vue.extend({
this.contextFetching = false; this.contextFetching = false;
this.context = context.reverse(); this.context = context.reverse();
}); });
},
reply() {
(this as any).apis.post({
reply: this.p
});
},
repost() {
(this as any).apis.post({
repost: this.p
});
},
react() {
document.body.appendChild(new MkReactionPicker({
propsData: {
source: this.$refs.reactButton,
post: this.p,
compact: true
}
}).$mount().$el);
},
menu() {
document.body.appendChild(new MkPostMenu({
propsData: {
source: this.$refs.menuButton,
post: this.p,
compact: true
}
}).$mount().$el);
} }
} }
}); });
@ -154,7 +189,7 @@ export default Vue.extend({
> .fetching > .fetching
padding 64px 0 padding 64px 0
> .read-more > .more
display block display block
margin 0 margin 0
padding 10px 0 padding 10px 0

19
src/web/app/mobile/views/pages/user.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<mk-ui :func="fn"> <mk-ui>
<span slot="header" v-if="!fetching">%fa:user% {{ user.name }}</span> <span slot="header" v-if="!fetching">%fa:user% {{ user.name }}</span>
<template slot="funcIcon">%fa:pencil-alt%</template> <template slot="funcIcon">%fa:pencil-alt%</template>
<div v-if="!fetching" :class="$style.user"> <main v-if="!fetching">
<header> <header>
<div class="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''"></div> <div class="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''"></div>
<div class="body"> <div class="body">
@ -48,11 +48,11 @@
</nav> </nav>
</header> </header>
<div class="body"> <div class="body">
<mk-user-home v-if="page == 'home'" :user="user"/> <x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'posts'" :user="user"/> <mk-user-timeline v-if="page == 'posts'" :user="user"/>
<mk-user-timeline v-if="page == 'media'" :user="user" with-media/> <mk-user-timeline v-if="page == 'media'" :user="user" with-media/>
</div> </div>
</div> </main>
</mk-ui> </mk-ui>
</template> </template>
@ -60,8 +60,12 @@
import Vue from 'vue'; import Vue from 'vue';
import age from 's-age'; import age from 's-age';
import Progress from '../../../common/scripts/loading'; import Progress from '../../../common/scripts/loading';
import XHome from './user/home.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XHome
},
props: { props: {
page: { page: {
default: 'home' default: 'home'
@ -86,7 +90,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
(this as any).api('users/show', {
}, },
methods: { methods: {
fetch() { fetch() {
@ -106,8 +109,8 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="stylus" module> <style lang="stylus" scoped>
.user main
> header > header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3) box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
@ -140,7 +143,7 @@ export default Vue.extend({
left -2px left -2px
bottom -2px bottom -2px
width 100% width 100%
border 2px solid #313a42 border 3px solid #313a42
border-radius 6px border-radius 6px
@media (min-width 500px) @media (min-width 500px)

8
src/web/app/mobile/views/pages/user/home-activity.vue → src/web/app/mobile/views/pages/user/home.activity.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-user-home-activity"> <div class="root activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none"> <svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
<g v-for="(d, i) in data.reverse()"> <g v-for="(d, i) in data">
<rect width="0.8" :height="d.postsH" <rect width="0.8" :height="d.postsH"
:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH" :x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
fill="#41ddde"/> fill="#41ddde"/>
@ -39,6 +39,7 @@ export default Vue.extend({
d.repliesH = d.replies / this.peak; d.repliesH = d.replies / this.peak;
d.repostsH = d.reposts / this.peak; d.repostsH = d.reposts / this.peak;
}); });
data.reverse();
this.data = data; this.data = data;
}); });
} }
@ -46,8 +47,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home-activity .root.activity
display block
max-width 600px max-width 600px
margin 0 auto margin 0 auto

4
src/web/app/mobile/views/pages/user/followers-you-know.vue → src/web/app/mobile/views/pages/user/home.followers-you-know.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-home-followers-you-know"> <div class="root followers-you-know">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0"> <div v-if="!fetching && users.length > 0">
<a v-for="user in users" :key="user.id" :href="`/${user.username}`"> <a v-for="user in users" :key="user.id" :href="`/${user.username}`">
@ -34,7 +34,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home-followers-you-know .root.followers-you-know
> div > div
padding 4px padding 4px

8
src/web/app/mobile/views/pages/user/home-friends.vue → src/web/app/mobile/views/pages/user/home.friends.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-user-home-friends"> <div class="root friends">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0"> <div v-if="!fetching && users.length > 0">
<mk-user-card v-for="user in users" :key="user.id" :user="user"/> <mk-user-card v-for="user in users" :key="user.id" :user="user"/>
</div> </div>
@ -30,7 +30,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home-friends .root.friends
> div > div
overflow-x scroll overflow-x scroll
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
@ -41,7 +41,7 @@ export default Vue.extend({
&:not(:last-child) &:not(:last-child)
margin-right 8px margin-right 8px
> .initializing > .fetching
> .empty > .empty
margin 0 margin 0
padding 16px padding 16px

4
src/web/app/mobile/views/pages/user/home-photos.vue → src/web/app/mobile/views/pages/user/home.photos.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-home-photos"> <div class="root photos">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0"> <div class="stream" v-if="!fetching && images.length > 0">
<a v-for="image in images" :key="image.id" <a v-for="image in images" :key="image.id"
@ -43,7 +43,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home-photos .root.photos
> .stream > .stream
display -webkit-flex display -webkit-flex

12
src/web/app/mobile/views/pages/user/home-posts.vue → src/web/app/mobile/views/pages/user/home.posts.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mk-user-home-posts"> <div class="root posts">
<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
<div v-if="!initializing && posts.length > 0"> <div v-if="!fetching && posts.length > 0">
<mk-post-card v-for="post in posts" :key="post.id" :post="post"/> <mk-post-card v-for="post in posts" :key="post.id" :post="post"/>
</div> </div>
<p class="empty" v-if="!initializing && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p> <p class="empty" v-if="!fetching && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home-posts .root.posts
> div > div
overflow-x scroll overflow-x scroll
@ -44,7 +44,7 @@ export default Vue.extend({
&:not(:last-child) &:not(:last-child)
margin-right 8px margin-right 8px
> .initializing > .fetching
> .empty > .empty
margin 0 margin 0
padding 16px padding 16px

39
src/web/app/mobile/views/pages/user/home.vue
View File

@ -1,46 +1,34 @@
<template> <template>
<div class="mk-user-home"> <div class="root home">
<mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/> <mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
<section class="recent-posts"> <section class="recent-posts">
<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2> <h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
<div> <div>
<mk-user-home-posts :user="user"/> <x-posts :user="user"/>
</div> </div>
</section> </section>
<section class="images"> <section class="images">
<h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2> <h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2>
<div> <div>
<mk-user-home-photos :user="user"/> <x-photos :user="user"/>
</div> </div>
</section> </section>
<section class="activity"> <section class="activity">
<h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2> <h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2>
<div> <div>
<mk-user-home-activity-chart :user="user"/> <x-activity :user="user"/>
</div>
</section>
<section class="keywords">
<h2>%fa:R comment%%i18n:mobile.tags.mk-user-overview.keywords%</h2>
<div>
<mk-user-home-keywords :user="user"/>
</div>
</section>
<section class="domains">
<h2>%fa:globe%%i18n:mobile.tags.mk-user-overview.domains%</h2>
<div>
<mk-user-home-domains :user="user"/>
</div> </div>
</section> </section>
<section class="frequently-replied-users"> <section class="frequently-replied-users">
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2> <h2>%fa:users%%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
<div> <div>
<mk-user-home-frequently-replied-users :user="user"/> <x-friends :user="user"/>
</div> </div>
</section> </section>
<section class="followers-you-know" v-if="os.isSignedIn && os.i.id !== user.id"> <section class="followers-you-know" v-if="os.isSignedIn && os.i.id !== user.id">
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2> <h2>%fa:users%%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
<div> <div>
<mk-user-home-followers-you-know :user="user"/> <x-followers-you-know :user="user"/>
</div> </div>
</section> </section>
<p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p> <p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
@ -49,13 +37,26 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import XPosts from './home.posts.vue';
import XPhotos from './home.photos.vue';
import XFriends from './home.friends.vue';
import XFollowersYouKnow from './home.followers-you-know.vue';
import XActivity from './home.activity.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XPosts,
XPhotos,
XFriends,
XFollowersYouKnow,
XActivity
},
props: ['user'] props: ['user']
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home .root.home
max-width 600px max-width 600px
margin 0 auto margin 0 auto