Improve widget paging looks (#3482)

* 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

View File

@ -2,7 +2,10 @@
<div class="mkw-polls">
<mk-widget-container :show-header="!props.compact">
<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="poll" v-if="!fetching && poll != null">
@ -32,6 +35,7 @@ export default define({
return {
poll: null,
fetching: true,
more: true,
offset: 0
};
},
@ -53,12 +57,18 @@ export default define({
}).then(notes => {
const poll = notes ? notes[0] : null;
if (poll == null) {
this.more = false;
this.offset = 0;
} else {
this.more = true;
this.offset++;
}
this.poll = poll;
this.fetching = false;
}).catch(() => {
this.poll = null;
this.fetching = false;
this.more = false;
});
}
}

View File

@ -2,7 +2,10 @@
<div class="mkw-users">
<mk-widget-container :show-header="!props.compact">
<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">
<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 {
users: [],
fetching: true,
more: true,
page: 0
};
},
@ -59,12 +63,19 @@ export default define({
}).then(users => {
this.users = users;
this.fetching = false;
}).catch(() => {
this.users = [];
this.fetching = false;
this.more = false;
this.page = 0;
});
},
refresh() {
if (this.users.length < limit) {
this.more = false;
this.page = 0;
} else {
this.more = true;
this.page++;
}
this.fetch();