Add localization support for various components, including dialogs and views, in English, Spanish, and French. Implemented translations for user profile management, payment processes, and creator functionalities. Updated existing components to utilize the new translation system.
This commit is contained in:
@@ -18,7 +18,9 @@ import Linkedin from "@/views/svg/Linkedin.vue";
|
||||
import Tiktok from "@/views/svg/Tiktok.vue";
|
||||
import Instagram from "@/views/svg/Instagram.vue";
|
||||
import Facebook from "@/views/svg/Facebook.vue";
|
||||
import { useTranslations } from "@/translations/translations";
|
||||
|
||||
const t = useTranslations();
|
||||
const userProfileStore = useUserProfileStore()
|
||||
|
||||
// ### Fullname
|
||||
@@ -131,14 +133,14 @@ const closeDialog = () => {
|
||||
<div class="card">
|
||||
|
||||
<div class="card-title">
|
||||
{{ $t('personnalinformation.informations') }}
|
||||
{{ t('personal.informations') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<button
|
||||
class="action"
|
||||
@click="openEditFullname">
|
||||
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
|
||||
<span class="label">{{ t('personal.fullname') }}</span>
|
||||
<span class="value">{{ userProfileStore.fullname }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
@@ -146,7 +148,7 @@ const closeDialog = () => {
|
||||
<button
|
||||
class="action"
|
||||
@click="openEditAlias">
|
||||
<span class="label">{{ $t('personnalinformation.alias') }}</span>
|
||||
<span class="label">{{ t('personal.alias') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.alias }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
@@ -157,12 +159,12 @@ const closeDialog = () => {
|
||||
<div class="card">
|
||||
|
||||
<div class="card-title">
|
||||
{{ $t('personnalinformation.contactdetails') }}
|
||||
{{ t('personal.contact') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<button class="action" @click="openDialog('EmailDialog')">
|
||||
<span class="label">{{ $t('personnalinformation.email') }}</span>
|
||||
<span class="label">{{ t('personal.email') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.email }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
@@ -173,26 +175,26 @@ const closeDialog = () => {
|
||||
<template v-if="creatorProfileStore.creator !== undefined">
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
{{ $t('creatorinfopage.informations') }}
|
||||
{{ t('creator.informations') }}
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<!-- NAME -->
|
||||
<button class="action" @click="openDialog('ChangeNameDialog')">
|
||||
<span class="label">{{ $t('creatorinfopage.name') }}</span>
|
||||
<span class="label">{{ t('creator.name') }}</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.name }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('ChangeSlugDialog')">
|
||||
<span class="label">{{ $t('creatorinfopage.slug') }}</span>
|
||||
<span class="label">{{ t('creator.slug') }}</span>
|
||||
<span class="value">@{{ creatorProfileStore.creator.slug }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<!-- TITLE -->
|
||||
<button class="action" @click="openDialog('ChangeTitleDialog')">
|
||||
<span class="label">{{ $t('creatorinfopage.title') }}</span>
|
||||
<span class="label">{{ t('creator.title') }}</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.title }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
@@ -209,7 +211,7 @@ const closeDialog = () => {
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
{{ $t('creatorinfopage.socialnetwork') }}
|
||||
{{ t('creator.socialnetwork') }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -282,20 +284,20 @@ const closeDialog = () => {
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Danger Zone</div>
|
||||
<div class="card-title">{{ t('danger.title') }}</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
CAUTION: This will delete your creator page and suspend all tips and donations.
|
||||
{{ t('danger.warning') }}
|
||||
</p>
|
||||
<button v-if="!creatorProfileStore.creator.isDeleted"
|
||||
class="danger-action"
|
||||
@click="creatorProfileStore.removeCreatorPage()">
|
||||
DELETE PAGE
|
||||
{{ t('danger.delete') }}
|
||||
</button>
|
||||
<button v-else
|
||||
class="safe-action"
|
||||
@click="creatorProfileStore.restoreCreatorPage()">
|
||||
RESTORE PAGE
|
||||
{{ t('danger.restore') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -307,12 +309,38 @@ const closeDialog = () => {
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card {
|
||||
@apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-hOnBackground text-lg font-bold mb-4;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.action {
|
||||
@apply p-2 flex items-center w-full mb-2;
|
||||
@apply font-sans text-base;
|
||||
@apply rounded-md;
|
||||
@apply transition duration-200 ease-in-out;
|
||||
@apply hover:bg-hutopyPrimary active:bg-hutopySecondary;
|
||||
@apply flex flex-row items-center justify-between w-full p-2 rounded-lg;
|
||||
@apply hover:bg-hSurface;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply text-hOnBackground;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply text-hOnBackground opacity-70;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
@apply text-hOnBackground opacity-70;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@apply fill-current w-6 h-6;
|
||||
@apply text-hOnBackground;
|
||||
}
|
||||
|
||||
.danger-action {
|
||||
@@ -326,22 +354,4 @@ const closeDialog = () => {
|
||||
@apply mt-4;
|
||||
@apply bg-green-800 hover:bg-green-700 active:bg-green-600;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply flex-none min-w-40 text-left;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply flex-auto text-left pr-6;
|
||||
@apply break-words overflow-auto;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
@apply flex-none;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user