Inline Tabs for Actor sheets - Pop-Out! workaround

src/lang/en.json

@@ -1099,6 +1099,10 @@
         }
     },
     "SETTINGS": {
+        "actorSheetInlineTabs": {
+            "name": "Horizontal Inline Tabs for Actor Sheets",
+            "hint": "If enabled, actor sheets will use horizontal tabs within the bounds of the sheet, as per foundry default sheets. This setting is meant as a work-around solution for the Pop-Out! module, for those who want to use it."
+        },
         "itemSheetSideTabs": {
             "name": "Vertical Side Tabs for Item Sheets",
             "hint": "If enabled, item sheets use vertical tabs down the right-hand side, similar to the character sheet, instead of the default in-line horizontal ones."

src/style/sheets/actor/module.scss

@@ -2,10 +2,37 @@
 @import './adversary.scss';
 
 .sheet.actor {
-    overflow: visible;
 
-    .window-content {
+    &.side-tabs {
         overflow: visible;
+
+        .window-content {
+            overflow: visible;
+        }
+
+        nav {
+            border: none;
+            flex-direction: column;
+            position: absolute;
+            left: 100%;
+            top: 15%;
+
+            > a {
+                background: rgba(11, 10, 19, 0.9);
+                width: 2.88867rem;
+                height: 2.5rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid #302831;
+                border-top-right-radius: 0.3rem;
+                border-bottom-right-radius: 0.3rem;
+
+                &.active {
+                    background-color: rgb(45 41 77 / 90%);
+                }
+            }
+        }
     }
 
     > .window-header {
@@ -33,30 +60,6 @@
         }
     }
 
-    nav {
-        border: none;
-        flex-direction: column;
-        position: absolute;
-        left: 100%;
-        top: 15%;
-
-        > a {
-            background: rgba(11, 10, 19, 0.9);
-            width: 2.88867rem;
-            height: 2.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 1px solid #302831;
-            border-top-right-radius: 0.3rem;
-            border-bottom-right-radius: 0.3rem;
-
-            &.active {
-                background-color: rgb(45 41 77 / 90%);
-            }
-        }
-    }
-
     .sheet-header {
         margin-bottom: 1rem;
 

src/system/applications/actor/base.ts

@@ -16,8 +16,6 @@ import {
 import {
     TabsApplicationMixin,
     DragDropApplicationMixin,
-    // ComponentHandlebarsApplicationMixin,
-    // ComponentHandlebarsRenderOptions,
 } from '@system/applications/mixins';
 
 // Components
@@ -65,13 +63,6 @@ export class BaseActorSheet<
     );
     /* eslint-enable @typescript-eslint/unbound-method */
 
-    static PARTS = foundry.utils.mergeObject(super.PARTS, {
-        navigation: {
-            template:
-                'systems/cosmere-rpg/templates/actors/parts/navigation.hbs',
-        },
-    });
-
     static TABS = foundry.utils.mergeObject(super.TABS, {
         [BaseSheetTab.Actions]: {
             label: 'COSMERE.Actor.Sheet.Tabs.Actions',

src/system/hooks/sheets.ts

@@ -1,4 +1,5 @@
 import { BaseItemSheet } from '../applications/item/base';
+import { BaseActorSheet } from '../applications/actor/base';
 import { getSystemSetting, SETTINGS } from '../settings';
 
 Hooks.on(
@@ -9,3 +10,12 @@ Hooks.on(
         }
     },
 );
+
+Hooks.on(
+    'renderActorSheetV2',
+    (actorSheet: BaseActorSheet, node: HTMLFormElement) => {
+        if (!getSystemSetting(SETTINGS.ACTOR_SHEET_INLINE_TABS)) {
+            node.classList.add('side-tabs');
+        }
+    },
+);

src/system/settings.ts

@@ -8,6 +8,7 @@ import { setTheme } from './utils/templates';
 export const SETTINGS = {
     INTERNAL_FIRST_CREATION: 'firstTimeWorldCreation',
     INTERNAL_LATEST_VERSION: 'latestVersion',
+    ACTOR_SHEET_INLINE_TABS: 'actorSheetInlineTabs',
     ITEM_SHEET_SIDE_TABS: 'itemSheetSideTabs',
     ROLL_SKIP_DIALOG_DEFAULT: 'skipRollDialogByDefault',
     CHAT_ENABLE_OVERLAY_BUTTONS: 'enableOverlayButtons',
@@ -47,6 +48,7 @@ export function registerSystemSettings() {
 
     // SHEET SETTINGS
     const sheetOptions = [
+        { name: SETTINGS.ACTOR_SHEET_INLINE_TABS, default: false },
         { name: SETTINGS.ITEM_SHEET_SIDE_TABS, default: false },
     ];
 

src/templates/actors/adversary/parts/sheet-content.hbs

@@ -49,6 +49,7 @@
     <section class="col-main">
         {{app-adversary-header}}
         {{app-actor-attributes}}
+        {{>tabs tabs=tabs ignoreLabel=true}}
         <div class="tab-body">
             {{> adv-actions-tab}}
             {{> adv-equipment-tab}}

src/templates/actors/character/parts/sheet-content.hbs

@@ -9,6 +9,7 @@
     </section>
     <section class="col-main">
         {{app-actor-attributes}}
+        {{>tabs tabs=tabs ignoreLabel=true}}
         <div class="tab-body">
             {{> char-details-tab}}
             {{> char-actions-tab}}