forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
105 lines
2.1 KiB
Vue
105 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
class="fixed"
|
|
:style="{
|
|
transform: `translateY(${isAtBottom ? '-100%' : '0'})`,
|
|
top: `${y}px`,
|
|
left: `${x}px`,
|
|
}"
|
|
>
|
|
<Transition>
|
|
<div
|
|
v-if="item"
|
|
id="item-context-menu"
|
|
ref="ctxRef"
|
|
:style="{
|
|
border: '1px solid var(--color-divider)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
backgroundColor: 'var(--color-raised-bg)',
|
|
padding: 'var(--gap-sm)',
|
|
boxShadow: 'var(--shadow-floating)',
|
|
gap: 'var(--gap-xs)',
|
|
width: 'max-content',
|
|
}"
|
|
class="flex h-fit w-fit select-none flex-col"
|
|
>
|
|
<button
|
|
class="btn btn-transparent flex !w-full items-center"
|
|
@click="$emit('rename', item)"
|
|
>
|
|
<EditIcon class="h-5 w-5" />
|
|
Rename
|
|
</button>
|
|
<button class="btn btn-transparent flex !w-full items-center" @click="$emit('move', item)">
|
|
<RightArrowIcon />
|
|
Move
|
|
</button>
|
|
<button
|
|
v-if="item.type !== 'directory'"
|
|
class="btn btn-transparent flex !w-full items-center"
|
|
@click="$emit('download', item)"
|
|
>
|
|
<DownloadIcon class="h-5 w-5" />
|
|
Download
|
|
</button>
|
|
<button
|
|
class="btn btn-transparent btn-red flex !w-full items-center"
|
|
@click="$emit('delete', item)"
|
|
>
|
|
<TrashIcon class="h-5 w-5" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { DownloadIcon, EditIcon, RightArrowIcon, TrashIcon } from '@modrinth/assets'
|
|
import { ref } from 'vue'
|
|
|
|
interface FileItem {
|
|
type: string
|
|
name: string
|
|
[key: string]: any
|
|
}
|
|
|
|
defineProps<{
|
|
item: FileItem | null
|
|
x: number
|
|
y: number
|
|
isAtBottom: boolean
|
|
}>()
|
|
|
|
const ctxRef = ref<HTMLElement | null>(null)
|
|
|
|
defineEmits<{
|
|
(e: 'rename' | 'move' | 'download' | 'delete', item: FileItem): void
|
|
}>()
|
|
|
|
defineExpose({
|
|
ctxRef,
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
#item-context-menu {
|
|
transition:
|
|
transform 0.1s ease,
|
|
opacity 0.1s ease;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
#item-context-menu.v-enter-active,
|
|
#item-context-menu.v-leave-active {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
#item-context-menu.v-enter-from,
|
|
#item-context-menu.v-leave-to {
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
</style>
|