WIP: Reworked collapsible item titles

src/lang/en.json

@@ -155,6 +155,7 @@
     "OSE.armor.unarmored": "Unarmored",
     "OSE.armor.light": "Light",
     "OSE.armor.heavy": "Heavy",
+    "OSE.armor.shield": "Shield",
     
     "OSE.spells.Memorized": "Memorized",
     "OSE.spells.Cast": "Cast",

src/module/actor/character-sheet.js

@@ -162,11 +162,17 @@ export class OseActorSheetCharacter extends OseActorSheet {
       $(event.currentTarget.parentElement.parentElement).slideUp(200);
     })
 
-    html.find(".inventory .item-titles").click(ev => {
-      let items = $(event.currentTarget.parentElement).children('.item-list');
+    html.find(".inventory .item-titles .item-caret").click(ev => {
+      let items = $(event.currentTarget.parentElement.parentElement).children('.item-list');
       if (items.css('display') == "none") {
+        let el = $(event.currentTarget).find('.fas.fa-caret-right');
+        el.removeClass('fa-caret-right');
+        el.addClass('fa-caret-down');
         items.slideDown(200);
       } else {
+        let el = $(event.currentTarget).find('.fas.fa-caret-down');
+        el.removeClass('fa-caret-down');
+        el.addClass('fa-caret-right');
         items.slideUp(200);
       }
     })

src/module/actor/entity.js

@@ -290,7 +290,7 @@ export class OseActor extends Actor {
       },
     };
     let skip = options.event && options.event.ctrlKey;
-
+    
     // Roll and return
     return OseDice.Roll({
       event: options.event,

src/module/config.js

@@ -25,5 +25,6 @@ export const OSE = {
     unarmored: "OSE.armor.unarmored",
     light: "OSE.armor.light",
     heavy: "OSE.armor.heavy",
+    shield: "OSE.armor.shield",
   }
 };

src/scss/actor-base.scss

@@ -192,7 +192,6 @@
         line-height: 30px;
       }
       .item-titles {
-        cursor: pointer;
         text-align: center;
         padding: 4px 0;
         border: 1px solid $colorDark;
@@ -294,6 +293,11 @@
           }
         }
       }
+      .item-caret {
+        flex: 0 0 10px;
+        margin: 0 4px;
+        cursor: pointer;
+      }
       .item-controls {
         font-size: 12px;
         flex-basis: 50px;
@@ -306,7 +310,7 @@
       }
       &.spells {
         .item-titles {
-          padding: 0;
+          line-height: 24px;
         }
         .item-controls {
           flex-basis: 30px;

src/templates/actors/partials/character-inventory-tab.html

@@ -1,6 +1,7 @@
 <section class="inventory resizable" data-base-size="310">
   <div>
     <li class="item-titles flexrow">
+      <div class="item-caret"><i class="fas fa-caret-down"></i></div>
       <div class="item-name">{{localize "OSE.items.Weapons"}}</div>
       <div class="field-longer">{{localize "OSE.items.Qualities"}}</div>
       <div class="field-short"><i class="fas fa-weight-hanging"></i></div>
@@ -44,6 +45,7 @@
   </div>
   <div>
     <li class="item-titles flexrow">
+      <div class="item-caret"><i class="fas fa-caret-down"></i></div>
       <div class="item-name">{{localize "OSE.items.Armors"}}</div>
       {{#if @root.config.ascendingAC}}
       <div class="field-short">{{localize "OSE.items.ArmorAAC"}}</div>
@@ -96,6 +98,7 @@
   <div class="">
     {{!-- Misc items --}}
     <li class="item-titles flexrow">
+      <div class="item-caret"><i class="fas fa-caret-down"></i></div>
       <div class="item-name">{{localize "OSE.items.Misc"}}</div>
       <div class="field-short"><i class="fas fa-hashtag"></i></div>
       <div class="field-short"><i class="fas fa-weight-hanging"></i></div>
@@ -139,6 +142,7 @@
   <div class="">
     {{!-- Treasure items --}}
     <li class="item-titles flexrow">
+      <div class="item-caret"><i class="fas fa-caret-down"></i></div>
       <div class="item-name">{{localize "OSE.items.Treasure"}}</div>
       <div class="field-long">{{treasure}} <i class="fas fa-circle"></i></div>
       <div class="field-short"><i class="fas fa-hashtag"></i></div>

src/templates/actors/partials/character-spells-tab.html

@@ -1,7 +1,8 @@
 <section class="inventory spells resizable" data-base-size="320">
   {{#each spells as |spellGroup id|}}
-  <ol class="item-list">
+  <div>
     <li class="item-titles flexrow">
+      <div class="item-caret"><i class="fas fa-caret-down"></i> </div>
       <div class="item-name">{{localize "OSE.spells.Level"}} {{id}}</div>
       <div class="field-short">{{localize 'OSE.spells.Slots'}}</div>
       <div class="field-long flexrow"><input type="text" value="{{lookup (lookup ../actor.data.spells @key) 'value'}}" name="data.spells.{{id}}.value" data-dtype="Number"
@@ -12,6 +13,7 @@
             class="fa fa-plus"></i></a>
       </div>
     </li>
+    <ol class="item-list">
     {{#each spellGroup as |item|}}
     <li class="item-entry">
       <div class="item flexrow" data-item-id="{{item._id}}">
@@ -37,6 +39,7 @@
       </div>
     </li>
     {{/each}}
-  </ol>
+    </ol>
+  </div>
   {{/each}}
 </section>