diff --git a/public/scripts/personas.js b/public/scripts/personas.js index c5a7b27cc..0ea2d5486 100644 --- a/public/scripts/personas.js +++ b/public/scripts/personas.js @@ -3,11 +3,9 @@ import { characters, chat, chat_metadata, - crop_data, default_avatar, eventSource, event_types, - getCropPopup, getRequestHeaders, getThumbnailUrl, name1, @@ -24,6 +22,7 @@ import { PAGINATION_TEMPLATE, debounce, delay, download, ensureImageFormatSuppor import { debounce_timeout } from './constants.js'; import { FILTER_TYPES, FilterHelper } from './filters.js'; import { selected_group } from './group-chats.js'; +import { POPUP_TYPE, Popup } from './popup.js'; let savePersonasPage = 0; const GRID_STORAGE_KEY = 'Personas_GridView'; @@ -278,13 +277,15 @@ async function changeUserAvatar(e) { let url = '/api/avatars/upload'; if (!power_user.never_resize_avatars) { - const confirmation = await callPopup(getCropPopup(dataUrl), 'avatarToCrop', '', { okButton: 'Crop', large: true, wide: true }); - if (!confirmation) { + const dlg = new Popup('Set the crop position of the avatar image', POPUP_TYPE.CROP, '', { cropImage: dataUrl }); + const result = await dlg.show(); + + if (!result) { return; } - if (crop_data !== undefined) { - url += `?crop=${encodeURIComponent(JSON.stringify(crop_data))}`; + if (dlg.cropData !== undefined) { + url += `?crop=${encodeURIComponent(JSON.stringify(dlg.cropData))}`; } } diff --git a/public/scripts/popup.js b/public/scripts/popup.js index cb71b380c..63ed2b936 100644 --- a/public/scripts/popup.js +++ b/public/scripts/popup.js @@ -210,7 +210,7 @@ export class Popup { autoCropArea: 1, viewMode: 2, rotatable: false, - crop: function (event) { + crop: (event) => { this.cropData = event.detail; this.cropData.want_resize = !power_user.never_resize_avatars; },