Merge branch 'kgar:main' into quadrone-styles-testing

kgar · Feb 4, 2025 · c16484a · c16484a
2 parents 4abb8bb + 5a147b0
commit c16484a
Show file tree

Hide file tree

Showing 33 changed files with 3,119 additions and 266 deletions.
diff --git a/src/sheets/classic/item/parts/FieldActivation.svelte b/src/sheets/classic/item/parts/FieldActivation.svelte
@@ -24,15 +24,17 @@
         <label for="{appId}-activation-value">
           {localize('DND5E.Amount')}
         </label>
-        <NumberInput
-          id="{appId}-activation-value"
-          document={context.item}
-          field="system.activation.value"
-          value={context.source.activation.value}
-          placeholder="—"
-          min="0"
-          disabled={!context.editable}
-        />
+        <div class="form-fields">
+          <NumberInput
+            id="{appId}-activation-value"
+            document={context.item}
+            field="system.activation.value"
+            value={context.source.activation.value}
+            placeholder="—"
+            min="0"
+            disabled={!context.editable}
+          />
+        </div>
       </div>
     {/if}
 
@@ -41,19 +43,21 @@
       <label for="{appId}-activation-type">
         {localize('DND5E.Cost')}
       </label>
-      <Select
-        id="{appId}-activation-type"
-        document={context.item}
-        field="system.activation.type"
-        value={context.source.activation.type}
-        disabled={!context.editable}
-      >
-        <SelectOptions
-          data={context.activationTypes}
-          labelProp="label"
-          valueProp="value"
-        />
-      </Select>
+      <div class="form-fields">
+        <Select
+          id="{appId}-activation-type"
+          document={context.item}
+          field="system.activation.type"
+          value={context.source.activation.type}
+          disabled={!context.editable}
+        >
+          <SelectOptions
+            data={context.activationTypes}
+            labelProp="label"
+            valueProp="value"
+          />
+        </Select>
+      </div>
     </div>
   </div>
 

diff --git a/src/sheets/quadrone/item/BackgroundSheet.svelte b/src/sheets/quadrone/item/BackgroundSheet.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import ItemNameHeaderOrchestrator from "./parts/ItemNameHeaderOrchestrator.svelte";
-    import Sidebar from "./parts/Sidebar.svelte";
+  import { CONSTANTS } from 'src/constants';
+  import ItemNameHeaderOrchestrator from './parts/ItemNameHeaderOrchestrator.svelte';
+  import Sidebar from './parts/Sidebar.svelte';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import { getItemSheetContextQuadrone } from 'src/sheets/sheet-context.svelte';
+  import TextInput from 'src/components/inputs/TextInput.svelte';
+  import Tabs from 'src/components/tabs/Tabs.svelte';
+  import TabContents from 'src/components/tabs/TabContents.svelte';
+
+  let context = $derived(getItemSheetContextQuadrone());
+
+  const localize = FoundryAdapter.localize;
+
+  let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
 
   let itemNameEl: HTMLElement | undefined = $state();
 </script>
@@ -9,4 +21,37 @@
 
 <Sidebar />
 
-TODO: Add Item Sheet Header
+<main class="item-content">
+  <div
+    bind:this={itemNameEl}
+    class="item-name-wrapper flex-row extra-small-gap align-items-center"
+  >
+    <!-- Name -->
+    {#if context.unlocked}
+      <TextInput
+        field="name"
+        document={context.item}
+        value={context.item.name}
+        class="document-name"
+      />
+    {:else}
+      <div class="document-name">{context.item.name ?? ''}</div>
+    {/if}
+  </div>
+
+  <!-- Header Summary -->
+  <div class="item-header-summary">TODO</div>
+
+  <!-- Tab Strip -->
+  <Tabs
+    bind:selectedTabId
+    tabs={context.tabs}
+    cssClass="item-tabs"
+    sheet={context.item.sheet}
+  />
+
+  <hr class="golden-fade" />
+
+  <!-- Tab Contents -->
+  <TabContents tabs={context.tabs} {selectedTabId} />
+</main>
diff --git a/src/sheets/quadrone/item/ClassSheet.svelte b/src/sheets/quadrone/item/ClassSheet.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import ItemNameHeaderOrchestrator from "./parts/ItemNameHeaderOrchestrator.svelte";
-    import Sidebar from "./parts/Sidebar.svelte";
+  import { CONSTANTS } from 'src/constants';
+  import ItemNameHeaderOrchestrator from './parts/ItemNameHeaderOrchestrator.svelte';
+  import Sidebar from './parts/Sidebar.svelte';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import { getItemSheetContextQuadrone } from 'src/sheets/sheet-context.svelte';
+  import TextInput from 'src/components/inputs/TextInput.svelte';
+  import Tabs from 'src/components/tabs/Tabs.svelte';
+  import TabContents from 'src/components/tabs/TabContents.svelte';
+
+  let context = $derived(getItemSheetContextQuadrone());
+
+  const localize = FoundryAdapter.localize;
+
+  let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
 
   let itemNameEl: HTMLElement | undefined = $state();
 </script>
@@ -9,4 +21,37 @@
 
 <Sidebar />
 
-TODO: Add Item Sheet Header
+<main class="item-content">
+  <div
+    bind:this={itemNameEl}
+    class="item-name-wrapper flex-row extra-small-gap align-items-center"
+  >
+    <!-- Name -->
+    {#if context.unlocked}
+      <TextInput
+        field="name"
+        document={context.item}
+        value={context.item.name}
+        class="document-name"
+      />
+    {:else}
+      <div class="document-name">{context.item.name ?? ''}</div>
+    {/if}
+  </div>
+
+  <!-- Header Summary -->
+  <div class="item-header-summary">TODO</div>
+
+  <!-- Tab Strip -->
+  <Tabs
+    bind:selectedTabId
+    tabs={context.tabs}
+    cssClass="item-tabs"
+    sheet={context.item.sheet}
+  />
+
+  <hr class="golden-fade" />
+
+  <!-- Tab Contents -->
+  <TabContents tabs={context.tabs} {selectedTabId} />
+</main>
diff --git a/src/sheets/quadrone/item/ConsumableSheet.svelte b/src/sheets/quadrone/item/ConsumableSheet.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import ItemNameHeaderOrchestrator from "./parts/ItemNameHeaderOrchestrator.svelte";
-    import Sidebar from "./parts/Sidebar.svelte";
+  import { CONSTANTS } from 'src/constants';
+  import ItemNameHeaderOrchestrator from './parts/ItemNameHeaderOrchestrator.svelte';
+  import Sidebar from './parts/Sidebar.svelte';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import { getItemSheetContextQuadrone } from 'src/sheets/sheet-context.svelte';
+  import TextInput from 'src/components/inputs/TextInput.svelte';
+  import Tabs from 'src/components/tabs/Tabs.svelte';
+  import TabContents from 'src/components/tabs/TabContents.svelte';
+
+  let context = $derived(getItemSheetContextQuadrone());
+
+  const localize = FoundryAdapter.localize;
+
+  let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
 
   let itemNameEl: HTMLElement | undefined = $state();
 </script>
@@ -9,4 +21,37 @@
 
 <Sidebar />
 
-TODO: Add Item Sheet Header
+<main class="item-content">
+  <div
+    bind:this={itemNameEl}
+    class="item-name-wrapper flex-row extra-small-gap align-items-center"
+  >
+    <!-- Name -->
+    {#if context.unlocked}
+      <TextInput
+        field="name"
+        document={context.item}
+        value={context.item.name}
+        class="document-name"
+      />
+    {:else}
+      <div class="document-name">{context.item.name ?? ''}</div>
+    {/if}
+  </div>
+
+  <!-- Header Summary -->
+  <div class="item-header-summary">TODO</div>
+
+  <!-- Tab Strip -->
+  <Tabs
+    bind:selectedTabId
+    tabs={context.tabs}
+    cssClass="item-tabs"
+    sheet={context.item.sheet}
+  />
+
+  <hr class="golden-fade" />
+
+  <!-- Tab Contents -->
+  <TabContents tabs={context.tabs} {selectedTabId} />
+</main>
diff --git a/src/sheets/quadrone/item/EquipmentSheet.svelte b/src/sheets/quadrone/item/EquipmentSheet.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import ItemNameHeaderOrchestrator from "./parts/ItemNameHeaderOrchestrator.svelte";
-    import Sidebar from "./parts/Sidebar.svelte";
+  import { CONSTANTS } from 'src/constants';
+  import ItemNameHeaderOrchestrator from './parts/ItemNameHeaderOrchestrator.svelte';
+  import Sidebar from './parts/Sidebar.svelte';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import { getItemSheetContextQuadrone } from 'src/sheets/sheet-context.svelte';
+  import TextInput from 'src/components/inputs/TextInput.svelte';
+  import Tabs from 'src/components/tabs/Tabs.svelte';
+  import TabContents from 'src/components/tabs/TabContents.svelte';
+
+  let context = $derived(getItemSheetContextQuadrone());
+
+  const localize = FoundryAdapter.localize;
+
+  let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
 
   let itemNameEl: HTMLElement | undefined = $state();
 </script>
@@ -9,4 +21,37 @@
 
 <Sidebar />
 
-TODO: Add Item Sheet Header
+<main class="item-content">
+  <div
+    bind:this={itemNameEl}
+    class="item-name-wrapper flex-row extra-small-gap align-items-center"
+  >
+    <!-- Name -->
+    {#if context.unlocked}
+      <TextInput
+        field="name"
+        document={context.item}
+        value={context.item.name}
+        class="document-name"
+      />
+    {:else}
+      <div class="document-name">{context.item.name ?? ''}</div>
+    {/if}
+  </div>
+
+  <!-- Header Summary -->
+  <div class="item-header-summary">TODO</div>
+
+  <!-- Tab Strip -->
+  <Tabs
+    bind:selectedTabId
+    tabs={context.tabs}
+    cssClass="item-tabs"
+    sheet={context.item.sheet}
+  />
+
+  <hr class="golden-fade" />
+
+  <!-- Tab Contents -->
+  <TabContents tabs={context.tabs} {selectedTabId} />
+</main>
diff --git a/src/sheets/quadrone/item/FacilitySheet.svelte b/src/sheets/quadrone/item/FacilitySheet.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import ItemNameHeaderOrchestrator from "./parts/ItemNameHeaderOrchestrator.svelte";
-    import Sidebar from "./parts/Sidebar.svelte";
+  import { CONSTANTS } from 'src/constants';
+  import ItemNameHeaderOrchestrator from './parts/ItemNameHeaderOrchestrator.svelte';
+  import Sidebar from './parts/Sidebar.svelte';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import { getItemSheetContextQuadrone } from 'src/sheets/sheet-context.svelte';
+  import TextInput from 'src/components/inputs/TextInput.svelte';
+  import Tabs from 'src/components/tabs/Tabs.svelte';
+  import TabContents from 'src/components/tabs/TabContents.svelte';
+
+  let context = $derived(getItemSheetContextQuadrone());
+
+  const localize = FoundryAdapter.localize;
+
+  let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
 
   let itemNameEl: HTMLElement | undefined = $state();
 </script>
@@ -9,4 +21,37 @@
 
 <Sidebar />
 
-TODO: Add Item Sheet Header
+<main class="item-content">
+  <div
+    bind:this={itemNameEl}
+    class="item-name-wrapper flex-row extra-small-gap align-items-center"
+  >
+    <!-- Name -->
+    {#if context.unlocked}
+      <TextInput
+        field="name"
+        document={context.item}
+        value={context.item.name}
+        class="document-name"
+      />
+    {:else}
+      <div class="document-name">{context.item.name ?? ''}</div>
+    {/if}
+  </div>
+
+  <!-- Header Summary -->
+  <div class="item-header-summary">TODO</div>
+
+  <!-- Tab Strip -->
+  <Tabs
+    bind:selectedTabId
+    tabs={context.tabs}
+    cssClass="item-tabs"
+    sheet={context.item.sheet}
+  />
+
+  <hr class="golden-fade" />
+
+  <!-- Tab Contents -->
+  <TabContents tabs={context.tabs} {selectedTabId} />
+</main>