93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<div class="relative"
|
|
@mouseenter="showTint = isCurrentCreator"
|
|
@mouseleave="showTint = false"
|
|
@click="isCurrentCreator && openBannerEditor()"
|
|
>
|
|
|
|
<div class="rounded-full border-4 border-hPrimary w-[110px] h-[110px]">
|
|
<img
|
|
:src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
|
|
:alt="t('logoAlt')"
|
|
width="110px"
|
|
height="110px"
|
|
class="rounded-full"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Tint Effect -->
|
|
<div
|
|
v-if="showTint"
|
|
class="absolute rounded-full inset-0 bg-black/25 cursor-pointer"
|
|
:title="t('editLogo')"
|
|
>
|
|
<!-- Top-right Icon -->
|
|
<div
|
|
class="absolute top-0 right-0 w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
|
|
>
|
|
<v-icon large>mdi-pencil</v-icon>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<v-dialog v-model="isDialogOpen" max-width="800px">
|
|
<template #default="{ close }">
|
|
<creator-logo-editor
|
|
:creator="brandingStore?.value"
|
|
@closeRequested="() => isDialogOpen = false"
|
|
></creator-logo-editor>
|
|
</template>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useAuthStore} from "@/stores/authStore.js";
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
import CreatorLogoEditor from "@/views/creators/CreatorLogoEditor.vue";
|
|
import {computed, ref} from "vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const authStore = useAuthStore();
|
|
const brandingStore = useBrandingStore();
|
|
const { t } = useI18n();
|
|
|
|
// State
|
|
const showTint = ref(false);
|
|
const isDialogOpen = ref(false);
|
|
|
|
// Methods
|
|
const openBannerEditor = () => {
|
|
isDialogOpen.value = true;
|
|
};
|
|
|
|
const isCurrentCreator = computed(() => {
|
|
return authStore.userId === brandingStore.value.id;
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.logo-image {
|
|
@apply border-4 border-solid border-hTertiary;
|
|
}
|
|
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"logoAlt": "Creator logo",
|
|
"editLogo": "Edit logo"
|
|
},
|
|
"fr": {
|
|
"logoAlt": "Logo du créateur",
|
|
"editLogo": "Modifier le logo"
|
|
},
|
|
"es": {
|
|
"logoAlt": "Logo del creador",
|
|
"editLogo": "Editar logo"
|
|
}
|
|
}
|
|
</i18n> |