Foundry/taf
1
0
Fork 0
Code Issues 13 Pull requests Releases 9 Wiki Activity Actions

Get the basic listing of attributes for the tab

Browse source
This commit is contained in:
Oliver 2026-04-25 15:31:24 -06:00
parent c2b2376699
commit 7b127069b7
6 changed files with 95 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

18
module/apps/PlayerSheet.mjs
View file

@ -98,6 +98,7 @@ export class PlayerSheet extends
* they occur.
*/
#expandedItems = new Set();
#collapsedAttributeGroups = new Set();
/**
* This method is used in order to ensure that when we hide specific
@ -309,6 +310,23 @@ export class PlayerSheet extends
async _prepareAttributesTab(ctx) {
ctx.tabActive = this.tabGroups.primary === `attributes`;
const groups = new Map();
const attrs = this.actor.itemTypes.attribute ?? [];
for (const attr of attrs) {
const groupName = attr.system.group ?? "Attributes";
if (!groups.has(groupName)) {
groups.set(groupName, {
name: groupName.titleCase(),
attrs: [],
collapsed: false,
});
};
const group = groups.get(groupName);
group.attrs.push(attr);
};
ctx.attrGroups = [...groups.values()];
};
async _prepareTabList(ctx) {

47
styles/Apps/PlayerSheet.css
View file

@ -37,7 +37,8 @@
}
}
.items-tab.active {
.items-tab.active,
.attributes-tab.active {
display: flex;
flex-direction: column;
gap: 8px;
@ -67,7 +68,7 @@
}
}
.item-list-header {
.embedded-list-header {
display: flex;
flex-direction: row;
align-items: center;
@ -75,8 +76,8 @@
border-radius: 6px 6px 0 0;
padding: 6px 6px 4px;
margin-bottom: 2px;
background: var(--item-list-header-background);
color: var(--item-list-header-colour);
background: var(--embedded-list-header-background);
color: var(--embedded-list-header-colour);
button {
padding: 2px;
@ -84,12 +85,12 @@
aspect-ratio: 1;
height: unset;
min-height: unset;
background: var(--item-list-header-input-background);
color: var(--item-list-header-input-colour);
background: var(--embedded-list-header-input-background);
color: var(--embedded-list-header-input-colour);
}
}
.item-list {
.embedded-list {
display: flex;
flex-direction: column;
gap: 2px;
@ -172,6 +173,38 @@
}
}
.attribute {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: var(--attribute-background);
color: var(--attribute-colour);
padding: 4px;
.name {
font-size: 1.1rem;
}
input {
width: 50px;
}
input, button {
background: var(--item-card-header-input-background);
color: var(--item-card-header-input-colour);
text-align: center;
&:disabled {
color: var(--item-card-header-disabled-input-colour);
}
}
&:last-child {
border-radius: 0 0 6px 6px;
}
}
.content {
flex-grow: 1;
overflow: hidden;

14
styles/themes/dark.css
View file

@ -19,10 +19,16 @@
--inventory-input-colour: var(--steel-100);
--inventory-input-disabled-colour: var(--steel-350);
--item-list-header-background: var(--steel-800);
--item-list-header-colour: var(--steel-100);
--item-list-header-input-background: var(--steel-650);
--item-list-header-input-colour: var(--steel-100);
--embedded-list-header-background: var(--steel-800);
--embedded-list-header-colour: var(--steel-100);
--embedded-list-header-input-background: var(--steel-650);
--embedded-list-header-input-colour: var(--steel-100);
--attribute-background: var(--steel-700);
--attribute-colour: var(--steel-100);
--attribute-input-background: var(--steel-650);
--attribute-input-colour: var(--steel-100);
--attribute-disabled-input-colour: var(--steel-350);
--item-card-background: #1d262f;
--item-card-colour: var(--steel-100);

16
templates/PlayerSheet/tabs/attributes/attribute.hbs
View file

@ -1,10 +1,16 @@
<li
class="item"
class="attribute"
data-item-uuid="{{uuid}}"
>
<div class="summary">
<div class="title">
<span class="name">{{ name }}</span>
</div>
<div class="title grow">
<span class="name">{{ name }}</span>
</div>
<input
type="number"
id="{{uuid}}-value"
data-foreign-name="system.value"
value="{{ system.value }}"
min="{{ system.min }}"
max="{{ system.max }}"
>
</li>

15
templates/PlayerSheet/tabs/attributes/lists.hbs
View file

@ -3,5 +3,18 @@
data-group="primary"
data-tab="attributes"
>
Attribute Tab
{{#each attrGroups as |group|}}
<section>
<div class="embedded-list-header">
<h3 class="grow">
{{ group.name }}
</h3>
</div>
<ul class="embedded-list">
{{#each group.attrs as |attr|}}
{{> (systemFilePath "templates/PlayerSheet/tabs/attributes/attribute.hbs") attr }}
{{/each}}
</ul>
</section>
{{/each}}
</div>

4
templates/PlayerSheet/tabs/items/lists.hbs
View file

@ -38,7 +38,7 @@
</section>
{{#each itemGroups as | group |}}
<section>
<div class="item-list-header">
<div class="embedded-list-header">
{{#if @root.meta.editable}}
<button
data-action="createEmbeddedItem"
@ -59,7 +59,7 @@
{{ group.weight }}
</span>
</div>
<ul class="item-list">
<ul class="embedded-list">
{{#each group.items as |item|}}
{{> (systemFilePath "templates/PlayerSheet/tabs/items/item.hbs") item }}
{{/each}}