UI/UX improvements (#146)
* Some initial changes * New project cards * Version * Finalize improvements * Fixed styling issues on versions page * Removed light mode * Run linter * Added mixpanel stuff in context menus * Fix styling issues * Fix windows * homepage fixes * Finishing touches on mac styling * Fixed windows related styling * Update global.scss --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
GitHub
parent
1e78a7b6a8
commit
bd697a02f5
1
Cargo.lock
generated
1
Cargo.lock
generated
@ -4338,6 +4338,7 @@ dependencies = [
|
||||
"objc",
|
||||
"once_cell",
|
||||
"open",
|
||||
"os_info",
|
||||
"percent-encoding",
|
||||
"rand 0.8.5",
|
||||
"raw-window-handle",
|
||||
|
||||
@ -18,7 +18,7 @@ theseus = { path = "../../theseus", features = ["tauri"] }
|
||||
|
||||
serde_json = "1.0"
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
tauri = { version = "1.3", features = ["devtools", "dialog", "dialog-open", "protocol-asset", "shell-open", "updater", "window-close", "window-create"] }
|
||||
tauri = { version = "1.3", features = ["devtools", "dialog", "dialog-open", "macos-private-api", "os-all", "protocol-asset", "shell-open", "updater", "window-close", "window-create", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
|
||||
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
||||
tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
||||
tokio = { version = "1", features = ["full"] }
|
||||
|
||||
@ -74,6 +74,15 @@ fn main() {
|
||||
}))
|
||||
.plugin(tauri_plugin_window_state::Builder::default().build());
|
||||
|
||||
#[cfg(not(target_os = "macos"))]
|
||||
{
|
||||
builder = builder.setup(|app| {
|
||||
let win = app.get_window("main").unwrap();
|
||||
win.set_decorations(false);
|
||||
Ok(())
|
||||
})
|
||||
}
|
||||
|
||||
#[cfg(target_os = "macos")]
|
||||
{
|
||||
builder = builder
|
||||
@ -81,14 +90,14 @@ fn main() {
|
||||
use api::window_ext::WindowExt;
|
||||
let win = app.get_window("main").unwrap();
|
||||
win.set_transparent_titlebar(true);
|
||||
win.position_traffic_lights(0.0, 0.0);
|
||||
win.position_traffic_lights(9.0, 16.0);
|
||||
Ok(())
|
||||
})
|
||||
.on_window_event(|e| {
|
||||
use api::window_ext::WindowExt;
|
||||
if let WindowEvent::Resized(..) = e.event() {
|
||||
let win = e.window();
|
||||
win.position_traffic_lights(0., 0.);
|
||||
win.position_traffic_lights(9.0, 16.0);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -28,9 +28,21 @@
|
||||
},
|
||||
"window": {
|
||||
"create": true,
|
||||
"close": true
|
||||
"close": true,
|
||||
"hide": true,
|
||||
"show": true,
|
||||
"maximize": true,
|
||||
"minimize": true,
|
||||
"unmaximize": true,
|
||||
"unminimize": true,
|
||||
"startDragging": true,
|
||||
"setDecorations": true
|
||||
},
|
||||
"os": {
|
||||
"all": true
|
||||
}
|
||||
},
|
||||
"macOSPrivateApi": true,
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"category": "Entertainment",
|
||||
@ -74,6 +86,8 @@
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"titleBarStyle": "Overlay",
|
||||
"hiddenTitle": true,
|
||||
"fullscreen": false,
|
||||
"height": 650,
|
||||
"resizable": true,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { handleError, onMounted, ref, watch } from 'vue'
|
||||
import { RouterView, RouterLink, useRouter } from 'vue-router'
|
||||
import {
|
||||
HomeIcon,
|
||||
@ -9,6 +9,7 @@ import {
|
||||
SettingsIcon,
|
||||
Button,
|
||||
Notifications,
|
||||
XIcon,
|
||||
} from 'omorphia'
|
||||
import { useLoading, useTheming } from '@/store/state'
|
||||
import AccountsCard from '@/components/ui/AccountsCard.vue'
|
||||
@ -20,12 +21,35 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
|
||||
import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
|
||||
import { useNotifications } from '@/store/notifications.js'
|
||||
import { warning_listener } from '@/helpers/events.js'
|
||||
import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
|
||||
import { type } from '@tauri-apps/api/os'
|
||||
import { appWindow } from '@tauri-apps/api/window'
|
||||
import { isDev } from '@/helpers/utils.js'
|
||||
import mixpanel from 'mixpanel-browser'
|
||||
|
||||
const themeStore = useTheming()
|
||||
|
||||
const isLoading = ref(true)
|
||||
onMounted(async () => {
|
||||
const { settings, collapsed_navigation } = await get().catch(handleError)
|
||||
themeStore.setThemeState(settings)
|
||||
themeStore.collapsedNavigation = collapsed_navigation
|
||||
|
||||
await warning_listener((e) =>
|
||||
notificationsWrapper.value.addNotification({
|
||||
title: 'Warning',
|
||||
text: e.message,
|
||||
type: 'warn',
|
||||
})
|
||||
)
|
||||
|
||||
if ((await type()) === 'Darwin') {
|
||||
document.getElementsByTagName('html')[0].classList.add('mac')
|
||||
} else {
|
||||
document.getElementsByTagName('html')[0].classList.add('windows')
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
initialize: async () => {
|
||||
isLoading.value = false
|
||||
@ -175,15 +199,26 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
|
||||
<div class="appbar">
|
||||
<div data-tauri-drag-region class="appbar">
|
||||
<section class="navigation-controls">
|
||||
<Breadcrumbs />
|
||||
<Breadcrumbs data-tauri-drag-region />
|
||||
</section>
|
||||
<section class="mod-stats">
|
||||
<Suspense>
|
||||
<RunningAppBar />
|
||||
<RunningAppBar data-tauri-drag-region />
|
||||
</Suspense>
|
||||
</section>
|
||||
<section class="window-controls">
|
||||
<Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
|
||||
<MinimizeIcon />
|
||||
</Button>
|
||||
<Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
|
||||
<MaximizeIcon />
|
||||
</Button>
|
||||
<Button class="titlebar-button close" icon-only @click="() => appWindow.close()">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="router-view">
|
||||
<ModrinthLoadingIndicator
|
||||
@ -191,7 +226,7 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
offset-width="var(--sidebar-width)"
|
||||
/>
|
||||
<Notifications ref="notificationsWrapper" />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<RouterView v-slot="{ Component }" class="main-view">
|
||||
<template v-if="Component">
|
||||
<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
|
||||
<component :is="Component"></component>
|
||||
@ -208,9 +243,46 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
background-color: var(--color-brand-highlight);
|
||||
transition: all ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
flex-grow: 1;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
|
||||
.titlebar-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.1s;
|
||||
background-color: var(--color-raised-bg);
|
||||
color: var(--color-base);
|
||||
|
||||
&.close {
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-red);
|
||||
color: var(--color-accent-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-button-bg);
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
--appbar-height: 3.25rem;
|
||||
--sidebar-width: 5rem;
|
||||
--sidebar-width: 4.5rem;
|
||||
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@ -226,49 +298,16 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--color-super-raised-bg);
|
||||
background: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
text-align: center;
|
||||
padding: 0 0 0 1rem;
|
||||
padding: var(--gap-md);
|
||||
height: 3.25rem;
|
||||
|
||||
.navigation-controls {
|
||||
display: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: stretch;
|
||||
|
||||
svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transition: all ease-in-out 0.1s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(150%);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: auto 0.1rem;
|
||||
transition: all ease-in-out 0.1s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mod-stats {
|
||||
height: 100%;
|
||||
display: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
gap: var(--gap-sm);
|
||||
//no select
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.router-view {
|
||||
@ -276,37 +315,20 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
height: calc(100% - 3.125rem);
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.nav-container {
|
||||
background: var(--color-bg) !important;
|
||||
}
|
||||
.pages-list {
|
||||
a.router-link-active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
.nav-container {
|
||||
box-shadow: var(--shadow-floating), var(--shadow-floating), var(--shadow-floating),
|
||||
var(--shadow-floating) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
padding: 1rem;
|
||||
background: var(--color-raised-bg);
|
||||
padding: var(--gap-md);
|
||||
|
||||
&.expanded {
|
||||
--sidebar-width: 13rem;
|
||||
@ -332,6 +354,7 @@ document.querySelector('body').addEventListener('click', function (e) {
|
||||
background: inherit;
|
||||
transition: all ease-in-out 0.1s;
|
||||
color: var(--color-base);
|
||||
box-shadow: none;
|
||||
|
||||
&.router-link-active {
|
||||
color: var(--color-contrast);
|
||||
|
||||
1
theseus_gui/src/assets/icons/arrow-left-right.svg
Normal file
1
theseus_gui/src/assets/icons/arrow-left-right.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
4
theseus_gui/src/assets/icons/index.js
Normal file
4
theseus_gui/src/assets/icons/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
export { default as ServerIcon } from './server.svg'
|
||||
export { default as MinimizeIcon } from './minimize.svg'
|
||||
export { default as MaximizeIcon } from './maximize.svg'
|
||||
export { default as SwapIcon } from './arrow-left-right.svg'
|
||||
1
theseus_gui/src/assets/icons/maximize.svg
Normal file
1
theseus_gui/src/assets/icons/maximize.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"><path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>
|
||||
|
After Width: | Height: | Size: 311 B |
1
theseus_gui/src/assets/icons/minimize.svg
Normal file
1
theseus_gui/src/assets/icons/minimize.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><line x1="5" x2="19" y1="12" y2="12"/></svg>
|
||||
|
After Width: | Height: | Size: 253 B |
1
theseus_gui/src/assets/icons/server.svg
Normal file
1
theseus_gui/src/assets/icons/server.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
|
||||
|
After Width: | Height: | Size: 405 B |
@ -53,3 +53,71 @@ input {
|
||||
gap: 1rem;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
border-radius: var(--radius-md);
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg);
|
||||
padding-block: var(--gap-sm);
|
||||
padding-inline: var(--gap-lg);
|
||||
width: min-content;
|
||||
|
||||
svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.featured {
|
||||
background-color: var(--color-brand-highlight);
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.mac {
|
||||
.nav-container {
|
||||
padding-top: calc(var(--gap-md) + 1.75rem);
|
||||
}
|
||||
|
||||
.account-card {
|
||||
top: calc(var(--gap-md) + 1.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.windows {
|
||||
.window-controls {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
right: 8rem;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
right: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--color-button-bg) var(--color-bg);
|
||||
}
|
||||
|
||||
/* Chrome, Edge, and Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: var(--gap-md);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--color-bg);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<script setup>
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ClipboardCopyIcon,
|
||||
FolderOpenIcon,
|
||||
PlayIcon,
|
||||
@ -12,14 +10,30 @@ import {
|
||||
StopCircleIcon,
|
||||
ExternalIcon,
|
||||
EyeIcon,
|
||||
ChevronRightIcon,
|
||||
ModalConfirm,
|
||||
} from 'omorphia'
|
||||
import Instance from '@/components/ui/Instance.vue'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import ContextMenu from '@/components/ui/ContextMenu.vue'
|
||||
import { remove } from '@/helpers/profile.js'
|
||||
import ProjectCard from '@/components/ui/ProjectCard.vue'
|
||||
import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
|
||||
import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
|
||||
import {
|
||||
get_all_running_profile_paths,
|
||||
get_uuids_by_profile_path,
|
||||
kill_by_uuid,
|
||||
} from '@/helpers/process.js'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { remove, run } from '@/helpers/profile.js'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showInFolder } from '@/helpers/utils.js'
|
||||
import { useFetch } from '@/helpers/fetch.js'
|
||||
import { install as pack_install } from '@/helpers/pack.js'
|
||||
import { useTheming } from '@/store/state.js'
|
||||
import mixpanel from 'mixpanel-browser'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
instances: {
|
||||
@ -35,53 +49,28 @@ const props = defineProps({
|
||||
canPaginate: Boolean,
|
||||
})
|
||||
|
||||
const allowPagination = ref(Array.apply(false, Array(props.instances.length)))
|
||||
const actualInstances = computed(() =>
|
||||
props.instances.filter((x) => x && x.instances && x.instances[0])
|
||||
)
|
||||
|
||||
const modsRow = ref(null)
|
||||
const instanceOptions = ref(null)
|
||||
const instanceComponents = ref(null)
|
||||
const rows = ref(null)
|
||||
const confirmModal = ref(null)
|
||||
const deleteConfirmModal = ref(null)
|
||||
const modInstallModal = ref(null)
|
||||
|
||||
const themeStore = useTheming()
|
||||
const currentDeleteInstance = ref(null)
|
||||
const confirmModal = ref(null)
|
||||
|
||||
async function deleteProfile() {
|
||||
if (currentDeleteInstance.value) {
|
||||
instanceComponents.value = instanceComponents.value.filter(
|
||||
(x) => x.instance.path !== currentDeleteInstance.value
|
||||
)
|
||||
await remove(currentDeleteInstance.value).catch(handleError)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePaginationDisplay = () => {
|
||||
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()
|
||||
|
||||
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 handleInstanceRightClick = async (event, passedInstance) => {
|
||||
const baseOptions = [
|
||||
{ name: 'add_content' },
|
||||
{ type: 'divider' },
|
||||
@ -95,21 +84,9 @@ const handleInstanceRightClick = (event, passedInstance) => {
|
||||
},
|
||||
]
|
||||
|
||||
const options = !passedInstance.instance.path
|
||||
? [
|
||||
{
|
||||
name: 'install',
|
||||
color: 'primary',
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
name: 'open_link',
|
||||
},
|
||||
{
|
||||
name: 'copy_link',
|
||||
},
|
||||
]
|
||||
: passedInstance.playing
|
||||
const running = await get_all_running_profile_paths().catch(handleError)
|
||||
|
||||
const options = running.includes(passedInstance.path)
|
||||
? [
|
||||
{
|
||||
name: 'stop',
|
||||
@ -128,63 +105,122 @@ const handleInstanceRightClick = (event, passedInstance) => {
|
||||
instanceOptions.value.showMenu(event, passedInstance, options)
|
||||
}
|
||||
|
||||
const handleProjectClick = (event, passedInstance) => {
|
||||
instanceOptions.value.showMenu(event, passedInstance, [
|
||||
{
|
||||
name: 'install',
|
||||
color: 'primary',
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
name: 'open_link',
|
||||
},
|
||||
{
|
||||
name: 'copy_link',
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
const handleOptionsClick = async (args) => {
|
||||
switch (args.option) {
|
||||
case 'play':
|
||||
await args.item.play(null, 'InstanceRowContextMenu')
|
||||
await run(args.item.path).catch(handleError)
|
||||
mixpanel.track('InstanceStart', {
|
||||
loader: args.item.metadata.loader,
|
||||
game_version: args.item.metadata.game_version,
|
||||
})
|
||||
break
|
||||
case 'stop':
|
||||
await args.item.stop(null, 'InstanceRowContextMenu')
|
||||
for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
|
||||
await kill_by_uuid(u).catch(handleError)
|
||||
}
|
||||
mixpanel.track('InstanceStop', {
|
||||
loader: args.item.metadata.loader,
|
||||
game_version: args.item.metadata.game_version,
|
||||
})
|
||||
break
|
||||
case 'add_content':
|
||||
await args.item.addContent()
|
||||
await router.push({
|
||||
path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
|
||||
query: { i: args.item.path },
|
||||
})
|
||||
break
|
||||
case 'edit':
|
||||
await args.item.seeInstance()
|
||||
await router.push({
|
||||
path: `/instance/${encodeURIComponent(args.item.path)}/`,
|
||||
})
|
||||
break
|
||||
case 'delete':
|
||||
currentDeleteInstance.value = args.item.instance.path
|
||||
confirmModal.value.show()
|
||||
currentDeleteInstance.value = args.item.path
|
||||
deleteConfirmModal.value.show()
|
||||
break
|
||||
case 'open_folder':
|
||||
await args.item.openFolder()
|
||||
await showInFolder(args.item.path)
|
||||
break
|
||||
case 'copy_path':
|
||||
await navigator.clipboard.writeText(args.item.instance.path)
|
||||
await navigator.clipboard.writeText(args.item.path)
|
||||
break
|
||||
case 'install':
|
||||
args.item.install()
|
||||
case 'install': {
|
||||
const versions = await useFetch(
|
||||
`https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
|
||||
'project versions'
|
||||
)
|
||||
|
||||
if (args.item.project_type === 'modpack') {
|
||||
await pack_install(
|
||||
args.item.project_id,
|
||||
versions[0].id,
|
||||
args.item.title,
|
||||
args.item.icon_url
|
||||
)
|
||||
} else {
|
||||
modInstallModal.value.show(args.item.project_id, versions)
|
||||
}
|
||||
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}`,
|
||||
path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'copy_link':
|
||||
await navigator.clipboard.writeText(
|
||||
`https://modrinth.com/${args.item.instance.project_type}/${args.item.instance.slug}`
|
||||
`https://modrinth.com/${args.item.project_type}/${args.item.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
|
||||
const maxInstancesPerRow = ref(0)
|
||||
const maxProjectsPerRow = ref(0)
|
||||
|
||||
const calculateCardsPerRow = () => {
|
||||
// Calculate how many cards fit in one row
|
||||
const containerWidth = rows.value[0].clientWidth
|
||||
// Convert container width from pixels to rem
|
||||
const containerWidthInRem =
|
||||
containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
|
||||
maxInstancesPerRow.value = Math.floor((containerWidthInRem + 1) / 11)
|
||||
maxProjectsPerRow.value = Math.floor((containerWidthInRem + 1) / 17)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
calculateCardsPerRow()
|
||||
window.addEventListener('resize', calculateCardsPerRow)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', calculateCardsPerRow)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ModalConfirm
|
||||
ref="confirmModal"
|
||||
ref="deleteConfirmModal"
|
||||
title="Are you sure you want to delete this instance?"
|
||||
description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
|
||||
:has-to-type="false"
|
||||
@ -193,28 +229,29 @@ const getInstanceIndex = (rowIndex, index) => {
|
||||
@proceed="deleteProfile"
|
||||
/>
|
||||
<div class="content">
|
||||
<div v-for="(row, rowIndex) in instances" :key="row.label" class="row">
|
||||
<div v-for="row in actualInstances" ref="rows" :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>
|
||||
<router-link :to="row.route">{{ row.label }}</router-link>
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
<section ref="modsRow" class="instances">
|
||||
<section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
|
||||
<Instance
|
||||
v-for="(instance, instanceIndex) in row.instances"
|
||||
ref="instanceComponents"
|
||||
v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
|
||||
:key="instance?.project_id || instance?.id"
|
||||
:instance="instance"
|
||||
@contextmenu.prevent.stop="
|
||||
(event) =>
|
||||
handleInstanceRightClick(
|
||||
event,
|
||||
instanceComponents[getInstanceIndex(rowIndex, instanceIndex)]
|
||||
)
|
||||
"
|
||||
@contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
|
||||
/>
|
||||
</section>
|
||||
<section v-else ref="modsRow" class="projects">
|
||||
<ProjectCard
|
||||
v-for="project in row.instances.slice(0, maxProjectsPerRow)"
|
||||
:key="project?.project_id"
|
||||
ref="instanceComponents"
|
||||
class="item"
|
||||
:project="project"
|
||||
:confirm-modal="confirmModal"
|
||||
:mod-install-modal="modInstallModal"
|
||||
@contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
@ -231,6 +268,8 @@ const getInstanceIndex = (rowIndex, index) => {
|
||||
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
|
||||
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
|
||||
</ContextMenu>
|
||||
<InstallConfirmModal ref="confirmModal" />
|
||||
<InstanceInstallModal ref="modInstallModal" />
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
@ -239,97 +278,70 @@ const getInstanceIndex = (rowIndex, index) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
min-width: 100%;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
gap: var(--gap-xs);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
a {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: bolder;
|
||||
white-space: nowrap;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--color-gray);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
svg {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: inherit;
|
||||
align-items: inherit;
|
||||
|
||||
svg {
|
||||
background: var(--color-raised-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 1.3rem;
|
||||
height: 1.2rem;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-in-out 0.1s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(150%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: inherit;
|
||||
transition: all ease-in-out 0.4s;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.instances {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
margin-right: auto;
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
|
||||
:deep(.instance-card-item) {
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.instance) {
|
||||
min-width: 10.5rem;
|
||||
max-width: 10.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.row {
|
||||
background-color: rgb(30, 31, 34);
|
||||
.projects {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -272,13 +272,13 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-base);
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&.expanded {
|
||||
border: 1px solid var(--color-button-bg);
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,27 +250,7 @@ onUnmounted(() => unlisten())
|
||||
&:hover {
|
||||
.cta {
|
||||
opacity: 1;
|
||||
bottom: 4.75rem;
|
||||
}
|
||||
|
||||
.instance-card-item {
|
||||
background: hsl(220, 11%, 11%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
.instance:hover {
|
||||
.instance-card-item {
|
||||
background: hsl(0, 0%, 91%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.instance-card-item {
|
||||
background: hsl(0, 0%, 100%) !important;
|
||||
|
||||
&:hover {
|
||||
background: hsl(0, 0%, 91%) !important;
|
||||
bottom: calc(var(--gap-md) + 4.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -280,14 +260,14 @@ onUnmounted(() => unlisten())
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius-md);
|
||||
z-index: 1;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
right: 1.25rem;
|
||||
bottom: 4.25rem;
|
||||
right: calc(var(--gap-md) * 2);
|
||||
bottom: 3.25rem;
|
||||
opacity: 0;
|
||||
transition: 0.2s ease-in-out bottom, 0.1s ease-in-out opacity, 0.1s ease-in-out filter !important;
|
||||
transition: 0.2s ease-in-out bottom, 0.2s ease-in-out opacity, 0.1s ease-in-out filter !important;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-floating);
|
||||
|
||||
@ -321,17 +301,11 @@ onUnmounted(() => unlisten())
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0.75rem !important; /* overrides card class */
|
||||
padding: var(--gap-md);
|
||||
transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
|
||||
background: hsl(220, 11%, 17%) !important;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1) !important;
|
||||
background: hsl(220, 11%, 11%) !important;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
.mod-image {
|
||||
--size: 100%;
|
||||
|
||||
width: 100% !important;
|
||||
|
||||
289
theseus_gui/src/components/ui/ProjectCard.vue
Normal file
289
theseus_gui/src/components/ui/ProjectCard.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<script setup>
|
||||
import {
|
||||
Card,
|
||||
Avatar,
|
||||
Button,
|
||||
formatNumber,
|
||||
formatCategory,
|
||||
DownloadIcon,
|
||||
HeartIcon,
|
||||
CalendarIcon,
|
||||
} from 'omorphia'
|
||||
import { computed, ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useFetch } from '@/helpers/fetch.js'
|
||||
import { list } from '@/helpers/profile.js'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { install as pack_install } from '@/helpers/pack.js'
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const router = useRouter()
|
||||
const installing = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
project: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
confirmModal: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
modInstallModal: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const toColor = computed(() => {
|
||||
let color = props.project.color
|
||||
|
||||
color >>>= 0
|
||||
const b = color & 0xff
|
||||
const g = (color >>> 8) & 0xff
|
||||
const r = (color >>> 16) & 0xff
|
||||
return 'rgba(' + [r, g, b, 1].join(',') + ')'
|
||||
})
|
||||
|
||||
const toTransparent = computed(() => {
|
||||
let color = props.project.color
|
||||
|
||||
color >>>= 0
|
||||
const b = color & 0xff
|
||||
const g = (color >>> 8) & 0xff
|
||||
const r = (color >>> 16) & 0xff
|
||||
return (
|
||||
'linear-gradient(rgba(' +
|
||||
[r, g, b, 0.03].join(',') +
|
||||
'), 65%, rgba(' +
|
||||
[r, g, b, 0.3].join(',') +
|
||||
'))'
|
||||
)
|
||||
})
|
||||
|
||||
const install = async (e) => {
|
||||
e?.stopPropagation()
|
||||
installing.value = true
|
||||
const versions = await useFetch(
|
||||
`https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
|
||||
'project versions'
|
||||
)
|
||||
|
||||
if (props.project.project_type === 'modpack') {
|
||||
const packs = Object.values(await list(true).catch(handleError))
|
||||
|
||||
if (
|
||||
packs.length === 0 ||
|
||||
!packs
|
||||
.map((value) => value.metadata)
|
||||
.find((pack) => pack.linked_data?.project_id === props.project.project_id)
|
||||
) {
|
||||
installing.value = true
|
||||
await pack_install(
|
||||
props.project.project_id,
|
||||
versions[0].id,
|
||||
props.project.title,
|
||||
props.project.icon_url
|
||||
).catch(handleError)
|
||||
installing.value = false
|
||||
} else
|
||||
props.confirmModal.show(
|
||||
props.project.project_id,
|
||||
versions[0].id,
|
||||
props.project.title,
|
||||
props.project.icon_url
|
||||
)
|
||||
} else {
|
||||
props.modInstallModal.show(props.project.project_id, versions)
|
||||
}
|
||||
|
||||
installing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
|
||||
<div
|
||||
class="banner"
|
||||
:style="{
|
||||
'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
|
||||
'background-image': `url(${
|
||||
project.featured_gallery ??
|
||||
project.gallery[0] ??
|
||||
'https://cdn.discordapp.com/attachments/817413688771608587/1119143634319724564/image.png'
|
||||
})`,
|
||||
'no-image': !project.featured_gallery && !project.gallery[0],
|
||||
}"
|
||||
>
|
||||
<div class="badges">
|
||||
<div class="badge">
|
||||
<DownloadIcon />
|
||||
{{ formatNumber(project.downloads) }}
|
||||
</div>
|
||||
<div class="badge">
|
||||
<HeartIcon />
|
||||
{{ formatNumber(project.follows) }}
|
||||
</div>
|
||||
<div class="badge">
|
||||
<CalendarIcon />
|
||||
{{ formatCategory(dayjs(project.date_modified).fromNow()) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="badges-wrapper"
|
||||
:class="{
|
||||
'no-image': !project.featured_gallery && !project.gallery[0],
|
||||
}"
|
||||
:style="{
|
||||
background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<Avatar class="icon" size="sm" :src="project.icon_url" />
|
||||
<div class="title">
|
||||
<div class="title-text">
|
||||
{{ project.title }}
|
||||
</div>
|
||||
<div class="author">by {{ project.author }}</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ project.description }}
|
||||
</div>
|
||||
</Card>
|
||||
<Button color="primary" class="install" :disabled="installing" @click="install">
|
||||
<DownloadIcon />
|
||||
{{ installing ? 'Installing' : 'Install' }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
|
||||
&:hover {
|
||||
.install:enabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template:
|
||||
'. . . .' 0
|
||||
'. icon title .' 3rem
|
||||
'banner banner banner banner' auto
|
||||
'. description description .' 3.5rem
|
||||
'. . . .' 0 / 0 3rem minmax(0, 1fr) 0;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
grid-area: title;
|
||||
white-space: nowrap;
|
||||
|
||||
.title-text {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: var(--font-size-sm);
|
||||
grid-area: author;
|
||||
}
|
||||
|
||||
.banner {
|
||||
grid-area: banner;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
|
||||
.badges-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: hard-light;
|
||||
}
|
||||
|
||||
.badges {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--gap-sm);
|
||||
gap: var(--gap-xs);
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--color-raised-bg);
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--gap-xs) var(--gap-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: var(--gap-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.install {
|
||||
position: absolute;
|
||||
top: calc(5rem + var(--gap-sm));
|
||||
right: var(--gap-sm);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,45 +1,47 @@
|
||||
<template>
|
||||
<div v-if="selectedProfile" class="status">
|
||||
<span class="circle running" />
|
||||
<div
|
||||
ref="profileButton"
|
||||
class="running-text"
|
||||
:class="{ clickable: currentProcesses.length > 1 }"
|
||||
@click="toggleProfiles()"
|
||||
<div class="action-groups">
|
||||
<Button
|
||||
v-if="currentLoadingBars.length > 0"
|
||||
ref="infoButton"
|
||||
icon-only
|
||||
class="icon-button show-card-icon"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
{{ selectedProfile.metadata.name }}
|
||||
<div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
|
||||
<DropdownIcon />
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
<div v-if="selectedProfile" class="status">
|
||||
<span class="circle running" />
|
||||
<div
|
||||
ref="profileButton"
|
||||
class="running-text"
|
||||
:class="{ clickable: currentProcesses.length > 1 }"
|
||||
@click="toggleProfiles()"
|
||||
>
|
||||
{{ selectedProfile.metadata.name }}
|
||||
<div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
|
||||
<DropdownIcon />
|
||||
</div>
|
||||
</div>
|
||||
<Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
|
||||
<StopCircleIcon />
|
||||
</Button>
|
||||
<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
|
||||
<TerminalSquareIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="currentLoadingBars.length > 0"
|
||||
ref="infoButton"
|
||||
icon-only
|
||||
class="icon-button show-card-icon"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="status">
|
||||
<span class="circle stopped" />
|
||||
<span class="running-text"> No running instances </span>
|
||||
</div>
|
||||
<Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
|
||||
<StopCircleIcon />
|
||||
</Button>
|
||||
<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
|
||||
<TerminalSquareIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="currentLoadingBars.length > 0"
|
||||
ref="infoButton"
|
||||
icon-only
|
||||
class="icon-button show-card-icon"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="status">
|
||||
<span class="circle stopped" />
|
||||
<span class="running-text"> No running instances </span>
|
||||
<Button
|
||||
v-if="currentLoadingBars.length > 0"
|
||||
ref="infoButton"
|
||||
icon-only
|
||||
class="icon-button show-card-icon"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<transition name="download">
|
||||
<Card v-if="showCard === true" ref="card" class="info-card">
|
||||
@ -228,6 +230,13 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.action-groups {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
display: flex;
|
||||
@ -238,14 +247,13 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
padding: var(--gap-sm) var(--gap-lg);
|
||||
}
|
||||
|
||||
.running-text {
|
||||
|
||||
@ -77,7 +77,7 @@ import {
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { ref } from 'vue'
|
||||
import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
|
||||
import { add_project_from_version as installMod, check_installed, list } from '@/helpers/profile.js'
|
||||
import { install as packInstall } from '@/helpers/pack.js'
|
||||
import { installVersionDependencies } from '@/helpers/utils.js'
|
||||
import { useFetch } from '@/helpers/fetch.js'
|
||||
@ -121,7 +121,9 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const installing = ref(false)
|
||||
const installed = ref(props.project.installed)
|
||||
const installed = ref(
|
||||
props.instance ? await check_installed(props.instance.path, props.project.project_id) : false
|
||||
)
|
||||
|
||||
async function install() {
|
||||
installing.value = true
|
||||
@ -278,28 +280,6 @@ async function install() {
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
border-radius: var(--radius-md);
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg);
|
||||
padding-block: var(--gap-sm);
|
||||
padding-inline: var(--gap-lg);
|
||||
|
||||
svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.featured {
|
||||
background-color: var(--color-brand-highlight);
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -475,7 +475,7 @@ const showLoaders = computed(
|
||||
<template>
|
||||
<div class="search-container">
|
||||
<aside class="filter-panel">
|
||||
<div v-if="instanceContext" class="small-instance">
|
||||
<Card v-if="instanceContext" class="small-instance">
|
||||
<router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
|
||||
<Avatar
|
||||
:src="
|
||||
@ -512,7 +512,7 @@ const showLoaders = computed(
|
||||
@update:model-value="onSearchChangeToTop(1)"
|
||||
@click.prevent.stop
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="search-panel-card">
|
||||
<Button
|
||||
role="button"
|
||||
@ -707,10 +707,7 @@ const showLoaders = computed(
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
<style lang="scss">
|
||||
.small-instance {
|
||||
background: var(--color-bg);
|
||||
padding: var(--gap-lg);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--gap-md);
|
||||
min-height: unset !important;
|
||||
|
||||
.instance {
|
||||
display: flex;
|
||||
@ -765,8 +762,7 @@ const showLoaders = computed(
|
||||
.search-panel-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg) !important;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
min-height: min-content !important;
|
||||
}
|
||||
|
||||
@ -825,14 +821,20 @@ const showLoaders = computed(
|
||||
.filter-panel {
|
||||
position: fixed;
|
||||
width: 20rem;
|
||||
background: var(--color-raised-bg);
|
||||
padding: 1rem;
|
||||
padding: 1rem 0.5rem 1rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
min-height: calc(100vh - 3.25rem);
|
||||
max-height: calc(100vh - 3.25rem);
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--color-contrast);
|
||||
@ -844,8 +846,8 @@ const showLoaders = computed(
|
||||
|
||||
.search {
|
||||
scroll-behavior: smooth;
|
||||
margin: 0 1rem 0.5rem 21rem;
|
||||
width: calc(100% - 22rem);
|
||||
margin: 0 1rem 0.5rem 20.5rem;
|
||||
width: calc(100% - 20.5rem);
|
||||
|
||||
.loading {
|
||||
margin: 2rem;
|
||||
|
||||
@ -21,7 +21,9 @@ breadcrumbs.setRootContext({ name: 'Home', link: route.path })
|
||||
const recentInstances = shallowRef([])
|
||||
|
||||
const getInstances = async () => {
|
||||
console.log('aa')
|
||||
const profiles = await list(true).catch(handleError)
|
||||
console.log(profiles)
|
||||
recentInstances.value = Object.values(profiles).sort((a, b) => {
|
||||
return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
|
||||
})
|
||||
@ -69,16 +71,19 @@ onUnmounted(() => unlisten())
|
||||
:instances="[
|
||||
{
|
||||
label: 'Jump back in',
|
||||
route: '/library',
|
||||
instances: recentInstances,
|
||||
downloaded: true,
|
||||
},
|
||||
{
|
||||
label: 'Popular packs',
|
||||
route: '/browse/modpack',
|
||||
instances: featuredModpacks,
|
||||
downloaded: false,
|
||||
},
|
||||
{
|
||||
label: 'Popular mods',
|
||||
route: '/browse/mod',
|
||||
instances: featuredMods,
|
||||
downloaded: false,
|
||||
},
|
||||
|
||||
@ -23,12 +23,7 @@ onUnmounted(() => unlisten())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<GridDisplay
|
||||
v-if="instances.length > 0"
|
||||
label="Instances"
|
||||
:instances="instances"
|
||||
class="display"
|
||||
/>
|
||||
<GridDisplay label="Instances" :instances="instances" class="display" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -342,7 +342,7 @@ watch(
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settings-page {
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.installation-input {
|
||||
|
||||
@ -57,21 +57,22 @@
|
||||
Folder
|
||||
</Button>
|
||||
</span>
|
||||
<hr class="card-divider" />
|
||||
<div class="pages-list">
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
|
||||
<BoxIcon />
|
||||
Mods
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
|
||||
<FileIcon />
|
||||
Logs
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
|
||||
<SettingsIcon />
|
||||
Options
|
||||
</RouterLink>
|
||||
</div>
|
||||
</Card>
|
||||
<div class="pages-list">
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
|
||||
<BoxIcon />
|
||||
Mods
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
|
||||
<FileIcon />
|
||||
Logs
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
|
||||
<SettingsIcon />
|
||||
Options
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<Promotion />
|
||||
@ -266,7 +267,6 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.instance-card {
|
||||
background: var(--color-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
@ -288,7 +288,6 @@ Button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
background: var(--color-raised-bg);
|
||||
min-height: calc(100% - 3.25rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -321,7 +320,7 @@ Button {
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 20rem;
|
||||
margin-left: 19rem;
|
||||
}
|
||||
|
||||
.instance-info {
|
||||
@ -341,7 +340,7 @@ Button {
|
||||
.pages-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: var(--gap-xs);
|
||||
|
||||
a {
|
||||
font-size: 100%;
|
||||
@ -350,7 +349,6 @@ Button {
|
||||
transition: all ease-in-out 0.1s;
|
||||
width: 100%;
|
||||
color: var(--color-primary);
|
||||
padding: var(--gap-md);
|
||||
box-shadow: none;
|
||||
|
||||
&.router-link-exact-active {
|
||||
@ -373,28 +371,6 @@ Button {
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
background: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
background: var(--color-raised-bg);
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.instance-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -402,7 +378,6 @@ Button {
|
||||
justify-content: left;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
background: var(--color-raised-bg);
|
||||
height: min-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -52,17 +52,28 @@
|
||||
v-model="selectedProjectType"
|
||||
:items="Object.keys(selectableProjectTypes)"
|
||||
/>
|
||||
<Button :disabled="!projects.some((x) => x.outdated)" class="no-wrap" @click="updateAll">
|
||||
<UpdatedIcon />
|
||||
Update {{ selected.length > 0 ? 'selected' : 'all' }}
|
||||
</Button>
|
||||
<DropdownButton
|
||||
:options="['update_all', 'filter_update']"
|
||||
default-value="update_all"
|
||||
:disabled="!projects.some((x) => x.outdated)"
|
||||
@option-click="updateAll"
|
||||
>
|
||||
<template #update_all>
|
||||
<UpdatedIcon />
|
||||
Update {{ selected.length > 0 ? 'selected' : 'all' }}
|
||||
</template>
|
||||
<template #filter_update>
|
||||
<UpdatedIcon />
|
||||
Select Updatable
|
||||
</template>
|
||||
</DropdownButton>
|
||||
<Button v-if="selected.length > 0" class="no-wrap" @click="deleteWarning.show()">
|
||||
<TrashIcon />
|
||||
Remove selected
|
||||
</Button>
|
||||
<DropdownButton
|
||||
v-if="selected.length > 0"
|
||||
:options="['toggle', 'disable', 'enable']"
|
||||
:options="['toggle', 'disable', 'enable', 'hide_show']"
|
||||
default-value="toggle"
|
||||
@option-click="toggleSelected"
|
||||
>
|
||||
@ -78,6 +89,10 @@
|
||||
<CheckCircleIcon />
|
||||
Enable selected
|
||||
</template>
|
||||
<template #hide_show>
|
||||
<CheckCircleIcon />
|
||||
{{ hideNonSelected ? 'Show' : 'Hide' }} unselected
|
||||
</template>
|
||||
</DropdownButton>
|
||||
<DropdownButton
|
||||
v-if="selected.length > 0"
|
||||
@ -299,6 +314,7 @@ const sortFilter = ref('')
|
||||
const selectedProjectType = ref('All')
|
||||
const selected = computed(() => projects.value.filter((mod) => mod.selected))
|
||||
const deleteWarning = ref(null)
|
||||
const hideNonSelected = ref(false)
|
||||
|
||||
const selectableProjectTypes = computed(() => {
|
||||
const obj = { All: 'all' }
|
||||
@ -313,12 +329,19 @@ const selectableProjectTypes = computed(() => {
|
||||
|
||||
const search = computed(() => {
|
||||
const projectType = selectableProjectTypes.value[selectedProjectType.value]
|
||||
const filtered = projects.value.filter((mod) => {
|
||||
return (
|
||||
mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
|
||||
(projectType === 'all' || mod.project_type === projectType)
|
||||
)
|
||||
})
|
||||
const filtered = projects.value
|
||||
.filter((mod) => {
|
||||
return (
|
||||
mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
|
||||
(projectType === 'all' || mod.project_type === projectType)
|
||||
)
|
||||
})
|
||||
.filter((mod) => {
|
||||
if (hideNonSelected.value) {
|
||||
return mod.selected
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
return updateSort(filtered, sortFilter.value)
|
||||
})
|
||||
@ -368,37 +391,45 @@ function updateSort(projects, sort) {
|
||||
}
|
||||
}
|
||||
|
||||
async function updateAll() {
|
||||
const setProjects = []
|
||||
for (const [i, project] of selected.value ?? projects.value.entries()) {
|
||||
if (project.outdated) {
|
||||
project.updating = true
|
||||
setProjects.push(i)
|
||||
async function updateAll(args) {
|
||||
if (args.option === 'update_all') {
|
||||
const setProjects = []
|
||||
for (const [i, project] of selected.value ?? projects.value.entries()) {
|
||||
if (project.outdated) {
|
||||
project.updating = true
|
||||
setProjects.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
const paths = await update_all(props.instance.path).catch(handleError)
|
||||
|
||||
for (const [oldVal, newVal] of Object.entries(paths)) {
|
||||
const index = projects.value.findIndex((x) => x.path === oldVal)
|
||||
projects.value[index].path = newVal
|
||||
projects.value[index].outdated = false
|
||||
|
||||
if (projects.value[index].updateVersion) {
|
||||
projects.value[index].version = projects.value[index].updateVersion.version_number
|
||||
projects.value[index].updateVersion = null
|
||||
}
|
||||
}
|
||||
for (const project of setProjects) {
|
||||
projects.value[project].updating = false
|
||||
}
|
||||
|
||||
mixpanel.track('InstanceUpdateAll', {
|
||||
loader: props.instance.metadata.loader,
|
||||
game_version: props.instance.metadata.game_version,
|
||||
count: setProjects.length,
|
||||
selected: selected.value.length > 1,
|
||||
})
|
||||
} else {
|
||||
for (const project of projects.value) {
|
||||
if (project.outdated) {
|
||||
project.selected = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const paths = await update_all(props.instance.path).catch(handleError)
|
||||
|
||||
for (const [oldVal, newVal] of Object.entries(paths)) {
|
||||
const index = projects.value.findIndex((x) => x.path === oldVal)
|
||||
projects.value[index].path = newVal
|
||||
projects.value[index].outdated = false
|
||||
|
||||
if (projects.value[index].updateVersion) {
|
||||
projects.value[index].version = projects.value[index].updateVersion.version_number
|
||||
projects.value[index].updateVersion = null
|
||||
}
|
||||
}
|
||||
for (const project of setProjects) {
|
||||
projects.value[project].updating = false
|
||||
}
|
||||
|
||||
mixpanel.track('InstanceUpdateAll', {
|
||||
loader: props.instance.metadata.loader,
|
||||
game_version: props.instance.metadata.game_version,
|
||||
count: setProjects.length,
|
||||
selected: selected.value.length > 1,
|
||||
})
|
||||
}
|
||||
|
||||
async function updateProject(mod) {
|
||||
@ -523,6 +554,9 @@ async function toggleSelected(args) {
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'hide_show':
|
||||
hideNonSelected.value = !hideNonSelected.value
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="root-container">
|
||||
<div v-if="data" class="project-sidebar">
|
||||
<div v-if="instance" class="small-instance">
|
||||
<Card v-if="instance" class="small-instance">
|
||||
<router-link class="instance" :to="`/instance/${encodeURIComponent(instance.path)}`">
|
||||
<Avatar
|
||||
:src="
|
||||
@ -23,7 +23,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
|
||||
<Avatar size="lg" :src="data.icon_url" />
|
||||
<div class="instance-info">
|
||||
@ -207,6 +207,7 @@
|
||||
:dependencies="dependencies"
|
||||
:install="install"
|
||||
:installed="installed"
|
||||
:installed-version="installedVersion"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,6 +260,7 @@ import {
|
||||
add_project_from_version as installMod,
|
||||
check_installed,
|
||||
get as getInstance,
|
||||
remove_project,
|
||||
} from '@/helpers/profile'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
@ -284,7 +286,6 @@ const incompatibilityWarning = ref(null)
|
||||
|
||||
const options = ref(null)
|
||||
const installing = ref(false)
|
||||
|
||||
const data = shallowRef(null)
|
||||
const versions = shallowRef([])
|
||||
const members = shallowRef([])
|
||||
@ -293,6 +294,7 @@ const categories = shallowRef([])
|
||||
const instance = ref(null)
|
||||
|
||||
const installed = ref(false)
|
||||
const installedVersion = ref(null)
|
||||
|
||||
async function fetchProjectData() {
|
||||
;[
|
||||
@ -315,6 +317,11 @@ async function fetchProjectData() {
|
||||
instance.value?.path &&
|
||||
(await check_installed(instance.value.path, data.value.id).catch(handleError))
|
||||
breadcrumbs.setName('Project', data.value.title)
|
||||
installedVersion.value = instance.value
|
||||
? Object.values(instance.value.projects).find(
|
||||
(p) => p?.metadata?.version?.project_id === data.value.id
|
||||
)?.metadata?.version?.id
|
||||
: null
|
||||
}
|
||||
|
||||
await fetchProjectData()
|
||||
@ -338,6 +345,18 @@ async function install(version) {
|
||||
installing.value = true
|
||||
let queuedVersionData
|
||||
|
||||
if (installed.value) {
|
||||
await remove_project(
|
||||
instance.value.path,
|
||||
Object.entries(instance.value.projects)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
value,
|
||||
}))
|
||||
.find((p) => p.value.metadata?.version?.project_id === data.value.id).key
|
||||
)
|
||||
}
|
||||
|
||||
if (version) {
|
||||
queuedVersionData = versions.value.find((v) => v.id === version)
|
||||
} else {
|
||||
@ -406,7 +425,7 @@ async function install(version) {
|
||||
queuedVersionData = selectedVersion
|
||||
await installMod(instance.value.path, selectedVersion.id).catch(handleError)
|
||||
await installVersionDependencies(instance.value, queuedVersionData)
|
||||
|
||||
installedVersion.value = selectedVersion.id
|
||||
mixpanel.track('ProjectInstall', {
|
||||
loader: instance.value.metadata.loader,
|
||||
game_version: instance.value.metadata.game_version,
|
||||
@ -430,7 +449,7 @@ async function install(version) {
|
||||
if (compatible) {
|
||||
await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
|
||||
await installVersionDependencies(instance.value, queuedVersionData)
|
||||
|
||||
installedVersion.value = queuedVersionData.id
|
||||
mixpanel.track('ProjectInstall', {
|
||||
loader: instance.value.metadata.loader,
|
||||
game_version: instance.value.metadata.game_version,
|
||||
@ -513,15 +532,20 @@ const handleOptionsClick = (args) => {
|
||||
height: fit-content;
|
||||
max-height: calc(100vh - 3.25rem);
|
||||
overflow-y: auto;
|
||||
background: var(--color-raised-bg);
|
||||
padding: 1rem;
|
||||
padding: 1rem 0.5rem 1rem 1rem;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
@ -529,7 +553,7 @@ const handleOptionsClick = (args) => {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin-left: 20rem;
|
||||
margin-left: 19.5rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@ -652,7 +676,6 @@ const handleOptionsClick = (args) => {
|
||||
}
|
||||
|
||||
.small-instance {
|
||||
background: var(--color-bg);
|
||||
padding: var(--gap-lg);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--gap-md);
|
||||
|
||||
@ -1,50 +1,76 @@
|
||||
<template>
|
||||
<Card>
|
||||
<div class="filter-header">
|
||||
<div class="manage">
|
||||
<multiselect
|
||||
v-model="filterVersions"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.loaders)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter loader..."
|
||||
/>
|
||||
<multiselect
|
||||
v-model="filterLoader"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.game_versions)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter versions..."
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
class="no-wrap clear-filters"
|
||||
:disabled="!filterLoader && !filterVersions"
|
||||
:action="clearFilters"
|
||||
>
|
||||
<ClearIcon />
|
||||
Clear filters
|
||||
</Button>
|
||||
<Card class="filter-header">
|
||||
<div class="manage">
|
||||
<multiselect
|
||||
v-model="filterLoader"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.loaders)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter loader..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
<multiselect
|
||||
v-model="filterGameVersions"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.game_versions)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter versions..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
<multiselect
|
||||
v-model="filterVersions"
|
||||
:options="
|
||||
versions
|
||||
.map((value) => value.version_type)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter release channel..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
class="no-wrap clear-filters"
|
||||
:disabled="
|
||||
filterVersions.length === 0 && filterLoader.length === 0 && filterGameVersions.length === 0
|
||||
"
|
||||
:action="clearFilters"
|
||||
>
|
||||
<ClearIcon />
|
||||
Clear filters
|
||||
</Button>
|
||||
</Card>
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:count="Math.ceil(filteredVersions.length / 20)"
|
||||
class="pagination-before"
|
||||
:link-function="(page) => `?page=${page}`"
|
||||
@switch-page="switchPage"
|
||||
/>
|
||||
<Card class="mod-card">
|
||||
<div class="table">
|
||||
<div class="table-row table-head">
|
||||
@ -54,19 +80,20 @@
|
||||
<div class="table-cell table-text">Stats</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="version in versions"
|
||||
v-for="version in filteredVersions.slice((currentPage - 1) * 20, currentPage * 20)"
|
||||
:key="version.id"
|
||||
class="table-row selectable"
|
||||
@click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
|
||||
>
|
||||
<div class="table-cell table-text">
|
||||
<Button
|
||||
color="primary"
|
||||
:color="installed && version.id === installedVersion ? '' : 'primary'"
|
||||
icon-only
|
||||
:disabled="installed"
|
||||
:disabled="installed && version.id === installedVersion"
|
||||
@click.stop="() => install(version.id)"
|
||||
>
|
||||
<DownloadIcon v-if="!installed" />
|
||||
<SwapIcon v-else-if="installed && version.id !== installedVersion" />
|
||||
<CheckIcon v-else />
|
||||
</Button>
|
||||
</div>
|
||||
@ -124,20 +151,34 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card, Button, CheckIcon, ClearIcon, Badge, DownloadIcon, formatNumber } from 'omorphia'
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
CheckIcon,
|
||||
ClearIcon,
|
||||
Badge,
|
||||
DownloadIcon,
|
||||
Pagination,
|
||||
formatNumber,
|
||||
} from 'omorphia'
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import { releaseColor } from '@/helpers/utils'
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { SwapIcon } from '@/assets/icons/index.js'
|
||||
|
||||
let filterVersions = ref(null)
|
||||
let filterLoader = ref(null)
|
||||
const filterVersions = ref([])
|
||||
const filterLoader = ref([])
|
||||
const filterGameVersions = ref([])
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
const clearFilters = () => {
|
||||
filterVersions.value = null
|
||||
filterLoader.value = null
|
||||
filterVersions.value = []
|
||||
filterLoader.value = []
|
||||
filterGameVersions.value = []
|
||||
}
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
versions: {
|
||||
type: Array,
|
||||
required: true,
|
||||
@ -148,8 +189,39 @@ defineProps({
|
||||
},
|
||||
installed: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: null,
|
||||
},
|
||||
instance: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
installedVersion: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const filteredVersions = computed(() => {
|
||||
return props.versions.filter(
|
||||
(projectVersion) =>
|
||||
(filterGameVersions.value.length === 0 ||
|
||||
filterGameVersions.value.some((gameVersion) =>
|
||||
projectVersion.game_versions.includes(gameVersion)
|
||||
)) &&
|
||||
(filterLoader.value.length === 0 ||
|
||||
filterLoader.value.some((loader) => projectVersion.loaders.includes(loader))) &&
|
||||
(filterVersions.value.length === 0 ||
|
||||
filterVersions.value.includes(projectVersion.version_type))
|
||||
)
|
||||
})
|
||||
|
||||
function switchPage(page) {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
//watch all the filters and if a value changes, reset to page 1
|
||||
watch([filterVersions, filterLoader, filterGameVersions], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -160,6 +232,7 @@ defineProps({
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@ -188,6 +261,7 @@ defineProps({
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.text-combo {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user