tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Search UI improvements (#107)

Browse Source 
* Base impl

* Make project type selectable

* Update Browse.vue

* address changes

* Quick create

* Run linter

* fix merge

* Addressed changes

* Installation improvements

* Run lint

* resourcepacks

* automatic installation of dependencies

* Fix bugs with search

* Addressed changes

* Run linter

* Fixed direct install not working

* Remove back to search

* Update Index.vue

* Addressed some changes

* Shader fix

* fix resetting

* Update Browse.vue

* Direct install from search

* More improvements

* Update SearchCard.vue

* Card V2

* Run linter

* add instance ignoring

* Update Browse.vue

* Finalize changes

* Update SearchCard.vue

* More adjustments

* Fix out of order rendering

* Run linter

* Fix issues

* Add unlisteners

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
2023-05-16 22:25:00 -04:00
committed by GitHub
parent 3fa0e99de2
commit c6e2133e15
18 changed files with 835 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
theseus_gui/src/components/ui/Instance.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue'
import { onUnmounted, ref, useSlots } from 'vue'
import { useRouter } from 'vue-router'
import { ofetch } from 'ofetch'
import { Card, SaveIcon, XIcon, Avatar, AnimatedLogo } from 'omorphia'
@@ -33,13 +33,14 @@ const playing = ref(false)
const uuid = ref(null)
const modLoading = ref(false)
const slots = useSlots()
const router = useRouter()
const seeInstance = async () => {
const instancePath = props.instance.metadata
? `/instance/${encodeURIComponent(props.instance.path)}`
: `/project/${encodeURIComponent(props.instance.project_id)}`
? `/instance/${encodeURIComponent(props.instance.path)}/`
: `/project/${encodeURIComponent(props.instance.project_id)}/`
await router.push(instancePath)
}
@@ -118,31 +119,42 @@ const stop = async (e) => {
uuid.value = null
}
await process_listener((e) => {
const unlisten = await process_listener((e) => {
if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
})
onUnmounted(() => unlisten())
</script>
<template>
<div class="instance">
<Card v-if="props.small" class="instance-small-card button-base" @click="seeInstance">
<Avatar
:src="
!props.instance.metadata.icon ||
(props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
? props.instance.metadata.icon
: convertFileSrc(instance.metadata?.icon)
"
:alt="props.instance.metadata.name"
size="sm"
/>
<div class="instance-small-card__info">
<span class="title">{{ props.instance.metadata.name }}</span>
{{
props.instance.metadata.loader.charAt(0).toUpperCase() +
props.instance.metadata.loader.slice(1)
}}
{{ props.instance.metadata.game_version }}
<Card v-if="props.small" class="instance-small-card" :class="{ 'button-base': !slots.content }">
<div
class="instance-small-card__description"
:class="{ 'button-base': slots.content }"
@click="seeInstance"
>
<Avatar
:src="
!props.instance.metadata.icon ||
(props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
? props.instance.metadata.icon
: convertFileSrc(instance.metadata?.icon)
"
:alt="props.instance.metadata.name"
size="sm"
/>
<div class="instance-small-card__info">
<span class="title">{{ props.instance.metadata.name }}</span>
{{
props.instance.metadata.loader.charAt(0).toUpperCase() +
props.instance.metadata.loader.slice(1)
}}
{{ props.instance.metadata.game_version }}
</div>
</div>
<div v-if="slots.content" class="instance-small-card__content">
<slot name="content" />
</div>
</Card>
<Card
@@ -180,7 +192,7 @@ await process_listener((e) => {
>
<PlayIcon />
</div>
<div v-else-if="modLoading === true && playing === false" class="cta loading">
<div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
<AnimatedLogo class="loading" />
</div>
<div
@@ -200,12 +212,27 @@ await process_listener((e) => {
<style lang="scss">
.instance-small-card {
background-color: var(--color-bg) !important;
padding: 1rem !important;
display: flex;
flex-direction: row;
flex-direction: column;
min-height: min-content !important;
gap: 1rem;
align-items: center;
gap: 0.5rem;
align-items: flex-start;
padding: 0;
.instance-small-card__description {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 1rem;
flex-grow: 1;
padding: var(--gap-xl);
padding-bottom: 0;
width: 100%;
&:not(.button-base) {
padding-bottom: var(--gap-xl);
}
}
.instance-small-card__info {
display: flex;
@@ -217,6 +244,15 @@ await process_listener((e) => {
font-weight: bolder;
}
}
.instance-small-card__content {
padding: var(--gap-xl);
padding-top: 0;
}
.cta {
display: none;
}
}
.instance {
@@ -242,33 +278,6 @@ await process_listener((e) => {
}
}
.install {
background: var(--color-brand);
display: flex;
}
.stop {
background: var(--color-red);
display: flex;
}
.cta.loading {
background: hsl(220, 11%, 10%) !important;
display: flex;
justify-content: center;
align-items: center;
.loading {
width: 2.5rem !important;
height: 2.5rem !important;
}
svg {
width: 2.5rem !important;
height: 2.5rem !important;
}
}
.light-mode {
.instance-card-item {
background: hsl(0, 0%, 100%) !important;
@@ -304,6 +313,33 @@ await process_listener((e) => {
filter: none !important; /* overrides button-base class */
box-shadow: var(--shadow-floating);
}
&.install {
background: var(--color-brand);
display: flex;
}
&.stop {
background: var(--color-red);
display: flex;
}
&.loading-cta {
background: hsl(220, 11%, 10%) !important;
display: flex;
justify-content: center;
align-items: center;
.loading {
width: 2.5rem !important;
height: 2.5rem !important;
svg {
width: 2.5rem !important;
height: 2.5rem !important;
}
}
}
}
.instance-card-item {