[#3667] Adjust HTML & styles to work with V13

Tweak the generated HTML to work with the AppV2 combat tracker in V13. Also moved the `collapsible` styles so they are usable without the `dnd5e2` class so long as the `dnd5e2-collapsible` class is also used.
foundryvtt · Dec 20, 2024 · 6233062 · 6233062
1 parent 9c460be
commit 6233062
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/less/v2/apps.less b/less/v2/apps.less
@@ -231,20 +231,6 @@
     }
   }
 
-  .collapsible {
-    &.collapsed {
-      .fa-caret-down { transform: rotate(-90deg); }
-      .collapsible-content { grid-template-rows: 0fr; }
-    }
-    .fa-caret-down { transition: transform 250ms ease; }
-    .collapsible-content {
-      display: grid;
-      grid-template-rows: 1fr;
-      transition: grid-template-rows 250ms ease;
-      > .wrapper { overflow: hidden; }
-    }
-  }
-
   .unlist {
     list-style: none;
     padding: 0;
@@ -1559,6 +1545,24 @@ dialog.dnd5e2.application {
   }
 }
 
+/* ---------------------------------- */
+/*  Collapsible Content               */
+/* ---------------------------------- */
+
+.dnd5e2 .collapsible, .collapsible.dnd5e2-collapsible {
+  &.collapsed {
+    .fa-caret-down { transform: rotate(-90deg); }
+    .collapsible-content { grid-template-rows: 0fr; }
+  }
+  .fa-caret-down { transition: transform 250ms ease; }
+  .collapsible-content {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 250ms ease;
+    > .wrapper { overflow: hidden; }
+  }
+}
+
 /* ---------------------------------- */
 /*  Combat Tracker                    */
 /* ---------------------------------- */
@@ -1568,7 +1572,7 @@ dialog.dnd5e2.application {
     .fa-chevron-down { transition: transform 250ms ease; }
     &.collapsed .fa-chevron-down { transform: rotate(-90deg); }
 
-    &.active::after { transition: border-color 250ms ease; }
+    &.active::after, &.active::before { transition: border-color 250ms ease; }
     &.active:not(.collapsed)::after { border-color: color-mix(in oklab, var(--color-border-highlight), transparent); }
 
     .group-header { cursor: pointer; }
@@ -1579,6 +1583,15 @@ dialog.dnd5e2.application {
       line-height: 20px;
     }
   }
+
+  /* V13 Syles */
+  .combat-tracker {
+    .combatant-group {
+      display: block;
+      &.active:not(.collapsed)::before { border-color: color-mix(in oklab, var(--color-warm-2), transparent); }
+    }
+    .group-children { padding: 0; }
+  }
 }
 
 /* ---------------------------------- */

diff --git a/module/applications/combat/combat-tracker.mjs b/module/applications/combat/combat-tracker.mjs
@@ -51,13 +51,14 @@ export default class CombatTracker5e extends CombatTracker {
   renderGroups(html) {
     if ( !this.viewed ) return;
     const groups = this.viewed.createGroups();
-    const list = html.querySelector(".directory-list");
-    list.classList.add("dnd5e2");
+    const V13 = game.release.generation >= 13;
+    const list = html.querySelector(".directory-list, .combat-tracker");
     for ( const [key, { combatants, expanded }] of groups.entries() ) {
       const children = list.querySelectorAll(Array.from(combatants).map(c => `[data-combatant-id="${c.id}"]`).join(", "));
       if ( !children.length ) continue;
       const groupContainer = document.createElement("li");
-      groupContainer.classList.add("combatant", "combatant-group", "directory-item", "collapsible");
+      groupContainer.classList.add("combatant", "combatant-group", "collapsible", "dnd5e2-collapsible");
+      if ( !V13 ) groupContainer.classlist.add("directory-item");
       if ( !expanded ) groupContainer.classList.add("collapsed");
 
       // Determine the count
@@ -81,9 +82,9 @@ export default class CombatTracker5e extends CombatTracker {
         <div class="group-header flexrow">
           <img class="token-image" alt="${img.alt}" src="${img.src || img.dataset.src}">
           <div class="token-name flexcol">
-            <h4>
+            <${V13 ? "strong" : "h4"} class="name">
               ${game.i18n.format("DND5E.COMBAT.Group.Title", { name })}
-            </h4>
+            </${V13 ? "strong" : "h4"}>
             <div class="group-numbers">${count}</div>
           </div>
           <div class="token-initiative">
@@ -92,7 +93,7 @@ export default class CombatTracker5e extends CombatTracker {
         </div>
         <div class="collapsible-content">
           <div class="wrapper">
-            <ol class="group-children directory-list"></ol>
+            <ol class="group-children ${V13 ? "" : "directory-list"}"></ol>
           </div>
         </div>
       `;