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

added modals files

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-27 01:16:25 -04:00
parent 5f1b8a1598
commit af42b0c79b
20 changed files with 349 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,12 +6,15 @@
<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">
<button
@click="openModal('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')"
src="/images/hutopymedia/banners/tutorialbanner.png"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner"
@@ -19,19 +22,24 @@
</button>
<button class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5">
<button
@click="openModal('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')"
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">
<button
@click="openModal('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">
@@ -39,7 +47,9 @@
</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">
<button
@click="openModal('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">
@@ -167,7 +177,12 @@ import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vu
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';
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 ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
const dialog = ref(false);
const currentComponent = ref('');
@@ -180,7 +195,13 @@ const componentsMap = {
ModalTikTok,
ModalWebsite,
ModalX,
ModalYoutube
ModalYoutube,
BannerPicker,
ColorTopBanner,
ColorBottomBanner,
ProfilePicturePicker,
ColorBorder,
ColorMenu
};
const openModal = (component) => {