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

I added the modal files and connected them to their buttons. I need to complete every modal file.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-26 12:21:21 -04:00
parent fc95f59490
commit 81d2ae4fda
24 changed files with 428 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/Profile/PageInformations.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<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 class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5">
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
<button >
<img
src="/images/hutopymedia/banners/tutorialbanner.png"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner"
>
</button>
<button class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5">
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
<button class="flex justify-center my-5">
<img
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"
>
</button>
<button 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 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="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-auto text-left pr-6">X</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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/hutopymedia/icons/black/tiktokblack.png" class="w-5 h-5" ></span>
<span class="flex-auto text-left pr-6">TikTok</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
@click="openModal('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>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
</div>
</div>
</div>
<!-- Modal -->
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-card-title>
<v-spacer></v-spacer>
</v-card-title>
<v-card-text>
<component :is="currentComponent"></component>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup>
import { ref } from 'vue';
import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
const dialog = ref(false);
const currentComponent = ref('');
const componentsMap = {
ModalFacebook,
ModalInstagram,
ModalLinkedIn,
ModalReddit,
ModalTikTok,
ModalWebsite,
ModalX,
ModalYoutube
};
const openModal = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
</script>
<style>
.HoverBtn:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */
}
.HoverBtnpicture:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */
}
.custom-border {
border: 3px solid #A6147D;
}
</style>