mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-07-28 01:24:39 +02:00
Code Releases Activity

Update MkImageGallery.vue

Browse Source
This commit is contained in:
syuilo
2026-07-10 18:49:50 +09:00
parent c8229fc5f2
commit fc59574f58
1 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/frontend/src/components/MkImageGallery.vue
View File

@@ -37,6 +37,9 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</div>
</div>
<button v-if="!isTouchUsing && currentIndex > 0" class="_button" :class="[$style.prevButton]" @click="onPrev"><div :class="$style.buttonIcon"><i class="ti ti-arrow-left"></i></div></button>
<button v-if="!isTouchUsing && currentIndex < images.length - 1" class="_button" :class="[$style.nextButton]" @click="onNext"><div :class="$style.buttonIcon"><i class="ti ti-arrow-right"></i></div></button>
</div>
</div>
</Transition>
@@ -49,6 +52,7 @@ import type { Image } from './MkImageGallery.item.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { isTouchUsing } from '@/utility/touch.js';
const props = withDefaults(defineProps<{
defaultIndex?: number;
@@ -170,6 +174,8 @@ function onAfterLeave() {
.main {
position: absolute;
width: 100%;
height: 100%;
}
.items {
@@ -193,4 +199,30 @@ function onAfterLeave() {
contain: strict;
flex-shrink: 0;
}
.prevButton,
.nextButton {
position: absolute;
top: 0;
width: 70px;
height: 100%;
display: grid;
place-items: center;
}
.prevButton {
left: 0;
}
.nextButton {
right: 0;
}
.buttonIcon {
width: 45px;
height: 45px;
display: grid;
place-items: center;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100%;
color: #fff;
}
</style>