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

Remove warnings about 'defineProps', 'defineEmits' being compiler macros

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-07-24 16:36:48 -04:00
parent 5ec1078705
commit 0d94d79c77
13 changed files with 104 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<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.profileColors.menu }">
<div class="flex justify-center text-2xl">Photo de couverture</div>
</div>
<div>
@@ -61,7 +61,7 @@
ref="profileImageInput"
accept=".png, .jpeg, .jpg"
hint="png, jpeg or jpg"
v-model="profilePicture"
v-model="profilePicture"
label="Téléverser une nouvelle photo de profil"
@change="onProfileFileChange">
</v-file-input>
@@ -85,85 +85,85 @@
</template>
<script setup>
import {ref, defineProps, onMounted} from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
import {ref} from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const props = defineProps({
user: { type: MyUserModel },
});
const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
const bannerImage = ref(null);
const profilePicture = ref(null);
const props = defineProps({
user: {type: MyUserModel},
});
const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4');
const colorTarget = ref('');
const handleProfileImageError = (event) => {
event.target.src = fallbackProfilePictureUrl;
}
const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
const handleBannerImageError = (event) => {
event.target.src = fallbackBannerPictureUrl;
}
const bannerImage = ref(null);
const profilePicture = ref(null);
const onBannerFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4');
const colorTarget = ref('');
const handleProfileImageError = (event) => {
event.target.src = fallbackProfilePictureUrl;
}
const handleBannerImageError = (event) => {
event.target.src = fallbackBannerPictureUrl;
}
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);
emit('updateBannerPicture', file);
}
}
};
const onProfileFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
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);
emit('updateProfilePicture', file);
}
};
const openColorPicker = (target) => {
const openColorPicker = (target) => {
colorTarget.value = target;
showColorPicker.value = true;
};
const applyColor = () => {
const applyColor = () => {
if (colorTarget.value === 'top') {
props.user.profileColors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value;
props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value;
props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
props.user.profileColors.menu = selectedColor.value;
}
showColorPicker.value = false;
};
showColorPicker.value = false;
};
/// Simple function to determine if the text should be white or black based on the background color
const getTextColor = (bgColor) => {
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';
};
/// Simple function to determine if the text should be white or black based on the background color
const getTextColor = (bgColor) => {
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';
};
</script>