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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</section> </section>
<section> <section v-if="project.project_type !== 'resourcepack'">
<h3>{{ formatMessage(compatibilityMessages.platforms) }}</h3> <h3>{{ formatMessage(compatibilityMessages.platforms) }}</h3>
<div class="tag-list"> <div class="tag-list">
<div <div
@ -50,67 +50,50 @@
</div> </div>
</div> </div>
</section> </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> <h3>{{ formatMessage(compatibilityMessages.environments) }}</h3>
<div class="status-list"> <div class="status-list">
<div class="status-list__item status-list__item--color-green"> <div
<CheckIcon /> 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 Singleplayer
</div> </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 <div
v-if=" v-if="
project.client_side === 'optional' || project.client_side === 'optional' ||
(project.client_side === 'required' && project.server_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.server_side === 'optional' || project.server_side === 'optional' ||
(project.server_side === 'required' && project.client_side === 'optional') (project.server_side === 'required' && project.client_side === 'optional')
" "
class="status-list__item status-list__item--color-orange" class="status-list__item"
> >
<CheckIcon /> <MonitorSmartphoneIcon aria-hidden="true" />
Server <span class="text-sm">(Limited functionality)</span> Client and server <span class="text-sm">(optional)</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
</div> </div>
</div> </div>
</section> </section>
@ -321,8 +304,6 @@
<script setup> <script setup>
import { import {
CheckIcon,
XIcon,
CalendarIcon, CalendarIcon,
IssuesIcon, IssuesIcon,
WikiIcon, WikiIcon,
@ -340,6 +321,10 @@ import {
VersionIcon, VersionIcon,
ExternalIcon, ExternalIcon,
CodeIcon, CodeIcon,
UserIcon,
ServerIcon,
ClientIcon,
MonitorSmartphoneIcon,
} from "@modrinth/assets"; } from "@modrinth/assets";
import { NewModal, Avatar } from "@modrinth/ui"; import { NewModal, Avatar } from "@modrinth/ui";
@ -395,7 +380,7 @@ const compatibilityMessages = defineMessages({
}, },
environments: { environments: {
id: "project.about.compatibility.environments", id: "project.about.compatibility.environments",
defaultMessage: "Environments", defaultMessage: "Supported environments",
}, },
}); });
const linksMessages = defineMessages({ 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" accept="image/png,image/jpeg,image/gif,image/webp"
class="choose-image iconified-button" class="choose-image iconified-button"
prompt="Upload icon" prompt="Upload icon"
aria-label="Upload icon"
:disabled="!hasPermission" :disabled="!hasPermission"
@change="showPreviewImage" @change="showPreviewImage"
> >
<UploadIcon /> <UploadIcon aria-hidden="true" />
</FileInput> </FileInput>
<button <button
v-if="!deletedIcon && (previewImage || project.icon_url)" v-if="!deletedIcon && (previewImage || project.icon_url)"
@ -44,7 +45,7 @@
:disabled="!hasPermission" :disabled="!hasPermission"
@click="markIconForDeletion" @click="markIconForDeletion"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Remove icon Remove icon
</button> </button>
</div> </div>
@ -211,7 +212,7 @@
:disabled="!hasChanges" :disabled="!hasChanges"
@click="saveChanges()" @click="saveChanges()"
> >
<SaveIcon /> <SaveIcon aria-hidden="true" />
Save changes Save changes
</button> </button>
</div> </div>
@ -233,7 +234,7 @@
:disabled="!hasDeletePermission" :disabled="!hasDeletePermission"
@click="$refs.modal_confirm.show()" @click="$refs.modal_confirm.show()"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Delete project Delete project
</button> </button>
</section> </section>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -44,7 +44,7 @@
to="/settings/billing" to="/settings/billing"
class="btn btn-purple btn-large" class="btn btn-purple btn-large"
> >
<SettingsIcon /> <SettingsIcon aria-hidden="true" />
Manage subscription Manage subscription
</nuxt-link> </nuxt-link>
<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()"> <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" :disabled="submitLoading || !canSubmit"
@click="submitReport" @click="submitReport"
> >
<SaveIcon /> <SaveIcon aria-hidden="true" />
Submit Submit
</Button> </Button>
</div> </div>

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

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

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

@ -30,7 +30,7 @@
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<ButtonStyled size="large"> <ButtonStyled size="large">
<NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile"> <NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile">
<EditIcon /> <EditIcon aria-hidden="true" />
{{ formatMessage(commonMessages.editButton) }} {{ formatMessage(commonMessages.editButton) }}
</NuxtLink> </NuxtLink>
</ButtonStyled> </ButtonStyled>
@ -52,18 +52,19 @@
}, },
{ id: 'copy-id', action: () => copyId() }, { id: 'copy-id', action: () => copyId() },
]" ]"
aria-label="More options"
> >
<MoreVerticalIcon /> <MoreVerticalIcon aria-hidden="true" />
<template #manage-projects> <template #manage-projects>
<BoxIcon /> <BoxIcon aria-hidden="true" />
{{ formatMessage(messages.profileManageProjectsButton) }} {{ formatMessage(messages.profileManageProjectsButton) }}
</template> </template>
<template #report> <template #report>
<ReportIcon /> <ReportIcon aria-hidden="true" />
{{ formatMessage(commonMessages.reportButton) }} {{ formatMessage(commonMessages.reportButton) }}
</template> </template>
<template #copy-id> <template #copy-id>
<ClipboardCopyIcon /> <ClipboardCopyIcon aria-hidden="true" />
{{ formatMessage(commonMessages.copyIdButton) }} {{ formatMessage(commonMessages.copyIdButton) }}
</template> </template>
</OverflowMenu> </OverflowMenu>
@ -141,7 +142,7 @@
<div class="details"> <div class="details">
<h2 class="title">{{ collection.name }}</h2> <h2 class="title">{{ collection.name }}</h2>
<div class="stats"> <div class="stats">
<LibraryIcon /> <LibraryIcon aria-hidden="true" />
Collection Collection
</div> </div>
</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 _MailIcon from './icons/mail.svg?component'
import _MessageIcon from './icons/message.svg?component' import _MessageIcon from './icons/message.svg?component'
import _MicrophoneIcon from './icons/microphone.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 _MoonIcon from './icons/moon.svg?component'
import _MoreHorizontalIcon from './icons/more-horizontal.svg?component' import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
import _MoreVerticalIcon from './icons/more-vertical.svg?component' import _MoreVerticalIcon from './icons/more-vertical.svg?component'
@ -272,6 +273,7 @@ export const LogOutIcon = _LogOutIcon
export const MailIcon = _MailIcon export const MailIcon = _MailIcon
export const MessageIcon = _MessageIcon export const MessageIcon = _MessageIcon
export const MicrophoneIcon = _MicrophoneIcon export const MicrophoneIcon = _MicrophoneIcon
export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
export const MoonIcon = _MoonIcon export const MoonIcon = _MoonIcon
export const MoreHorizontalIcon = _MoreHorizontalIcon export const MoreHorizontalIcon = _MoreHorizontalIcon
export const MoreVerticalIcon = _MoreVerticalIcon export const MoreVerticalIcon = _MoreVerticalIcon

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

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

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

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

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

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