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

32
components/CropPopup.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="crop-popup"> <div id="fullscreen-container">
<img ref="image" :src="imageSrc" style="min-height: 500px;"> <div id="crop-preview">
<Button text="Crop" :callback="cropImage"></Button> <img ref="image" :src="imageSrc" style="min-height: 500px;">
<Button text="Cancel" :callback="closePopup"></Button> <Button class="button" text="Crop" :callback="cropImage"></Button>
<Button class="button" text="Cancel" :callback="closePopup"></Button>
</div>
</div> </div>
</template> </template>
@ -60,12 +62,24 @@ function closePopup() {
</script> </script>
<style scoped> <style scoped>
.crop-popup, #image-preview{ .button {
min-width: 20dvw; margin: 0.2em
min-height: 20dvh;
} }
cropper-canvas { #fullscreen-container {
min-height: 500px; 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> </style>

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

@ -24,14 +24,12 @@
</div> </div>
</div> </div>
<div v-if="isCropPopupVisible" id="crop-popup-container"> <CropPopup
<CropPopup v-if="isCropPopupVisible"
:imageSrc="cropImageSrc" :imageSrc="cropImageSrc"
:onCrop="handleCrop" :onCrop="handleCrop"
:onClose="closeCropPopup" :onClose="closeCropPopup"
id="crop-popup-preview" />
/>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -168,21 +166,4 @@ function closeCropPopup() {
#profile-popup { #profile-popup {
margin-left: 2dvw; margin-left: 2dvw;
} }
#crop-popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0,0,0,0.5);
}
#crop-popup-preview {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style> </style>