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

9
components/CropPopup.vue
View file

@ -1,15 +1,14 @@
<template> <template>
<div id="fullscreen-container"> <div id="fullscreen-container">
<div id="crop-preview"> <div id="crop-preview">
<img ref="image" :src="imageSrc" style="min-height: 500px;"> <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
sauceyred commented 2025-07-05 17:28:26 +00:00
Outdated
Copy link

Don't use px for min-height

Don't use px for min-height
<Button class="button" text="Crop" :callback="cropImage"></Button> <Button text="Crop" :callback="cropImage"></Button>
sauceyred commented 2025-07-05 17:24:53 +00:00
Outdated
Copy link

Button component already sets class to "button"

Button component already sets class to "button"
<Button class="button" text="Cancel" :callback="closePopup"></Button> <Button text="Cancel" :callback="closePopup"></Button>
sauceyred commented 2025-07-05 17:24:56 +00:00
Outdated
Copy link

Button component already sets class to "button"

Button component already sets class to "button"
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue';
import Cropper from 'cropperjs'; import Cropper from 'cropperjs';
const props = defineProps({ const props = defineProps({
@ -82,7 +81,7 @@ function closePopup() {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 10; z-index: 10;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
} }
#crop-preview { #crop-preview {

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

@ -33,22 +33,19 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Button from '~/components/Button.vue';
import CropPopup from '~/components/CropPopup.vue';
import type { UserResponse } from '~/types/interfaces'; import type { UserResponse } from '~/types/interfaces';
sauceyred commented 2025-07-05 17:27:09 +00:00
Outdated
Copy link

Not needed

Not needed
let newPfpFile: File;
const isCropPopupVisible = ref(false);
const cropImageSrc = ref("")
;
const { fetchUser } = useAuth(); const { fetchUser } = useAuth();
const user: UserResponse | undefined = await fetchUser() const user: UserResponse | undefined = await fetchUser()
if (!user) { if (!user) {
alert("could not fetch user info, aborting :(") alert("could not fetch user info, aborting :(")
} }
let newPfpFile: File;
const isCropPopupVisible = ref(false);
const cropImageSrc = ref('');
async function saveChanges() { async function saveChanges() {
if (!user) return; if (!user) return;
sauceyred commented 2025-07-05 17:27:25 +00:00
Outdated
Copy link

Use double quotes

Use double quotes