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 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 bannerTopColor = ref(props.creator.colors.bannerTop);
const bannerBottomColor = ref(props.creator.colors.bannerBottom);
const accentColor = ref(props.creator.colors.accent);
const menuColor = ref(props.creator.colors.menu);
const selectedColorName = ref(props.colorName);
const selectedColor = computed({
@@ -69,10 +69,10 @@ const save = async () => {
"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;
props.creator.colors.bannerTop = bannerTopColor.value;
props.creator.colors.bannerBottom = bannerBottomColor.value;
props.creator.colors.accent = accentColor.value;
props.creator.colors.menu = menuColor.value;
emits('closeRequested');
} catch (error) {

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

@@ -59,7 +59,7 @@ const closeDialog = () => {
<button
@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 }"
:style="{ backgroundColor: userStore.creator.colors.bannerTop }"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
@@ -76,7 +76,7 @@ const closeDialog = () => {
<button
@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 }"
:style="{ backgroundColor: userStore.creator.colors.bannerBottom }"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
@@ -85,7 +85,7 @@ 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 }"
:style="{ borderColor: userStore.creator.colors.accent }"
:src="userStore.creator.images.logo"
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-title class="text-white p-4 rounded-t"
:style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
:style="{backgroundColor: creator.colors.menu || '#A30E79'}">
Quicky
</v-card-title>

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

@@ -5,7 +5,7 @@
<div class="relative flex flex-col">
<!-- Social Network-->
<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">
<a
v-for="socialNetwork in GetSocialsUrls()"
@@ -35,7 +35,7 @@
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<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">
<!-- Profile Image Wrapper -->
<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"
:src="creator.images.logo"
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>

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

@@ -40,11 +40,11 @@ onMounted(() => {
const style = document.createElement('style');
style.innerHTML = `
.scrollable-content::-webkit-scrollbar-thumb {
background-color: ${props.creator.profileColors.menu};
background-color: ${props.creator.colors.menu};
border-radius: 10px;
}
.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);

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

@@ -1,31 +1,31 @@
<template>
<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>
<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">
<div :style="{ backgroundColor: user.profileColors.bannerBottom || '#A30E79' }" class="h-4">
<div :style="{ backgroundColor: user.colors.bannerBottom || '#A30E79' }" class="h-4">
</div>
<div>
<div class="space-x-4 flex justify-center py-2">
<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
</v-btn>
<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
</v-btn>
<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
</v-btn>
<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
</v-btn>
</div>
@@ -51,7 +51,7 @@
</div>
<div class="flex justify-center py-4">
<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"
@error="handleProfileImageError"
alt="Profile Image">
@@ -145,13 +145,13 @@ const openColorPicker = (target) => {
const applyColor = () => {
if (colorTarget.value === 'top') {
props.user.profileColors.bannerTop = selectedColor.value;
props.user.colors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value;
props.user.colors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value;
props.user.colors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
props.user.colors.menu = selectedColor.value;
}
showColorPicker.value = false;
};