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

Colors + profile mapping + socialNetworks urls. Missing images

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-30 15:47:43 -04:00
parent 3ce1c0013a
commit 169e2cc160
11 changed files with 119 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,28 +1,28 @@
<template>
<div>
<div>
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: accent2Color }" >
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }" >
<div class="flex justify-center text-2xl">Photo de couverture</div>
</div>
<div>
<div :style="{ backgroundColor: topColor }" class="flex h-4"></div>
<div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" class="w-full object-cover">
<div :style="{ backgroundColor: bottomColor }" class="h-4">
<div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4">
</div>
<div>
<div class="space-x-4 flex justify-center py-2">
<v-btn @click="openColorPicker('top')"
:style="{ backgroundColor: topColor, color: getTextColor(topColor) }">Haut
:style="{ backgroundColor: user.profileColors.bannerTop, color: getTextColor(user.profileColors.bannerTop) }">Haut
</v-btn>
<v-btn @click="openColorPicker('bottom')"
:style="{ backgroundColor: bottomColor, color: getTextColor(bottomColor) }">Bas
:style="{ backgroundColor: user.profileColors.bannerBottom, color: getTextColor(user.profileColors.bannerBottom) }">Bas
</v-btn>
<v-btn @click="openColorPicker('accent')"
:style="{ backgroundColor: accentColor, color: getTextColor(accentColor) }">Accent1
:style="{ backgroundColor: user.profileColors.accent, color: getTextColor(user.profileColors.accent) }">Accent1
</v-btn>
<v-btn @click="openColorPicker('accent2')"
:style="{ backgroundColor: accent2Color, color: getTextColor(accent2Color) }">Menu
<v-btn @click="openColorPicker('menu')"
:style="{ backgroundColor: user.profileColors.menu, color: getTextColor(user.profileColors.menu) }">Menu
</v-btn>
</div>
</div>
@@ -41,7 +41,7 @@
</div>
<div class="flex justify-center py-4">
<img :src="profilePictureUrl"
:style="{ borderColor: accentColor, borderWidth: '3px', borderStyle: 'solid' }"
:style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48"
alt="Profile Image">
</div>
@@ -72,20 +72,11 @@
import MyUserModel from "@/models/myUserModel.js";
const props = defineProps({
initialTopColor: { type: String, default: '#6B0065' },
initialBottomColor: { type: String, default: '#A30E79' },
initialAccentColor: { type: String, default: '#282286' },
initialAccent2Color: { type: String, default: '#A526B6' },
initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' },
initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' },
user: { type: MyUserModel },
});
const topColor = ref(props.initialTopColor);
const bottomColor = ref(props.initialBottomColor);
const accentColor = ref(props.initialAccentColor);
const accent2Color = ref(props.initialAccent2Color);
const bannerImageUrl = ref(props.initialBannerImageUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl);
@@ -125,13 +116,13 @@
const applyColor = () => {
if (colorTarget.value === 'top') {
topColor.value = selectedColor.value;
props.user.profileColors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
bottomColor.value = selectedColor.value;
props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
accentColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent2') {
accent2Color.value = selectedColor.value;
props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
}
showColorPicker.value = false;
};