Merge pull request #10170 from DestinyItemManager/inline-groups

Inline vault groups

config/i18n.json

@@ -1127,6 +1127,7 @@
     "ReverseSort": "Toggle forward/reverse sort",
     "SetSort": "Sort items by:",
     "SetVaultWeaponGrouping": "Group vault weapons by:",
+    "VaultWeaponGroupingStyle": "Separate groups on different lines",
     "Settings": "Settings",
     "ShowNewItems": "Show a red dot on new items",
     "ExpandSingleCharacter": "Show all characters",

src/app/inventory-page/StoreBucket.scss

@@ -10,11 +10,6 @@
   padding: 4px 0 calc(var(--item-margin) + 4px) 0;
   position: relative;
 
-  &.grouped {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
   &:empty {
     min-height: 0;
     padding: 0;
@@ -122,4 +117,8 @@
   &:last-of-type {
     border-bottom: none;
   }
+
+  .inlineGroups & {
+    display: contents;
+  }
 }

src/app/inventory-page/StoreBucketDropTarget.m.scss

@@ -4,3 +4,8 @@
 .over {
   box-shadow: inset 0 0 6px 0 rgba(255, 255, 255, 0.7);
 }
+
+.grouped {
+  display: flex;
+  flex-wrap: wrap;
+}

src/app/inventory-page/StoreBucketDropTarget.tsx

@@ -63,7 +63,7 @@ export default function StoreBucketDropTarget({
       className={clsx('sub-bucket', className, equip ? 'equipped' : 'unequipped', {
         [styles.over]: canDrop && isOver,
         [styles.canDrop]: canDrop,
-        grouped,
+        [styles.grouped]: grouped,
       })}
       onClick={onClick}
       aria-label={bucket.name}

src/app/inventory-page/StoreBuckets.tsx

@@ -1,3 +1,4 @@
+import { settingSelector } from 'app/dim-api/selectors';
 import { PullFromPostmaster } from 'app/inventory/PullFromPostmaster';
 import { InventoryBucket } from 'app/inventory/inventory-buckets';
 import { DimStore } from 'app/inventory/store-types';
@@ -7,9 +8,11 @@ import {
   postmasterAlmostFull,
   postmasterSpaceUsed,
 } from 'app/loadout-drawer/postmaster';
+import { VaultWeaponGroupingStyle } from 'app/settings/initial-settings';
 import clsx from 'clsx';
 import { BucketHashes } from 'data/d2/generated-enums';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import StoreBucket from '../inventory-page/StoreBucket';
 import styles from './StoreBuckets.m.scss';
 
@@ -29,6 +32,7 @@ export function StoreBuckets({
   labels?: boolean;
   singleCharacter: boolean;
 }) {
+  const vaultWeaponGroupingStyle = useSelector(settingSelector('vaultWeaponGroupingStyle'));
   let content: React.ReactNode;
 
   // Don't show buckets with no items
@@ -81,7 +85,10 @@ export function StoreBuckets({
   const checkPostmaster = bucket.hash === BucketHashes.LostItems;
   return (
     <div
-      className={clsx('store-row', `bucket-${bucket.hash}`, { 'account-wide': bucket.accountWide })}
+      className={clsx('store-row', `bucket-${bucket.hash}`, {
+        'account-wide': bucket.accountWide,
+        inlineGroups: vaultWeaponGroupingStyle === VaultWeaponGroupingStyle.Inline,
+      })}
     >
       {labels && (
         <div className={styles.bucketLabel}>

src/app/settings/SettingsPage.tsx

@@ -35,7 +35,7 @@ import Spreadsheets from './Spreadsheets';
 import { TroubleshootingSettings } from './Troubleshooting';
 import { setCharacterOrder } from './actions';
 import { useSetSetting } from './hooks';
-import { Settings } from './initial-settings';
+import { Settings, VaultWeaponGroupingStyle } from './initial-settings';
 import { itemSortSettingsSelector } from './item-sort';
 import './settings.scss';
 
@@ -383,6 +383,19 @@ export default function SettingsPage() {
                 options={vaultWeaponGroupingOptions}
                 onChange={changeVaultWeaponGrouping}
               />
+              {settings.vaultWeaponGrouping && (
+                <Checkbox
+                  label={t('Settings.VaultWeaponGroupingStyle')}
+                  name="vaultWeaponGroupingStyle"
+                  value={settings.vaultWeaponGroupingStyle !== VaultWeaponGroupingStyle.Inline}
+                  onChange={(checked, setting) =>
+                    setSetting(
+                      setting,
+                      checked ? VaultWeaponGroupingStyle.Lines : VaultWeaponGroupingStyle.Inline,
+                    )
+                  }
+                />
+              )}
             </div>
 
             <div className="setting">

src/app/settings/initial-settings.ts

@@ -6,6 +6,11 @@ export const enum ItemPopupTab {
   Triage,
 }
 
+export const enum VaultWeaponGroupingStyle {
+  Lines,
+  Inline,
+}
+
 /**
  * We extend the settings interface so we can try out new settings before committing them to dim-api-types
  */
@@ -15,6 +20,7 @@ export interface Settings extends DimApiSettings {
   sortRecordProgression: boolean;
   vendorsHideSilverItems: boolean;
   vaultWeaponGrouping: string;
+  vaultWeaponGroupingStyle: VaultWeaponGroupingStyle;
   itemPopupTab: ItemPopupTab;
 }
 
@@ -25,5 +31,6 @@ export const initialSettingsState: Settings = {
   sortRecordProgression: false,
   vendorsHideSilverItems: false,
   vaultWeaponGrouping: '',
+  vaultWeaponGroupingStyle: VaultWeaponGroupingStyle.Lines,
   itemPopupTab: ItemPopupTab.Overview,
 };

src/locale/en.json

@@ -1140,7 +1140,8 @@
     "SpacesSize": "{{count}} space",
     "SpacesSize_plural": "{{count}} spaces",
     "Theme": "Theme",
-    "VaultGroupingNone": "None"
+    "VaultGroupingNone": "None",
+    "VaultWeaponGroupingStyle": "Separate groups on different lines"
   },
   "Sockets": {
     "ApplyPerks": "Apply Perks",