sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor client (#4307)

Browse Source 
* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* 🎨

* 🎨

* 🎨
This commit is contained in:
syuilo
2019-02-18 09:17:55 +09:00
committed by GitHub
parent efd0368e56
commit ba1492f977
37 changed files with 738 additions and 1526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/app/mobile/style.styl
View File

@@ -9,3 +9,15 @@
html
height 100%
background var(--bg)
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px

82
src/client/app/mobile/views/components/notes.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="mk-notes">
<slot name="head"></slot>
<div class="ivaojijs">
<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
<mk-error v-if="!fetching && !inited" @retry="init()"/>
<div class="placeholder" v-if="fetching">
<template v-for="i in 10">
@@ -10,8 +10,6 @@
</template>
</div>
<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
<!-- トランジションを有効にするとなぜかメモリリークする -->
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
<template v-for="(note, i) in _notes">
@@ -23,8 +21,8 @@
</template>
</component>
<footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<footer v-if="cursor != null">
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
</button>
@@ -41,20 +39,21 @@ const displayLimit = 30;
export default Vue.extend({
i18n: i18n(),
props: {
more: {
type: Function,
required: false
makePromise: {
required: true
}
},
data() {
return {
requestInitPromise: null as () => Promise<any[]>,
notes: [],
queue: [],
fetching: true,
moreFetching: false
moreFetching: false,
inited: false,
cursor: null
};
},
@@ -80,6 +79,10 @@ export default Vue.extend({
}
},
created() {
this.init();
},
mounted() {
window.addEventListener('scroll', this.onScroll, { passive: true });
},
@@ -97,27 +100,41 @@ export default Vue.extend({
Vue.set((this as any).notes, i, note);
},
init(promiseGenerator: () => Promise<any[]>) {
this.requestInitPromise = promiseGenerator;
this.resolveInitPromise();
},
resolveInitPromise() {
reload() {
this.queue = [];
this.notes = [];
this.init();
},
init() {
this.fetching = true;
const promise = this.requestInitPromise();
promise.then(notes => {
this.notes = notes;
this.requestInitPromise = null;
this.makePromise().then(x => {
if (Array.isArray(x)) {
this.notes = x;
} else {
this.notes = x.notes;
this.cursor = x.cursor;
}
this.inited = true;
this.fetching = false;
this.$emit('inited');
}, e => {
this.fetching = false;
});
},
more() {
if (this.cursor == null || this.moreFetching) return;
this.moreFetching = true;
this.makePromise(this.cursor).then(x => {
this.notes = this.notes.concat(x.notes);
this.cursor = x.cursor;
this.moreFetching = false;
}, e => {
this.moreFetching = false;
});
},
prepend(note, silent = false) {
// 弾く
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
@@ -144,10 +161,6 @@ export default Vue.extend({
this.notes.push(note);
},
tail() {
return this.notes[this.notes.length - 1];
},
releaseQueue() {
for (const n of this.queue) {
this.prepend(n, true);
@@ -155,15 +168,6 @@ export default Vue.extend({
this.queue = [];
},
async loadMore() {
if (this.more == null) return;
if (this.moreFetching) return;
this.moreFetching = true;
await this.more();
this.moreFetching = false;
},
onScroll() {
if (this.isScrollTop()) {
this.releaseQueue();
@@ -176,7 +180,7 @@ export default Vue.extend({
if (this.$el.offsetHeight == 0) return;
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.loadMore();
if (current > document.body.offsetHeight - 8) this.more();
}
}
}
@@ -184,7 +188,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-notes
.ivaojijs
overflow hidden
background var(--face)
border-radius 8px

91
src/client/app/mobile/views/components/user-list-timeline.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
</div>
</template>
@@ -14,19 +14,31 @@ export default Vue.extend({
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
connection: null
connection: null,
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
untilId: cursor ? cursor : undefined,
includeMyRenotes: this.$store.state.settings.showMyRenotes,
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
return {
notes: notes,
cursor: notes[notes.length - 1].id
};
} else {
return {
notes: notes,
cursor: null
};
}
})
};
},
computed: {
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.existMore;
}
},
watch: {
$route: 'init'
},
@@ -48,59 +60,6 @@ export default Vue.extend({
this.connection.on('note', this.onNote);
this.connection.on('userAdded', this.onUserAdded);
this.connection.on('userRemoved', this.onUserRemoved);
this.fetch();
},
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
this.$root.api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
includeMyRenotes: this.$store.state.settings.showMyRenotes,
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
if (!this.canFetchMore) return;
this.moreFetching = true;
const promise = this.$root.api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id,
includeMyRenotes: this.$store.state.settings.showMyRenotes,
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
});
promise.then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
for (const n of notes) {
(this.$refs.timeline as any).append(n);
}
this.moreFetching = false;
});
return promise;
},
onNote(note) {
@@ -109,11 +68,11 @@ export default Vue.extend({
},
onUserAdded() {
this.fetch();
(this.$refs.timeline as any).reload();
},
onUserRemoved() {
this.fetch();
(this.$refs.timeline as any).reload();
}
}
});

74
src/client/app/mobile/views/components/user-timeline.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="mk-user-timeline">
<mk-notes ref="timeline" :more="existMore ? more : null">
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
<div slot="empty">
<fa :icon="['far', 'comments']"/>
{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
@@ -17,73 +17,31 @@ const fetchLimit = 10;
export default Vue.extend({
i18n: i18n('mobile/views/components/user-timeline.vue'),
props: ['user', 'withMedia'],
data() {
return {
fetching: true,
existMore: false,
moreFetching: false
};
},
computed: {
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.existMore;
}
},
mounted() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
this.$root.api('users/notes', {
userId: this.user.id,
withFiles: this.withMedia,
limit: fetchLimit + 1,
untilDate: new Date().getTime() + 1000 * 86400 * 365
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
if (!this.canFetchMore) return;
this.moreFetching = true;
const promise = this.$root.api('users/notes', {
makePromise: cursor => this.$root.api('users/notes', {
userId: this.user.id,
withFiles: this.withMedia,
limit: fetchLimit + 1,
untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
});
promise.then(notes => {
withFiles: this.withMedia,
untilId: cursor ? cursor : undefined
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
return {
notes: notes,
cursor: notes[notes.length - 1].id
};
} else {
this.existMore = false;
return {
notes: notes,
cursor: null
};
}
for (const n of notes) {
(this.$refs.timeline as any).append(n);
}
this.moreFetching = false;
});
return promise;
}
})
};
}
});
</script>

15
src/client/app/mobile/views/pages/explore.vue
View File

@@ -26,18 +26,3 @@ export default Vue.extend({
},
});
</script>
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

10
src/client/app/mobile/views/pages/favorites.vue
View File

@@ -76,21 +76,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
> * > .post
margin-bottom 8px
@media (min-width 500px)
padding 16px
> * > .post
margin-bottom 16px
@media (min-width 600px)
padding 32px
</style>

10
src/client/app/mobile/views/pages/featured.vue
View File

@@ -51,21 +51,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
> * > .post
margin-bottom 8px
@media (min-width 500px)
padding 16px
> * > .post
margin-bottom 16px
@media (min-width 600px)
padding 32px
</style>

80
src/client/app/mobile/views/pages/home.timeline.vue
View File

@@ -7,7 +7,7 @@
</div>
</ui-container>
<mk-notes ref="timeline" :more="existMore ? more : null">
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
<div slot="empty">
<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
</div>
@@ -36,9 +36,6 @@ export default Vue.extend({
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
streamManager: null,
connection: null,
unreadCount: 0,
@@ -49,21 +46,18 @@ export default Vue.extend({
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
},
query: {},
endpoint: null
endpoint: null,
makePromise: null
};
},
computed: {
alone(): boolean {
return this.$store.state.i.followingCount == 0;
},
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.existMore;
}
},
mounted() {
created() {
const prepend = note => {
(this.$refs.timeline as any).prepend(note);
};
@@ -114,7 +108,25 @@ export default Vue.extend({
this.connection.on('mention', onNote);
}
this.fetch();
this.makePromise = cursor => this.$root.api(this.endpoint, {
limit: fetchLimit + 1,
untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
untilId: cursor ? cursor : undefined,
...this.baseQuery, ...this.query
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
return {
notes: notes,
cursor: notes[notes.length - 1].id
};
} else {
return {
notes: notes,
cursor: null
};
}
});
},
beforeDestroy() {
@@ -122,57 +134,13 @@ export default Vue.extend({
},
methods: {
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
this.$root.api(this.endpoint, Object.assign({
limit: fetchLimit + 1,
untilDate: this.date ? this.date.getTime() : undefined
}, this.baseQuery, this.query)).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
if (!this.canFetchMore) return;
this.moreFetching = true;
const promise = this.$root.api(this.endpoint, Object.assign({
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id
}, this.baseQuery, this.query));
promise.then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
for (const n of notes) {
(this.$refs.timeline as any).append(n);
}
this.moreFetching = false;
});
return promise;
},
focus() {
(this.$refs.timeline as any).focus();
},
warp(date) {
this.date = date;
this.fetch();
(this.$refs.timeline as any).reload();
}
}
});

11
src/client/app/mobile/views/pages/home.vue
View File

@@ -233,17 +233,6 @@ main
font-size 10px
color var(--notificationIndicator)
> .tl
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>
<style lang="stylus" module>

12
src/client/app/mobile/views/pages/note.vue
View File

@@ -56,18 +56,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
main
text-align center
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
> div
margin 0 auto
padding 0
max-width 600px
> footer
margin-top 16px

15
src/client/app/mobile/views/pages/notifications.vue
View File

@@ -39,18 +39,3 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

11
src/client/app/mobile/views/pages/received-follow-requests.vue
View File

@@ -57,17 +57,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
> div
display flex
padding 16px

91
src/client/app/mobile/views/pages/search.vue
View File

@@ -3,8 +3,7 @@
<span slot="header"><fa icon="search"/> {{ q }}</span>
<main>
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
</main>
</mk-ui>
</template>
@@ -20,15 +19,30 @@ export default Vue.extend({
i18n: i18n('mobile/views/pages/search.vue'),
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
empty: false,
offset: 0
makePromise: cursor => this.$root.api('notes/search', {
limit: limit + 1,
offset: cursor ? cursor : undefined,
query: this.q
}).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
return {
notes: notes,
cursor: cursor ? cursor + limit : limit
};
} else {
return {
notes: notes,
cursor: null
};
}
})
};
},
watch: {
$route: 'fetch'
$route() {
this.$refs.timeline.reload();
}
},
computed: {
q(): string {
@@ -37,68 +51,11 @@ export default Vue.extend({
},
mounted() {
document.title = `%i18n:@search%: ${this.q} | ${this.$root.instanceName}`;
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
Progress.start();
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
this.$root.api('notes/search', {
limit: limit + 1,
offset: this.offset,
query: this.q
}).then(notes => {
if (notes.length == 0) this.empty = true;
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
Progress.done();
}, rej);
}));
inited() {
Progress.done();
},
more() {
this.offset += limit;
const promise = this.$root.api('notes/search', {
limit: limit + 1,
offset: this.offset,
query: this.q
});
promise.then(notes => {
if (notes.length == limit + 1) {
notes.pop();
} else {
this.existMore = false;
}
for (const n of notes) {
(this.$refs.timeline as any).append(n);
}
this.moreFetching = false;
});
return promise;
}
}
});
</script>
<style lang="stylus" module>
.notes
margin 8px auto
max-width 500px
width calc(100% - 16px)
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(#000, 0.2)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
</style>

3
src/client/app/mobile/views/pages/settings.vue
View File

@@ -383,9 +383,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
main
margin 0 auto
max-width 600px
width 100%
> .signed-in-as
margin 16px

80
src/client/app/mobile/views/pages/tag.vue
View File

@@ -3,8 +3,7 @@
<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
<main>
<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
</main>
</mk-ui>
</template>
@@ -20,66 +19,35 @@ export default Vue.extend({
i18n: i18n('mobile/views/pages/tag.vue'),
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
offset: 0,
empty: false
makePromise: cursor => this.$root.api('notes/search_by_tag', {
limit: limit + 1,
offset: cursor ? cursor : undefined,
tag: this.$route.params.tag
}).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
return {
notes: notes,
cursor: cursor ? cursor + limit : limit
};
} else {
return {
notes: notes,
cursor: null
};
}
})
};
},
watch: {
$route: 'fetch'
},
mounted() {
this.$nextTick(() => {
this.fetch();
});
$route() {
this.$refs.timeline.reload();
}
},
methods: {
fetch() {
this.fetching = true;
Progress.start();
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
this.$root.api('notes/search_by_tag', {
limit: limit + 1,
offset: this.offset,
tag: this.$route.params.tag
}).then(notes => {
if (notes.length == 0) this.empty = true;
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
Progress.done();
}, rej);
}));
inited() {
Progress.done();
},
more() {
this.offset += limit;
const promise = this.$root.api('notes/search_by_tag', {
limit: limit + 1,
offset: this.offset,
tag: this.$route.params.tag
});
promise.then(notes => {
if (notes.length == limit + 1) {
notes.pop();
} else {
this.existMore = false;
}
for (const n of notes) {
(this.$refs.timeline as any).append(n);
}
this.moreFetching = false;
});
return promise;
}
}
});
</script>

15
src/client/app/mobile/views/pages/user-list.vue
View File

@@ -46,18 +46,3 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

17
src/client/app/mobile/views/pages/user-lists.vue
View File

@@ -53,20 +53,3 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

1
src/client/app/mobile/views/pages/user/home.vue
View File

@@ -57,7 +57,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
.root.home
max-width 600px
margin 0 auto
> .mk-note-detail

24
src/client/app/mobile/views/pages/user/index.vue
View File

@@ -3,7 +3,7 @@
<template slot="header" v-if="!fetching"><img :src="avator" alt="">
<mk-user-name :user="user"/>
</template>
<main v-if="!fetching">
<div class="wwtwuxyh" v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</p></div>
<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></p></div>
<header>
@@ -65,15 +65,15 @@
<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> {{ $t('media') }}</a>
</div>
</nav>
<div class="body">
<main>
<template v-if="$route.name == 'user'">
<x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
</template>
<router-view :user="user"></router-view>
</div>
</main>
</main>
</div>
</mk-ui>
</template>
@@ -146,7 +146,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
main
.wwtwuxyh
$bg = var(--face)
> .is-suspended
@@ -314,7 +314,7 @@ main
display flex
justify-content center
margin 0 auto
max-width 600px
max-width 616px
> a
display block
@@ -335,16 +335,4 @@ main
color var(--primary)
border-color var(--primary)
> .body
max-width 680px
margin 0 auto
padding 8px
color var(--text)
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>