This commit is contained in:
syuilo 2020-02-12 02:52:37 +09:00
parent 7493429b4d
commit 320b3d8617
3 changed files with 38 additions and 39 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="yxspomdl">
<div class="yxspomdl" :class="{ inline }">
<div class="ring"></div>
</div>
</template>
@ -8,6 +8,13 @@
import Vue from 'vue';
export default Vue.extend({
props: {
inline: {
type: Boolean,
required: false,
default: false
}
}
});
</script>
@ -25,6 +32,16 @@ export default Vue.extend({
padding: 32px;
text-align: center;
&.inline {
display: inline;
padding: 0;
> .ring:after {
width: 32px;
height: 32px;
}
}
> .ring {
display: inline-block;
opacity: 0.7;

View file

@ -11,28 +11,28 @@
<x-note :note="note" :detail="detail" :key="note.id"/>
</x-list>
<footer v-if="more">
<button @click="fetchMore()" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" class="_buttonPrimary">
<footer class="more" v-if="more">
<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
</button>
<template v-if="moreFetching"><mk-loading inline/></template>
</mk-button>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import i18n from '../i18n';
import paging from '../scripts/paging';
import XNote from './note.vue';
import XList from './date-separated-list.vue';
import MkButton from './ui/button.vue';
export default Vue.extend({
i18n,
components: {
XNote, XList
XNote, XList, MkButton
},
mixins: [
@ -63,12 +63,6 @@ export default Vue.extend({
}
},
data() {
return {
faSpinner
};
},
computed: {
notes(): any[] {
return this.extract ? this.extract(this.items) : this.items;
@ -113,23 +107,11 @@ export default Vue.extend({
}
}
> footer {
text-align: center;
&:empty {
display: none;
}
> button {
margin: 0;
padding: 16px;
> .more > .button {
margin-left: auto;
margin-right: auto;
height: 48px;
width: 100%;
border-radius: var(--radius);
&:disabled {
opacity: 0.7;
}
}
}
}
</style>

View file

@ -5,9 +5,9 @@
<slot name="empty"></slot>
</div>
<div class="more" v-if="more" key="_more_">
<mk-button :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
<template v-if="moreFetching"><mk-loading inline/></template>
</mk-button>
</div>
</sequential-entrance>
@ -15,7 +15,6 @@
<script lang="ts">
import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import MkButton from './button.vue';
import paging from '../../scripts/paging';
@ -37,12 +36,6 @@ export default Vue.extend({
default: true
}
},
data() {
return {
faSpinner
};
},
});
</script>
@ -55,5 +48,12 @@ export default Vue.extend({
margin-bottom: 8px;
}
}
> .more > .button {
margin-left: auto;
margin-right: auto;
height: 48px;
min-width: 150px;
}
}
</style>