gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

pfp cropping #12

Merged
justtemmie merged 11 commits from pfp-cropping into main 2025-07-05 17:34:28 +00:00
Conversation 3 Commits 11 Files changed 7 +237 -20
7 changed files with 237 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

93
components/CropPopup.vue Normal file
View file

@ -0,0 +1,93 @@
<template>
<div id="fullscreen-container">
<div id="crop-preview">
<img ref="image" :src="imageSrc" style="min-height: 35dvh;">
<Button text="Crop" :callback="cropImage"></Button>
<Button text="Cancel" :callback="closePopup"></Button>
</div>
</div>
</template>
<script lang="ts" setup>
import Cropper from 'cropperjs';
const props = defineProps({
imageSrc: String,
onCrop: Function,
onClose: Function,
});
const image = ref<HTMLImageElement | null>(null);
const cropper = ref<Cropper | null>(null);
watch(image, (newValue) => {
if (newValue) {
cropper.value = new Cropper(newValue)
const cropperCanvas = cropper.value.getCropperCanvas()
const cropperSelection = cropper.value.getCropperSelection()
if (cropperCanvas) {
cropperCanvas.background = false
}
if (cropperSelection) {
cropperSelection.precise = true
cropperSelection.aspectRatio = 1
cropperSelection.initialCoverage = 1
}
}
});
async function cropImage() {
if (cropper) {
const selection = cropper.value?.getCropperSelection();
if (selection) {
const canvas = await selection.$toCanvas({width: 256, height: 256})
canvas.toBlob((blob) => {
if (blob && props.onCrop) {
const reader = new FileReader();
reader.addEventListener("load", () => {
if (reader.result && typeof reader.result === 'string') {
if (props.onCrop) {
props.onCrop(blob, reader.result)
}
}
});
const file = new File([blob], 'preview.png', { type: 'image/png' })
reader.readAsDataURL(file)
}
});
}
}
}
function closePopup() {
if (props.onClose) {
props.onClose();
}
}
</script>
<style scoped>
.button {
margin: 0.2em
}
#fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
}
#crop-preview {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

7
components/MemberEntry.vue
View file

@ -3,7 +3,7 @@
<img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
<Icon v-else class="member-avatar" name="lucide:user" />
<span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
<UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
</div>
</template>
@ -32,9 +32,4 @@ const hidePopup = () => {
.member-item {
position: relative; /* Set the position to relative for absolute positioning of the popup */
}
.profile-popup {
position: absolute; /* Use absolute positioning */
left: -100px; /* Adjust this value to position the popup to the left */
}
</style>

4
components/Settings/UserSettings/Account.vue
View file

@ -93,8 +93,4 @@ async function deleteAccount() {
color: var(--text-color);
background-color: var(--accent-color);
}
.profile-popup {
margin-left: 2dvw;
}
</style>

40
components/Settings/UserSettings/Profile.vue
View file

@ -20,15 +20,25 @@
<Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
</div>
<UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
<UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
</div>
</div>
<CropPopup
v-if="isCropPopupVisible"
:imageSrc="cropImageSrc"
:onCrop="handleCrop"
:onClose="closeCropPopup"
/>
</template>
<script lang="ts" setup>
import Button from '~/components/Button.vue';
import type { UserResponse } from '~/types/interfaces';
let newPfpFile: File;
const isCropPopupVisible = ref(false);
const cropImageSrc = ref("")
;
const { fetchUser } = useAuth();
const user: UserResponse | undefined = await fetchUser()
@ -36,8 +46,6 @@ if (!user) {
alert("could not fetch user info, aborting :(")
}
let newPfpFile: File;
async function saveChanges() {
if (!user) return;
@ -64,7 +72,7 @@ async function saveChanges() {
alert('success!!')
} catch (error: any) {
if (error?.response?.status !== 200) {
alert(`error ${error?.response?.status} met whilst trying to update profile info`)
alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
}
}
};
@ -87,12 +95,11 @@ async function changeAvatar() {
const file = input.files[0];
if (!file) return;
newPfpFile = file
const reader = new FileReader();
reader.addEventListener("onload", () => {
reader.addEventListener("load", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
cropImageSrc.value = reader.result;
isCropPopupVisible.value = true;
}
});
reader.readAsDataURL(file);
@ -101,6 +108,19 @@ async function changeAvatar() {
input.click()
}
function handleCrop(blob: Blob, url: string) {
if (!user) return;
user.avatar = url;
newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
closeCropPopup()
}
function closeCropPopup() {
isCropPopupVisible.value = false
}
</script>
<style scoped>
@ -132,7 +152,7 @@ async function changeAvatar() {
background-color: var(--accent-color);
}
.profile-popup {
#profile-popup {
margin-left: 2dvw;
}
</style>

2
components/UserPopup.vue
View file

@ -59,12 +59,14 @@ const props = defineProps<{
width: 96px;
height: 96px;
border: 5px solid #4b3018;
background-color: var(--secondary-color);
border-radius: 100%;
position: absolute;
left: 16px;
top: 16px;
}
#display-name {
margin-top: 60px;
margin-bottom: 0;

1
package.json
View file

@ -14,6 +14,7 @@
"@nuxt/icon": "1.13.0",
"@nuxt/image": "1.10.0",
"@pinia/nuxt": "0.11.0",
"cropperjs": "^2.0.0",
"dompurify": "^3.2.6",
"marked": "^15.0.12",
"nuxt": "^3.17.0",

110
pnpm-lock.yaml generated
View file

@ -20,6 +20,9 @@ importers:
'@pinia/nuxt':
specifier: 0.11.0
version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
cropperjs:
specifier: ^2.0.0
version: 2.0.0
dompurify:
specifier: ^3.2.6
version: 3.2.6
@ -205,6 +208,39 @@ packages:
resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
engines: {node: '>=0.1.90'}
'@cropper/element-canvas@2.0.0':
resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
'@cropper/element-crosshair@2.0.0':
resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
'@cropper/element-grid@2.0.0':
resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
'@cropper/element-handle@2.0.0':
resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
'@cropper/element-image@2.0.0':
resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
'@cropper/element-selection@2.0.0':
resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
'@cropper/element-shade@2.0.0':
resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
'@cropper/element-viewer@2.0.0':
resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
'@cropper/element@2.0.0':
resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
'@cropper/elements@2.0.0':
resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
'@cropper/utils@2.0.0':
resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
'@dabh/diagnostics@2.0.3':
resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
@ -1900,6 +1936,9 @@ packages:
resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
engines: {node: '>=18.0'}
cropperjs@2.0.0:
resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
@ -4965,6 +5004,72 @@ snapshots:
'@colors/colors@1.6.0': {}
'@cropper/element-canvas@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-crosshair@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-grid@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-handle@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-image@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-selection@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-shade@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-viewer@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element@2.0.0':
dependencies:
'@cropper/utils': 2.0.0
'@cropper/elements@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-crosshair': 2.0.0
'@cropper/element-grid': 2.0.0
'@cropper/element-handle': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/element-shade': 2.0.0
'@cropper/element-viewer': 2.0.0
'@cropper/utils@2.0.0': {}
'@dabh/diagnostics@2.0.3':
dependencies:
colorspace: 1.1.4
@ -6895,6 +7000,11 @@ snapshots:
croner@9.0.0: {}
cropperjs@2.0.0:
dependencies:
'@cropper/elements': 2.0.0
'@cropper/utils': 2.0.0
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1