WIP: container sheet overhaul, with file structure changes

public/lang/en.json

@@ -819,5 +819,12 @@
   "TIDY5E.SpellSourceClassAssignments.ShowUnassignedOnly.Text": "Show Unassigned Only",
   "TIDY5E.Keybindings.ToggleSheetLock.Name": "Toggle Sheet Lock",
   "TIDY5E.Keybindings.ToggleSheetLock.Hint": "If a Tidy sheet is the current active window in the UI, this keybinding toggles the sheet lock.",
-  "TIDY5E.LocalizationTestKey": "Localization Test Key"
+  "TIDY5E.LocalizationTestKey": "Localization Test Key",
+  "TIDY5E.ExpandCollapseMenu.OptionTitle": "Expand/Collapse Behavior",
+  "TIDY5E.ExpandCollapseMenu.OptionTopLevel": "Top-Level Sections",
+  "TIDY5E.ExpandCollapseMenu.OptionAllSections": "All Sections",
+  "TIDY5E.SortMenu.OptionAlphabetical": "Alphabetical (A-Z)",
+  "TIDY5E.SortMenu.OptionManual": "Manual",
+  "TIDY5E.SortMenu.OptionPrepared": "Prepared",
+  "TIDY5E.SortMenu.OptionEquipped": "Equipped"
 }

src/components/buttons/ButtonWithOptionPanel.svelte

@@ -5,14 +5,14 @@
   export let expanded: boolean = false;
   export let active: boolean = false;
   export let disabled: boolean = false;
+  export let anchor: 'left' | 'right' = 'left';
 
   let menuEl: HTMLElement;
   let menuOpenerEl: HTMLElement;
 
   function handleFocusOut(
     event: FocusEvent & { currentTarget: EventTarget & HTMLElement },
   ) {
-    console.warn('focusout');
     const relatedTarget = event.relatedTarget;
     const nearestMenuElement =
       relatedTarget instanceof HTMLElement
@@ -23,17 +23,14 @@
       nearestMenuElement &&
       [menuEl, menuOpenerEl].includes(nearestMenuElement)
     ) {
-      console.warn('focusout : still within menu or opener, ignoring');
       return;
     }
 
-    console.warn('focusout : blurring');
     menuEl.blur();
     expanded = false;
   }
 
   async function toggleMenu(expand?: boolean): Promise<void> {
-    console.warn('contextmenu');
     expanded = expand ?? !expanded;
 
     if (expanded) {
@@ -72,6 +69,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <menu
     class:expanded
+    class="anchor-{anchor}"
     on:focusout={handleFocusOut}
     tabindex={expanded ? 0 : null}
     bind:this={menuEl}

src/components/toggle/FieldToggle.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
   export let checked = false;
+  export let onchange:
+    | ((
+        event: Event & {
+          currentTarget: EventTarget & HTMLInputElement;
+        },
+      ) => void)
+    | undefined = undefined;
 </script>
 
 <label class="field-toggle">
@@ -27,5 +34,5 @@
       d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"
     /></svg
   >
-  <input type="checkbox" on:change {checked} class="toggle hidden" />
+  <input type="checkbox" on:change={onchange} {checked} class="toggle hidden" />
 </label>

src/components/toggle/PillSwitch.svelte

@@ -7,6 +7,13 @@
   export let checkedSvgSrc: string | undefined = undefined;
   export let uncheckedIconClass: string | undefined = undefined;
   export let uncheckedSvgSrc: string | undefined = undefined;
+  export let onchange:
+    | ((
+        event: Event & {
+          currentTarget: EventTarget & HTMLInputElement;
+        },
+      ) => void)
+    | undefined = undefined;
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
@@ -30,5 +37,5 @@
     </span>
     <slot />
   </span>
-  <FieldToggle bind:checked on:change />
+  <FieldToggle bind:checked {onchange} />
 </label>

src/scss/hightouch/apps.scss

@@ -263,9 +263,5 @@
     .inline-wrapped-elements:last-of-type {
       margin-bottom: 0;
     }
-
-    .tag {
-
-    }
   }
 }

src/scss/hightouch/components/action-bar.scss

@@ -7,4 +7,12 @@
   search {
     flex: 1;
   }
-}
+
+  .button {
+    --icon-fill: var(--t5e-color-text-onDefault-lighter);
+    i {
+      color: var(--icon-fill);
+      font-size: 0.8125rem;
+    }
+  }
+}

src/scss/hightouch/components/buttons.scss

@@ -228,6 +228,19 @@
 
     &.expanded {
       display: flex;
+      gap: 0.5rem;
+    }
+
+    h4 {
+      color: var(--t5e-color-text-onDefault-lighter);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    label:has(input[type="radio"]) {
+      display: flex;
+      gap: 0.5rem;
     }
   }
 }

src/scss/hightouch/components/inputs.scss

@@ -16,7 +16,6 @@ input {
 input[type='text'],
 input[type='number'],
 textarea {
-
   &:is(textarea) {
     resize: none;
   }
@@ -261,21 +260,16 @@ input[type='radio'] {
 
   &:not(.disabled)::before {
     content: '';
-    width: 0.65em;
-    height: 0.65em;
+    width: 100%;
+    height: 100%;
     border-radius: 50%;
-    transform: scale(0);
-    transition: 120ms transform ease-in-out;
+    transform: scale(0.5);
     background-color: var(--t5e-color-text-onDefault-gold-light);
   }
 
   &:checked {
     border: 1px solid var(--t5e-component-toggle-toggled-border);
     background: var(--t5e-component-toggle-toggled-background);
-
-    &::before {
-      transform: scale(1);
-    }
   }
 
   &:disabled {

src/scss/hightouch/items.scss

@@ -255,13 +255,28 @@
     }
   }
 
-  &.container .contents-footer {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  &.container {
+    .tidy-tab.contents {
+      flex: 1;
 
-    .meter {
-      flex-basis: var(--meter-height);
+      .container-contents-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        flex: 1;
+      }
+    }
+
+    .contents-footer {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      .meter {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: var(--meter-height);
+      }
     }
   }
 }

src/scss/hightouch/reset.scss

@@ -28,6 +28,10 @@
       outline: none;
       box-shadow: none;
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   a:hover {

src/sheets/hightouch/container/tabs/ContainerContentsTab.svelte

@@ -11,6 +11,7 @@
   import ContainerCurrency from '../parts/ContainerCurrency.svelte';
   import ToggleButton from 'src/components/buttons/ToggleButton.svelte';
   import Search from '../../shared/Search.svelte';
+  import ButtonWithOptionPanel from 'src/components/buttons/ButtonWithOptionPanel.svelte';
 
   let context = getContext<Readable<ContainerSheetHightouchContext>>(
     CONSTANTS.SVELTE_CONTEXT.CONTEXT,
@@ -49,38 +50,93 @@
   class="action-bar"
   data-tidy-sheet-part={CONSTANTS.SHEET_PARTS.ACTION_BAR}
 >
-  <button type="button" class="icon-button">
+  <ButtonWithOptionPanel class="icon-button">
     <i class="fas fa-angles-down fa-fw"></i>
-  </button>
+    <svelte:fragment slot="options">
+      <h4>{localize('TIDY5E.ExpandCollapseMenu.OptionTitle')}</h4>
+      <label
+        for="{$context.document.id}-expand-collapse-behavior-top-level-sections"
+      >
+        <input type="radio" checked={true} />
+        {localize('TIDY5E.ExpandCollapseMenu.OptionTopLevel')}
+      </label>
+      <label for="{$context.document.id}-expand-collapse-behavior-all-sections">
+        <input
+          type="radio"
+          id="{$context.document.id}-expand-collapse-behavior-all-sections"
+          checked={false}
+        />
+        {localize('TIDY5E.ExpandCollapseMenu.OptionAllSections')}
+      </label>
+    </svelte:fragment>
+  </ButtonWithOptionPanel>
 
   <Search bind:searchCriteria />
 
-  <!-- TODO: Wire up actual pinned filter toggles -->
-  <!-- TODO: When wiring up pinned filter toggles, use an additive approach instead of hiding after-the-fact. When the window size changes, trigger a render, throttled. -->
   <div class="button-group">
     <ToggleButton class="hide-under-450">Action</ToggleButton>
     <ToggleButton class="hide-under-550">Bonus Action</ToggleButton>
     <ToggleButton class="hide-under-600">Reaction</ToggleButton>
     <ToggleButton class="hide-under-400">Can Use</ToggleButton>
     <ToggleButton>Magical</ToggleButton>
   </div>
+
+  <a class="button icon-button">
+    <i class="fas fa-filter"></i>
+  </a>
+
+  <ButtonWithOptionPanel class="icon-button" anchor="right">
+    <i class="fas fa-arrow-down-a-z fa-fw"></i>
+    <svelte:fragment slot="options">
+      <label for="{$context.document.id}-sort-option-alphabetical">
+        <input
+          type="radio"
+          id="{$context.document.id}-sort-option-alphabetical"
+          checked={true}
+        />
+        {localize('TIDY5E.SortMenu.OptionAlphabetical')}
+      </label>
+      <label for="{$context.document.id}-sort-option-manual">
+        <input
+          type="radio"
+          id="{$context.document.id}-sort-option-manual"
+          checked={false}
+        />
+        {localize('TIDY5E.SortMenu.OptionManual')}
+      </label>
+      <label for="{$context.document.id}-sort-option-equipped">
+        <input
+          type="radio"
+          id="{$context.document.id}-sort-option-equipped"
+          checked={false}
+        />
+        {localize('TIDY5E.SortMenu.OptionEquipped')}
+      </label>
+    </svelte:fragment>
+  </ButtonWithOptionPanel>
+
+  <a class="button icon-button">
+    <i class="fas fa-gear"></i>
+  </a>
 </section>
 
 <!-- Tables -->
 <!-- New Container Contents Sections > New Inline Container View (requires options for column specification, classic controls)  -->
 <!-- Column specification needs to have options for spanning -->
 <!-- These options should be conditional accepted here, since this will also be reused for actor inventories -->
 <!-- ? DO we have to reuse the same components, or can we make curated versions for container and actor? -->
-<ContainerContentsSections
-  contents={$context.containerContents.contents}
-  container={$context.item}
-  editable={$context.editable}
-  itemContext={$context.containerContents.itemContext}
-  {inlineToggleService}
-  lockItemQuantity={$context.lockItemQuantity}
-  sheetDocument={$context.item}
-  unlocked={$context.unlocked}
-/>
+<div class="container-contents-wrapper">
+  <ContainerContentsSections
+    contents={$context.containerContents.contents}
+    container={$context.item}
+    editable={$context.editable}
+    itemContext={$context.containerContents.itemContext}
+    {inlineToggleService}
+    lockItemQuantity={$context.lockItemQuantity}
+    sheetDocument={$context.item}
+    unlocked={$context.unlocked}
+  />
+</div>
 
 <footer class="contents-footer">
   <!-- Capacity Bar -->