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

Adds ChangeColors for Creators

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-06 02:48:39 -04:00
parent dc406f5953
commit b347fac69a
7 changed files with 188 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
View File

@@ -1,23 +0,0 @@
<template>
<div>
<h2 class="title font-semibold text-2xl">Couleur contour</h2>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<script setup>
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

26
src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
View File

@@ -1,26 +0,0 @@
<template>
<div>
<h2 class="title font-semibold text-2xl">Couleur de la bannière inférieur</h2>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<script setup>
import { ref } from 'vue';
const color = ref('#FF0000');
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

23
src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
View File

@@ -1,23 +0,0 @@
<template>
<div>
<h2 class="title font-semibold text-2xl">Couleur des Menus</h2>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<script setup>
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

26
src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
View File

@@ -1,26 +0,0 @@
<template>
<div>
<h2 class="title font-semibold text-2xl">Couleur de la bannière supérieure</h2>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<script setup>
import { ref } from 'vue';
const color = ref('#FF0000');
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

161
src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue Normal file
View File

@@ -0,0 +1,161 @@
<script setup>
import {ref, computed} from 'vue';
import {useClient} from "@/plugins/api.js";
const props = defineProps({
creator: {
required: true
},
colorName: {
type: String,
default: 'bannerTop'
}
});
const emits = defineEmits(['closeRequested']);
const bannerTopColor = ref(props.creator.profileColors.bannerTop);
const bannerBottomColor = ref(props.creator.profileColors.bannerBottom);
const accentColor = ref(props.creator.profileColors.accent);
const menuColor = ref(props.creator.profileColors.menu);
const selectedColorName = ref(props.colorName);
const selectedColor = computed({
get() {
switch (selectedColorName.value) {
case 'bannerTop':
return bannerTopColor.value;
case 'bannerBottom':
return bannerBottomColor.value;
case 'accent':
return accentColor.value;
case 'menu':
return menuColor.value;
default:
return bannerTopColor.value;
}
},
set(value) {
switch (selectedColorName.value) {
case 'bannerTop':
bannerTopColor.value = value;
break;
case 'bannerBottom':
bannerBottomColor.value = value;
break;
case 'accent':
accentColor.value = value;
break;
case 'menu':
menuColor.value = value;
break;
}
}
});
const selectColor = (colorName) => {
selectedColorName.value = colorName;
};
const client = useClient();
const save = async () => {
try {
await client.post(
`/api/creators/${props.creator.id}/colors`,
{
"bannerTop": bannerTopColor.value || null,
"bannerBottom": bannerBottomColor.value || null,
"accent": accentColor.value || null,
"menu": menuColor.value || null
});
props.creator.profileColors.bannerTop = bannerTopColor.value;
props.creator.profileColors.bannerBottom = bannerBottomColor.value;
props.creator.profileColors.accent = accentColor.value;
props.creator.profileColors.menu = menuColor.value;
emits('closeRequested');
} catch (error) {
console.error(error);
}
};
const cancel = () => {
emits('closeRequested');
};
</script>
<template>
<h2 class="text-2xl font-semibold mb-4 flex justify-center">
Palette de Couleurs
</h2>
<div class="flex gap-6 justify-center items-start mt-5">
<div class="grid grid-cols-2 grid-rows-2 gap-4">
<div
class="color-square"
:class="{ selected: selectedColorName === 'bannerTop' }"
:style="{ backgroundColor: bannerTopColor }"
@click="selectColor('bannerTop')"
>
<span class="color-name">Haut Banniere</span>
</div>
<div
class="color-square"
:class="{ selected: selectedColorName === 'bannerBottom' }"
:style="{ backgroundColor: bannerBottomColor }"
@click="selectColor('bannerBottom')"
>
<span class="color-name">Bas Banniere</span>
</div>
<div
class="color-square"
:class="{ selected: selectedColorName === 'accent' }"
:style="{ backgroundColor: accentColor }"
@click="selectColor('accent')"
>
<span class="color-name">Accent</span>
</div>
<div
class="color-square"
:class="{ selected: selectedColorName === 'menu' }"
:style="{ backgroundColor: menuColor }"
@click="selectColor('menu')"
>
<span class="color-name">Menu</span>
</div>
</div>
<div class="w-px bg-gray-300 h-full"></div>
<div class="flex-grow">
<v-color-picker v-model="selectedColor"></v-color-picker>
</div>
</div>
<div class="flex justify-end space-x-4 mt-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
</div>
</template>
<style scoped>
.color-square {
@apply w-[150px] h-[150px];
@apply flex rounded-md cursor-pointer relative;
@apply items-center justify-center;
@apply font-bold text-white;
}
.color-square.selected {
@apply border-4 border-solid border-[crimson];
}
.color-name {
text-align: center;
}
</style>

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

@@ -1,32 +1,27 @@
<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";
import {ref} from 'vue'
import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue'
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue'
import ColorsPicker from '@/views/Profile/Dialogs/PageInformations/ColorsPicker.vue'
import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue"
import {useUserStore} from "@/stores/userStore.js"
const userStore = useUserStore()
const dialog = ref(false);
const currentComponent = ref('');
const currentComponent = ref('')
const colorToEdit = ref(null)
const componentsMap = {
BannerPicker,
LogoPicker,
Socials,
ColorTopBanner,
ColorBottomBanner,
ColorBorder,
ColorMenu,
ColorsPicker
};
const openDialog = (component) => {
console.dir(userStore.creator)
const openDialog = (component, colorName = null) => {
currentComponent.value = componentsMap[component]
colorToEdit.value = colorName
dialog.value = true
}
@@ -39,11 +34,12 @@ const closeDialog = () => {
<template>
<v-dialog v-model="dialog" max-width="600px">
<v-dialog v-model="dialog" max-width="800px">
<v-card>
<v-card-text>
<component :is="currentComponent"
:creator="userStore.creator"
:colorName="colorToEdit"
@closeRequested="closeDialog()"
></component>
</v-card-text>
@@ -61,8 +57,10 @@ const closeDialog = () => {
<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">
@click="openDialog('ColorsPicker', 'bannerTop')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: userStore.creator.profileColors.bannerTop }"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
@@ -76,8 +74,10 @@ const closeDialog = () => {
</button>
<button
@click="openDialog('ColorBottomBanner')"
class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
@click="openDialog('ColorsPicker', 'bannerBottom')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: userStore.creator.profileColors.bannerBottom }"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
@@ -85,13 +85,14 @@ const closeDialog = () => {
<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"
:style="{ borderColor: userStore.creator.profileColors.accent }"
:src="userStore.creator.images.logo"
alt="Profile Image"
>
</button>
<button
@click="openDialog('ColorBorder')"
@click="openDialog('ColorsPicker', 'accent')"
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>
@@ -101,7 +102,7 @@ const closeDialog = () => {
</button>
<button
@click="openDialog('ColorMenu')"
@click="openDialog('ColorsPicker', 'menu')"
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>
@@ -215,7 +216,7 @@ const closeDialog = () => {
}
.custom-border {
border: 3px solid #A6147D;
border: 3px solid;
}
</style>

7
src/views/creators/CreatorBanner.vue
View File

@@ -53,10 +53,7 @@
<!-- User Info -->
<div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
<p class="capitalize">{{creator.name}}</p>
</div>
<div class="text-2xl text-center lg:text-left">
<p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
<p class="capitalize">{{ creator.name }}</p>
</div>
<div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
</div>
@@ -88,7 +85,7 @@ const props = defineProps({
function GetSocialsUrls() {
const socials = [];
if (props.creator.socials.facebookUrl !== null) {
socials.push({
icon: "mdi-facebook",