Adds ChangeBanner for Creators
This commit is contained in:
Jonathan Bourdon
@@ -1,27 +1,76 @@
|
||||
<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';
|
||||
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";
|
||||
import {useUserStore} from "@/stores/userStore.js";
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const dialog = ref(false);
|
||||
const currentComponent = ref('');
|
||||
|
||||
const componentsMap = {
|
||||
ModalFacebook,
|
||||
ModalInstagram,
|
||||
ModalLinkedIn,
|
||||
ModalReddit,
|
||||
ModalTikTok,
|
||||
ModalWebsite,
|
||||
ModalX,
|
||||
ModalYoutube,
|
||||
BannerPicker,
|
||||
ColorTopBanner,
|
||||
ColorBottomBanner,
|
||||
ProfilePicturePicker,
|
||||
ColorBorder,
|
||||
ColorMenu
|
||||
};
|
||||
|
||||
const openModal = (component) => {
|
||||
currentComponent.value = componentsMap[component];
|
||||
dialog.value = true;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
|
||||
<button
|
||||
@click="openModal('ColorTopBanner')"
|
||||
@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 >
|
||||
<button>
|
||||
<img
|
||||
@click="openModal('BannerPicker')"
|
||||
src="/images/hutopymedia/banners/tutorialbanner.png"
|
||||
:src="userStore.creator.storedDataUrls.bannerPictureUrl"
|
||||
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
|
||||
alt="Tutorial Banner"
|
||||
>
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
@click="openModal('ColorBottomBanner')"
|
||||
class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
|
||||
@@ -37,7 +86,7 @@
|
||||
>
|
||||
</button>
|
||||
|
||||
<button
|
||||
<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>
|
||||
@@ -55,7 +104,7 @@
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-eyedropper-variant</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,7 +135,8 @@
|
||||
<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-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>
|
||||
@@ -106,10 +156,11 @@
|
||||
<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/externals/tiktok-black.png" class="w-5 h-5" ></span>
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.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 class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -142,8 +193,8 @@
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,75 +202,25 @@
|
||||
<!-- 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>
|
||||
<component :is="currentComponent" :creator="userStore.creator"></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';
|
||||
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('');
|
||||
|
||||
const componentsMap = {
|
||||
ModalFacebook,
|
||||
ModalInstagram,
|
||||
ModalLinkedIn,
|
||||
ModalReddit,
|
||||
ModalTikTok,
|
||||
ModalWebsite,
|
||||
ModalX,
|
||||
ModalYoutube,
|
||||
BannerPicker,
|
||||
ColorTopBanner,
|
||||
ColorBottomBanner,
|
||||
ProfilePicturePicker,
|
||||
ColorBorder,
|
||||
ColorMenu
|
||||
};
|
||||
|
||||
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 */
|
||||
@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 */
|
||||
@apply hover:opacity-90;
|
||||
/* Réduire l'opacité au survol */
|
||||
}
|
||||
|
||||
.custom-border {
|
||||
|
||||
Reference in New Issue
Block a user