tomasalias/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>