14: Tweak styles, tweak roll template

- Adjusted styles of item buttons.
- Fixed an issue with item buttons when not using shorthand syntax.
- Updated the `roll.toMessage()` call to include the player/actor name
  and the item/attribute name.

module/actor-sheet.js

@@ -25,6 +25,7 @@ export class SimpleActorSheet extends ActorSheet {
     for ( let attr of Object.values(data.data.attributes) ) {
       attr.isCheckbox = attr.dtype === "Boolean";
     }
+    data.shorthand = !!game.settings.get("worldbuilding", "macroShorthand");
     return data;
   }
 
@@ -36,8 +37,15 @@ export class SimpleActorSheet extends ActorSheet {
 
     // Handle rollable attributes.
     html.find('.items .rollable').click(ev => {
-      let r = new Roll($(ev.currentTarget).data('roll'), this.actor.getRollData());
-      r.roll().toMessage();
+      let button = $(ev.currentTarget);
+      let r = new Roll(button.data('roll'), this.actor.getRollData());
+      const li = button.parents(".item");
+      const item = this.actor.getOwnedItem(li.data("itemId"));
+      r.roll().toMessage({
+        user: game.user._id,
+        speaker: ChatMessage.getSpeaker({ actor: this.actor }),
+        flavor: `<h2>${item.name}</h2><h3>${button.text()}</h3>`
+      });
     });
 
     // Everything below here is only needed if the sheet is editable

styles/simple.css

@@ -79,10 +79,11 @@
   overflow-y: auto;
 }
 .worldbuilding .item-list .item {
-  height: 30px;
+  min-height: 30px;
   line-height: 24px;
   padding: 3px 0;
   border-bottom: 1px solid #BBB;
+  align-items: stretch;
 }
 .worldbuilding .item-list .item img {
   flex: 0 0 24px;
@@ -94,10 +95,19 @@
 .worldbuilding .item-list .item-controls {
   flex: 0 0 36px;
 }
+.worldbuilding .item-list .item-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  flex: 2;
+  justify-content: flex-start;
+}
 .worldbuilding .item-list .item-button {
-  height: 100%;
   line-height: 1;
   font-size: 11px;
+  flex: none;
+  width: auto;
 }
 .worldbuilding .attributes-header {
   padding: 5px;

styles/simple.less

@@ -87,10 +87,11 @@
     overflow-y: auto;
 
     .item {
-      height: 30px;
+      min-height: 30px;
       line-height: 24px;
       padding: 3px 0;
       border-bottom: 1px solid #BBB;
+      align-items: stretch;
 
       img {
         flex: 0 0 24px;
@@ -106,10 +107,20 @@
       flex: 0 0 36px;
     }
 
+    .item-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      flex: 2;
+      justify-content: flex-start;
+    }
+
     .item-button {
-      height: 100%;
       line-height: 1;
       font-size: 11px;
+      flex: none;
+      width: auto;
     }
   }
 

templates/actor-sheet.html

@@ -40,11 +40,20 @@
                 <li class="item flexrow" data-item-id="{{item._id}}">
                     <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                     <h4 class="item-name">{{item.name}}</h4>
-                    {{#each item.data.attributes as |itemAttr key|}}
-                      {{#if (eq itemAttr.dtype "Formula")}}
-                        <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
-                      {{/if}}
-                    {{/each}}
+                    {{!-- Iterate through all attributes on the item and output buttons for any that are formula. --}}
+                    <div class="item-buttons">
+                      {{#each item.data.attributes as |itemAttr key|}}
+                        {{#if (eq itemAttr.dtype "Formula")}}
+                          {{!-- Use the items.name.key format for shorthand. --}}
+                          {{#if ../../shorthand}}
+                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
+                          {{!-- Use the items.name.attributes.key.value format otherwise. --}}
+                          {{else}}
+                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.attributes.{{key}}.value" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
+                          {{/if}}
+                        {{/if}}
+                      {{/each}}
+                    </div>
                     <div class="item-controls">
                         <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                         <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>