diff --git a/src/client/components/loading.vue b/src/client/components/loading.vue index 640c4cc9e3..b819c692e8 100644 --- a/src/client/components/loading.vue +++ b/src/client/components/loading.vue @@ -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; diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 8601d17d0b..6886595120 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -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; - width: 100%; - border-radius: var(--radius); - - &:disabled { - opacity: 0.7; - } - } + > .more > .button { + margin-left: auto; + margin-right: auto; + height: 48px; + width: 100%; } } </style> diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue index d953824e00..7f04b35de1 100644 --- a/src/client/components/ui/pagination.vue +++ b/src/client/components/ui/pagination.vue @@ -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>