usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
tamaina 2023-05-07 09:42:35 +00:00
parent 6b8e60a7d4
commit 5a4a7f3d08
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -3,15 +3,15 @@
<img v-if="!loaded && src" :class="$style.loader" :src="src" loading="eager" @load="onLoad"/> <img v-if="!loaded && src" :class="$style.loader" :src="src" loading="eager" @load="onLoad"/>
<Transition <Transition
mode="in-out" mode="in-out"
:enter-active-class="defaultStore.state.animation && (props.transition?.enterActiveClass ?? $style['transition_toggle_enterActive']) || undefined" :enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
:leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || undefined" :leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || undefined"
:enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined" :enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
:leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined" :leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
:enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined" :enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined"
:leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined" :leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
> >
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> <canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-else :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/> <img v-else :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
</Transition> </Transition>
</div> </div>
</template> </template>
@ -116,18 +116,12 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.transition_toggle_enterActive,
.transition_toggle_leaveActive { .transition_toggle_leaveActive {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.transition_toggle_enterTo,
.transition_toggle_leaveFrom {
opacity: 0;
}
.loader { .loader {
position: absolute; position: absolute;
top: 0; top: 0;

12
packages/frontend/src/components/MkMediaImage.vue
View File

@ -9,7 +9,17 @@
:href="image.url" :href="image.url"
:title="image.name" :title="image.name"
> >
<ImgWithBlurhash :hash="image.blurhash" :src="(defaultStore.state.enableDataSaverMode && hide) ? null : url" :force-blurhash="hide" :cover="hide" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height"/> <ImgWithBlurhash
:hash="image.blurhash"
:src="(defaultStore.state.enableDataSaverMode && hide) ? null : url"
:force-blurhash="hide"
:cover="hide"
:alt="image.comment || image.name"
:title="image.comment || image.name"
:width="image.properties.width"
:height="image.properties.height"
:style="hide ? 'filter: brightness(0.5);' : null"
/>
</a> </a>
<template v-if="hide"> <template v-if="hide">
<div :class="$style.hiddenText"> <div :class="$style.hiddenText">