nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add cropping support when modifying the user/org/repo avatar (#33498)

Browse source 
Fixed #33321

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant 2025-02-06 21:07:44 +08:00 • committed by GitHub
parent 943cc4f989
commit 40426addfa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 35 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web_src/css/features/cropper.css
View file

@ -1,6 +1,6 @@
@import "cropperjs/dist/cropper.css";
.page-content.user.profile .cropper-panel .cropper-wrapper {
.avatar-file-with-cropper + .cropper-panel .cropper-wrapper {
max-width: 400px;
max-height: 400px;
}

5
web_src/js/features/admin/common.ts
View file

@ -1,7 +1,8 @@
import $ from 'jquery';
import {checkAppUrl} from '../common-page.ts';
import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
import {POST} from '../../modules/fetch.ts';
import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts';
const {appSubUrl} = window.config;
@ -258,4 +259,6 @@ export function initAdminCommon(): void {
window.location.href = this.getAttribute('data-redirect');
});
}
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
}

5
web_src/js/features/common-organization.ts
View file

@ -1,5 +1,6 @@
import {initCompLabelEdit} from './comp/LabelEdit.ts';
import {toggleElem} from '../utils/dom.ts';
import {queryElems, toggleElem} from '../utils/dom.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
export function initCommonOrganization() {
if (!document.querySelectorAll('.organization').length) {
@ -13,4 +14,6 @@ export function initCommonOrganization() {
// Labels
initCompLabelEdit('.page-content.organization.settings.labels');
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
}

9
web_src/js/features/comp/Cropper.ts
View file

@ -6,7 +6,7 @@ type CropperOpts = {
fileInput: HTMLInputElement,
}
export async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
let currentFileName = '';
let currentFileLastModified = 0;
@ -38,3 +38,10 @@ export async function initCompCropper({container, fileInput, imageSource}: Cropp
}
});
}
export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
const panel = fileInput.nextElementSibling as HTMLElement;
if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
await initCompCropper({container: panel, fileInput, imageSource});
}

3
web_src/js/features/repo-settings.ts
View file

@ -3,6 +3,7 @@ import {minimatch} from 'minimatch';
import {createMonaco} from './codeeditor.ts';
import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
const {appSubUrl, csrfToken} = window.config;
@ -156,4 +157,6 @@ export function initRepoSettings() {
initRepoSettingsSearchTeamBox();
initRepoSettingsGitHook();
initRepoSettingsBranchesDrag();
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
}

13
web_src/js/features/user-settings.ts
View file

@ -1,17 +1,10 @@
import {hideElem, showElem} from '../utils/dom.ts';
import {initCompCropper} from './comp/Cropper.ts';
function initUserSettingsAvatarCropper() {
const fileInput = document.querySelector<HTMLInputElement>('#new-avatar');
const container = document.querySelector<HTMLElement>('.user.settings.profile .cropper-panel');
const imageSource = container.querySelector<HTMLImageElement>('.cropper-source');
initCompCropper({container, fileInput, imageSource});
}
import {hideElem, queryElems, showElem} from '../utils/dom.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
export function initUserSettings() {
if (!document.querySelector('.user.settings.profile')) return;
initUserSettingsAvatarCropper();
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
const usernameInput = document.querySelector<HTMLInputElement>('#username');
if (!usernameInput) return;