Improve usability of emoji page

This commit is contained in:
syuilo 2020-11-03 10:54:41 +09:00
parent 62e01e9c13
commit 3c34fa941a

View File

@ -5,7 +5,7 @@
</div> </div>
<div class="_section"> <div class="_section">
<div class="_content local" v-if="tab === 'local'"> <div class="local" v-if="tab === 'local'">
<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $t('addEmoji') }}</MkButton> <MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $t('addEmoji') }}</MkButton>
<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput> <MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput>
<MkPagination :pagination="pagination" ref="emojis"> <MkPagination :pagination="pagination" ref="emojis">
@ -24,7 +24,7 @@
</MkPagination> </MkPagination>
</div> </div>
<div class="_content remote" v-else-if="tab === 'remote'"> <div class="remote" v-else-if="tab === 'remote'">
<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput> <MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $t('search') }}</span></MkInput>
<MkInput v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></MkInput> <MkInput v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></MkInput>
<MkPagination :pagination="remotePagination" ref="remoteEmojis"> <MkPagination :pagination="remotePagination" ref="remoteEmojis">
@ -83,14 +83,14 @@ export default defineComponent({
host: '', host: '',
pagination: { pagination: {
endpoint: 'admin/emoji/list', endpoint: 'admin/emoji/list',
limit: 15, limit: 30,
params: computed(() => ({ params: computed(() => ({
query: (this.query && this.query !== '') ? this.query : null query: (this.query && this.query !== '') ? this.query : null
})) }))
}, },
remotePagination: { remotePagination: {
endpoint: 'admin/emoji/list-remote', endpoint: 'admin/emoji/list-remote',
limit: 15, limit: 30,
params: computed(() => ({ params: computed(() => ({
query: (this.queryRemote && this.queryRemote !== '') ? this.queryRemote : null, query: (this.queryRemote && this.queryRemote !== '') ? this.queryRemote : null,
host: (this.host && this.host !== '') ? this.host : null host: (this.host && this.host !== '') ? this.host : null