93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="relative"
|
|
@click="isCurrentCreator && openBannerEditor()"
|
|
@mouseenter="showTint = isCurrentCreator"
|
|
@mouseleave="showTint = false"
|
|
>
|
|
<div class="size-[110px] rounded-full border-4 border-hPrimary">
|
|
<img
|
|
:alt="t('logoAlt')"
|
|
:src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'"
|
|
class="rounded-full"
|
|
height="110px"
|
|
width="110px"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Tint Effect -->
|
|
<div
|
|
v-if="showTint"
|
|
:title="t('editLogo')"
|
|
class="absolute inset-0 cursor-pointer rounded-full bg-black/25"
|
|
>
|
|
<!-- Top-right Icon -->
|
|
<div
|
|
class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
|
|
>
|
|
<v-icon
|
|
:icon="mdiPencil"
|
|
large
|
|
/>
|
|
</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';
|
|
import { mdiPencil } from '@mdi/js';
|
|
|
|
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"
|
|
}
|
|
}
|
|
</i18n>
|