kaslo/pawkey-sk
1
0
Fork 0
Code Packages 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
src/client/app/mobile/views/pages/explore.vue
-15
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>
src/client/app/mobile/views/pages/favorites.vue
-10
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>
src/client/app/mobile/views/pages/featured.vue
-10
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>
src/client/app/mobile/views/pages/home.timeline.vue
+24 -56
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();
}
}
});
src/client/app/mobile/views/pages/home.vue
-11
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>
src/client/app/mobile/views/pages/note.vue
-12
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
src/client/app/mobile/views/pages/notifications.vue
-15
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>
src/client/app/mobile/views/pages/received-follow-requests.vue
-11
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
src/client/app/mobile/views/pages/search.vue
+24 -67
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>
src/client/app/mobile/views/pages/settings.vue
-3
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
src/client/app/mobile/views/pages/tag.vue
+24 -56
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>
src/client/app/mobile/views/pages/user-list.vue
-15
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>
src/client/app/mobile/views/pages/user-lists.vue
-17
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>
src/client/app/mobile/views/pages/user/home.vue
-1
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
src/client/app/mobile/views/pages/user/index.vue
+6 -18
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>