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:
parent
07426484bd
commit
ed694372d5
@ -55,6 +55,7 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor
|
|||||||
closeOnSubmit: false,
|
closeOnSubmit: false,
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
editImage: VagabondActorSheet.#onEditImage,
|
||||||
rollSkill: VagabondActorSheet.#onRollSkill,
|
rollSkill: VagabondActorSheet.#onRollSkill,
|
||||||
rollSave: VagabondActorSheet.#onRollSave,
|
rollSave: VagabondActorSheet.#onRollSave,
|
||||||
rollAttack: VagabondActorSheet.#onRollAttack,
|
rollAttack: VagabondActorSheet.#onRollAttack,
|
||||||
@ -858,4 +859,24 @@ export default class VagabondActorSheet extends HandlebarsApplicationMixin(Actor
|
|||||||
|
|
||||||
await item.delete();
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
transition: opacity $transition-fast;
|
transition: opacity $transition-fast;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.85;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2173,9 +2173,12 @@
|
|||||||
border: 2px solid var(--color-border);
|
border: 2px solid var(--color-border);
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color $transition-fast;
|
transition:
|
||||||
|
border-color $transition-fast,
|
||||||
|
opacity $transition-fast;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
border-color: var(--color-accent-primary);
|
border-color: var(--color-accent-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<header class="sheet-header">
|
<header class="sheet-header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<img class="profile-img" src="{{actor.img}}" alt="{{actor.name}}"
|
<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>
|
||||||
|
|
||||||
<div class="header-center">
|
<div class="header-center">
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<header class="sheet-header npc-header">
|
<header class="sheet-header npc-header">
|
||||||
<div class="header-portrait">
|
<div class="header-portrait">
|
||||||
<img class="profile-img" src="{{actor.img}}" alt="{{actor.name}}"
|
<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>
|
||||||
|
|
||||||
<div class="header-info">
|
<div class="header-info">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user