mirrors/akkoma-fe
1
0
Fork 1
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe.git synced 2024-11-09 10:13:42 +00:00
Code Issues Projects Releases Packages 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 {
stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches,
isAnimated: false,
imageTypeLabel: ''
}
},
computed: {
@ -62,14 +63,17 @@ const StillImage = {
// Ordered from least to most intensive
if (this.isGIF(reader.value)) {
this.isAnimated = true
this.setLabel('GIF')
return
}
if (this.isAnimatedWEBP(reader.value)) {
this.isAnimated = true
this.setLabel('WEBP')
return
}
if (this.isAnimatedPNG(reader.value)) {
this.isAnimated = true
this.setLabel('APNG')
}
})
})
@ -77,6 +81,9 @@ const StillImage = {
// this.imageLoadError && this.imageLoadError()
})
},
setLabel (name) {
this.imageTypeLabel = name;
},
isGIF (data) {
// I am a perfectly sane individual
//

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

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