diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-01-18 18:21:33 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-18 18:21:33 +0900 |
| commit | c1019a006bfa48ba7398daa02788c50be0bfb35a (patch) | |
| tree | 0f3e50544afbb216ca25732b506370a421d94299 /packages/frontend/src/pages/flash | |
| parent | fix(frontend/MediaVideo): 再生シークバーの当たり判定を調整 (#... (diff) | |
| download | misskey-c1019a006bfa48ba7398daa02788c50be0bfb35a.tar.gz misskey-c1019a006bfa48ba7398daa02788c50be0bfb35a.tar.bz2 misskey-c1019a006bfa48ba7398daa02788c50be0bfb35a.zip | |
feat(frontend): 横スワイプでタブを切り替える機能 (#13011)
* (add) 横スワイプでタブを切り替える機能
* Change Changelog
* y方向の移動が一定量を超えたらスワイプを中断するように
* Update swipe distance thresholds
* Remove console.log
* adjust threshold
* rename, use v-model
* fix
* Update MkHorizontalSwipe.vue
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
* use css module
---------
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Diffstat (limited to 'packages/frontend/src/pages/flash')
| -rw-r--r-- | packages/frontend/src/pages/flash/flash-index.vue | 41 |
1 files changed, 22 insertions, 19 deletions
diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue index 7852018894..53510ea232 100644 --- a/packages/frontend/src/pages/flash/flash-index.vue +++ b/packages/frontend/src/pages/flash/flash-index.vue @@ -7,32 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-only <MkStickyContainer> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="700"> - <div v-if="tab === 'featured'"> - <MkPagination v-slot="{items}" :pagination="featuredFlashsPagination"> - <div class="_gaps_s"> - <MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/> - </div> - </MkPagination> - </div> - - <div v-else-if="tab === 'my'"> - <div class="_gaps"> - <MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton> - <MkPagination v-slot="{items}" :pagination="myFlashsPagination"> + <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> + <div v-if="tab === 'featured'" key="featured"> + <MkPagination v-slot="{items}" :pagination="featuredFlashsPagination"> <div class="_gaps_s"> <MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/> </div> </MkPagination> </div> - </div> - <div v-else-if="tab === 'liked'"> - <MkPagination v-slot="{items}" :pagination="likedFlashsPagination"> - <div class="_gaps_s"> - <MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/> + <div v-else-if="tab === 'my'" key="my"> + <div class="_gaps"> + <MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton> + <MkPagination v-slot="{items}" :pagination="myFlashsPagination"> + <div class="_gaps_s"> + <MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/> + </div> + </MkPagination> </div> - </MkPagination> - </div> + </div> + + <div v-else-if="tab === 'liked'" key="liked"> + <MkPagination v-slot="{items}" :pagination="likedFlashsPagination"> + <div class="_gaps_s"> + <MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/> + </div> + </MkPagination> + </div> + </MkHorizontalSwipe> </MkSpacer> </MkStickyContainer> </template> @@ -42,6 +44,7 @@ import { computed, ref } from 'vue'; import MkFlashPreview from '@/components/MkFlashPreview.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { useRouter } from '@/global/router/supplier.js'; |