You've already forked AstralRinth
forked from didirus/AstralRinth
Context menus (#133)
* Context Menus in home and library * Menu impl * FInalize context menus * Update App.vue * Update App.vue * fix scrolling
This commit is contained in:
Adrian O.V
@@ -1,7 +1,21 @@
|
||||
<script setup>
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ClipboardCopyIcon,
|
||||
FolderOpenIcon,
|
||||
PlayIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
DownloadIcon,
|
||||
GlobeIcon,
|
||||
StopCircleIcon,
|
||||
ExternalIcon,
|
||||
EyeIcon,
|
||||
} from 'omorphia'
|
||||
import Instance from '@/components/ui/Instance.vue'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import ContextMenu from '@/components/ui/ContextMenu.vue'
|
||||
|
||||
const props = defineProps({
|
||||
instances: {
|
||||
@@ -17,58 +31,189 @@ const props = defineProps({
|
||||
canPaginate: Boolean,
|
||||
})
|
||||
|
||||
const allowPagination = ref(false)
|
||||
const allowPagination = ref(Array.apply(false, Array(props.instances.length)))
|
||||
const modsRow = ref(null)
|
||||
const instanceOptions = ref(null)
|
||||
const instanceComponents = ref(null)
|
||||
|
||||
const handlePaginationDisplay = () => {
|
||||
let parentsRow = modsRow.value
|
||||
for (let i = 0; i < props.instances.length; i++) {
|
||||
let parentsRow = modsRow.value[i]
|
||||
|
||||
// This is wrapped in a setTimeout because the HtmlCollection seems to struggle
|
||||
// with getting populated sometimes. It's a flaky error, but providing a bit of
|
||||
// wait-time for the below expressions has not failed thus-far.
|
||||
setTimeout(() => {
|
||||
const children = parentsRow.children
|
||||
const lastChild = children[children.length - 1]
|
||||
const childBox = lastChild?.getBoundingClientRect()
|
||||
// This is wrapped in a setTimeout because the HtmlCollection seems to struggle
|
||||
// with getting populated sometimes. It's a flaky error, but providing a bit of
|
||||
// wait-time for the below expressions has not failed thus-far.
|
||||
setTimeout(() => {
|
||||
const children = parentsRow.children
|
||||
const lastChild = children[children.length - 1]
|
||||
const childBox = lastChild?.getBoundingClientRect()
|
||||
|
||||
if (childBox?.x + childBox?.width > window.innerWidth && props.canPaginate)
|
||||
allowPagination.value = true
|
||||
else allowPagination.value = false
|
||||
}, 300)
|
||||
if (childBox?.x + childBox?.width > window.innerWidth && props.canPaginate)
|
||||
allowPagination.value[i] = true
|
||||
else allowPagination.value[i] = false
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
|
||||
|
||||
handlePaginationDisplay()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
|
||||
})
|
||||
|
||||
const handleInstanceRightClick = (event, passedInstance) => {
|
||||
const baseOptions = [
|
||||
{ name: 'add_content' },
|
||||
{ type: 'divider' },
|
||||
{ name: 'edit' },
|
||||
{ name: 'open_folder' },
|
||||
{ name: 'copy_path' },
|
||||
{ type: 'divider' },
|
||||
{
|
||||
name: 'delete',
|
||||
color: 'danger',
|
||||
},
|
||||
]
|
||||
|
||||
const options = !passedInstance.instance.path
|
||||
? [
|
||||
{
|
||||
name: 'install',
|
||||
color: 'primary',
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
name: 'open_link',
|
||||
},
|
||||
{
|
||||
name: 'copy_link',
|
||||
},
|
||||
]
|
||||
: passedInstance.playing
|
||||
? [
|
||||
{
|
||||
name: 'stop',
|
||||
color: 'danger',
|
||||
},
|
||||
...baseOptions,
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: 'play',
|
||||
color: 'primary',
|
||||
},
|
||||
...baseOptions,
|
||||
]
|
||||
|
||||
instanceOptions.value.showMenu(event, passedInstance, options)
|
||||
}
|
||||
|
||||
const handleOptionsClick = async (args) => {
|
||||
switch (args.option) {
|
||||
case 'play':
|
||||
await args.item.play()
|
||||
break
|
||||
case 'stop':
|
||||
await args.item.stop()
|
||||
break
|
||||
case 'add_content':
|
||||
await args.item.addContent()
|
||||
break
|
||||
case 'edit':
|
||||
await args.item.seeInstance()
|
||||
break
|
||||
case 'delete':
|
||||
await args.item.deleteInstance()
|
||||
break
|
||||
case 'open_folder':
|
||||
await args.item.openFolder()
|
||||
break
|
||||
case 'copy_path':
|
||||
await navigator.clipboard.writeText(args.item.instance.path)
|
||||
break
|
||||
case 'install':
|
||||
args.item.install()
|
||||
break
|
||||
case 'open_link':
|
||||
window.__TAURI_INVOKE__('tauri', {
|
||||
__tauriModule: 'Shell',
|
||||
message: {
|
||||
cmd: 'open',
|
||||
path: `https://modrinth.com/${args.item.instance.project_type}/${args.item.instance.slug}`,
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'copy_link':
|
||||
await navigator.clipboard.writeText(
|
||||
`https://modrinth.com/${args.item.instance.project_type}/${args.item.instance.slug}`
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const getInstanceIndex = (rowIndex, index) => {
|
||||
let instanceIndex = 0
|
||||
for (let i = 0; i < rowIndex; i++) {
|
||||
instanceIndex += props.instances[i].instances.length
|
||||
}
|
||||
instanceIndex += index
|
||||
return instanceIndex
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.instances.length > 0" class="row">
|
||||
<div class="header">
|
||||
<p>{{ props.label }}</p>
|
||||
<hr aria-hidden="true" />
|
||||
<div v-if="allowPagination" class="pagination">
|
||||
<ChevronLeftIcon role="button" @click="modsRow.value.scrollLeft -= 170" />
|
||||
<ChevronRightIcon role="button" @click="modsRow.value.scrollLeft += 170" />
|
||||
<div class="content">
|
||||
<div v-for="(row, rowIndex) in instances" :key="row.label" class="row">
|
||||
<div class="header">
|
||||
<p>{{ row.label }}</p>
|
||||
<hr aria-hidden="true" />
|
||||
<div v-if="allowPagination[rowIndex]" class="pagination">
|
||||
<ChevronLeftIcon role="button" @click="modsRow[rowIndex].scrollLeft -= 170" />
|
||||
<ChevronRightIcon role="button" @click="modsRow[rowIndex].scrollLeft += 170" />
|
||||
</div>
|
||||
</div>
|
||||
<section ref="modsRow" class="instances">
|
||||
<Instance
|
||||
v-for="(instance, instanceIndex) in row.instances"
|
||||
ref="instanceComponents"
|
||||
:key="instance?.project_id || instance?.id"
|
||||
:instance="instance"
|
||||
@contextmenu.prevent.stop="
|
||||
(event) =>
|
||||
handleInstanceRightClick(
|
||||
event,
|
||||
instanceComponents[getInstanceIndex(rowIndex, instanceIndex)]
|
||||
)
|
||||
"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<section ref="modsRow" class="instances">
|
||||
<Instance
|
||||
v-for="instance in props.instances"
|
||||
:key="instance?.project_id || instance?.id"
|
||||
display="card"
|
||||
:instance="instance"
|
||||
class="row-instance"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
|
||||
<template #play> <PlayIcon /> Play </template>
|
||||
<template #stop> <StopCircleIcon /> Stop </template>
|
||||
<template #add_content> <PlusIcon /> Add content </template>
|
||||
<template #edit> <EyeIcon /> View instance </template>
|
||||
<template #delete> <TrashIcon /> Delete </template>
|
||||
<template #open_folder> <FolderOpenIcon /> Open folder </template>
|
||||
<template #copy_path> <ClipboardCopyIcon /> Copy path </template>
|
||||
<template #install> <DownloadIcon /> Install </template>
|
||||
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
|
||||
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
|
||||
</ContextMenu>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -147,6 +292,11 @@ onUnmounted(() => {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.instance) {
|
||||
min-width: 10.5rem;
|
||||
max-width: 10.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,9 +305,4 @@ onUnmounted(() => {
|
||||
background-color: rgb(30, 31, 34);
|
||||
}
|
||||
}
|
||||
|
||||
.row-instance {
|
||||
min-width: 10.5rem;
|
||||
max-width: 10.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user