Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve environments compat description and fix accessibility issues project-wide

Browse Source
This commit is contained in:
Prospector 2024-08-20 23:32:36 -07:00
parent 2d416d491c
commit 9deddbbe7c
32 changed files with 336 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app-frontend/src/pages/instance/Logs.vue
View File

@ -16,14 +16,14 @@
{{ copied ? 'Copied' : 'Copy' }}
</Button>
<Button color="primary" :disabled="offline || !logs[selectedLogIndex]" @click="share">
<ShareIcon />
<ShareIcon aria-hidden="true" />
Share
</Button>
<Button
v-if="logs[selectedLogIndex] && logs[selectedLogIndex].live === true"
@click="clearLiveLog()"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Clear
</Button>
@ -33,7 +33,7 @@
color="danger"
@click="deleteLog()"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</Button>
</div>

4
apps/frontend/src/components/ui/CollectionCreateModal.vue
View File

@ -37,13 +37,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="create">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create collection
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="modal.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

4
apps/frontend/src/components/ui/ModalCreation.vue
View File

@ -68,13 +68,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="createProject">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create project
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="cancel">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

22
apps/frontend/src/components/ui/ModerationChecklist.vue
View File

@ -28,7 +28,7 @@
<p>All permission checks complete!</p>
<div class="input-group modpack-buttons">
<button class="btn" @click="modPackIndex -= 1">
<LeftArrowIcon />
<LeftArrowIcon aria-hidden="true" />
Previous
</button>
</div>
@ -142,7 +142,7 @@
</div>
<div class="input-group modpack-buttons">
<button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
<LeftArrowIcon />
<LeftArrowIcon aria-hidden="true" />
Previous
</button>
<button
@ -150,7 +150,7 @@
:disabled="!modPackData[modPackIndex].status"
@click="modPackIndex += 1"
>
<RightArrowIcon />
<RightArrowIcon aria-hidden="true" />
Next project
</button>
</div>
@ -273,20 +273,20 @@
</div>
</div>
<div class="input-group modpack-buttons">
<button v-if="!done" class="btn skip-btn" @click="goToNextProject">
<ExitIcon />
<button v-if="!done" class="btn skip-btn" aria-label="Skip" @click="goToNextProject">
<ExitIcon aria-hidden="true" />
<template v-if="futureProjects.length > 0">Skip</template>
<template v-else>Exit</template>
</button>
<button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
<LeftArrowIcon /> Previous
<LeftArrowIcon aria-hidden="true" /> Previous
</button>
<button
v-if="currentStepIndex < steps.length - 1 && !done"
class="btn btn-primary"
@click="nextPage()"
>
<RightArrowIcon /> Next
<RightArrowIcon aria-hidden="true" /> Next
</button>
<button
v-else-if="!generatedMessage"
@ -294,15 +294,15 @@
:disabled="loadingMessage"
@click="generateMessage"
>
<UpdatedIcon /> Generate message
<UpdatedIcon aria-hidden="true" /> Generate message
</button>
<template v-if="generatedMessage && !done">
<button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
<CheckIcon /> Approve
<CheckIcon aria-hidden="true" /> Approve
</button>
<div class="joined-buttons">
<button class="btn btn-danger" @click="sendMessage('rejected')">
<CrossIcon /> Reject
<CrossIcon aria-hidden="true" /> Reject
</button>
<OverflowMenu
class="btn btn-danger btn-dropdown-animation icon-only"
@ -316,7 +316,7 @@
]"
>
<DropdownIcon style="rotate: 180deg" />
<template #withhold> <EyeOffIcon /> Withhold </template>
<template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
</OverflowMenu>
</div>
</template>

4
apps/frontend/src/components/ui/OrganizationCreateModal.vue
View File

@ -56,13 +56,13 @@
<div class="flex gap-2">
<ButtonStyled color="brand">
<button @click="createOrganization">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create organization
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="modal.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>

5
apps/frontend/src/components/ui/VersionSummary.vue
View File

@ -13,16 +13,17 @@
</div>
<ButtonStyled color="brand">
<a :href="downloadUrl" class="min-w-0" @click="emit('onDownload')">
<DownloadIcon /> Download
<DownloadIcon aria-hidden="true" /> Download
</a>
</ButtonStyled>
<ButtonStyled circular>
<nuxt-link
:to="`/project/${props.version.project_id}/version/${props.version.id}`"
class="min-w-0"
aria-label="Open project page"
@click="emit('onNavigate')"
>
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
</nuxt-link>
</ButtonStyled>
</div>

34
apps/frontend/src/components/ui/thread/ConversationThread.vue
View File

@ -28,7 +28,7 @@
:disabled="!submissionConfirmation"
@click="resubmit()"
>
<ModerationIcon /> Resubmit for review
<ModerationIcon aria-hidden="true" /> Resubmit for review
</button>
</div>
</div>
@ -52,7 +52,7 @@
<template v-if="report && report.closed">
<p>This thread is closed and new messages cannot be sent to it.</p>
<button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
<CloseIcon /> Reopen thread
<CloseIcon aria-hidden="true" /> Reopen thread
</button>
</template>
<template v-else-if="!report || !report.closed">
@ -70,10 +70,10 @@
:disabled="!replyBody"
@click="sendReply()"
>
<ReplyIcon /> Reply
<ReplyIcon aria-hidden="true" /> Reply
</button>
<button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
<SendIcon /> Send
<SendIcon aria-hidden="true" /> Send
</button>
<button
v-if="isStaff(auth.user)"
@ -81,7 +81,7 @@
:disabled="!replyBody"
@click="sendReply(null, true)"
>
<ModerationIcon /> Add private note
<ModerationIcon aria-hidden="true" /> Add private note
</button>
<template v-if="currentMember && !isStaff(auth.user)">
<template v-if="isRejected(project)">
@ -90,14 +90,14 @@
class="iconified-button moderation-button"
@click="openResubmitModal(true)"
>
<ModerationIcon /> Resubmit for review with reply
<ModerationIcon aria-hidden="true" /> Resubmit for review with reply
</button>
<button
v-else
class="iconified-button moderation-button"
@click="openResubmitModal(false)"
>
<ModerationIcon /> Resubmit for review
<ModerationIcon aria-hidden="true" /> Resubmit for review
</button>
</template>
</template>
@ -110,10 +110,10 @@
class="iconified-button danger-button"
@click="closeReport(true)"
>
<CloseIcon /> Close with reply
<CloseIcon aria-hidden="true" /> Close with reply
</button>
<button v-else class="iconified-button danger-button" @click="closeReport()">
<CloseIcon /> Close thread
<CloseIcon aria-hidden="true" /> Close thread
</button>
</template>
</template>
@ -125,7 +125,7 @@
:disabled="isApproved(project)"
@click="sendReply(requestedStatus)"
>
<CheckIcon /> Approve with reply
<CheckIcon aria-hidden="true" /> Approve with reply
</button>
<button
v-else
@ -133,7 +133,7 @@
:disabled="isApproved(project)"
@click="setStatus(requestedStatus)"
>
<CheckIcon /> Approve
<CheckIcon aria-hidden="true" /> Approve
</button>
<div class="joined-buttons">
<button
@ -142,7 +142,7 @@
:disabled="project.status === 'rejected'"
@click="sendReply('rejected')"
>
<CrossIcon /> Reject with reply
<CrossIcon aria-hidden="true" /> Reject with reply
</button>
<button
v-else
@ -150,7 +150,7 @@
:disabled="project.status === 'rejected'"
@click="setStatus('rejected')"
>
<CrossIcon /> Reject
<CrossIcon aria-hidden="true" /> Reject
</button>
<OverflowMenu
class="btn btn-danger btn-dropdown-animation icon-only"
@ -180,9 +180,11 @@
]
"
>
<DropdownIcon style="rotate: 180deg" />
<template #withhold-reply> <EyeOffIcon /> Withhold with reply </template>
<template #withhold> <EyeOffIcon /> Withhold </template>
<DropdownIcon style="rotate: 180deg" aria-hidden="true" />
<template #withhold-reply>
<EyeOffIcon aria-hidden="true" /> Withhold with reply
</template>
<template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
</OverflowMenu>
</div>
</template>

89
apps/frontend/src/layouts/default.vue
View File

@ -13,7 +13,7 @@
<template v-else>
<span>{{ formatMessage(addEmailBannerMessages.title) }}</span>
<nuxt-link class="btn" to="/settings/account">
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
{{ formatMessage(addEmailBannerMessages.action) }}
</nuxt-link>
</template>
@ -29,7 +29,7 @@
>
<span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
<nuxt-link class="btn" to="/settings/billing">
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
{{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
</nuxt-link>
</div>
@ -41,14 +41,16 @@
class="site-banner site-banner--warning"
>
<div class="site-banner__title">
<IssuesIcon />
<IssuesIcon aria-hidden="true" />
<span>{{ formatMessage(stagingBannerMessages.title) }}</span>
</div>
<div class="site-banner__description">
{{ formatMessage(stagingBannerMessages.description) }}
</div>
<div class="site-banner__actions">
<Button transparent icon-only :action="hideStagingBanner"><XIcon /></Button>
<Button transparent icon-only :action="hideStagingBanner" aria-label="Close banner"
><XIcon aria-hidden="true"
/></Button>
</div>
</div>
<header
@ -92,13 +94,16 @@
},
]"
>
<CompassIcon /> Browse <DropdownIcon class="h-5 w-5 text-secondary" />
<template #mods> <BoxIcon /> Mods </template>
<template #resourcepacks> <PaintBrushIcon /> Resource Packs </template>
<template #datapacks> <BracesIcon /> Data Packs </template>
<template #plugins> <ServerIcon /> Plugins </template>
<template #shaders> <GlassesIcon /> Shaders </template>
<template #modpacks> <PackageOpenIcon /> Modpacks </template>
<CompassIcon aria-hidden="true" /> Browse
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
<template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
<template #resourcepacks>
<PaintBrushIcon aria-hidden="true" /> Resource Packs
</template>
<template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
<template #plugins> <ServerIcon aria-hidden="true" /> Plugins </template>
<template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
<template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
</OverflowMenu>
</ButtonStyled>
<div class="contents lg:hidden">
@ -123,26 +128,33 @@
},
]"
>
<HamburgerIcon /> More <DropdownIcon class="h-5 w-5 text-secondary" />
<template #servers> <ServerIcon /> Host a server </template>
<template #app> <DownloadIcon /> Get Modrinth App </template>
<template #plus> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </template>
<HamburgerIcon aria-hidden="true" /> More
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
<template #servers> <ServerIcon aria-hidden="true" /> Host a server </template>
<template #app> <DownloadIcon aria-hidden="true" /> Get Modrinth App </template>
<template #plus>
<ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
</template>
</OverflowMenu>
</ButtonStyled>
</div>
<div class="hidden lg:contents">
<ButtonStyled v-if="false" type="transparent">
<a href="https://bisecthosting.com/modrinth"> <ServerIcon /> Host a server </a>
<a href="https://bisecthosting.com/modrinth">
<ServerIcon aria-hidden="true" /> Host a server
</a>
</ButtonStyled>
<ButtonStyled type="transparent">
<NuxtLink to="/app"> <DownloadIcon /> Get Modrinth App </NuxtLink>
<NuxtLink to="/app"> <DownloadIcon aria-hidden="true" /> Get Modrinth App </NuxtLink>
</ButtonStyled>
<ButtonStyled
v-if="!auth.user || isPermission(auth.badges, 1 << 0)"
type="transparent"
color="purple"
>
<NuxtLink to="/plus"> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </NuxtLink>
<NuxtLink to="/plus">
<ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
</NuxtLink>
</ButtonStyled>
</div>
</div>
@ -153,6 +165,7 @@
class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
position="bottom"
direction="left"
aria-label="Create new..."
:options="[
{
id: 'new-project',
@ -169,11 +182,16 @@
},
]"
>
<PlusIcon /> <DropdownIcon class="h-5 w-5 text-secondary" />
<template #new-project> <BoxIcon /> New project </template>
<PlusIcon aria-hidden="true" />
<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
<template #new-project> <BoxIcon aria-hidden="true" /> New project </template>
<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
<template #new-collection> <CollectionIcon /> New collection </template>
<template #new-organization> <OrganizationIcon /> New organization </template>
<template #new-collection>
<CollectionIcon aria-hidden="true" /> New collection
</template>
<template #new-organization>
<OrganizationIcon aria-hidden="true" /> New organization
</template>
</OverflowMenu>
</ButtonStyled>
<OverflowMenu
@ -246,7 +264,7 @@
</div>
</NuxtLink>
<nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
<LogInIcon /> {{ formatMessage(commonMessages.signInButton) }}
<LogInIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signInButton) }}
</nuxt-link>
</div>
<div class="links">
@ -290,20 +308,26 @@
</div>
</div>
<div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
<NuxtLink to="/" class="tab button-animation" :title="formatMessage(navMenuMessages.home)">
<HomeIcon />
<NuxtLink
to="/"
class="tab button-animation"
:title="formatMessage(navMenuMessages.home)"
aria-label="Home"
>
<HomeIcon aria-hidden="true" />
</NuxtLink>
<button
class="tab button-animation"
:class="{ 'router-link-exact-active': isBrowseMenuOpen }"
:title="formatMessage(navMenuMessages.search)"
aria-label="Search"
@click="toggleBrowseMenu()"
>
<template v-if="auth.user">
<SearchIcon />
<SearchIcon aria-hidden="true" />
</template>
<template v-else>
<SearchIcon class="smaller" />
<SearchIcon aria-hidden="true" class="smaller" />
{{ formatMessage(navMenuMessages.search) }}
</template>
</button>
@ -311,6 +335,7 @@
<NuxtLink
to="/dashboard/notifications"
class="tab button-animation"
aria-label="Notifications"
:class="{
'no-active': isMobileMenuOpen || isBrowseMenuOpen,
}"
@ -322,24 +347,26 @@
}
"
>
<NotificationIcon />
<NotificationIcon aria-hidden="true" />
</NuxtLink>
<NuxtLink
to="/dashboard"
class="tab button-animation"
aria-label="Dashboard"
:title="formatMessage(commonMessages.dashboardLabel)"
>
<ChartIcon />
<ChartIcon aria-hidden="true" />
</NuxtLink>
</template>
<button
class="tab button-animation"
:title="formatMessage(messages.toggleMenu)"
:aria-label="isMobileMenuOpen ? 'Close menu' : 'Open menu'"
@click="toggleMobileMenu()"
>
<template v-if="!auth.user">
<HamburgerIcon v-if="!isMobileMenuOpen" />
<CrossIcon v-else />
<HamburgerIcon v-if="!isMobileMenuOpen" aria-hidden="true" />
<CrossIcon v-else aria-hidden="true" />
</template>
<template v-else>
<Avatar

2
apps/frontend/src/locales/en-US/index.json
View File

@ -543,7 +543,7 @@
"message": "Shader"
},
"project.about.compatibility.environments": {
"message": "Environments"
"message": "Supported environments"
},
"project.about.compatibility.game.minecraftJava": {
"message": "Minecraft: Java Edition"

47
apps/frontend/src/pages/[type]/[id].vue
View File

@ -38,7 +38,7 @@
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
label="General"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@ -46,7 +46,7 @@
}/settings/tags`"
label="Tags"
>
<TagsIcon />
<TagsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@ -54,7 +54,7 @@
}/settings/description`"
label="Description"
>
<DescriptionIcon />
<DescriptionIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@ -62,7 +62,7 @@
}/settings/license`"
label="License"
>
<CopyrightIcon />
<CopyrightIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@ -70,7 +70,7 @@
}/settings/links`"
label="Links"
>
<LinksIcon />
<LinksIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@ -78,7 +78,7 @@
}/settings/members`"
label="Members"
>
<UsersIcon />
<UsersIcon aria-hidden="true" />
</NavStackItem>
<h3>View</h3>
<NavStackItem
@ -88,7 +88,7 @@
label="Analytics"
chevron
>
<ChartIcon />
<ChartIcon aria-hidden="true" />
</NavStackItem>
<h3>Upload</h3>
<NavStackItem
@ -96,14 +96,14 @@
label="Gallery"
chevron
>
<GalleryIcon />
<GalleryIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
label="Versions"
chevron
>
<VersionIcon />
<VersionIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>
@ -184,9 +184,9 @@
:href="`modrinth://mod/${project.slug}`"
@click="() => installWithApp()"
>
<ModrinthIcon />
<ModrinthIcon aria-hidden="true" />
Install with Modrinth App
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
</a>
</ButtonStyled>
<Accordion ref="getModrinthAppAccordion">
@ -208,7 +208,7 @@
<div class="mx-auto flex w-fit flex-col gap-2">
<ButtonStyled v-if="project.game_versions.length === 1">
<div class="disabled button-like">
<GameIcon />
<GameIcon aria-hidden="true" />
{{
currentGameVersion
? `Game version: ${currentGameVersion}`
@ -234,14 +234,14 @@
"
>
<template #title>
<GameIcon />
<GameIcon aria-hidden="true" />
{{
currentGameVersion ? `Game version: ${currentGameVersion}` : "Select game version"
}}
</template>
<div class="iconified-input mb-2 flex w-full">
<label for="game-versions-filtering" hidden>Search game versions...</label>
<SearchIcon />
<SearchIcon aria-hidden="true" />
<input
id="game-versions-filtering"
ref="gameVersionFilterInput"
@ -300,7 +300,7 @@
v-if="project.loaders.length === 1 && project.project_type !== 'resourcepack'"
>
<div class="disabled button-like">
<WrenchIcon />
<WrenchIcon aria-hidden="true" />
{{
currentPlatform
? `Platform: ${formatCategory(currentPlatform)}`
@ -327,7 +327,7 @@
"
>
<template #title>
<WrenchIcon />
<WrenchIcon aria-hidden="true" />
{{
currentPlatform
? `Platform: ${formatCategory(currentPlatform)}`
@ -536,7 +536,7 @@
class="btn collection-button"
@click="(event) => $refs.modal_collection.show(event)"
>
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create new collection
</button>
</template>
@ -549,7 +549,7 @@
<nuxt-link
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
</nuxt-link>
</ButtonStyled>
<ButtonStyled size="large" circular type="transparent">
@ -591,22 +591,23 @@
},
{ id: 'copy-id', action: () => copyId() },
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #analytics>
<ChartIcon />
<ChartIcon aria-hidden="true" />
Analytics
</template>
<template #moderation-checklist>
<ScaleIcon />
<ScaleIcon aria-hidden="true" />
Review project
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</template>
<template #copy-id>
<ClipboardCopyIcon />
<ClipboardCopyIcon aria-hidden="true" />
Copy ID
</template>
</OverflowMenu>

22
apps/frontend/src/pages/[type]/[id]/gallery.vue
View File

@ -8,7 +8,7 @@
<div class="modal-gallery universal-labels">
<div class="gallery-file-input">
<div class="file-header">
<ImageIcon />
<ImageIcon aria-hidden="true" />
<strong>{{ editFile ? editFile.name : "Current image" }}</strong>
<FileInput
v-if="editIndex === -1"
@ -17,6 +17,7 @@
:accept="acceptFileTypes"
:max-size="524288000"
should-always-reset
aria-label="Replace image"
@change="
(x) => {
editFile = x[0];
@ -24,7 +25,7 @@
}
"
>
<TransferIcon />
<TransferIcon aria-hidden="true" />
</FileInput>
</div>
<img
@ -95,7 +96,7 @@
</button>
<div class="button-group">
<button class="iconified-button" @click="$refs.modal_edit_item.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
<button
@ -104,7 +105,7 @@
:disabled="shouldPreventActions"
@click="createGalleryItem"
>
<PlusIcon />
<PlusIcon aria-hidden="true" />
Add gallery image
</button>
<button
@ -113,7 +114,7 @@
:disabled="shouldPreventActions"
@click="editGalleryItem"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Save changes
</button>
</div>
@ -199,14 +200,15 @@
:max-size="524288000"
:accept="acceptFileTypes"
prompt="Upload an image"
aria-label="Upload an image"
class="iconified-button brand-button"
:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
@change="handleFiles"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<span class="indicator">
<InfoIcon /> Click to choose an image or drag one onto this page
<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
</span>
<DropArea
:accept="acceptFileTypes"
@ -234,7 +236,7 @@
</div>
<div class="gallery-bottom">
<div class="gallery-created">
<CalendarIcon />
<CalendarIcon aria-hidden="true" aria-label="Date created" />
{{ $dayjs(item.created).format("MMMM D, YYYY") }}
</div>
<div v-if="currentMember" class="gallery-buttons input-group">
@ -252,7 +254,7 @@
}
"
>
<EditIcon />
<EditIcon aria-hidden="true" />
Edit
</button>
<button
@ -264,7 +266,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</div>

93
apps/frontend/src/pages/[type]/[id]/index.vue
View File

@ -36,7 +36,7 @@
</div>
</div>
</section>
<section>
<section v-if="project.project_type !== 'resourcepack'">
<h3>{{ formatMessage(compatibilityMessages.platforms) }}</h3>
<div class="tag-list">
<div
@ -50,67 +50,50 @@
</div>
</div>
</section>
<section>
<section
v-if="
(project.actualProjectType === 'mod' || project.project_type === 'modpack') &&
!(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
!(project.client_side === 'unknown' && project.server_side === 'unknown')
"
>
<h3>{{ formatMessage(compatibilityMessages.environments) }}</h3>
<div class="status-list">
<div class="status-list__item status-list__item--color-green">
<CheckIcon />
<div
v-if="
(project.client_side === 'required' && project.server_side !== 'required') ||
(project.client_side === 'optional' && project.server_side === 'optional')
"
class="status-list__item"
>
<ClientIcon aria-hidden="true" />
Client only
</div>
<div
v-if="
(project.server_side === 'required' && project.client_side !== 'unsupported') ||
(project.client_side === 'optional' && project.server_side === 'optional')
"
class="status-list__item"
>
<ServerIcon aria-hidden="true" />
Server only
</div>
<div class="status-list__item">
<UserIcon aria-hidden="true" />
Singleplayer
</div>
<div
v-if="project.client_side !== 'unsupported' && project.server_side !== 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Client and server
</div>
<div
v-if="project.client_side === 'required' && project.server_side === 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Client
</div>
<div
v-if="project.server_side === 'required' && project.client_side === 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Server
</div>
<div
v-if="
project.client_side === 'optional' ||
(project.client_side === 'required' && project.server_side === 'optional')
"
class="status-list__item status-list__item--color-orange"
>
<CheckIcon />
Client <span class="text-sm">(Limited functionality)</span>
</div>
<div
v-if="
(project.client_side === 'required' && project.server_side === 'optional') ||
project.server_side === 'optional' ||
(project.server_side === 'required' && project.client_side === 'optional')
"
class="status-list__item status-list__item--color-orange"
class="status-list__item"
>
<CheckIcon />
Server <span class="text-sm">(Limited functionality)</span>
</div>
<div
v-if="project.client_side === 'unsupported'"
class="status-list__item status-list__item--color-red"
>
<XIcon />
Client
</div>
<div
v-if="project.server_side === 'unsupported'"
class="status-list__item status-list__item--color-red"
>
<XIcon />
Server
<MonitorSmartphoneIcon aria-hidden="true" />
Client and server <span class="text-sm">(optional)</span>
</div>
</div>
</section>
@ -321,8 +304,6 @@
<script setup>
import {
CheckIcon,
XIcon,
CalendarIcon,
IssuesIcon,
WikiIcon,
@ -340,6 +321,10 @@ import {
VersionIcon,
ExternalIcon,
CodeIcon,
UserIcon,
ServerIcon,
ClientIcon,
MonitorSmartphoneIcon,
} from "@modrinth/assets";
import { NewModal, Avatar } from "@modrinth/ui";
@ -395,7 +380,7 @@ const compatibilityMessages = defineMessages({
},
environments: {
id: "project.about.compatibility.environments",
defaultMessage: "Environments",
defaultMessage: "Supported environments",
},
});
const linksMessages = defineMessages({

9
apps/frontend/src/pages/[type]/[id]/settings/index.vue
View File

@ -33,10 +33,11 @@
accept="image/png,image/jpeg,image/gif,image/webp"
class="choose-image iconified-button"
prompt="Upload icon"
aria-label="Upload icon"
:disabled="!hasPermission"
@change="showPreviewImage"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<button
v-if="!deletedIcon && (previewImage || project.icon_url)"
@ -44,7 +45,7 @@
:disabled="!hasPermission"
@click="markIconForDeletion"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove icon
</button>
</div>
@ -211,7 +212,7 @@
:disabled="!hasChanges"
@click="saveChanges()"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Save changes
</button>
</div>
@ -233,7 +234,7 @@
:disabled="!hasDeletePermission"
@click="$refs.modal_confirm.show()"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete project
</button>
</section>

26
apps/frontend/src/pages/[type]/[id]/version/[version].vue
View File

@ -39,13 +39,13 @@
<div class="button-group">
<ButtonStyled>
<button @click="$refs.modal_package_mod.hide()">
<CrossIcon />
<CrossIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button @click="createDataPackVersion">
<RightArrowIcon />
<RightArrowIcon aria-hidden="true" />
Begin packaging data pack
</button>
</ButtonStyled>
@ -254,7 +254,7 @@
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@ -307,7 +307,7 @@
<div class="input-group">
<ButtonStyled color="brand">
<button @click="addDependency(dependencyAddMode, newDependencyId, newDependencyType)">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Add dependency
</button>
</ButtonStyled>
@ -317,7 +317,7 @@
<div class="version-page__files universal-card">
<h3>Files</h3>
<div v-if="isEditing && replaceFile" class="file primary">
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ replaceFile.name }}</strong>
<span class="file-size">({{ $formatBytes(replaceFile.size) }})</span>
@ -325,12 +325,13 @@
<FileInput
class="iconified-button raised-button"
prompt="Replace"
aria-label="Replace"
:accept="acceptFileFromProjectType(project.project_type)"
:max-size="524288000"
should-always-reset
@change="(x) => (replaceFile = x[0])"
>
<TransferIcon />
<TransferIcon aria-hidden="true" />
</FileInput>
</div>
<div
@ -341,7 +342,7 @@
primary: primaryFile.hashes.sha1 === file.hashes.sha1,
}"
>
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ file.filename }}</strong>
<span class="file-size">({{ $formatBytes(file.size) }})</span>
@ -389,7 +390,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@ -400,14 +401,14 @@
:title="`Download ${file.filename}`"
tabindex="0"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</a>
</ButtonStyled>
</div>
<template v-if="isEditing">
<div v-for="(file, index) in newFiles" :key="index" class="file">
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ file.name }}</strong>
<span class="file-size">({{ $formatBytes(file.size) }})</span>
@ -435,7 +436,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@ -448,6 +449,7 @@
<span v-else>Used for files such as sources or Javadocs.</span>
<FileInput
prompt="Drag and drop to upload or click to select"
aria-label="Upload additional file"
multiple
long-style
:accept="acceptFileFromProjectType(project.project_type)"
@ -460,7 +462,7 @@
})
"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
</div>
</template>

25
apps/frontend/src/pages/[type]/[id]/versions.vue
View File

@ -9,12 +9,13 @@
:accept="acceptFileFromProjectType(project.project_type)"
prompt="Upload a version"
class="btn btn-primary"
aria-label="Upload a version"
@change="handleFiles"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<span class="flex items-center gap-2">
<InfoIcon /> Click to choose a file or drag one onto this page
<InfoIcon aria-hidden="true" /> Click to choose a file or drag one onto this page
</span>
<DropArea :accept="acceptFileFromProjectType(project.project_type)" @change="handleFiles" />
</div>
@ -134,9 +135,10 @@
v-tooltip="`Download`"
:href="getPrimaryFile(version).url"
class="z-[1] group-hover:!bg-brand group-hover:!text-brand-inverted"
aria-label="Download"
@click="emits('onDownload')"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular type="transparent">
@ -196,34 +198,35 @@
shown: currentMember && false,
},
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #download>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</template>
<template #new-tab>
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
Open in new tab
</template>
<template #copy-link>
<LinkIcon />
<LinkIcon aria-hidden="true" />
Copy link
</template>
<template #share>
<ShareIcon />
<ShareIcon aria-hidden="true" />
Share
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</template>
<template #edit>
<EditIcon />
<EditIcon aria-hidden="true" />
Edit
</template>
<template #delete>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</template>
</OverflowMenu>

2
apps/frontend/src/pages/app.vue
View File

@ -210,7 +210,7 @@ useSeoMeta({
<div class="search-bar">
<h4>Installed mods</h4>
<div class="mini-input">
<SearchIcon />
<SearchIcon aria-hidden="true" />
<div class="search">Search mods</div>
</div>
</div>

27
apps/frontend/src/pages/collection/[id].vue
View File

@ -15,17 +15,17 @@
<div class="card__overlay input-group">
<template v-if="canEdit && isEditing === false">
<Button @click="isEditing = true">
<EditIcon />
<EditIcon aria-hidden="true" />
{{ formatMessage(commonMessages.editButton) }}
</Button>
<Button id="delete-collection" @click="() => $refs.deleteModal.show()">
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(commonMessages.deleteLabel) }}
</Button>
</template>
<template v-else-if="canEdit && isEditing === true">
<PopoutMenu class="btn">
<EditIcon /> {{ formatMessage(messages.editIconButton) }}
<EditIcon aria-hidden="true" /> {{ formatMessage(messages.editIconButton) }}
<template #menu>
<span class="icon-edit-menu">
<FileInput
@ -35,10 +35,11 @@
accept="image/png,image/jpeg,image/gif,image/webp"
class="btn btn-transparent upload"
style="white-space: nowrap"
prompt=""
prompt="Upload icon"
aria-label="Upload icon"
@change="showPreviewImage"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
{{ formatMessage(messages.uploadIconButton) }}
</FileInput>
<Button
@ -52,7 +53,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.deleteIconButton) }}
</Button>
</span>
@ -103,11 +104,11 @@
</div>
<div class="push-right input-group">
<Button @click="isEditing = false">
<XIcon />
<XIcon aria-hidden="true" />
{{ formatMessage(commonMessages.cancelButton) }}
</Button>
<Button color="primary" @click="saveChanges()">
<SaveIcon />
<SaveIcon aria-hidden="true" />
{{ formatMessage(commonMessages.saveButton) }}
</Button>
</div>
@ -122,7 +123,7 @@
<div>
<span class="collection-label">
<BoxIcon /> {{ formatMessage(messages.collectionLabel) }}
<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.collectionLabel) }}
</span>
</div>
@ -187,7 +188,7 @@
"
class="date"
>
<CalendarIcon />
<CalendarIcon aria-hidden="true" />
<label>
{{
formatMessage(messages.createdAtLabel, {
@ -208,7 +209,7 @@
"
class="date"
>
<UpdatedIcon />
<UpdatedIcon aria-hidden="true" />
<label>
{{
formatMessage(messages.updatedAtLabel, {
@ -331,7 +332,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.removeProjectButton) }}
</button>
<button
@ -339,7 +340,7 @@
class="iconified-button"
@click="unfollowProject(project)"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.unfollowProjectButton) }}
</button>
</ProjectCard>

16
apps/frontend/src/pages/dashboard.vue
View File

@ -5,33 +5,33 @@
<h1>Dashboard</h1>
<NavStack>
<NavStackItem link="/dashboard" label="Overview">
<DashboardIcon />
<DashboardIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/notifications" label="Notifications">
<NotificationsIcon />
<NotificationsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/reports" label="Active reports">
<ReportIcon />
<ReportIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/analytics" label="Analytics">
<ChartIcon />
<ChartIcon aria-hidden="true" />
</NavStackItem>
<h3>Manage</h3>
<NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
<ListIcon />
<ListIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
<OrganizationIcon />
<OrganizationIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
link="/dashboard/collections"
:label="formatMessage(commonMessages.collectionsLabel)"
>
<LibraryIcon />
<LibraryIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/revenue" label="Revenue">
<CurrencyIcon />
<CurrencyIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

28
apps/frontend/src/pages/dashboard/collections.vue
View File

@ -5,14 +5,19 @@
<div class="search-row">
<div class="iconified-input">
<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
<SearchIcon />
<SearchIcon aria-hidden="true" />
<input id="search-input" v-model="filterQuery" type="text" />
<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
<XIcon />
<Button
v-if="filterQuery"
class="r-btn"
aria-label="Clear search"
@click="() => (filterQuery = '')"
>
<XIcon aria-hidden="true" />
</Button>
</div>
<Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
<PlusIcon /> {{ formatMessage(messages.createNewButton) }}
<PlusIcon aria-hidden="true" /> {{ formatMessage(messages.createNewButton) }}
</Button>
</div>
<div class="collections-grid">
@ -29,7 +34,7 @@
</span>
<div class="stat-bar">
<div class="stats">
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{
formatMessage(messages.projectsCountLabel, {
count: formatCompactNumber(user ? user.follows.length : 0),
@ -37,7 +42,8 @@
}}
</div>
<div class="stats">
<LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
<LockIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.privateLabel) }} </span>
</div>
</div>
</div>
@ -56,7 +62,7 @@
</span>
<div class="stat-bar">
<div class="stats">
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{
formatMessage(messages.projectsCountLabel, {
count: formatCompactNumber(collection.projects?.length || 0),
@ -65,19 +71,19 @@
</div>
<div class="stats">
<template v-if="collection.status === 'listed'">
<WorldIcon />
<WorldIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.publicLabel) }} </span>
</template>
<template v-else-if="collection.status === 'unlisted'">
<LinkIcon />
<LinkIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.unlistedLabel) }} </span>
</template>
<template v-else-if="collection.status === 'private'">
<LockIcon />
<LockIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.privateLabel) }} </span>
</template>
<template v-else-if="collection.status === 'rejected'">
<XIcon />
<XIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.rejectedLabel) }} </span>
</template>
</div>

4
apps/frontend/src/pages/dashboard/organizations.vue
View File

@ -6,7 +6,7 @@
<h2 class="header__title text-2xl">Organizations</h2>
<div class="input-group">
<button class="iconified-button brand-button" @click="openCreateOrgModal">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create organization
</button>
</div>
@ -30,7 +30,7 @@
</div>
<span class="stat-bar">
<div class="stats">
<UsersIcon />
<UsersIcon aria-hidden="true" />
<span>
{{ onlyAcceptedMembers(org.members).length }} member<template
v-if="onlyAcceptedMembers(org.members).length !== 1"

18
apps/frontend/src/pages/index.vue
View File

@ -23,15 +23,15 @@
</h2>
<div class="button-group">
<ButtonStyled color="brand" size="large">
<nuxt-link to="/mods"> <CompassIcon /> Discover mods </nuxt-link>
<nuxt-link to="/mods"> <CompassIcon aria-hidden="true" /> Discover mods </nuxt-link>
</ButtonStyled>
<ButtonStyled size="large" type="outlined">
<nuxt-link v-if="!auth.user" to="/auth/sign-up" rel="noopener nofollow">
<LogInIcon />
<LogInIcon aria-hidden="true" />
Sign up
</nuxt-link>
<nuxt-link v-else to="/dashboard/projects">
<DashboardIcon />
<DashboardIcon aria-hidden="true" />
Go to dashboard
</nuxt-link>
</ButtonStyled>
@ -175,7 +175,7 @@
{{ notification.versions[notification.versions.length - 1] }}
</p>
<div class="date">
<CalendarIcon />
<CalendarIcon aria-hidden="true" />
<span>
Received
{{ fromNow(notification.date_modified) }}
@ -217,19 +217,21 @@
href="https://prismlauncher.org/"
class="graphic gradient-border"
title="Prism Launcher"
aria-label="Prism Launcher"
>
<PrismLauncherLogo />
<PrismLauncherLogo aria-hidden="true" />
</a>
<nuxt-link to="/app" class="graphic gradient-border">
<ModrinthIcon />
<nuxt-link to="/app" class="graphic gradient-border" aria-label="Modrinth App">
<ModrinthIcon aria-hidden="true" />
</nuxt-link>
<a
rel="noopener"
href="https://atlauncher.com/"
class="graphic gradient-border"
title="ATLauncher"
aria-label="ATLauncher"
>
<ATLauncherLogo />
<ATLauncherLogo aria-hidden="true" />
</a>
</div>
</div>

16
apps/frontend/src/pages/legal.vue
View File

@ -5,32 +5,32 @@
<h1>Legal</h1>
<NavStack>
<NavStackItem link="/legal/terms" label="Terms of Use">
<HeartHandshakeIcon />
<HeartHandshakeIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/rules" label="Content Rules">
<ScaleIcon />
<ScaleIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/copyright" label="Copyright Policy">
<CopyrightIcon />
<CopyrightIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/security" label="Security Notice">
<ShieldIcon />
<ShieldIcon aria-hidden="true" />
</NavStackItem>
<h3>Privacy</h3>
<NavStackItem link="/legal/privacy" label="Privacy Policy">
<LockIcon />
<LockIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/ccpa" label="California Privacy Notice">
<InfoIcon />
<InfoIcon aria-hidden="true" />
</NavStackItem>
<h3>Rewards Program</h3>
<NavStackItem link="/legal/cmp" label="Rewards Program Terms">
<CurrencyIcon />
<CurrencyIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/cmp-info" label="Rewards Program Info">
<InfoIcon />
<InfoIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

6
apps/frontend/src/pages/moderation.vue
View File

@ -5,13 +5,13 @@
<h1>Moderation</h1>
<NavStack>
<NavStackItem link="/moderation" label="Overview">
<ModrinthIcon />
<ModrinthIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/moderation/review" label="Review projects">
<ModerationIcon />
<ModerationIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/moderation/reports" label="Reports">
<ReportIcon />
<ReportIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

2
apps/frontend/src/pages/plus.vue
View File

@ -44,7 +44,7 @@
to="/settings/billing"
class="btn btn-purple btn-large"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
Manage subscription
</nuxt-link>
<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">

2
apps/frontend/src/pages/report.vue
View File

@ -82,7 +82,7 @@
:disabled="submitLoading || !canSubmit"
@click="submitReport"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Submit
</Button>
</div>

3
apps/frontend/src/pages/search/[searchProjectType].vue
View File

@ -40,9 +40,10 @@
"
v-tooltip="`Reset all filters`"
class="btn icon-only"
aria-label="Reset all filters"
@click="clearFilters"
>
<FilterXIcon />
<FilterXIcon aria-hidden="true" />
</button>
</div>
<div

13
apps/frontend/src/pages/user/[id].vue
View File

@ -30,7 +30,7 @@
<div class="flex flex-wrap gap-2">
<ButtonStyled size="large">
<NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile">
<EditIcon />
<EditIcon aria-hidden="true" />
{{ formatMessage(commonMessages.editButton) }}
</NuxtLink>
</ButtonStyled>
@ -52,18 +52,19 @@
},
{ id: 'copy-id', action: () => copyId() },
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #manage-projects>
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{ formatMessage(messages.profileManageProjectsButton) }}
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
{{ formatMessage(commonMessages.reportButton) }}
</template>
<template #copy-id>
<ClipboardCopyIcon />
<ClipboardCopyIcon aria-hidden="true" />
{{ formatMessage(commonMessages.copyIdButton) }}
</template>
</OverflowMenu>
@ -141,7 +142,7 @@
<div class="details">
<h2 class="title">{{ collection.name }}</h2>
<div class="stats">
<LibraryIcon />
<LibraryIcon aria-hidden="true" />
Collection
</div>
</div>

1
packages/assets/icons/monitor-smartphone.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-smartphone"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 393 B

2
packages/assets/index.ts
View File

@ -103,6 +103,7 @@ import _LogOutIcon from './icons/log-out.svg?component'
import _MailIcon from './icons/mail.svg?component'
import _MessageIcon from './icons/message.svg?component'
import _MicrophoneIcon from './icons/microphone.svg?component'
import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
import _MoonIcon from './icons/moon.svg?component'
import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
import _MoreVerticalIcon from './icons/more-vertical.svg?component'
@ -272,6 +273,7 @@ export const LogOutIcon = _LogOutIcon
export const MailIcon = _MailIcon
export const MessageIcon = _MessageIcon
export const MicrophoneIcon = _MicrophoneIcon
export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
export const MoonIcon = _MoonIcon
export const MoreHorizontalIcon = _MoreHorizontalIcon
export const MoreVerticalIcon = _MoreVerticalIcon

38
packages/ui/src/components/base/Badge.vue
View File

@ -4,69 +4,69 @@
<!-- User roles -->
<template v-else-if="type === 'admin'">
<ModrinthIcon /> {{ formatMessage(messages.modrinthTeamLabel) }}
<ModrinthIcon aria-hidden="true" /> {{ formatMessage(messages.modrinthTeamLabel) }}
</template>
<template v-else-if="type === 'moderator'">
<ScaleIcon /> {{ formatMessage(messages.moderatorLabel) }}
<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.moderatorLabel) }}
</template>
<template v-else-if="type === 'creator'">
<BoxIcon /> {{ formatMessage(messages.creatorLabel) }}
<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.creatorLabel) }}
</template>
<!-- Project statuses -->
<template v-else-if="type === 'approved'">
<ListIcon /> {{ formatMessage(messages.listedLabel) }}
<ListIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
</template>
<template v-else-if="type === 'approved-general'">
<CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
</template>
<template v-else-if="type === 'unlisted'">
<EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
<EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
</template>
<template v-else-if="type === 'withheld'">
<EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
<EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
</template>
<template v-else-if="type === 'private'">
<LockIcon /> {{ formatMessage(messages.privateLabel) }}
<LockIcon aria-hidden="true" /> {{ formatMessage(messages.privateLabel) }}
</template>
<template v-else-if="type === 'scheduled'">
<CalendarIcon /> {{ formatMessage(messages.scheduledLabel) }}
<CalendarIcon aria-hidden="true" /> {{ formatMessage(messages.scheduledLabel) }}
</template>
<template v-else-if="type === 'draft'">
<FileTextIcon /> {{ formatMessage(messages.draftLabel) }}
<FileTextIcon aria-hidden="true" /> {{ formatMessage(messages.draftLabel) }}
</template>
<template v-else-if="type === 'archived'">
<ArchiveIcon /> {{ formatMessage(messages.archivedLabel) }}
<ArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.archivedLabel) }}
</template>
<template v-else-if="type === 'rejected'">
<XIcon /> {{ formatMessage(messages.rejectedLabel) }}
<XIcon aria-hidden="true" /> {{ formatMessage(messages.rejectedLabel) }}
</template>
<template v-else-if="type === 'processing'">
<UpdatedIcon /> {{ formatMessage(messages.underReviewLabel) }}
<UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.underReviewLabel) }}
</template>
<!-- Team members -->
<template v-else-if="type === 'accepted'">
<CheckIcon /> {{ formatMessage(messages.acceptedLabel) }}
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.acceptedLabel) }}
</template>
<template v-else-if="type === 'pending'">
<UpdatedIcon /> {{ formatMessage(messages.pendingLabel) }}
<UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.pendingLabel) }}
</template>
<!-- Transaction statuses (pending, processing reused) -->
<template v-else-if="type === 'processed'">
<CheckIcon /> {{ formatMessage(messages.processedLabel) }}
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.processedLabel) }}
</template>
<template v-else-if="type === 'failed'">
<XIcon /> {{ formatMessage(messages.failedLabel) }}
<XIcon aria-hidden="true" /> {{ formatMessage(messages.failedLabel) }}
</template>
<template v-else-if="type === 'returned'">
<XIcon /> {{ formatMessage(messages.returnedLabel) }}
<XIcon aria-hidden="true" /> {{ formatMessage(messages.returnedLabel) }}
</template>
<!-- Report status -->
<template v-else-if="type === 'closed'">
<XIcon /> {{ formatMessage(messages.closedLabel) }}
<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
</template>
<!-- Other -->

4
packages/ui/src/components/modal/NewModal.vue
View File

@ -31,8 +31,8 @@
</slot>
</div>
<ButtonStyled v-if="closable" circular>
<button @click="hide">
<XIcon />
<button @click="hide" aria-label="Close">
<XIcon aria-hidden="true" />
</button>
</ButtonStyled>
</div>

43
packages/ui/src/components/modal/ShareModal.vue
View File

@ -121,35 +121,48 @@ defineExpose({
<div ref="qrCode">
<QrcodeVue :value="url" class="qr-code" margin="3" />
</div>
<Button v-tooltip="'Copy QR code'" icon-only class="copy-button" @click="copyImage">
<ClipboardCopyIcon />
<Button
v-tooltip="'Copy QR code'"
icon-only
class="copy-button"
aria-label="Copy QR code"
@click="copyImage"
>
<ClipboardCopyIcon aria-hidden="true" />
</Button>
</div>
<div v-else class="resizable-textarea-wrapper">
<textarea v-model="content" />
<Button v-tooltip="'Copy Text'" icon-only class="copy-button transparent" @click="copyText">
<ClipboardCopyIcon />
<Button
v-tooltip="'Copy Text'"
icon-only
aria-label="Copy Text"
class="copy-button transparent"
@click="copyText"
>
<ClipboardCopyIcon aria-hidden="true" />
</Button>
</div>
<div class="all-buttons">
<div v-if="link" class="iconified-input">
<LinkIcon />
<input type="text" :value="url" readonly />
<Button v-tooltip="'Copy Text'" class="r-btn" @click="copyText">
<ClipboardCopyIcon />
<Button v-tooltip="'Copy Text'" aria-label="Copy Text" class="r-btn" @click="copyText">
<ClipboardCopyIcon aria-hidden="true" />
</Button>
</div>
<div class="button-row">
<Button v-if="canShare" v-tooltip="'Share'" icon-only @click="share">
<ShareIcon />
<Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
<ShareIcon aria-hidden="true" />
</Button>
<a
v-tooltip="'Send as an email'"
class="btn icon-only"
:href="sendEmail"
:target="targetParameter"
aria-label="Send as an email"
>
<MailIcon />
<MailIcon aria-hidden="true" />
</a>
<a
v-if="link"
@ -157,32 +170,36 @@ defineExpose({
class="btn icon-only"
:target="targetParameter"
:href="url"
aria-label="Open link in browser"
>
<GlobeIcon />
<GlobeIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Toot about it'"
class="btn mastodon icon-only"
:target="targetParameter"
:href="sendToot"
aria-label="Toot about it"
>
<MastodonIcon />
<MastodonIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Tweet about it'"
class="btn twitter icon-only"
:target="targetParameter"
:href="sendTweet"
aria-label="Tweet about it"
>
<TwitterIcon />
<TwitterIcon aria-hidden="true" />
</a>
<a
v-tooltip="'Share on Reddit'"
class="btn reddit icon-only"
:target="targetParameter"
:href="postOnReddit"
aria-label="Share on Reddit"
>
<RedditIcon />
<RedditIcon aria-hidden="true" />
</a>
</div>
</div>