fix

Author: kerwin612

templates/org/settings/options.tmpl

@@ -90,7 +90,12 @@
 						{{.CsrfTokenHtml}}
 						<div class="inline field">
 							<label for="avatar">{{ctx.Locale.Tr "settings.choose_new_avatar"}}</label>
-							<input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+							<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+						</div>
+
+						<div class="field tw-pl-4 cropper-panel tw-hidden">
+							<div>{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>
+							<div class="cropper-wrapper"><img class="cropper-source" src alt></div>
 						</div>
 
 						<div class="field">

templates/repo/settings/options.tmpl

@@ -41,7 +41,11 @@
 				{{.CsrfTokenHtml}}
 				<div class="inline field">
 					<label for="avatar">{{ctx.Locale.Tr "settings.choose_new_avatar"}}</label>
-					<input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+					<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+				</div>
+				<div class="field tw-pl-4 cropper-panel tw-hidden">
+					<div>{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>
+					<div class="cropper-wrapper"><img class="cropper-source" src alt></div>
 				</div>
 				<div class="field">
 					<button class="ui primary button">{{ctx.Locale.Tr "settings.update_avatar"}}</button>

web_src/css/features/cropper.css

@@ -1,7 +1,9 @@
 @import "cropperjs/dist/cropper.css";
 
-.page-content.user.profile .cropper-panel .cropper-wrapper,
-.page-content.admin.edit.user .cropper-panel .cropper-wrapper {
+.page-content.admin.edit.user .cropper-panel .cropper-wrapper,
+.page-content.organization.settings.options .cropper-panel .cropper-wrapper,
+.page-content.repository.settings.options .cropper-panel .cropper-wrapper,
+.page-content.user.profile .cropper-panel .cropper-wrapper {
   max-width: 400px;
   max-height: 400px;
 }

web_src/js/features/common-organization.ts

@@ -1,5 +1,6 @@
 import {initCompLabelEdit} from './comp/LabelEdit.ts';
 import {toggleElem} from '../utils/dom.ts';
+import {initCompCropper} from './comp/Cropper.ts';
 
 export function initCommonOrganization() {
   if (!document.querySelectorAll('.organization').length) {
@@ -13,4 +14,12 @@ export function initCommonOrganization() {
 
   // Labels
   initCompLabelEdit('.page-content.organization.settings.labels');
+
+  // Avatar Cropper
+  if (document.querySelector<HTMLDivElement>('.organization.settings.options')) {
+    const fileInput = document.querySelector<HTMLInputElement>('#new-avatar');
+    const container = document.querySelector<HTMLElement>('.organization.settings.options .cropper-panel');
+    const imageSource = container.querySelector<HTMLImageElement>('.cropper-source');
+    initCompCropper({container, fileInput, imageSource});
+  }
 }

web_src/js/features/repo-settings.ts

@@ -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 {initCompCropper} from './comp/Cropper.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
 
 const {appSubUrl, csrfToken} = window.config;
@@ -156,4 +157,12 @@ export function initRepoSettings() {
   initRepoSettingsSearchTeamBox();
   initRepoSettingsGitHook();
   initRepoSettingsBranchesDrag();
+
+  // Avatar Cropper
+  if (document.querySelector<HTMLDivElement>('.repository.settings.options')) {
+    const fileInput = document.querySelector<HTMLInputElement>('#new-avatar');
+    const container = document.querySelector<HTMLElement>('.repository.settings.options .cropper-panel');
+    const imageSource = container.querySelector<HTMLImageElement>('.cropper-source');
+    initCompCropper({container, fileInput, imageSource});
+  }
 }