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

Improve accessibiltiy of env selector, improve mobile support, and message for those with no permission (#4304)

Browse Source 
* Fix redirect from project ID

* improve fix

* improve accessibility of environment selector

* lint

* fix mobile accessibility of project settings and improve message for those without permission

* disable envs when multiple + lint
This commit is contained in:
Prospector
2025-08-31 10:23:21 -07:00
committed by GitHub
parent 28337c88f6
commit 8058993578
12 changed files with 163 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/components/base/Admonition.vue
View File

@@ -13,7 +13,7 @@
<div class="font-semibold flex justify-between gap-4">
<slot name="header">{{ header }}</slot>
</div>
<div class="font-normal">
<div class="font-normal text-sm sm:text-base">
<slot>{{ body }}</slot>
</div>
</div>

7
packages/ui/src/components/base/LargeRadioButton.vue
View File

@@ -1,5 +1,8 @@
<template>
<button
role="radio"
:aria-checked="selected"
:aria-disabled="disabled"
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 rounded-xl"
:class="
(selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent') +
@@ -10,8 +13,8 @@
:disabled="disabled"
@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" />
<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" aria-hidden="true" />
<RadioButtonIcon v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
<slot />
</button>
</template>

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

@@ -50,20 +50,15 @@ const shown = computed(() => {
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 v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
<div
class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
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">{{ bodyText }}</p>
<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)">
@@ -74,7 +69,7 @@ const saveText = computed(() =>
<button :disabled="saving" @click="(e) => emit('save', e)">
<SpinnerIcon v-if="saving" class="animate-spin" />
<component :is="saveIcon" v-else />
{{ saveText }}
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
</button>
</ButtonStyled>
</div>
@@ -103,4 +98,19 @@ const saveText = computed(() =>
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>

102
packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
View File

@@ -3,6 +3,7 @@ import type { EnvironmentV3 } from '@modrinth/utils'
import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
import { computed, ref, watch } from 'vue'
import { commonProjectSettingsMessages } from '../../../../utils'
import LargeRadioButton from '../../../base/LargeRadioButton.vue'
const { formatMessage } = useVIntl()
@@ -23,6 +24,15 @@ type EnvironmentRadioOption = {
description?: MessageDescriptor
}
const subOptionLabel = defineMessage({
id: 'project.settings.environment.suboption.accessibility-suboption-group-label',
defaultMessage: 'Suboptions of {option}',
})
const optionLabelFormat = defineMessage({
id: 'project.settings.environment.suboption.accessibility-option-label',
defaultMessage: '{title}: {description}',
})
const OUTER_OPTIONS = {
client: {
title: defineMessage({
@@ -225,58 +235,68 @@ const simulateSave = ref(false)
</script>
<template>
<template
v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
:key="`env-option-${key}`"
>
<LargeRadioButton
class="!w-full"
:class="{ 'mt-2': index > 0 }"
:selected="currentOuterOption === key"
:disabled="disabled"
@select="
() => {
if (currentOuterOption !== key) {
currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
}
currentOuterOption = key
simulateSave = false
}
"
<div role="radiogroup" :aria-label="formatMessage(commonProjectSettingsMessages.environment)">
<template
v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
:key="`env-option-${key}`"
>
<span class="flex flex-col">
<span>{{ formatMessage(title) }}</span>
<span v-if="description" class="text-sm text-secondary">{{
formatMessage(description)
}}</span>
</span>
</LargeRadioButton>
<div v-if="suboptions" class="pl-8">
<LargeRadioButton
v-for="(
{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
) in suboptions"
:key="`env-option-${key}-${suboptionKey}`"
class="!w-full mt-2"
:class="{
'opacity-50': currentOuterOption !== key,
}"
:selected="currentSubOption === suboptionKey"
class="!w-full"
:class="{ 'mt-2': index > 0 }"
:selected="currentOuterOption === key"
:disabled="disabled"
:aria-label="formatMessage(optionLabelFormat, { title: formatMessage(title), description: formatMessage(description)})"
@select="
() => {
if (currentOuterOption !== key) {
currentSubOption = suboptions
? (Object.keys(suboptions)[0] as SubOptionKey)
: undefined
}
currentOuterOption = key
currentSubOption = suboptionKey
simulateSave = false
}
"
>
<span class="flex flex-col">
<span>{{ formatMessage(suboptionTitle) }}</span>
<span v-if="suboptionDescription" class="text-sm text-secondary">{{
formatMessage(suboptionDescription)
<span>{{ formatMessage(title) }}</span>
<span v-if="description" class="text-sm text-secondary">{{
formatMessage(description)
}}</span>
</span>
</LargeRadioButton>
</div>
</template>
<div
v-if="suboptions"
class="pl-8"
role="radiogroup"
:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
>
<LargeRadioButton
v-for="(
{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
) in suboptions"
:key="`env-option-${key}-${suboptionKey}`"
class="!w-full mt-2"
:class="{
'opacity-50': currentOuterOption !== key,
}"
:selected="currentSubOption === suboptionKey"
:disabled="disabled"
@select="
() => {
currentOuterOption = key
currentSubOption = suboptionKey
}
"
>
<span class="flex flex-col">
<span>{{ formatMessage(suboptionTitle) }}</span>
<span v-if="suboptionDescription" class="text-sm text-secondary">{{
formatMessage(suboptionDescription)
}}</span>
</span>
</LargeRadioButton>
</div>
</template>
</div>
</template>

6
packages/ui/src/locales/en-US/index.json
View File

@@ -488,6 +488,12 @@
"project.settings.environment.singleplayer.title": {
"defaultMessage": "Singleplayer only"
},
"project.settings.environment.suboption.accessibility-option-label": {
"defaultMessage": "{title}: {description}"
},
"project.settings.environment.suboption.accessibility-suboption-group-label": {
"defaultMessage": "Suboptions of {option}"
},
"project.settings.environment.title": {
"defaultMessage": "Environment"
},