diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue index 3ea63fa59f..824f150840 100644 --- a/src/client/components/tab.vue +++ b/src/client/components/tab.vue @@ -1,6 +1,6 @@ <template> <div class="pxhvhrfw" v-size="[{ max: 500 }]"> - <button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value">{{ item.label }}</button> + <button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button> </div> </template> @@ -33,6 +33,10 @@ export default Vue.extend({ color: var(--accent); border-bottom-color: var(--accent); } + + > .icon { + margin-right: 6px; + } } &.max-width_500px { diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue index a261785715..9f9c68ee28 100644 --- a/src/client/pages/pages.vue +++ b/src/client/pages/pages.vue @@ -3,24 +3,20 @@ <portal to="icon"><fa :icon="faStickyNote"/></portal> <portal to="title">{{ $t('pages') }}</portal> - <mk-container :body-togglable="true"> - <template #header><fa :icon="faEdit" fixed-width/>{{ $t('_pages.my') }}</template> - <div class="rknalgpo my"> - <mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button> - <mk-pagination :pagination="myPagesPagination" #default="{items}"> - <mk-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> - </mk-pagination> - </div> - </mk-container> + <mk-tab v-model="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/> - <mk-container :body-togglable="true"> - <template #header><fa :icon="faHeart" fixed-width/>{{ $t('_pages.liked') }}</template> - <div class="rknalgpo"> - <mk-pagination :pagination="likedPagesPagination" #default="{items}"> - <mk-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> - </mk-pagination> - </div> - </mk-container> + <div class="rknalgpo my" v-if="tab === 'my'"> + <mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button> + <mk-pagination :pagination="myPagesPagination" #default="{items}"> + <mk-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> + </mk-pagination> + </div> + + <div class="rknalgpo" v-if="tab === 'liked'"> + <mk-pagination :pagination="likedPagesPagination" #default="{items}"> + <mk-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> + </mk-pagination> + </div> </div> </template> @@ -31,14 +27,15 @@ import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons'; import MkPagePreview from '../components/page-preview.vue'; import MkPagination from '../components/ui/pagination.vue'; import MkButton from '../components/ui/button.vue'; -import MkContainer from '../components/ui/container.vue'; +import MkTab from '../components/tab.vue'; export default Vue.extend({ components: { - MkPagePreview, MkPagination, MkButton, MkContainer + MkPagePreview, MkPagination, MkButton, MkTab }, data() { return { + tab: 'my', myPagesPagination: { endpoint: 'i/pages', limit: 5,