224 lines
8.5 KiB
Vue
224 lines
8.5 KiB
Vue
<script setup>
|
|
import {ref} from 'vue';
|
|
import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue';
|
|
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
|
|
import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
|
|
import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
|
|
import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue";
|
|
import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
|
|
import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
|
|
import {useUserStore} from "@/stores/userStore.js";
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const dialog = ref(false);
|
|
const currentComponent = ref('');
|
|
|
|
const componentsMap = {
|
|
BannerPicker,
|
|
LogoPicker,
|
|
Socials,
|
|
ColorTopBanner,
|
|
ColorBottomBanner,
|
|
ColorBorder,
|
|
ColorMenu,
|
|
};
|
|
|
|
const openDialog = (component) => {
|
|
console.dir(userStore.creator)
|
|
currentComponent.value = componentsMap[component]
|
|
dialog.value = true
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
currentComponent.value = null
|
|
dialog.value = false
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<v-dialog v-model="dialog" max-width="600px">
|
|
<v-card>
|
|
<v-card-text>
|
|
<component :is="currentComponent"
|
|
:creator="userStore.creator"
|
|
@closeRequested="closeDialog()"
|
|
></component>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<div class="flex flex-col items-center w-full">
|
|
<h1 class="uppercase pb-5 text-2xl">
|
|
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
|
|
Informations de votre page
|
|
</h1>
|
|
|
|
<div class="border rounded-2xl w-full max-w-[800px]">
|
|
<div class="py-5 uppercase ml-4">Bannière et image de profil</div>
|
|
<div class="flex flex-col w-full">
|
|
|
|
<button
|
|
@click="openDialog('ColorTopBanner')"
|
|
class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</button>
|
|
|
|
<button>
|
|
<img
|
|
@click="openDialog('BannerPicker')"
|
|
:src="userStore.creator.storedDataUrls.bannerPictureUrl"
|
|
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
|
|
alt="Tutorial Banner"
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorBottomBanner')"
|
|
class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</button>
|
|
|
|
<button class="flex justify-center my-5">
|
|
<img
|
|
@click="openDialog('LogoPicker')"
|
|
class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
|
|
:src="userStore.creator.storedDataUrls.profilePictureUrl"
|
|
alt="Profile Image"
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorBorder')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('ColorMenu')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
|
|
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-eyedropper-variant</v-icon>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Réseaux sociaux -->
|
|
<div class="mt-10 border rounded-2xl w-full max-w-[800px]">
|
|
|
|
<div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
|
|
|
|
<div class="flex flex-col w-full">
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
|
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
|
<span class="flex-none pa-2 min-w-32 text-left"><v-icon>mdi-twitter</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
|
|
<span class="flex-none pa-2 min-w-32 text-left">
|
|
<img src="/images/socials/tiktok-black.png" class="w-5 h-5">
|
|
</span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="openDialog('Socials')"
|
|
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl ">
|
|
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
|
|
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
|
|
<span class="flex-none">
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
|
|
.HoverBtn:hover {
|
|
@apply bg-[#A6147D] text-white;
|
|
@apply hover:opacity-90;
|
|
/* Réduire l'opacité au survol */
|
|
}
|
|
|
|
.custom-border {
|
|
border: 3px solid #A6147D;
|
|
}
|
|
|
|
</style>
|
|
|
|
|