mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 17:35:44 +01:00
wip
This commit is contained in:
こぴなたみぽ
parent
79705d2035
commit
c81c4c224a
4 changed files with 70 additions and 84 deletions
|
|
@ -1,26 +0,0 @@
|
||||||
<mk-search-page>
|
|
||||||
<mk-ui ref="ui">
|
|
||||||
<mk-search ref="search" query={ parent.opts.query }/>
|
|
||||||
</mk-ui>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import ui from '../../scripts/ui-event';
|
|
||||||
import Progress from '../../../common/scripts/loading';
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
|
|
||||||
// TODO: クエリをHTMLエスケープ
|
|
||||||
ui.trigger('title', '%fa:search%' + this.opts.query);
|
|
||||||
document.documentElement.style.background = '#313a42';
|
|
||||||
|
|
||||||
Progress.start();
|
|
||||||
|
|
||||||
this.$refs.ui.refs.search.on('loaded', () => {
|
|
||||||
Progress.done();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-search-page>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<mk-search-posts>
|
|
||||||
<mk-timeline init={ init } more={ more } empty={ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
margin 8px auto
|
|
||||||
max-width 500px
|
|
||||||
width calc(100% - 16px)
|
|
||||||
background #fff
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
margin 16px auto
|
|
||||||
width calc(100% - 32px)
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import parse from '../../common/scripts/parse-search-query';
|
|
||||||
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.limit = 30;
|
|
||||||
this.offset = 0;
|
|
||||||
|
|
||||||
this.query = this.opts.query;
|
|
||||||
|
|
||||||
this.init = new Promise((res, rej) => {
|
|
||||||
this.$root.$data.os.api('posts/search', parse(this.query)).then(posts => {
|
|
||||||
res(posts);
|
|
||||||
this.$emit('loaded');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.more = () => {
|
|
||||||
this.offset += this.limit;
|
|
||||||
return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
|
|
||||||
limit: this.limit,
|
|
||||||
offset: this.offset
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-search-posts>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<mk-search>
|
|
||||||
<mk-search-posts ref="posts" query={ query }/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.query = this.opts.query;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$refs.posts.on('loaded', () => {
|
|
||||||
this.$emit('loaded');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-search>
|
|
||||||
70
src/web/app/mobile/views/pages/search.vue
Normal file
70
src/web/app/mobile/views/pages/search.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<mk-ui>
|
||||||
|
<span slot="header">%fa:search% {{ query }}</span>
|
||||||
|
<main v-if="!fetching">
|
||||||
|
<mk-posts :class="$style.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="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
|
||||||
|
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
|
||||||
|
</button>
|
||||||
|
</mk-posts>
|
||||||
|
</main>
|
||||||
|
</mk-ui>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Progress from '../../../common/scripts/loading';
|
||||||
|
import parse from '../../../common/scripts/parse-search-query';
|
||||||
|
|
||||||
|
const limit = 30;
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
props: ['query'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fetching: true,
|
||||||
|
posts: [],
|
||||||
|
offset: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.query} | Misskey`;
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
|
||||||
|
Progress.start();
|
||||||
|
|
||||||
|
this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
|
||||||
|
limit: limit
|
||||||
|
})).then(posts => {
|
||||||
|
this.posts = posts;
|
||||||
|
this.fetching = false;
|
||||||
|
Progress.done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
more() {
|
||||||
|
this.offset += limit;
|
||||||
|
return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
|
||||||
|
limit: limit,
|
||||||
|
offset: this.offset
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" module>
|
||||||
|
.posts
|
||||||
|
margin 8px auto
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue