Combine biography and profile tabs

src/lang/de.json

@@ -15,7 +15,7 @@
     "DS4.HeadingEffects": "Effekte",
     "DS4.HeadingInventory": "Inventar",
     "DS4.HeadingProfile": "Profil",
-    "DS4.HeadingTalentsAbilities": "Talente & Fähigkeiten",
+    "DS4.HeadingAbilities": "Fähigkeiten",
     "DS4.HeadingSpells": "Zaubersprüche",
     "DS4.HeadingDescription": "Beschreibung",
     "DS4.HeadingSpecialCreatureAbilities": "Besondere Fähigkeiten",

src/lang/en.json

@@ -15,7 +15,7 @@
     "DS4.HeadingEffects": "Effects",
     "DS4.HeadingInventory": "Inventory",
     "DS4.HeadingProfile": "Profile",
-    "DS4.HeadingTalentsAbilities": "Talents & Abilities",
+    "DS4.HeadingAbilities": "Abilities",
     "DS4.HeadingSpells": "Spells",
     "DS4.HeadingDescription": "Description",
     "DS4.HeadingSpecialCreatureAbilities": "Special Abilities",

src/module/actor/sheets/actor-sheet.ts

@@ -26,7 +26,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
                 ".values",
                 ".inventory",
                 ".spells",
-                ".talents-abilities",
+                ".abilities",
                 ".profile",
                 ".biography",
                 ".special-creature-abilities",

src/module/handlebars/handlebars-partials.ts

@@ -6,6 +6,7 @@
 
 export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
+        "systems/ds4/templates/sheets/actor/components/biography.hbs",
         "systems/ds4/templates/sheets/actor/components/character-progression.hbs",
         "systems/ds4/templates/sheets/actor/components/check.hbs",
         "systems/ds4/templates/sheets/actor/components/checks.hbs",
@@ -19,8 +20,10 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/components/items-overview.hbs",
         "systems/ds4/templates/sheets/actor/components/overview-add-button.hbs",
         "systems/ds4/templates/sheets/actor/components/overview-control-buttons.hbs",
+        "systems/ds4/templates/sheets/actor/components/profile.hbs",
         "systems/ds4/templates/sheets/actor/components/rollable-image.hbs",
         "systems/ds4/templates/sheets/actor/components/talent-rank-equation.hbs",
+        "systems/ds4/templates/sheets/actor/tabs/abilities.hbs",
         "systems/ds4/templates/sheets/actor/tabs/biography.hbs",
         "systems/ds4/templates/sheets/actor/tabs/character-inventory.hbs",
         "systems/ds4/templates/sheets/actor/tabs/creature-inventory.hbs",
@@ -28,7 +31,6 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/tabs/profile.hbs",
         "systems/ds4/templates/sheets/actor/tabs/special-creature-abilities.hbs",
         "systems/ds4/templates/sheets/actor/tabs/spells.hbs",
-        "systems/ds4/templates/sheets/actor/tabs/talents-abilities.hbs",
         "systems/ds4/templates/sheets/actor/tabs/values.hbs",
         "systems/ds4/templates/sheets/item/components/body.hbs",
         "systems/ds4/templates/sheets/item/components/sheet-header.hbs",

src/scss/components/_description.scss

@@ -75,4 +75,10 @@
     .tox-edit-area {
         padding: 0 8px;
     }
+    .tox-toolbar-overlord {
+        background-color: transparent;
+        .tox-toolbar__primary {
+            background: transparent;
+        }
+    }
 }

src/scss/components/_forms.scss

@@ -25,6 +25,7 @@ header.sheet-header {
         flex: 0 0 100px;
         height: 100px;
         margin: variables.$margin-sm 10px variables.$margin-sm 0;
+        border: none;
     }
 
     .header-fields {

src/scss/components/_profile.scss

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-profile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    &__entry {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__entry-input {
+        &--multiline {
+            resize: none;
+        }
+    }
+
+    &__entry-label {
+        font-size: 0.8em;
+        font-weight: bold;
+    }
+}

src/scss/ds4.scss

@@ -34,7 +34,9 @@
     @include meta.load-css("components/description");
     @include meta.load-css("components/forms");
     @include meta.load-css("components/item_list");
+    @include meta.load-css("components/profile");
     @include meta.load-css("components/rollable_image");
     @include meta.load-css("components/tabs");
     @include meta.load-css("components/talent_rank_equation");
+    @include meta.load-css("tabs/biography");
 }

src/scss/tabs/_biography.scss

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-biography-tab-content {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    column-gap: 1em;
+}

src/templates/sheets/actor/character-sheet.hbs

@@ -9,8 +9,8 @@ SPDX-License-Identifier: MIT
 <form class="{{cssClass}} flexcol" autocomplete="off">
     {{!-- Sheet Header --}}
     <header class="sheet-header">
-        <img class="profile-img" src="{{data.img}}" data-edit="img" alt="Actor Icon" title="{{data.name}}"
+        <img class="profile-img" src="{{data.img}}" data-edit="img" alt="Actor Icon" title="{{data.name}}" height="100"
-            height="100" width="100" />
+            width="100" />
         <div class="header-fields flexrow">
             <h1 class="charname">
                 <label for="name" class="hidden">Name</label>
@@ -81,8 +81,7 @@ SPDX-License-Identifier: MIT
         <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
         <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
         <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="item" data-tab="talents-abilities">{{localize 'DS4.HeadingTalentsAbilities'}}</a>
+        <a class="item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="item" data-tab="profile">{{localize "DS4.HeadingProfile"}}</a>
         <a class="item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
     </nav>
 
@@ -99,11 +98,8 @@ SPDX-License-Identifier: MIT
 {{!-- Spells Tab --}}
 {{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
 
-{{!-- Talents Tab --}}
+{{!-- Abilities Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/talents-abilities.hbs}}
+{{> systems/ds4/templates/sheets/actor/tabs/abilities.hbs}}
-
-{{! Profile Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/profile.hbs}}
 
 {{!-- Biography Tab --}}
 {{> systems/ds4/templates/sheets/actor/tabs/biography.hbs}}

src/templates/sheets/actor/components/biography.hbs

@@ -0,0 +1,10 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-biography">
+    {{editor content=data.data.profile.biography target="data.profile.biography" button=true owner=owner
+    editable=editable}}
+</div>

src/templates/sheets/actor/components/profile.hbs

@@ -0,0 +1,29 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-profile">
+    {{#each data.data.profile as |profile-data-value profile-data-key|}}
+    {{#if (and (ne profile-data-key 'biography') (ne profile-data-key 'specialCharacteristics'))}}
+    <div class="ds4-profile__entry">
+        <label class="ds4-profile__entry-label" for="data.profile.{{profile-data-key}}">
+            {{lookup ../config.i18n.characterProfile profile-data-key}}
+        </label>
+        <input class="ds4-profile__entry-input" type="text" name="data.profile.{{profile-data-key}}"
+            value="{{profile-data-value}}"
+            data-dtype="{{lookup ../config.i18n.characterProfileDTypes profile-data-key}}" />
+    </div>
+    {{/if}}
+    {{/each}}
+    <div class="ds4-profile__entry">
+        <label class="ds4-profile__entry-label" for="data.profile.specialCharacteristics">
+            {{lookup config.i18n.characterProfile 'specialCharacteristics'}}
+        </label>
+        <textarea class="ds4-profile__entry-input ds4-profile__entry-input--multiline"
+            name="data.profile.specialCharacteristics" data-dtype="String"
+            rows="4">{{data.data.profile.specialCharacteristics}}</textarea>
+    </div>
+</div>

src/templates/sheets/actor/tabs/abilities.hbs

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab talents-abilities" data-group="primary" data-tab="talents-abilities">
+<div class="tab abilities" data-group="primary" data-tab="abilities">
     {{!-- TALENT --}}
     <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
     {{#unless (isEmpty itemsByType.talent)}}

src/templates/sheets/actor/tabs/biography.hbs

@@ -5,6 +5,13 @@ SPDX-License-Identifier: MIT
 --}}
 
 <div class="tab biography" data-group="primary" data-tab="biography">
-    {{editor content=data.data.profile.biography target="data.profile.biography" button=true owner=owner
+    <div class="ds4-biography-tab-content">
-    editable=editable}}
+        <!-- beautify ignore:start -->
+        <!-- prettier-ignore-start -->
+        {{!-- remove indentation to avoid annoying Handlebars auto-indent --}}
+{{> systems/ds4/templates/sheets/actor/components/profile.hbs}}
+{{> systems/ds4/templates/sheets/actor/components/biography.hbs}}
+        <!-- beautify ignore:end -->
+        <!-- prettier-ignore-end -->
+    </div>
 </div>

src/templates/sheets/actor/tabs/profile.hbs

@@ -1,29 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-<div class="tab profile" data-group="primary" data-tab="profile">
-    <div class="grid grid-2col">
-        {{#each data.data.profile as |profile-data-value profile-data-key|}}
-        {{#if (and (ne profile-data-key 'biography') (ne profile-data-key 'specialCharacteristics'))}}
-        <div class="profile-entry">
-            <label for="data.profile.{{profile-data-key}}">
-                {{lookup ../config.i18n.characterProfile profile-data-key}}
-            </label>
-            <input type="text" name="data.profile.{{profile-data-key}}" value="{{profile-data-value}}"
-                data-dtype="{{lookup ../config.i18n.characterProfileDTypes profile-data-key}}" />
-        </div>
-        {{/if}}
-        {{/each}}
-        <div>
-            <label for="data.profile.specialCharacteristics">
-                {{lookup config.i18n.characterProfile 'specialCharacteristics'}}
-            </label>
-            <textarea name="data.profile.specialCharacteristics" data-dtype="String"
-                rows="4">{{data.data.profile.specialCharacteristics}}</textarea>
-        </div>
-    </div>
-</div>