amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve widget paging looks (#3482)

Browse Source 
* Improve widget paging looks

* rewind when error
This commit is contained in:
MeiMei 2018-12-03 23:14:10 +09:00 committed by syuilo
parent 2ab8a5bc0a
commit 227798300f
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/app/desktop/views/widgets/polls.vue
View File

@ -2,7 +2,10 @@
<div class="mkw-polls"> <div class="mkw-polls">
<mk-widget-container :show-header="!props.compact"> <mk-widget-container :show-header="!props.compact">
<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template> <template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button> <button slot="func" :title="$t('title')" @click="fetch">
<fa v-if="!fetching && more" icon="arrow-right"/>
<fa v-if="!fetching && !more" icon="sync"/>
</button>
<div class="mkw-polls--body"> <div class="mkw-polls--body">
<div class="poll" v-if="!fetching && poll != null"> <div class="poll" v-if="!fetching && poll != null">
@ -32,6 +35,7 @@ export default define({
return { return {
poll: null, poll: null,
fetching: true, fetching: true,
more: true,
offset: 0 offset: 0
}; };
}, },
@ -53,12 +57,18 @@ export default define({
}).then(notes => { }).then(notes => {
const poll = notes ? notes[0] : null; const poll = notes ? notes[0] : null;
if (poll == null) { if (poll == null) {
this.more = false;
this.offset = 0; this.offset = 0;
} else { } else {
this.more = true;
this.offset++; this.offset++;
} }
this.poll = poll; this.poll = poll;
this.fetching = false; this.fetching = false;
}).catch(() => {
this.poll = null;
this.fetching = false;
this.more = false;
}); });
} }
} }

13
src/client/app/desktop/views/widgets/users.vue
View File

@ -2,7 +2,10 @@
<div class="mkw-users"> <div class="mkw-users">
<mk-widget-container :show-header="!props.compact"> <mk-widget-container :show-header="!props.compact">
<template slot="header"><fa icon="users"/>{{ $t('title') }}</template> <template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('title')" @click="refresh"><fa icon="sync"/></button> <button slot="func" :title="$t('title')" @click="refresh">
<fa v-if="!fetching && more" icon="arrow-right"/>
<fa v-if="!fetching && !more" icon="sync"/>
</button>
<div class="mkw-users--body"> <div class="mkw-users--body">
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
@ -38,6 +41,7 @@ export default define({
return { return {
users: [], users: [],
fetching: true, fetching: true,
more: true,
page: 0 page: 0
}; };
}, },
@ -59,12 +63,19 @@ export default define({
}).then(users => { }).then(users => {
this.users = users; this.users = users;
this.fetching = false; this.fetching = false;
}).catch(() => {
this.users = [];
this.fetching = false;
this.more = false;
this.page = 0;
}); });
}, },
refresh() { refresh() {
if (this.users.length < limit) { if (this.users.length < limit) {
this.more = false;
this.page = 0; this.page = 0;
} else { } else {
this.more = true;
this.page++; this.page++;
} }
this.fetch(); this.fetch();