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

Added images

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-30 23:39:56 -04:00
parent 169e2cc160
commit 5f54b69e00
7 changed files with 160 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
</div>
<div>
<div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" class="w-full object-cover">
<img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover">
<div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4">
</div>
@@ -30,8 +30,12 @@
</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>
<v-file-input
ref="bannerImageInput"
v-model="bannerImage"
label="Téléverser une nouvelle bannière"
@change="onBannerFileChange">
</v-file-input>
</div>
<!-- Profile -->
@@ -43,11 +47,16 @@
<img :src="profilePictureUrl"
:style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48"
@error="handleProfileImageError"
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>
<v-file-input
ref="profileImageInput"
v-model="profilePicture"
label="Téléverser une nouvelle photo de profil"
@change="onProfileFileChange">
</v-file-input>
</div>
</div>
@@ -68,17 +77,19 @@
</template>
<script setup>
import { ref, defineProps } from 'vue';
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';
const props = defineProps({
initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' },
initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' },
user: { type: MyUserModel },
});
user: { type: MyUserModel },
});
const bannerImageUrl = ref(props.initialBannerImageUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl);
const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
const bannerImage = ref(null);
const profilePicture = ref(null);
@@ -86,27 +97,38 @@
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);
}
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) => {
profilePictureUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
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) => {
@@ -117,23 +139,23 @@
const applyColor = () => {
if (colorTarget.value === 'top') {
props.user.profileColors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
}
showColorPicker.value = false;
};
} else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
}
showColorPicker.value = false;
};
/// Simple function to determine if the text should be white or black based on the background color
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';
};
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>