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

pfp cropping #12

Merged
twig 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
twig commented 2025-07-04 08:13:49 +00:00
Owner
Copy link

image cropping!!!!

this does use an npm module, cropperjs, but i think it's an alright import for what it does.

this does NOT support animated pngs, or gifs, due to a library limitation.

it also converts every image you upload into a png on the fly, so technically you can upload webp and svg files now.

image cropping!!!! this does use an npm module, cropperjs, but i think it's an alright import for what it does. this does NOT support animated pngs, or gifs, due to a library limitation. it also converts every image you upload into a png on the fly, so technically you can upload webp and svg files now.
twig added the
Kind/Feature
 label 2025-07-04 08:13:49 +00:00
sauceyred was assigned by twig 2025-07-04 08:13:49 +00:00
twig added 8 commits 2025-07-04 08:13:49 +00:00
feat: display proper error messages when the client fails to update profile info
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
3c5525d294
feat: start implementing image cropping when uploading pfp
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
3c4965c06f 
still need to fix the selection to within the canvas boundries, and fix theming
not sure why i can't resize it though, will probably just "click" later
feat: ensure there's a background colour for the user popup's avatar
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
181fcd04db
refactor: move stuff from profile to within the crop popup itself
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
d9c6faa6ab
refactor: move yet more stuff into the popup component
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
33dbcb5861
twig added 1 commit 2025-07-04 08:17:31 +00:00
fix: minor polish
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
e9717b137e
sauceyred was unassigned by twig 2025-07-05 17:20:54 +00:00
requested review from sauceyred 2025-07-05 17:20:59 +00:00
sauceyred requested changes 2025-07-05 17:28:02 +00:00
Dismissed
components/CropPopup.vue Outdated
@ -0,0 +2,4 @@
<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>
sauceyred commented 2025-07-05 17:24:53 +00:00
Owner
Copy link

Button component already sets class to "button"

Button component already sets class to "button"
components/CropPopup.vue Outdated
@ -0,0 +3,4 @@
<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>
sauceyred commented 2025-07-05 17:24:56 +00:00
Owner
Copy link

Button component already sets class to "button"

Button component already sets class to "button"
components/Settings/UserSettings/Profile.vue Outdated
@ -27,3 +34,4 @@
<script lang="ts" setup>
import Button from '~/components/Button.vue';
import CropPopup from '~/components/CropPopup.vue';
sauceyred commented 2025-07-05 17:27:09 +00:00
Owner
Copy link

Not needed

Not needed
components/Settings/UserSettings/Profile.vue Outdated
@ -38,2 +47,4 @@
let newPfpFile: File;
const isCropPopupVisible = ref(false);
const cropImageSrc = ref('');
sauceyred commented 2025-07-05 17:27:25 +00:00
Owner
Copy link

Use double quotes

Use double quotes
sauceyred reviewed 2025-07-05 17:28:26 +00:00
components/CropPopup.vue Outdated
@ -0,0 +1,94 @@
<template>
<div id="fullscreen-container">
<div id="crop-preview">
<img ref="image" :src="imageSrc" style="min-height: 500px;">
sauceyred commented 2025-07-05 17:28:26 +00:00
Owner
Copy link

Don't use px for min-height

Don't use px for min-height
twig added 2 commits 2025-07-05 17:32:43 +00:00
fix: minor changes to fix review
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
Details
825cf2ba52
requested review from sauceyred 2025-07-05 17:32:44 +00:00
sauceyred approved these changes 2025-07-05 17:34:16 +00:00
sauceyred left a comment
Owner
Copy link

Looks good. Approved for merge.

Looks good. Approved for merge.
twig merged commit 519a5555a9 into main 2025-07-05 17:34:28 +00:00
twig deleted branch pfp-cropping 2025-07-05 17:34:28 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
sauceyred
Labels
Clear labels   
Compat/Breaking

Breaking change that won't be backward compatible

  
Kind/Bug

Something is not working

  
Kind/Documentation

Documentation changes

  
Kind/Enhancement

Improve existing functionality

  
Kind/Feature

New functionality

  
Kind/Security

This is security issue

  
Kind/Testing

Issue or pull request related to testing

  
Priority
Critical
The priority is critical

  
Priority
High
The priority is high

  
Priority
Low
The priority is low

  
Priority
Medium
The priority is medium

  
Reviewed
Confirmed
Issue has been confirmed

  
Reviewed
Duplicate
This issue or pull request already exists

  
Reviewed
Invalid
Invalid issue

  
Reviewed
Won't Fix
This issue won't be fixed

  
Status
Abandoned
Somebody has started to work on this but abandoned work

  
Status
Blocked
Something is blocking this issue or pull request

  
Status
Need More Info
Feedback is required to reproduce issue or to continue work

  
WIP

Not yet ready

No labels
Compat/Breaking
Kind/Bug
Kind/Documentation
Kind/Enhancement
Kind/Feature
Kind/Security
Kind/Testing
Priority
Critical
Priority
High
Priority
Low
Priority
Medium
Reviewed
Confirmed
Reviewed
Duplicate
Reviewed
Invalid
Reviewed
Won't Fix
Status
Abandoned
Status
Blocked
Status
Need More Info
WIP
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: gorb/frontend#12
No description provided.
Delete branch "pfp-cropping"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?