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 +8 -12
2 changed files with 8 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 825cf2ba52 - Show all commits

7
components/CropPopup.vue
View file

@ -1,15 +1,14 @@
<template>
<div id="fullscreen-container">
<div id="crop-preview">
<img ref="image" :src="imageSrc" style="min-height: 500px;">
<Button class="button" text="Crop" :callback="cropImage"></Button>
<Button class="button" text="Cancel" :callback="closePopup"></Button>
<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 { ref, watch } from 'vue';
import Cropper from 'cropperjs';
const props = defineProps({

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

@ -33,22 +33,19 @@
</template>
<script lang="ts" setup>
import Button from '~/components/Button.vue';
import CropPopup from '~/components/CropPopup.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()
if (!user) {
alert("could not fetch user info, aborting :(")
}
let newPfpFile: File;
const isCropPopupVisible = ref(false);
const cropImageSrc = ref('');
async function saveChanges() {
if (!user) return;