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

-Added Profile.vue and his components - select color and upload pictures UI

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-28 02:08:58 -04:00
parent 411049cc6d
commit e8fac33d81
5 changed files with 196 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/main/ProfileBanner.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<div>
<div>
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: accent2Color }" >
<div class="flex justify-center text-2xl">Photo de couverture</div>
</div>
<div>
<div :style="{ backgroundColor: topColor }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" class="w-full object-cover">
<div :style="{ backgroundColor: bottomColor }" 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
</v-btn>
<v-btn @click="openColorPicker('bottom')"
:style="{ backgroundColor: bottomColor, color: getTextColor(bottomColor) }">Bas
</v-btn>
<v-btn @click="openColorPicker('accent')"
:style="{ backgroundColor: accentColor, color: getTextColor(accentColor) }">Accent1
</v-btn>
<v-btn @click="openColorPicker('accent2')"
:style="{ backgroundColor: accent2Color, color: getTextColor(accent2Color) }">Menu
</v-btn>
</div>
</div>
</div>
</div>
<div class="px-3 py-3">
<v-file-input v-model="bannerImage" label="Téléverser une nouvelle bannière"
@change="onBannerFileChange"></v-file-input>
</div>
<!-- Profile -->
<div>
<div class="border-t-4 items-center px-5 py-4">
<div class="flex justify-center text-2xl ">Photo de profil</div>
</div>
<div class="flex justify-center py-4">
<img :src="profilePictureUrl"
:style="{ borderColor: accentColor, borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48"
alt="Profile Image">
</div>
<div class="px-3">
<v-file-input v-model="profilePicture" label="Téléverser une nouvelle photo de profil"
@change="onProfileFileChange"></v-file-input>
</div>
</div>
<!-- Color Picker Dialog -->
<v-dialog v-model="showColorPicker" max-width="400px" class="d-flex justify-center align-center">
<v-card>
<v-card-title class="justify-center text-center">Choisir une couleur</v-card-title>
<v-card-text class="d-flex justify-center">
<v-color-picker v-model="selectedColor"></v-color-picker>
</v-card-text>
<v-card-actions class="justify-center">
<v-spacer></v-spacer>
<v-btn color="primary" @click="applyColor">OK</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import {ref} from 'vue';
export default {
props: {
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'
},
},
setup(props) {
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);
const bannerImage = ref(null);
const profilePicture = ref(null);
const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4');
const colorTarget = ref('');
const onBannerFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
bannerImageUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const onProfileFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
profilePictureUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const openColorPicker = (target) => {
colorTarget.value = target;
showColorPicker.value = true;
};
const applyColor = () => {
if (colorTarget.value === 'top') {
topColor.value = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
bottomColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent') {
accentColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent2') {
accent2Color.value = selectedColor.value; // Appliquer la nouvelle couleur
}
showColorPicker.value = false;
};
const getTextColor = (bgColor) => {
// Simple function to determine if the text should be white or black based on the background color
const color = bgColor.replace('#', '');
const r = parseInt(color.substr(0, 2), 16);
const g = parseInt(color.substr(2, 2), 16);
const b = parseInt(color.substr(4, 2), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 155 ? '#000' : '#fff';
};
return {
topColor,
bottomColor,
accentColor,
accent2Color,
bannerImageUrl,
profilePictureUrl,
bannerImage,
profilePicture,
showColorPicker,
selectedColor,
colorTarget,
onBannerFileChange,
onProfileFileChange,
openColorPicker,
applyColor,
getTextColor,
};
},
};
</script>