mirror of
https://github.com/modrinth/code.git
synced 2026-08-31 03:55:59 +00:00
Calum H.andtdgao
7c67cca7a7
* pnpm prepr * feat(instance-sync): screenshots sync * fix: prepr + fmt * fix: qa * feat: screenshit editor * feat: screenshot* editor qa * fix: qa * fix: lint * fix: aecsocket rev * qa: a11y tab navigation focus is cut off * qa: Change “Edited” badge to be bg-highlight-green * qa: friends list input style wrong * qa: toolbar width + labels * qa: multiselect changes * qa: anim changes * qa: card hover colors * qa: copy feedback * qa: hide date * qa: instance icon in overflow/contextmenu * qa: spacing * qa: group empty state text * qa: drag preview badge * qa: group deletion skip warning if no screenshots * qa: redesign editor * qa: remove screenshot parent/edited badge stuff * qa: control font size consistency * qa: viewer copy control * qa: editor fixes * qa: redirect on disable screenshot sync * qa: margin police * fix: crop * fix: qa * feat: initial start on basic instance file syncing (#7220) * qa: final * qa: final 2 * fix: lint + prepr * fix: copy * fix: screenshot editing outside of app causing ghost files in db + sync fail rollback impl * chore: split up * fix: fmt --------- Co-authored-by: tdgao <mr.trumgao@gmail.com>
66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { TagItem } from '@modrinth/ui'
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
|
import type { InstanceScreenshot } from '@/helpers/instance'
|
|
|
|
import { gatherDuration } from './use-screenshot-drag-gather'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
screenshot: InstanceScreenshot
|
|
count?: number
|
|
}>(),
|
|
{
|
|
count: 1,
|
|
},
|
|
)
|
|
|
|
const showGatheredCount = ref(false)
|
|
let countTimer: number | undefined
|
|
|
|
onMounted(() => {
|
|
if (props.count <= 1 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
showGatheredCount.value = true
|
|
return
|
|
}
|
|
|
|
countTimer = window.setTimeout(() => {
|
|
showGatheredCount.value = true
|
|
countTimer = undefined
|
|
}, gatherDuration - 150)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (countTimer !== undefined) {
|
|
clearTimeout(countTimer)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div aria-hidden="true" class="relative w-full select-none">
|
|
<div
|
|
v-if="count > 1"
|
|
class="absolute inset-x-3 -bottom-2 top-2 rounded-xl border border-solid border-surface-5 bg-surface-2 shadow-md motion-safe:transition-opacity motion-safe:duration-200 motion-safe:delay-100 motion-safe:ease-out"
|
|
:class="showGatheredCount ? 'opacity-60' : 'opacity-0'"
|
|
/>
|
|
<div
|
|
v-if="count > 1"
|
|
class="absolute inset-x-1.5 -bottom-1 top-1 rounded-xl border border-solid border-surface-4 bg-surface-3 shadow-md motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
|
|
:class="showGatheredCount ? 'opacity-80' : 'opacity-0'"
|
|
/>
|
|
<div
|
|
class="relative aspect-video w-full overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-2 opacity-90 shadow-lg"
|
|
>
|
|
<img :src="screenshot.url" alt="" class="h-full w-full object-cover" />
|
|
<TagItem
|
|
v-if="count > 1"
|
|
class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-4 tabular-nums text-secondary motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out"
|
|
>
|
|
{{ count }}
|
|
</TagItem>
|
|
</div>
|
|
</div>
|
|
</template>
|