Skip to content

Commit 75f7556

Browse files
mattyateamattyatea
committed
Enhance: ホバー時のアニメーションを追加
1 parent e4cf426 commit 75f7556

5 files changed

Lines changed: 71 additions & 35 deletions

File tree

‎packages/frontend/src/components/MkMediaAudio.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,17 @@ SPDX-License-Identifier: AGPL-3.0-only
2121
@contextmenu.stop
2222
@keydown.stop
2323
>
24-
<button v-if="isActuallyHidden" :class="$style.hidden" @click="reveal">
25-
<div :class="$style.hiddenTextWrapper">
26-
<b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b>
27-
<b v-else style="display: block;"><i class="ti ti-music"></i> {{ prefer.s.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b>
28-
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
29-
</div>
30-
</button>
31-
32-
<div v-else-if="prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.nativeAudioContainer">
24+
<Transition name="fade">
25+
<button v-if="isActuallyHidden" :class="$style.hidden" @click="reveal">
26+
<div :class="$style.hiddenTextWrapper">
27+
<b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b>
28+
<b v-else style="display: block;"><i class="ti ti-music"></i> {{ prefer.s.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b>
29+
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
30+
</div>
31+
</button>
32+
</Transition>
33+
34+
<div v-if="!isActuallyHidden && prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.nativeAudioContainer">
3335
<audio
3436
ref="audioEl"
3537
preload="metadata"
@@ -41,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
4143
</audio>
4244
</div>
4345

44-
<div v-else :class="$style.audioControls">
46+
<div v-if="!isActuallyHidden && !prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.audioControls">
4547
<audio
4648
ref="audioEl"
4749
preload="metadata"

‎packages/frontend/src/components/MkMediaBanner.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only
66
<template>
77
<div :class="$style.root" @mousedown="onPointerDown" @touchstart="onPointerDown" @mouseup="onPointerUp" @mouseleave="onPointerUp" @touchend="onPointerUp" @touchcancel="onPointerUp">
88
<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
9-
<div v-else-if="isActuallyHidden" :class="$style.sensitive" @click="reveal">
10-
<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
11-
<b>{{ i18n.ts.sensitive }}</b>
12-
<span>{{ i18n.ts.clickToShow }}</span>
13-
</div>
9+
<Transition name="fade">
10+
<div v-if="isActuallyHidden" :class="$style.sensitive" @click="reveal">
11+
<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
12+
<b>{{ i18n.ts.sensitive }}</b>
13+
<span>{{ i18n.ts.clickToShow }}</span>
14+
</div>
15+
</Transition>
1416
<a
15-
v-else :class="$style.download"
17+
v-if="!isActuallyHidden"
18+
:class="$style.download"
1619
:href="media.url"
1720
:title="media.name"
1821
:download="media.name"

‎packages/frontend/src/components/MkMediaImage.vue‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,22 @@ SPDX-License-Identifier: AGPL-3.0-only
4444
:class="$style.image"
4545
/>
4646
</component>
47-
<template v-if="isActuallyHidden">
48-
<div :class="$style.hiddenText">
47+
<Transition
48+
:duration="prefer.s.animation ? 220 : 0"
49+
:enterActiveClass="$style.transition_fade_enterActive"
50+
:leaveActiveClass="$style.transition_fade_leaveActive"
51+
:enterFromClass="$style.transition_fade_enterFrom"
52+
:leaveToClass="$style.transition_fade_leaveTo"
53+
>
54+
<div v-if="isActuallyHidden" :class="$style.hiddenText">
4955
<div :class="$style.hiddenTextWrapper">
5056
<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
5157
<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ prefer.s.dataSaver.media && image.size ? bytes(image.size) : i18n.ts.image }}</b>
5258
<span v-if="controls" style="display: block;">{{ i18n.ts.clickToShow }}</span>
5359
</div>
5460
</div>
55-
</template>
56-
<template v-else-if="controls">
61+
</Transition>
62+
<template v-if="!isActuallyHidden && controls">
5763
<div :class="$style.indicators">
5864
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
5965
<div v-if="image.comment" :class="$style.indicator">ALT</div>
@@ -275,6 +281,16 @@ function onContextmenu(ev: PointerEvent) {
275281
color: #fff;
276282
}
277283
284+
.transition_fade_enterActive,
285+
.transition_fade_leaveActive {
286+
transition: opacity 0.5s ease;
287+
}
288+
289+
.transition_fade_enterFrom,
290+
.transition_fade_leaveTo {
291+
opacity: 0;
292+
}
293+
278294
.visible {
279295
position: relative;
280296
//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
@@ -347,3 +363,14 @@ html[data-color-scheme=light] .visible {
347363
object-position: center;
348364
}
349365
</style>
366+
367+
<style lang="scss">
368+
.fade-enter-active,
369+
.fade-leave-active {
370+
transition: opacity 0.3s ease;
371+
}
372+
.fade-enter-from,
373+
.fade-leave-to {
374+
opacity: 0;
375+
}
376+
</style>

‎packages/frontend/src/components/MkMediaVideo.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,17 @@ SPDX-License-Identifier: AGPL-3.0-only
2424
@contextmenu.stop
2525
@keydown.stop
2626
>
27-
<button v-if="isActuallyHidden" :class="$style.hidden" @click="reveal">
28-
<div :class="$style.hiddenTextWrapper">
29-
<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
30-
<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ prefer.s.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
31-
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
32-
</div>
33-
</button>
27+
<Transition name="fade">
28+
<button v-if="isActuallyHidden" :class="$style.hidden" @click="reveal">
29+
<div :class="$style.hiddenTextWrapper">
30+
<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
31+
<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ prefer.s.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
32+
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
33+
</div>
34+
</button>
35+
</Transition>
3436

35-
<div v-else-if="prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.videoRoot">
37+
<div v-if="!isActuallyHidden && prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.videoRoot">
3638
<video
3739
ref="videoEl"
3840
:class="$style.video"
@@ -52,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
5254
</div>
5355
</div>
5456

55-
<div v-else :class="$style.videoRoot">
57+
<div v-if="!isActuallyHidden && !prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.videoRoot">
5658
<video
5759
ref="videoEl"
5860
:class="$style.video"

‎packages/frontend/src/components/MkNoteMediaGrid.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,15 @@ SPDX-License-Identifier: AGPL-3.0-only
2424
:large="true"
2525
:class="$style.file"
2626
/>
27-
<div :class="$style.sensitive">
28-
<div>
29-
<div v-if="file.isSensitive"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media && file.size ? ` (${bytes(file.size)})` : '' }}</div>
30-
<div v-else><i class="ti ti-photo"></i> {{ prefer.s.dataSaver.media && file.size ? bytes(file.size) : i18n.ts.image }}</div>
31-
<div>{{ i18n.ts.clickToShow }}</div>
27+
<Transition name="fade">
28+
<div :class="$style.sensitive">
29+
<div>
30+
<div v-if="file.isSensitive"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media && file.size ? ` (${bytes(file.size)})` : '' }}</div>
31+
<div v-else><i class="ti ti-photo"></i> {{ prefer.s.dataSaver.media && file.size ? bytes(file.size) : i18n.ts.image }}</div>
32+
<div>{{ i18n.ts.clickToShow }}</div>
33+
</div>
3234
</div>
33-
</div>
35+
</Transition>
3436
</div>
3537
<MkA
3638
v-else

0 commit comments

Comments
 (0)