MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: content tab fixes (#5543)

Browse Source 
* fix: search again

* fix: navigation bug

* fix: switch to stable key for toggle disable

* feat: inline backup slow warning icon

* fix: qa

* feat: fix installation state
This commit is contained in:
Calum H.
2026-03-12 22:52:55 +00:00
committed by GitHub
parent 52d46b8aaa
commit ba06c89a0e
15 changed files with 387 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
View File

@@ -3,6 +3,7 @@ import {
DownloadIcon,
MoreVerticalIcon,
OrganizationIcon,
SpinnerIcon,
TrashIcon,
TriangleAlertIcon,
} from '@modrinth/assets'
@@ -33,6 +34,7 @@ interface Props {
versionLink?: string | RouteLocationRaw
owner?: ContentOwner
enabled?: boolean
installing?: boolean
hasUpdate?: boolean
isClientOnly?: boolean
overflowOptions?: OverflowMenuOption[]
@@ -48,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
versionLink: undefined,
owner: undefined,
enabled: undefined,
installing: false,
hasUpdate: false,
isClientOnly: false,
overflowOptions: undefined,
@@ -95,13 +98,21 @@ const fileNameRef = ref<HTMLElement | null>(null)
/>
<div class="flex min-w-0 items-center gap-3">
<Avatar
:src="project.icon_url"
:alt="project.title"
size="3rem"
no-shadow
class="shrink-0 rounded-2xl border border-surface-5"
/>
<div v-tooltip="installing ? formatMessage(commonMessages.installingLabel) : undefined" class="relative shrink-0">
<Avatar
:src="project.icon_url"
:alt="project.title"
size="3rem"
no-shadow
class="rounded-2xl border border-surface-5"
/>
<div
v-if="installing"
class="absolute inset-0 flex items-center justify-center rounded-2xl bg-black/20"
>
<SpinnerIcon class="size-5 animate-spin text-white" />
</div>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<div class="flex min-w-0 items-center gap-1">
<AutoLink

41
packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
import { computed, getCurrentInstance, ref, toRef } from 'vue'
import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRef } from 'vue'
import Checkbox from '#ui/components/base/Checkbox.vue'
import { useVIntl } from '#ui/composables/i18n'
@@ -112,14 +112,43 @@ function toggleSelectAll() {
}
}
function toggleItemSelection(itemId: string, selected: boolean) {
if (selected) {
const lastSelectedIndex = ref<number | null>(null)
const shiftHeld = ref(false)
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Shift') shiftHeld.value = true
}
function onKeyUp(e: KeyboardEvent) {
if (e.key === 'Shift') shiftHeld.value = false
}
onMounted(() => {
window.addEventListener('keydown', onKeyDown)
window.addEventListener('keyup', onKeyUp)
})
onUnmounted(() => {
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('keyup', onKeyUp)
})
function toggleItemSelection(itemId: string, selected: boolean, index?: number) {
if (selected && shiftHeld.value && lastSelectedIndex.value !== null && index !== undefined) {
const start = Math.min(lastSelectedIndex.value, index)
const end = Math.max(lastSelectedIndex.value, index)
const rangeIds = props.items.slice(start, end + 1).map((item) => item.id)
const merged = new Set([...selectedIds.value, ...rangeIds])
selectedIds.value = [...merged]
} else if (selected) {
if (!selectedIds.value.includes(itemId)) {
selectedIds.value = [...selectedIds.value, itemId]
}
} else {
selectedIds.value = selectedIds.value.filter((id) => id !== itemId)
}
if (index !== undefined) {
lastSelectedIndex.value = index
}
}
function isItemSelected(itemId: string): boolean {
@@ -241,6 +270,7 @@ function handleSort(column: ContentCardTableSortColumn) {
:version-link="item.versionLink"
:owner="item.owner"
:enabled="item.enabled"
:installing="item.installing"
:has-update="item.hasUpdate"
:is-client-only="item.isClientOnly"
:overflow-options="item.overflowOptions"
@@ -254,7 +284,7 @@ function handleSort(column: ContentCardTableSortColumn) {
'border-0 border-t border-solid border-surface-4',
visibleRange.start + idx === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
]"
@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
@update:selected="(val) => toggleItemSelection(item.id, val ?? false, visibleRange.start + idx)"
@update:enabled="(val) => emit('update:enabled', item.id, val)"
@delete="emit('delete', item.id)"
@update="emit('update', item.id)"
@@ -285,6 +315,7 @@ function handleSort(column: ContentCardTableSortColumn) {
:version-link="item.versionLink"
:owner="item.owner"
:enabled="item.enabled"
:installing="item.installing"
:has-update="item.hasUpdate"
:overflow-options="item.overflowOptions"
:disabled="item.disabled"
@@ -297,7 +328,7 @@ function handleSort(column: ContentCardTableSortColumn) {
'border-0 border-t border-solid border-surface-4',
index === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
]"
@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
@update:selected="(val) => toggleItemSelection(item.id, val ?? false, index)"
@update:enabled="(val) => emit('update:enabled', item.id, val)"
@delete="emit('delete', item.id)"
@update="emit('update', item.id)"

13
packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
View File

@@ -3,11 +3,8 @@
<span class="text-primary">
{{ formatMessage(messages.warningBody, { type: backup.isServer ? 'server' : 'instance' }) }}
</span>
<span v-if="backup.isServer" class="text-brand-orange font-semibold">
{{ formatMessage(messages.backupTakesAWhile) }}
</span>
<div v-if="backup.available">
<div v-if="backup.available" class="flex items-center gap-2">
<!-- Button / Loading state -->
<ButtonStyled v-if="!backup.backupComplete.value && !backup.backupFailed.value">
<button
@@ -39,12 +36,18 @@
<div v-else-if="backup.backupFailed.value" class="text-sm text-red">
{{ formatMessage(messages.backupFailed) }}
</div>
<TriangleAlertIcon
v-if="backup.isServer"
v-tooltip="formatMessage(messages.backupTakesAWhile)"
class="size-5 shrink-0 text-brand-orange hover:brightness-110"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { CheckCircleIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
import { CheckCircleIcon, PlusIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
import { watch } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'

43
packages/ui/src/layouts/shared/content-tab/layout.vue
View File

@@ -230,6 +230,7 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
return {
...base,
disabled: isChanging(base.id) || ctx.isBusy.value || item.installing === true,
installing: item.installing === true,
hasUpdate: !ctx.isPackLocked.value && item.has_update,
isClientOnly: isClientOnlyEnvironment(item.environment),
overflowOptions: ctx.getOverflowOptions?.(item),
@@ -542,7 +543,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
</div>
</div>
<div class="flex flex-wrap items-center justify-between gap-2">
<div class="@container flex flex-wrap items-center justify-between gap-2">
<div class="flex flex-wrap items-center gap-1.5">
<FilterIcon class="size-5 text-secondary" />
<button
@@ -571,22 +572,36 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
>
{{ option.label }}
</button>
<div class="ml-4 mx-0.5 h-5 w-px bg-surface-5" />
<ButtonStyled type="transparent" hover-color-fill="none">
<button
:aria-label="
formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
"
@click="cycleSortMode"
>
<ArrowUpDownIcon />
{{ sortLabels[sortMode]() }}
</button>
</ButtonStyled>
<div class="hidden @[900px]:block">
<ButtonStyled type="transparent" hover-color-fill="none">
<button
:aria-label="
formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
"
@click="cycleSortMode"
>
<ArrowUpDownIcon />
{{ sortLabels[sortMode]() }}
</button>
</ButtonStyled>
</div>
</div>
<div class="flex items-center gap-2">
<div class="@[900px]:hidden">
<ButtonStyled type="transparent" hover-color-fill="none">
<button
:aria-label="
formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
"
@click="cycleSortMode"
>
<ArrowUpDownIcon />
{{ sortLabels[sortMode]() }}
</button>
</ButtonStyled>
</div>
<ButtonStyled
v-if="hasBulkUpdateSupport && !ctx.isPackLocked.value && hasOutdatedProjects"
color="green"

1
packages/ui/src/layouts/shared/content-tab/types.ts
View File

@@ -30,6 +30,7 @@ export interface ContentCardTableItem {
owner?: ContentOwner
enabled?: boolean
disabled?: boolean
installing?: boolean
hasUpdate?: boolean
isClientOnly?: boolean
overflowOptions?: OverflowMenuOption[]