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

feat: modrinth hosting - files tab refactor (#4912)

Browse Source 
* feat: api-client module for content v0

* feat: delete unused components + modules + setting

* feat: xhr uploading

* feat: fs module -> api-client

* feat: migrate files.vue to use tanstack

* fix: mem leak + other issues

* fix: build

* feat: switch to monaco

* fix: go back to using ace, but improve preloading + theme

* fix: styling + dead attrs

* feat: match figma

* fix: padding

* feat: files-new for ui page structure

* feat: finalize files.vue

* fix: lint

* fix: qa

* fix: dep

* fix: lint

* fix: lockfile merge

* feat: icons on navtab

* fix: surface alternating on table

* fix: hover surface color

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Calum H.
2026-01-06 00:35:51 +00:00
committed by GitHub
parent 61d4a34f0f
commit 099011a177
89 changed files with 5863 additions and 2091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/ui/src/components/base/FloatingActionBar.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup lang="ts">
defineProps<{
shown: boolean
}>()
</script>
<template>
<Transition name="floating-action-bar" appear>
<div v-if="shown" class="floating-action-bar fixed w-full z-10 left-0 p-4 bottom-0">
<div
class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
>
<slot />
</div>
</div>
</Transition>
</template>
<style scoped>
.floating-action-bar {
transition: bottom 0.25s ease-in-out;
}
.floating-action-bar-enter-active {
transition:
transform 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
opacity 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96);
}
.floating-action-bar-leave-active {
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.floating-action-bar-enter-from {
transform: scale(0.5) translateY(10rem);
opacity: 0;
}
.floating-action-bar-leave-to {
transform: scale(0.96) translateY(0.25rem);
opacity: 0;
}
@media (any-hover: none) and (max-width: 640px) {
.floating-action-bar {
bottom: var(--size-mobile-navbar-height);
}
.expanded-mobile-nav .floating-action-bar {
bottom: var(--size-mobile-navbar-height-expanded);
}
}
</style>

76
packages/ui/src/components/base/UnsavedChangesPopup.vue
View File

@@ -5,6 +5,7 @@ import { type Component, computed } from 'vue'
import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
import { commonMessages } from '../../utils'
import ButtonStyled from './ButtonStyled.vue'
import FloatingActionBar from './FloatingActionBar.vue'
const { formatMessage } = useVIntl()
@@ -53,64 +54,21 @@ function localizeIfPossible(message: MessageDescriptor | string) {
</script>
<template>
<Transition name="pop-in">
<div v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
<div
class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
>
<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
<div class="ml-auto flex gap-2">
<ButtonStyled v-if="canReset" type="transparent">
<button :disabled="saving" @click="(e) => emit('reset', e)">
<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button :disabled="saving" @click="(e) => emit('save', e)">
<SpinnerIcon v-if="saving" class="animate-spin" />
<component :is="saveIcon" v-else />
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
</button>
</ButtonStyled>
</div>
</div>
<FloatingActionBar :shown="shown">
<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
<div class="ml-auto flex gap-2">
<ButtonStyled v-if="canReset" type="transparent">
<button :disabled="saving" @click="(e) => emit('reset', e)">
<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button :disabled="saving" @click="(e) => emit('save', e)">
<SpinnerIcon v-if="saving" class="animate-spin" />
<component :is="saveIcon" v-else />
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
</button>
</ButtonStyled>
</div>
</Transition>
</FloatingActionBar>
</template>
<style scoped>
.pop-in-enter-active {
transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
}
.pop-in-leave-active {
transition: all 0.25s ease;
}
.pop-in-enter-from {
scale: 0.5;
translate: 0 10rem;
opacity: 0;
}
.pop-in-leave-to {
scale: 0.96;
translate: 0 0.25rem;
opacity: 0;
}
.unsaved-changes-popup {
transition: bottom 0.25s ease-in-out;
bottom: 0;
}
@media (any-hover: none) and (max-width: 640px) {
.unsaved-changes-popup {
bottom: var(--size-mobile-navbar-height);
}
.expanded-mobile-nav .unsaved-changes-popup {
bottom: var(--size-mobile-navbar-height-expanded);
}
}
</style>

1
packages/ui/src/components/base/index.ts
View File

@@ -26,6 +26,7 @@ export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
export { default as FileInput } from './FileInput.vue'
export type { FilterBarOption } from './FilterBar.vue'
export { default as FilterBar } from './FilterBar.vue'
export { default as FloatingActionBar } from './FloatingActionBar.vue'
export { default as HeadingLink } from './HeadingLink.vue'
export { default as HorizontalRule } from './HorizontalRule.vue'
export { default as IconSelect } from './IconSelect.vue'