Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✌️

Browse source
This commit is contained in:
syuilo 2018-02-26 00:39:05 +09:00
parent 0da0ae14d2
commit 3ae824c354
8 changed files with 227 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/web/app/mobile/views/components/post-detail.vue
View file

@ -39,6 +39,9 @@
</header>
<div class="body">
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="media" v-if="p.media">
<mk-images :images="p.media"/>
@ -312,6 +315,28 @@ export default Vue.extend({
display block
max-width 100%
> .tags
> *
margin 0 8px 0 0
padding 0 8px 0 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
> .time
font-size 16px
color #c0c0c0

30
src/web/app/mobile/views/components/posts.post.vue
View file

@ -35,6 +35,9 @@
%fa:reply%
</a>
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=${tag}`">{{ tag }}</router-link>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="quote" v-if="p.repost != null">RP:</a>
</div>
@ -346,10 +349,7 @@ export default Vue.extend({
font-size 1.1em
color #717171
> .dummy
display none
mk-url-preview
.mk-url-preview
margin-top 8px
> .channel
@ -364,6 +364,28 @@ export default Vue.extend({
font-style oblique
color #a0bf46
> .tags
> *
margin 0 8px 0 0
padding 0 8px 0 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
[data-is-me]:after
content "you"
padding 0 4px

59
src/web/app/mobile/views/pages/search.vue
View file

@ -1,10 +1,10 @@
<template>
<mk-ui>
<span slot="header">%fa:search% {{ query }}</span>
<span slot="header">%fa:search% {{ q }}</span>
<main v-if="!fetching">
<mk-posts :class="$style.posts" :posts="posts">
<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }}</span>
<button v-if="canFetchMore" @click="more" :disabled="fetching" slot="tail">
<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', q) }}</span>
<button v-if="existMore" @click="more" :disabled="fetching" slot="tail">
<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
@ -18,38 +18,61 @@ import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
import parse from '../../../common/scripts/parse-search-query';
const limit = 30;
const limit = 20;
export default Vue.extend({
props: ['query'],
data() {
return {
fetching: true,
existMore: false,
posts: [],
offset: 0
};
},
watch: {
$route: 'fetch'
},
computed: {
q(): string {
return this.$route.query.q;
}
},
mounted() {
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.query} | Misskey`;
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.q} | Misskey`;
document.documentElement.style.background = '#313a42';
Progress.start();
(this as any).api('posts/search', Object.assign({}, parse(this.query), {
limit: limit
})).then(posts => {
this.posts = posts;
this.fetching = false;
Progress.done();
});
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
Progress.start();
(this as any).api('posts/search', Object.assign({
limit: limit + 1
}, parse(this.q))).then(posts => {
if (posts.length == limit + 1) {
posts.pop();
this.existMore = true;
}
this.posts = posts;
this.fetching = false;
Progress.done();
});
},
more() {
this.offset += limit;
return (this as any).api('posts/search', Object.assign({}, parse(this.query), {
limit: limit,
(this as any).api('posts/search', Object.assign({
limit: limit + 1,
offset: this.offset
}));
}, parse(this.q))).then(posts => {
if (posts.length == limit + 1) {
posts.pop();
} else {
this.existMore = false;
}
this.posts = this.posts.concat(posts);
});
}
}
});