You've already forked AstralRinth
forked from didirus/AstralRinth
Envs v3 frontend (#4267)
* New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons
This commit is contained in:
Prospector
76
packages/ui/src/components/base/IconSelect.vue
Normal file
76
packages/ui/src/components/base/IconSelect.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { EditIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
|
||||
import { Avatar, OverflowMenu } from '../index'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const icon = defineModel<string | undefined>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'select' | 'reset' | 'remove'): void
|
||||
}>()
|
||||
|
||||
type IconSelectOption = 'select' | 'replace' | 'reset' | 'remove'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
options?: IconSelectOption[]
|
||||
}>(),
|
||||
{
|
||||
options: () => ['select', 'replace', 'reset', 'remove'],
|
||||
},
|
||||
)
|
||||
|
||||
const messages = defineMessages({
|
||||
editIcon: {
|
||||
id: 'icon-select.edit',
|
||||
defaultMessage: 'Edit icon',
|
||||
},
|
||||
selectIcon: {
|
||||
id: 'icon-select.select',
|
||||
defaultMessage: 'Select icon',
|
||||
},
|
||||
replaceIcon: {
|
||||
id: 'icon-select.replace',
|
||||
defaultMessage: 'Replace icon',
|
||||
},
|
||||
removeIcon: {
|
||||
id: 'icon-select.remove',
|
||||
defaultMessage: 'Remove icon',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<OverflowMenu
|
||||
v-tooltip="formatMessage(messages.editIcon)"
|
||||
class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
|
||||
:options="[
|
||||
{
|
||||
id: 'select',
|
||||
action: () => emit('select'),
|
||||
},
|
||||
{
|
||||
id: 'remove',
|
||||
color: 'danger',
|
||||
action: () => emit('remove'),
|
||||
shown: !!icon,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Avatar :src="icon" size="108px" class="!border-4 group-hover:brightness-75" no-shadow />
|
||||
<div class="absolute right-0 top-0 m-2">
|
||||
<div
|
||||
class="hovering-icon-shadow m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
|
||||
>
|
||||
<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<template #select>
|
||||
<UploadIcon />
|
||||
{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
|
||||
</template>
|
||||
<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
|
||||
</OverflowMenu>
|
||||
</template>
|
||||
22
packages/ui/src/components/base/LargeRadioButton.vue
Normal file
22
packages/ui/src/components/base/LargeRadioButton.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<button
|
||||
class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer active:scale-[0.98] hover:bg-button-bg hover:brightness-[--hover-brightness] rounded-xl"
|
||||
:class="selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent'"
|
||||
@click="emit('select')"
|
||||
>
|
||||
<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" />
|
||||
<RadioButtonIcon v-else class="h-5 w-5 shrink-0" />
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
<script setup lang="ts" generic="T">
|
||||
import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select'): void
|
||||
}>()
|
||||
|
||||
defineProps<{
|
||||
selected: boolean
|
||||
}>()
|
||||
</script>
|
||||
44
packages/ui/src/components/base/SettingsLabel.vue
Normal file
44
packages/ui/src/components/base/SettingsLabel.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessageDescriptor } from '@vintl/vintl'
|
||||
import { useVIntl } from '@vintl/vintl'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
title: string | MessageDescriptor
|
||||
description?: string | MessageDescriptor
|
||||
}>(),
|
||||
{
|
||||
id: undefined,
|
||||
description: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const formattedTitle = computed(() =>
|
||||
typeof props.title === 'string' ? props.title : formatMessage(props.title),
|
||||
)
|
||||
const formattedDescription = computed(() =>
|
||||
typeof props.description === 'string'
|
||||
? props.description
|
||||
: props.description
|
||||
? formatMessage(props.description)
|
||||
: undefined,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-2">
|
||||
<label v-if="id" :for="id" class="text-lg font-extrabold text-contrast">
|
||||
{{ formattedTitle }}
|
||||
</label>
|
||||
<p v-else class="m-0 text-lg font-extrabold text-contrast">
|
||||
{{ formattedTitle }}
|
||||
</p>
|
||||
<p v-if="formattedDescription" class="text-sm m-0 text-secondary">
|
||||
{{ formattedDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
106
packages/ui/src/components/base/UnsavedChangesPopup.vue
Normal file
106
packages/ui/src/components/base/UnsavedChangesPopup.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts" generic="T">
|
||||
import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
|
||||
import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
|
||||
import { type Component, computed } from 'vue'
|
||||
|
||||
import { commonMessages } from '../../utils'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'reset' | 'save', event: MouseEvent): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
canReset?: boolean
|
||||
original: T
|
||||
modified: Partial<T>
|
||||
saving?: boolean
|
||||
text?: MessageDescriptor | string
|
||||
saveLabel?: MessageDescriptor | string
|
||||
savingLabel?: MessageDescriptor | string
|
||||
saveIcon?: Component
|
||||
}>(),
|
||||
{
|
||||
canReset: true,
|
||||
saving: false,
|
||||
text: () =>
|
||||
defineMessage({
|
||||
id: 'ui.component.unsaved-changes-popup.body',
|
||||
defaultMessage: 'You have unsaved changes.',
|
||||
}),
|
||||
saveLabel: () => commonMessages.saveButton,
|
||||
savingLabel: () => commonMessages.savingButton,
|
||||
saveIcon: SaveIcon,
|
||||
},
|
||||
)
|
||||
|
||||
const shown = computed(() => {
|
||||
let changed = false
|
||||
for (const key of Object.keys(props.modified)) {
|
||||
if (props.original[key] !== props.modified[key]) {
|
||||
changed = true
|
||||
}
|
||||
}
|
||||
return changed
|
||||
})
|
||||
|
||||
function localizeIfPossible(message: MessageDescriptor | string) {
|
||||
return typeof message === 'string' ? message : formatMessage(message)
|
||||
}
|
||||
|
||||
const bodyText = computed(() => localizeIfPossible(props.text))
|
||||
const saveText = computed(() =>
|
||||
localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="pop-in">
|
||||
<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
|
||||
<div
|
||||
class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
|
||||
>
|
||||
<p class="m-0 font-semibold">{{ bodyText }}</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 />
|
||||
{{ saveText }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user