AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

Modify label

Browse source
This commit is contained in:
Mergan 2023-09-12 03:05:42 -07:00
parent e13c4b6b85
commit 42a13b0f1b
2 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/still-image/still-image.js
View file

@ -13,6 +13,7 @@ const StillImage = {
return { return {
stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches, stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches,
isAnimated: false, isAnimated: false,
imageTypeLabel: ''
} }
}, },
computed: { computed: {
@ -62,14 +63,17 @@ const StillImage = {
// Ordered from least to most intensive // Ordered from least to most intensive
if (this.isGIF(reader.value)) { if (this.isGIF(reader.value)) {
this.isAnimated = true this.isAnimated = true
this.setLabel('GIF')
return return
} }
if (this.isAnimatedWEBP(reader.value)) { if (this.isAnimatedWEBP(reader.value)) {
this.isAnimated = true this.isAnimated = true
this.setLabel('WEBP')
return return
} }
if (this.isAnimatedPNG(reader.value)) { if (this.isAnimatedPNG(reader.value)) {
this.isAnimated = true this.isAnimated = true
this.setLabel('APNG')
} }
}) })
}) })
@ -77,6 +81,9 @@ const StillImage = {
// this.imageLoadError && this.imageLoadError() // this.imageLoadError && this.imageLoadError()
}) })
}, },
setLabel (name) {
this.imageTypeLabel = name;
},
isGIF (data) { isGIF (data) {
// I am a perfectly sane individual // I am a perfectly sane individual
// //

40
src/components/still-image/still-image.vue
View file

@ -1,9 +1,15 @@
<template> <template>
<div <div
ref="still-image"
class="still-image" class="still-image"
:class="{ animated: animated }" :class="{ animated: animated }"
:style="style" :style="style"
> >
<div
v-if="isAnimated && imageTypeLabel"
class="image-type-label">
{{ imageTypeLabel }}
</div>
<canvas <canvas
v-if="animated" v-if="animated"
ref="canvas" ref="canvas"
@ -57,30 +63,26 @@
} }
} }
&.animated { .image-type-label {
&::before { position: absolute;
zoom: var(--_still_image-label-scale, 1); top: 0.25em;
content: var(--image-type-label, 'A?'); left: 0.25em;
position: absolute; line-height: 1;
line-height: 1; font-size: 0.6em;
font-size: 0.7em; background: rgba(127, 127, 127, 0.5);
top: 0.5em; color: #fff;
left: 0.5em; padding: 2px 4px;
background: rgba(127, 127, 127, 0.5); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
color: #fff; z-index: 2;
display: block; visibility: var(--_still-image-label-visibility, visible);
padding: 2px 4px; }
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
visibility: var(--_still-image-label-visibility, visible);
}
&.animated {
&:hover canvas { &:hover canvas {
display: none; display: none;
} }
&:hover::before { &:hover .image-type-label {
visibility: var(--_still-image-label-visibility, hidden); visibility: var(--_still-image-label-visibility, hidden);
} }