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

Renames ProfileColors to Colors

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-06 02:55:31 -04:00
parent b347fac69a
commit 7172090855
6 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
View File

@@ -14,10 +14,10 @@ const props = defineProps({
const emits = defineEmits(['closeRequested']); const emits = defineEmits(['closeRequested']);
const bannerTopColor = ref(props.creator.profileColors.bannerTop); const bannerTopColor = ref(props.creator.colors.bannerTop);
const bannerBottomColor = ref(props.creator.profileColors.bannerBottom); const bannerBottomColor = ref(props.creator.colors.bannerBottom);
const accentColor = ref(props.creator.profileColors.accent); const accentColor = ref(props.creator.colors.accent);
const menuColor = ref(props.creator.profileColors.menu); const menuColor = ref(props.creator.colors.menu);
const selectedColorName = ref(props.colorName); const selectedColorName = ref(props.colorName);
const selectedColor = computed({ const selectedColor = computed({
@@ -69,10 +69,10 @@ const save = async () => {
"menu": menuColor.value || null "menu": menuColor.value || null
}); });
props.creator.profileColors.bannerTop = bannerTopColor.value; props.creator.colors.bannerTop = bannerTopColor.value;
props.creator.profileColors.bannerBottom = bannerBottomColor.value; props.creator.colors.bannerBottom = bannerBottomColor.value;
props.creator.profileColors.accent = accentColor.value; props.creator.colors.accent = accentColor.value;
props.creator.profileColors.menu = menuColor.value; props.creator.colors.menu = menuColor.value;
emits('closeRequested'); emits('closeRequested');
} catch (error) { } catch (error) {

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

@@ -59,7 +59,7 @@ const closeDialog = () => {
<button <button
@click="openDialog('ColorsPicker', 'bannerTop')" @click="openDialog('ColorsPicker', 'bannerTop')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150" class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: userStore.creator.profileColors.bannerTop }" :style="{ backgroundColor: userStore.creator.colors.bannerTop }"
> >
<v-icon>mdi-eyedropper-variant</v-icon> <v-icon>mdi-eyedropper-variant</v-icon>
</button> </button>
@@ -76,7 +76,7 @@ const closeDialog = () => {
<button <button
@click="openDialog('ColorsPicker', 'bannerBottom')" @click="openDialog('ColorsPicker', 'bannerBottom')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150" class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: userStore.creator.profileColors.bannerBottom }" :style="{ backgroundColor: userStore.creator.colors.bannerBottom }"
> >
<v-icon>mdi-eyedropper-variant</v-icon> <v-icon>mdi-eyedropper-variant</v-icon>
</button> </button>
@@ -85,7 +85,7 @@ const closeDialog = () => {
<img <img
@click="openDialog('LogoPicker')" @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" 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 }" :style="{ borderColor: userStore.creator.colors.accent }"
:src="userStore.creator.images.logo" :src="userStore.creator.images.logo"
alt="Profile Image" alt="Profile Image"
> >

2
src/views/contents/PublishContentButton.vue
View File

@@ -74,7 +74,7 @@ const closeDialog = () => {
<v-card class="text-center rounded-xl"> <v-card class="text-center rounded-xl">
<v-card-title class="text-white p-4 rounded-t" <v-card-title class="text-white p-4 rounded-t"
:style="{backgroundColor: creator.profileColors.menu || '#A30E79'}"> :style="{backgroundColor: creator.colors.menu || '#A30E79'}">
Quicky Quicky
</v-card-title> </v-card-title>

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

@@ -5,7 +5,7 @@
<div class="relative flex flex-col"> <div class="relative flex flex-col">
<!-- Social Network--> <!-- Social Network-->
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14" <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
:style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }"> :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2"> <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
<a <a
v-for="socialNetwork in GetSocialsUrls()" v-for="socialNetwork in GetSocialsUrls()"
@@ -35,7 +35,7 @@
<!-- Actions Button & image profile --> <!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full"> <div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg min-h-24" <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
:style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }"> :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
<div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between"> <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
<!-- Profile Image Wrapper --> <!-- Profile Image Wrapper -->
<div class="relative flex justify-center lg:w-auto lg:justify-start"> <div class="relative flex justify-center lg:w-auto lg:justify-start">
@@ -45,7 +45,7 @@
class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto" class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
:src="creator.images.logo" :src="creator.images.logo"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }" :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
/> />
</div> </div>
</div> </div>

4
src/views/creators/CreatorDescriptionBtn.vue
View File

@@ -40,11 +40,11 @@ onMounted(() => {
const style = document.createElement('style'); const style = document.createElement('style');
style.innerHTML = ` style.innerHTML = `
.scrollable-content::-webkit-scrollbar-thumb { .scrollable-content::-webkit-scrollbar-thumb {
background-color: ${props.creator.profileColors.menu}; background-color: ${props.creator.colors.menu};
border-radius: 10px; border-radius: 10px;
} }
.scrollable-content::-webkit-scrollbar-thumb:hover { .scrollable-content::-webkit-scrollbar-thumb:hover {
background-color: ${shadeColor(props.creator.profileColors.accent, -10)}; background-color: ${shadeColor(props.creator.colors.accent, -10)};
} }
`; `;
document.head.appendChild(style); document.head.appendChild(style);

24
src/views/main/ProfileBanner.vue
View File

@@ -1,31 +1,31 @@
<template> <template>
<div> <div>
<div> <div>
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }"> <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.colors.menu }">
<div class="flex justify-center text-2xl">Photo de couverture</div> <div class="flex justify-center text-2xl">Photo de couverture</div>
</div> </div>
<div> <div>
<div :style="{ backgroundColor: user.profileColors.bannerTop || '#6B0065' }" class="flex h-4"></div> <div :style="{ backgroundColor: user.colors.bannerTop || '#6B0065' }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover"> <img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover">
<div :style="{ backgroundColor: user.profileColors.bannerBottom || '#A30E79' }" class="h-4"> <div :style="{ backgroundColor: user.colors.bannerBottom || '#A30E79' }" class="h-4">
</div> </div>
<div> <div>
<div class="space-x-4 flex justify-center py-2"> <div class="space-x-4 flex justify-center py-2">
<v-btn @click="openColorPicker('top')" <v-btn @click="openColorPicker('top')"
:style="{ backgroundColor: user.profileColors.bannerTop || '#6B0065', color: getTextColor(user.profileColors.bannerTop || '#6B0065') }"> :style="{ backgroundColor: user.colors.bannerTop || '#6B0065', color: getTextColor(user.colors.bannerTop || '#6B0065') }">
Haut Haut
</v-btn> </v-btn>
<v-btn @click="openColorPicker('bottom')" <v-btn @click="openColorPicker('bottom')"
:style="{ backgroundColor: user.profileColors.bannerBottom || '#A30E79', color: getTextColor(user.profileColors.bannerBottom || '#A30E79') }"> :style="{ backgroundColor: user.colors.bannerBottom || '#A30E79', color: getTextColor(user.colors.bannerBottom || '#A30E79') }">
Bas Bas
</v-btn> </v-btn>
<v-btn @click="openColorPicker('accent')" <v-btn @click="openColorPicker('accent')"
:style="{ backgroundColor: user.profileColors.accent || '#23393B', color: getTextColor(user.profileColors.accent || '#23393B') }"> :style="{ backgroundColor: user.colors.accent || '#23393B', color: getTextColor(user.colors.accent || '#23393B') }">
Accent1 Accent1
</v-btn> </v-btn>
<v-btn @click="openColorPicker('menu')" <v-btn @click="openColorPicker('menu')"
:style="{ backgroundColor: user.profileColors.menu || '#800080', color: getTextColor(user.profileColors.menu || '#800080') }"> :style="{ backgroundColor: user.colors.menu || '#800080', color: getTextColor(user.colors.menu || '#800080') }">
Menu Menu
</v-btn> </v-btn>
</div> </div>
@@ -51,7 +51,7 @@
</div> </div>
<div class="flex justify-center py-4"> <div class="flex justify-center py-4">
<img :src="logoImageUrl" <img :src="logoImageUrl"
:style="{ borderColor: user.profileColors.accent || '#23393B' , borderWidth: '3px', borderStyle: 'solid' }" :style="{ borderColor: user.colors.accent || '#23393B' , borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48" class="rounded-full max-w-48 max-w-48"
@error="handleProfileImageError" @error="handleProfileImageError"
alt="Profile Image"> alt="Profile Image">
@@ -145,13 +145,13 @@ const openColorPicker = (target) => {
const applyColor = () => { const applyColor = () => {
if (colorTarget.value === 'top') { if (colorTarget.value === 'top') {
props.user.profileColors.bannerTop = selectedColor.value; props.user.colors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') { } else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value; props.user.colors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') { } else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value; props.user.colors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') { } else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value; props.user.colors.menu = selectedColor.value;
} }
showColorPicker.value = false; showColorPicker.value = false;
}; };