jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close the banner-picker when cancelling or successfully changing the banner

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-05 18:27:35 -04:00
parent f2209cda64
commit f9d8e724fc
2 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/Profile/PageInformations.vue
View File

@@ -38,14 +38,31 @@ const componentsMap = {
ColorMenu
};
const openModal = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
const openDialog = (component) => {
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>
@@ -57,14 +74,14 @@ const openModal = (component) => {
<div class="flex flex-col w-full">
<button
@click="openModal('ColorTopBanner')"
@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="openModal('BannerPicker')"
@click="openDialog('BannerPicker')"
:src="userStore.creator.storedDataUrls.bannerPictureUrl"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner"
@@ -72,14 +89,14 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ColorBottomBanner')"
@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="openModal('ProfilePicturePicker')"
@click="openDialog('ProfilePicturePicker')"
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="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
alt="Profile Image"
@@ -87,7 +104,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ColorBorder')"
@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>
@@ -97,7 +114,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ColorMenu')"
@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>
@@ -113,7 +130,7 @@ const openModal = (component) => {
<div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
<div class="flex flex-col w-full">
<button
@click="openModal('ModalFacebook')"
@click="openDialog('ModalFacebook')"
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">Facebook</span>
@@ -123,7 +140,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalInstagram')"
@click="openDialog('ModalInstagram')"
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">Instagram</span>
@@ -133,7 +150,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalX')"
@click="openDialog('ModalX')"
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/hutopymedia/icons/black/xblack.png"
class="w-5 h-5"></span>
@@ -144,7 +161,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalLinkedIn')"
@click="openDialog('ModalLinkedIn')"
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">LinkedIn</span>
@@ -154,7 +171,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalTikTok')"
@click="openDialog('ModalTikTok')"
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/externals/tiktok-black.png"
class="w-5 h-5"></span>
@@ -165,7 +182,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalYoutube')"
@click="openDialog('ModalYoutube')"
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">Youtube</span>
@@ -175,7 +192,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalReddit')"
@click="openDialog('ModalReddit')"
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">Reddit</span>
@@ -185,7 +202,7 @@ const openModal = (component) => {
</button>
<button
@click="openModal('ModalWebsite')"
@click="openDialog('ModalWebsite')"
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">Site web personnel</span>
@@ -199,25 +216,11 @@ const openModal = (component) => {
</div>
</div>
<!-- Modal -->
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-card-text>
<component :is="currentComponent" :creator="userStore.creator"></component>
</v-card-text>
</v-card>
</v-dialog>
</template>
<style>
.HoverBtn:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90;
/* Réduire l'opacité au survol */
}
.HoverBtnpicture:hover {
.HoverBtn:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90;
/* Réduire l'opacité au survol */