Add clickable profile image to change actor portrait

- Update templates to use data-action="editImage" (v13 style)
- Add custom #onEditImage handler using FilePicker API
- Add hover effect and cursor:pointer to profile images

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2025-12-22 15:01:27 -06:00
parent 07426484bd
commit ed694372d5
4 changed files with 28 additions and 4 deletions

View File

@ -55,6 +55,7 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor
closeOnSubmit: false,
},
actions: {
editImage: VagabondActorSheet.#onEditImage,
rollSkill: VagabondActorSheet.#onRollSkill,
rollSave: VagabondActorSheet.#onRollSave,
rollAttack: VagabondActorSheet.#onRollAttack,
@ -858,4 +859,24 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor
await item.delete();
}
/**
* Handle image editing via FilePicker.
* @param {PointerEvent} event
* @param {HTMLElement} target
*/
static async #onEditImage(event, target) {
event.preventDefault();
const field = target.dataset.field || "img";
const current = foundry.utils.getProperty(this.document, field);
const fp = new FilePicker({
type: "image",
current,
callback: async (path) => {
await this.document.update({ [field]: path });
},
});
fp.render(true);
}
}

View File

@ -32,7 +32,7 @@
transition: opacity $transition-fast;
&:hover {
opacity: 0.85;
opacity: 0.8;
}
}
}
@ -2173,9 +2173,12 @@
border: 2px solid var(--color-border);
border-radius: $radius-md;
cursor: pointer;
transition: border-color $transition-fast;
transition:
border-color $transition-fast,
opacity $transition-fast;
&:hover {
opacity: 0.8;
border-color: var(--color-accent-primary);
}
}

View File

@ -3,7 +3,7 @@
<header class="sheet-header">
<div class="header-left">
<img class="profile-img" src="{{actor.img}}" alt="{{actor.name}}"
data-edit="img" data-tooltip="VAGABOND.ChangePortrait" />
data-action="editImage" data-field="img" data-tooltip="VAGABOND.ChangePortrait" />
</div>
<div class="header-center">

View File

@ -3,7 +3,7 @@
<header class="sheet-header npc-header">
<div class="header-portrait">
<img class="profile-img" src="{{actor.img}}" alt="{{actor.name}}"
data-edit="img" data-tooltip="VAGABOND.ChangePortrait" />
data-action="editImage" data-field="img" data-tooltip="VAGABOND.ChangePortrait" />
</div>
<div class="header-info">