Make some small improvements to actor sheets

src/module/ds4.ts

@@ -8,6 +8,7 @@ import { DS4CreatureActorSheet } from "./actor/sheets/creature-sheet";
 import { createCheckRoll } from "./rolls/check-factory";
 import { registerSystemSettings } from "./settings";
 import { migration } from "./migrations";
+import handlebarsHelpers from "./handlebars-helpers";
 
 Hooks.once("init", async () => {
     console.log(`DS4 | Initializing the DS4 Game System\n${DS4.ASCII}`);
@@ -39,7 +40,8 @@ Hooks.once("init", async () => {
     Items.unregisterSheet("core", ItemSheet);
     Items.registerSheet("ds4", DS4ItemSheet, { makeDefault: true });
 
-    registerHandlebarsPartials();
+    await registerHandlebarsPartials();
+    registerHandlebarsHelpers();
 });
 
 async function registerHandlebarsPartials() {
@@ -65,6 +67,10 @@ async function registerHandlebarsPartials() {
     return loadTemplates(templatePaths);
 }
 
+function registerHandlebarsHelpers() {
+    Object.entries(handlebarsHelpers).forEach(([key, helper]) => Handlebars.registerHelper(key, helper));
+}
+
 /**
  * This function runs after game data has been requested and loaded from the servers, so entities exist
  */

src/module/handlebars-helpers.ts

@@ -0,0 +1,6 @@
+export default { htmlToPlainText };
+
+function htmlToPlainText(input: string | null | undefined): string | null | undefined {
+    if (!input) return;
+    return $(input).text();
+}

src/scss/components/_forms.scss

@@ -28,15 +28,16 @@ header.sheet-header {
         padding: 0px;
         margin: $header-top-margin 10px $header-top-margin 0;
         border-bottom: 0;
+        @include font-heading-upper;
+        display: block;
         input {
             width: 100%;
             height: 100%;
             margin: 0;
             border: none;
             background-color: transparent;
+            @include font-heading-upper;
         }
-        @include font-heading-upper;
-        display: block;
     }
     h2.item-type {
         @include font-heading-upper;

src/scss/components/_tabs.scss

@@ -1,10 +1,10 @@
 nav.tabs {
-    height: 40px;
+    height: auto;
     border-top: 2px groove $c-border-groove;
     border-bottom: 2px groove $c-border-groove;
 
     .item {
-        line-height: 40px;
+        // line-height: 40px;
         font-weight: bold;
     }
 

src/templates/actor/partials/items-overview.hbs

@@ -79,11 +79,12 @@
         data-dtype="Number" data-property="data.quantity" title="{{localize 'DS4.Quantity'}}" />
     {{!-- name --}}
     <input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{localize 'DS4.ItemName'}}" />
+        data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
     {{!-- item type specifics --}}
     {{> @partial-block}}
     {{!-- description --}}
-    <div class="flex4 item-description">{{{item.data.data.description}}}</div>
+    <div class="flex4 item-description" title="{{htmlToPlainText item.data.data.description}}">
+        {{{item.data.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -194,4 +195,4 @@
     {{/itemListEntry}}
     {{/each}}
 </ol>
-{{/ifHasItemOfType}}
+{{/ifHasItemOfType}}

src/templates/actor/partials/special-creature-abilities-overview.hbs

@@ -20,9 +20,10 @@
     </div>
     {{!-- name --}}
     <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{localize 'DS4.ItemName'}}">
+        data-property="name" title="{{htmlToPlainText item.data.data.description}}">
     {{!-- description --}}
-    <div class="flex3 item-description">{{{item.data.data.description}}}</div>
+    <div class="flex3 item-description" title="{{htmlToPlainText item.data.data.description}}">
+        {{{item.data.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>

src/templates/actor/partials/spells-overview.hbs

@@ -10,24 +10,25 @@
 !-- @param unitAbbrs: mapping of allowed unitDatum.unit values to unit abbreviation
 --}}
 {{#*inline "unit"}}
-<div class="unit-data-pair item-num-val"
+<div class="unit-data-pair item-num-val" title="{{localize localizationString}} [{{lookup unitNames unitDatum.unit}}]">
-    title="{{localize localizationString}} [{{lookup unitNames unitDatum.unit}}]" >
     {{#if unitDatum.value }}
     {{unitDatum.value}}&thinsp;{{lookup unitAbbrs unitDatum.unit}}
     {{else}}-{{/if}}
 </div>
 {{/inline}}
-{{!-- 
+{{!--
 !-- Two templates based on the "unit" template for displaying values with unit.
 !-- Both accept a `config` object holding the unitNames and unitAbbr instead of
 !-- directly handing over the latter two.
 --}}
 {{#*inline "temporalUnit"}}
-{{> unit unitNames=config.i18n.temporalUnits unitAbbrs=config.i18n.temporalUnitsAbbr unitDatum=unitDatum localizationString=localizationString}}
+{{> unit unitNames=config.i18n.temporalUnits unitAbbrs=config.i18n.temporalUnitsAbbr unitDatum=unitDatum
+localizationString=localizationString}}
 {{/inline}}
 
 {{#*inline "distanceUnit"}}
-{{> unit unitNames=config.i18n.distanceUnits unitAbbrs=config.i18n.distanceUnitsAbbr unitDatum=unitDatum localizationString=localizationString}}
+{{> unit unitNames=config.i18n.distanceUnits unitAbbrs=config.i18n.distanceUnitsAbbr unitDatum=unitDatum
+localizationString=localizationString}}
 {{/inline}}
 
 
@@ -38,7 +39,8 @@
     <ol class="items-list">
         <li class="item flexrow item-header">
             {{!-- equipped --}}
-            <div class="flex05 item-image" title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
+            <div class="flex05 item-image" title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}
+            </div>
             {{!-- image --}}
             <div class="flex05 item-image"></div>
             {{!-- name --}}
@@ -52,7 +54,8 @@
             {{!-- duration --}}
             <div class="item-num-val" title="{{localize 'DS4.SpellDuration'}}"><i class="far fa-clock"></i></div>
             {{!-- cooldown duration --}}
-            <div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i class="fas fa-hourglass-half"></i></div>
+            <div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i
+                    class="fas fa-hourglass-half"></i></div>
             {{!-- description --}}
             {{!-- <div class="flex3">{{localize 'DS4.Description'}}</div> --}}
             {{!-- control buttons placeholder --}}
@@ -60,29 +63,31 @@
         </li>
         {{#each itemsByType.spell as |item id|}}
         <li class="item flexrow" data-item-id="{{item._id}}">
-            <input class="flex05 item-image item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
+            <input class="flex05 item-image item-change" type="checkbox" {{checked item.data.data.equipped}}
-                    data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
+                data-dtype="Boolean" data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
             {{!-- image --}}
             <div class="flex05 item-image">
                 <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
             </div>
             {{!-- name --}}
             <input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-                data-property="name" title="{{localize 'DS4.ItemName'}}" />
+                data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
             {{!-- spell type --}}
             <div class="flex05 item-image">
                 <img src="{{lookup ../config.icons.spellTypes item.data.data.spellType}}"
                     title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}" width="24" height="24" />
             </div>
             {{!-- spell bonus --}}
-            <input class="item-num-val item-change" type="text" data-dtype="String"
+            <input class="item-num-val item-change" type="text" data-dtype="String" data-property="data.bonus"
-                data-property="data.bonus" value="{{item.data.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
+                value="{{item.data.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
             {{!-- max. distance --}}
-            {{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance config=../config}}
+            {{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance
+            config=../config}}
             {{!-- duration --}}
             {{> temporalUnit localizationString='DS4.SpellDuration' unitDatum=item.data.data.duration config=../config}}
             {{!-- cooldown duration --}}
-            {{> temporalUnit localizationString='DS4.SpellCooldownDuration' unitDatum=item.data.data.cooldownDuration config=../config}}
+            {{> temporalUnit localizationString='DS4.SpellCooldownDuration' unitDatum=item.data.data.cooldownDuration
+            config=../config}}
             {{!-- description --}}
             {{!-- <div class="flex3 item-description">{{{item.data.data.description}}}</div> --}}
             {{!-- control buttons --}}
@@ -92,4 +97,4 @@
     </ol>
     {{!-- add button --}}
     {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='spell' }}
-</div>
+</div>

src/templates/actor/partials/talents-abilities-overview.hbs

@@ -14,7 +14,7 @@
 --}}
 {{#*inline "ifHasItemOfType"}}
 {{#if (and (ne itemsArray undefined) (gt itemsArray.length 0))}}
-    {{> @partial-block}}
+{{> @partial-block}}
 {{/if}}
 {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType=dataType }}
 {{/inline}}
@@ -50,7 +50,7 @@
     </div>
     {{!-- name --}}
     <input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{localize 'DS4.ItemName'}}">
+        data-property="name" title="{{htmlToPlainText item.data.data.description}}">
     <div class="flex3 flexrow talent-ranks-equation">
         {{!-- acquired rank --}}
         {{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
@@ -65,7 +65,8 @@
         {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
     </div>
     {{!-- description --}}
-    <div class="flex4 item-description">{{{item.data.data.description}}}</div>
+    <div class="flex4 item-description" title="{{htmlToPlainText item.data.data.description}}">
+        {{{item.data.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -88,9 +89,10 @@
     </div>
     {{!-- name --}}
     <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{localize 'DS4.ItemName'}}">
+        data-property="name" title="{{htmlToPlainText item.data.data.description}}"">
     {{!-- description --}}
-    <div class="flex3 item-description">{{{item.data.data.description}}}</div>
+    <div class=" flex3 item-description" title="{{htmlToPlainText item.data.data.description}}">
+    {{{item.data.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -170,4 +172,4 @@
         {{/each}}
     </ol>
     {{/ifHasItemOfType}}
-</div>
+</div>