Make tags translatable, move icons to frontend, a few other things (#5229)
* Make tags translatable, move icons to frontend, a few other things * Migrate more things * fix import * more import fixes * export tag-messages * lint
This commit is contained in:
@@ -977,7 +977,7 @@ import {
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
|
||||
import { formatCategory, formatPrice, formatProjectType, renderString } from '@modrinth/utils'
|
||||
import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { useLocalStorage } from '@vueuse/core'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
@@ -66,18 +66,24 @@
|
||||
v-for="category in categoryLists[header]"
|
||||
:key="`category-${header}-${category.name}`"
|
||||
:model-value="current.selectedTags.includes(category)"
|
||||
:description="formatCategory(category.name)"
|
||||
:description="
|
||||
typeof getTagMessageOrDefault(category.name, 'category') === 'string'
|
||||
? getTagMessageOrDefault(category.name, 'category')
|
||||
: formatMessage(getTagMessageOrDefault(category.name, 'category'))
|
||||
"
|
||||
class="category-selector"
|
||||
@update:model-value="toggleCategory(category)"
|
||||
>
|
||||
<div class="category-selector__label">
|
||||
<div
|
||||
v-if="header !== 'resolutions' && category.icon"
|
||||
<component
|
||||
:is="getCategoryIcon(category.name)"
|
||||
v-if="header !== 'resolutions' && getCategoryIcon(category.name)"
|
||||
aria-hidden="true"
|
||||
class="icon"
|
||||
v-html="category.icon"
|
||||
/>
|
||||
<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
|
||||
<span aria-hidden="true">
|
||||
<FormattedTag :tag="category.name" enforce-type="category" />
|
||||
</span>
|
||||
</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
@@ -100,18 +106,24 @@
|
||||
:key="`featured-category-${category.name}`"
|
||||
class="category-selector"
|
||||
:model-value="current.featuredTags.includes(category)"
|
||||
:description="formatCategory(category.name)"
|
||||
:description="
|
||||
typeof getTagMessageOrDefault(category.name, 'category') === 'string'
|
||||
? getTagMessageOrDefault(category.name, 'category')
|
||||
: formatMessage(getTagMessageOrDefault(category.name, 'category'))
|
||||
"
|
||||
:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
|
||||
@update:model-value="toggleFeaturedCategory(category)"
|
||||
>
|
||||
<div class="category-selector__label">
|
||||
<div
|
||||
v-if="category.header !== 'resolutions' && category.icon"
|
||||
<component
|
||||
:is="getCategoryIcon(category.name)"
|
||||
v-if="category.header !== 'resolutions' && getCategoryIcon(category.name)"
|
||||
aria-hidden="true"
|
||||
class="icon"
|
||||
v-html="category.icon"
|
||||
/>
|
||||
<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
|
||||
<span aria-hidden="true">
|
||||
<FormattedTag :tag="category.name" enforce-type="category" />
|
||||
</span>
|
||||
</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
@@ -128,14 +140,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { StarIcon, TriangleAlertIcon } from '@modrinth/assets'
|
||||
import { Checkbox, injectProjectPageContext, UnsavedChangesPopup, useSavable } from '@modrinth/ui'
|
||||
import { getCategoryIcon, StarIcon, TriangleAlertIcon } from '@modrinth/assets'
|
||||
import {
|
||||
formatCategory,
|
||||
formatCategoryHeader,
|
||||
formatProjectType,
|
||||
sortedCategories,
|
||||
} from '@modrinth/utils'
|
||||
Checkbox,
|
||||
FormattedTag,
|
||||
getTagMessageOrDefault,
|
||||
injectProjectPageContext,
|
||||
UnsavedChangesPopup,
|
||||
useSavable,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { formatCategoryHeader, formatProjectType, sortedCategories } from '@modrinth/utils'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Category {
|
||||
@@ -146,6 +161,7 @@ interface Category {
|
||||
}
|
||||
|
||||
const tags = useGeneratedState()
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const { projectV2: project, patchProject } = injectProjectPageContext()
|
||||
|
||||
@@ -308,9 +324,12 @@ const toggleFeaturedCategory = (category: Category) => {
|
||||
|
||||
.icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
margin-right: 0.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
@@ -428,6 +428,7 @@ import {
|
||||
Avatar,
|
||||
Badge,
|
||||
ButtonStyled,
|
||||
Categories,
|
||||
ConfirmModal,
|
||||
CopyCode,
|
||||
ENVIRONMENTS_COPY,
|
||||
@@ -440,7 +441,6 @@ import { Multiselect } from 'vue-multiselect'
|
||||
import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
|
||||
import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
|
||||
import Modal from '~/components/ui/Modal.vue'
|
||||
import Categories from '~/components/ui/search/Categories.vue'
|
||||
import { useImageUpload } from '~/composables/image-upload.ts'
|
||||
import { inferVersionInfo } from '~/helpers/infer'
|
||||
import { createDataPackVersion } from '~/helpers/package.js'
|
||||
|
||||
Reference in New Issue
Block a user