Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Commit

Permalink
Add translation keys for Badge Component & improve documentation (#137)
Browse files Browse the repository at this point in the history 
* Begin Work

* Ordering

* Add all keys to JSON file

* Add accepted, approved, archived & closed keys to vue component

* Add draft, failed, listed keys to vue component

* Format (fix lint) & improve documentation

* Finish the work
  • Loading branch information
@Mysterious-Dev
Mysterious-Dev authored Nov 13, 2023
1 parent 810f010 commit a60b771
Show file tree
Hide file tree
Showing 3 changed files with 252 additions and 19 deletions.
57 changes: 57 additions & 0 deletions docs/components/badge.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Badge

## Colored badge

<DemoContainer>
<Badge color="red" type="Tomato" />
<Badge color="orange" type="Squash" />
Expand All @@ -13,3 +15,58 @@
<Badge color="green" type="Lettuce" />
<Badge type="Onion" />
```

## Badge with icon

<DemoContainer>
<Badge type="admin" />
<Badge type="moderator" />
<Badge type="creator" />

<Badge type="approved" />
<Badge type="approved-general" />
<Badge type="unlisted" />
<Badge type="withheld" />
<Badge type="private" />
<Badge type="scheduled" />
<Badge type="draft" />
<Badge type="archived" />
<Badge type="rejected" />
<Badge type="processing" />

<Badge type="accepted" />
<Badge type="pending" />

<Badge type="processed" />
<Badge type="failed" />
<Badge type="returned" />

<Badge type="closed" />
</DemoContainer>

```vue
<Badge type="admin" />
<Badge type="moderator" />
<Badge type="creator" />
<Badge type="approved" />
<Badge type="approved-general" />
<Badge type="unlisted" />
<Badge type="withheld" />
<Badge type="private" />
<Badge type="scheduled" />
<Badge type="draft" />
<Badge type="archived" />
<Badge type="rejected" />
<Badge type="processing" />
<Badge type="accepted" />
<Badge type="pending" />
<Badge type="processed" />
<Badge type="failed" />
<Badge type="returned" />
<Badge type="closed" />
```

157 changes: 138 additions & 19 deletions lib/components/base/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,71 @@
<template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>

<!-- User roles -->
<template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
<template v-else-if="type === 'moderator'"> <ScaleIcon /> Moderator</template>
<template v-else-if="type === 'creator'"><BoxIcon /> Creator</template>
<template v-else-if="type === 'admin'">
<ModrinthIcon /> {{ formatMessage(messages.modrinthTeamLabel) }}
</template>
<template v-else-if="type === 'moderator'">
<ScaleIcon /> {{ formatMessage(messages.moderatorLabel) }}
</template>
<template v-else-if="type === 'creator'">
<BoxIcon /> {{ formatMessage(messages.creatorLabel) }}
</template>

<!-- Project statuses -->
<template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
<template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
<template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
<template v-else-if="type === 'withheld'"><EyeOffIcon /> Withheld</template>
<template v-else-if="type === 'private'"><LockIcon /> Private</template>
<template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
<template v-else-if="type === 'draft'"><FileTextIcon /> Draft</template>
<template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
<template v-else-if="type === 'rejected'"><XIcon /> Rejected</template>
<template v-else-if="type === 'processing'"> <UpdatedIcon /> Under review</template>
<template v-else-if="type === 'approved'">
<ListIcon /> {{ formatMessage(messages.listedLabel) }}
</template>
<template v-else-if="type === 'approved-general'">
<CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
</template>
<template v-else-if="type === 'unlisted'">
<EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
</template>
<template v-else-if="type === 'withheld'">
<EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
</template>
<template v-else-if="type === 'private'">
<LockIcon /> {{ formatMessage(messages.privateLabel) }}
</template>
<template v-else-if="type === 'scheduled'">
<CalendarIcon /> {{ formatMessage(messages.scheduledLabel) }}
</template>
<template v-else-if="type === 'draft'">
<FileTextIcon /> {{ formatMessage(messages.draftLabel) }}
</template>
<template v-else-if="type === 'archived'">
<ArchiveIcon /> {{ formatMessage(messages.archivedLabel) }}
</template>
<template v-else-if="type === 'rejected'">
<XIcon /> {{ formatMessage(messages.rejectedLabel) }}
</template>
<template v-else-if="type === 'processing'">
<UpdatedIcon /> {{ formatMessage(messages.underReviewLabel) }}
</template>

<!-- Team members -->
<template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
<template v-else-if="type === 'pending'"> <UpdatedIcon /> Pending</template>
<template v-else-if="type === 'accepted'">
<CheckIcon /> {{ formatMessage(messages.acceptedLabel) }}
</template>
<template v-else-if="type === 'pending'">
<UpdatedIcon /> {{ formatMessage(messages.pendingLabel) }}
</template>

<!-- Transaction statuses (pending, processing reused) -->
<template v-else-if="type === 'processed'"><CheckIcon /> Processed</template>
<template v-else-if="type === 'failed'"><XIcon /> Failed</template>
<template v-else-if="type === 'returned'"><XIcon /> Returned</template>
<template v-else-if="type === 'processed'">
<CheckIcon /> {{ formatMessage(messages.processedLabel) }}
</template>
<template v-else-if="type === 'failed'">
<XIcon /> {{ formatMessage(messages.failedLabel) }}
</template>
<template v-else-if="type === 'returned'">
<XIcon /> {{ formatMessage(messages.returnedLabel) }}
</template>

<!-- Report status -->
<template v-else-if="type === 'closed'"> <XIcon /> Closed</template>
<template v-else-if="type === 'closed'">
<XIcon /> {{ formatMessage(messages.closedLabel) }}
</template>

<!-- Other -->
<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
Expand All @@ -53,6 +91,87 @@ import {
capitalizeString,
} from '@'
import { useVIntl, defineMessages } from '@vintl/vintl'
const messages = defineMessages({
acceptedLabel: {
id: 'omorphia.component.badge.label.accepted',
defaultMessage: 'Accepted',
},
approvedLabel: {
id: 'omorphia.component.badge.label.approved',
defaultMessage: 'Approved',
},
archivedLabel: {
id: 'omorphia.component.badge.label.archived',
defaultMessage: 'Archived',
},
closedLabel: {
id: 'omorphia.component.badge.label.closed',
defaultMessage: 'Closed',
},
creatorLabel: {
id: 'omorphia.component.badge.label.creator',
defaultMessage: 'Creator',
},
draftLabel: {
id: 'omorphia.component.badge.label.draft',
defaultMessage: 'Draft',
},
failedLabel: {
id: 'omorphia.component.badge.label.failed',
defaultMessage: 'Failed',
},
listedLabel: {
id: 'omorphia.component.badge.label.listed',
defaultMessage: 'Listed',
},
moderatorLabel: {
id: 'omorphia.component.badge.label.moderator',
defaultMessage: 'Moderator',
},
modrinthTeamLabel: {
id: 'omorphia.component.badge.label.modrinth-team',
defaultMessage: 'Modrinth Team',
},
pendingLabel: {
id: 'omorphia.component.badge.label.pending',
defaultMessage: 'Pending',
},
privateLabel: {
id: 'omorphia.component.badge.label.private',
defaultMessage: 'Private',
},
processedLabel: {
id: 'omorphia.component.badge.label.processed',
defaultMessage: 'Processed',
},
rejectedLabel: {
id: 'omorphia.component.badge.label.rejected',
defaultMessage: 'Rejected',
},
returnedLabel: {
id: 'omorphia.component.badge.label.returned',
defaultMessage: 'Returned',
},
scheduledLabel: {
id: 'omorphia.component.badge.label.scheduled',
defaultMessage: 'Scheduled',
},
underReviewLabel: {
id: 'omorphia.component.badge.label.under-review',
defaultMessage: 'Under review',
},
unlistedLabel: {
id: 'omorphia.component.badge.label.unlisted',
defaultMessage: 'Unlisted',
},
withheldLabel: {
id: 'omorphia.component.badge.label.withheld',
defaultMessage: 'Withheld',
},
})
const { formatMessage } = useVIntl()
defineProps({
type: {
type: String,
Expand Down
57 changes: 57 additions & 0 deletions locales/en-US/index.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,61 @@
{
"omorphia.component.badge.label.accepted": {
"defaultMessage": "Accepted"
},
"omorphia.component.badge.label.approved": {
"defaultMessage": "Approved"
},
"omorphia.component.badge.label.archived": {
"defaultMessage": "Archived"
},
"omorphia.component.badge.label.closed": {
"defaultMessage": "Closed"
},
"omorphia.component.badge.label.creator": {
"defaultMessage": "Creator"
},
"omorphia.component.badge.label.draft": {
"defaultMessage": "Draft"
},
"omorphia.component.badge.label.failed": {
"defaultMessage": "Failed"
},
"omorphia.component.badge.label.listed": {
"defaultMessage": "Listed"
},
"omorphia.component.badge.label.moderator": {
"defaultMessage": "Moderator"
},
"omorphia.component.badge.label.modrinth-team": {
"defaultMessage": "Modrinth Team"
},
"omorphia.component.badge.label.pending": {
"defaultMessage": "Pending"
},
"omorphia.component.badge.label.private": {
"defaultMessage": "Private"
},
"omorphia.component.badge.label.processed": {
"defaultMessage": "Processed"
},
"omorphia.component.badge.label.rejected": {
"defaultMessage": "Rejected"
},
"omorphia.component.badge.label.returned": {
"defaultMessage": "Returned"
},
"omorphia.component.badge.label.scheduled": {
"defaultMessage": "Scheduled"
},
"omorphia.component.badge.label.under-review": {
"defaultMessage": "Under review"
},
"omorphia.component.badge.label.unlisted": {
"defaultMessage": "Unlisted"
},
"omorphia.component.badge.label.withheld": {
"defaultMessage": "Withheld"
},
"omorphia.component.copy.action.copy": {
"defaultMessage": "Copy code to clipboard"
}
Expand Down

0 comments on commit a60b771

Please sign in to comment.