Merge pull request #10616 from DestinyItemManager/item-feed-tweaks

DestinyItemManager · Jun 28, 2024 · dfaee66 · dfaee66
2 parents bb9035f + 2391f11
commit dfaee66
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 34 deletions.
diff --git a/src/app/inventory/store/d2-item-factory.ts b/src/app/inventory/store/d2-item-factory.ts
@@ -127,15 +127,15 @@ export function processItems(
   return result;
 }
 
-export const getClassTypeNameLocalized = _.memoize(
-  (type: DestinyClass, defs: D2ManifestDefinitions): string => {
+export const getClassTypeNameLocalized = memoizeOne((defs: D2ManifestDefinitions) =>
+  _.memoize((type: DestinyClass): string => {
     const klass = Object.values(defs.Class.getAll()).find((c) => c.classType === type);
     if (klass) {
       return klass.displayProperties.name;
     } else {
       return t('Loadouts.Any');
     }
-  },
+  }),
 );
 
 /** Make a "fake" item from other information - used for Collectibles, etc. */
@@ -485,7 +485,7 @@ export function makeItem(
     maxStackSize: Math.max(itemDef.inventory!.maxStackSize, 1),
     uniqueStack: Boolean(itemDef.inventory!.stackUniqueLabel?.length),
     classType,
-    classTypeNameLocalized: getClassTypeNameLocalized(itemDef.classType, defs),
+    classTypeNameLocalized: getClassTypeNameLocalized(defs)(itemDef.classType),
     element,
     energy: itemInstanceData.energy ?? null,
     lockable: itemType !== 'Finishers' ? item.lockable : true,

diff --git a/src/app/item-feed/Highlights.m.scss b/src/app/item-feed/Highlights.m.scss
@@ -8,39 +8,48 @@
 
 .perks {
   display: flex;
-  flex-flow: column;
+  flex-direction: column;
   margin: 4px 0;
+  gap: 4px;
 
   > div {
     margin-left: -3px;
-    margin-bottom: 3px;
     padding-left: 4px;
   }
+}
+.perk {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
 
-  .multiPerk {
-    border-left: 2px solid #888;
-    padding-left: 2px;
-  }
-
-  > div > div > div {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-  }
-
-  img {
+  > img {
     height: 24px;
     width: 24px;
+    margin-left: -1px;
   }
 }
+.multiPerk {
+  border-left: 2px solid #888;
+  padding-left: 2px;
+}
 
 .stats {
   margin: 4px 0 0 0;
-  :global(.stat-row) {
-    margin-bottom: 8px;
+  gap: 4px !important;
+
+  :global(.stat) {
+    color: var(--theme-text) !important;
   }
+}
+
+.armorStats {
   :global(.stat) {
     line-height: 8px;
-    color: var(--theme-text) !important;
   }
 }
+
+.customTotals {
+  gap: 0 !important;
+  flex-wrap: wrap;
+}
diff --git a/src/app/item-feed/Highlights.m.scss.d.ts b/src/app/item-feed/Highlights.m.scss.d.ts
diff --git a/src/app/item-feed/Highlights.tsx b/src/app/item-feed/Highlights.tsx
@@ -30,7 +30,7 @@ export default function Highlights({ item }: { item: DimItem }) {
     const archetype = !item.isExotic && getWeaponArchetype(item)?.displayProperties.name;
 
     return (
-      <div>
+      <>
         <span className={styles.type}>
           {archetype} <ItemTypeName item={item} />
         </span>
@@ -43,17 +43,19 @@ export default function Highlights({ item }: { item: DimItem }) {
               })}
             >
               {s.plugOptions.map((p) => (
-                <div key={p.plugDef.hash}>
-                  <PressTip tooltip={() => <DimPlugTooltip item={item} plug={p} />}>
-                    <DefItemIcon itemDef={p.plugDef} borderless={true} />{' '}
-                    {p.plugDef.displayProperties.name}
-                  </PressTip>
-                </div>
+                <PressTip
+                  key={p.plugDef.hash}
+                  tooltip={() => <DimPlugTooltip item={item} plug={p} />}
+                  className={styles.perk}
+                >
+                  <DefItemIcon itemDef={p.plugDef} borderless={true} />
+                  {p.plugDef.displayProperties.name}
+                </PressTip>
               ))}
             </div>
           ))}
         </div>
-      </div>
+      </>
     );
   } else if (item.bucket.sort === 'Armor') {
     const renderStat = (stat: DimStat) => (
@@ -73,10 +75,10 @@ export default function Highlights({ item }: { item: DimItem }) {
       <>
         {item.bucket.hash !== BucketHashes.ClassArmor && (
           <div className={clsx(styles.stats, 'stat-bars', 'destiny2')}>
-            <div className="stat-row">
+            <div className={clsx('stat-row', styles.armorStats)}>
               {item.stats?.filter((s) => s.statHash > 0).map(renderStat)}
             </div>
-            <div className="stat-row">
+            <div className={clsx('stat-row', styles.customTotals)}>
               {item.stats?.filter((s) => s.statHash < 0).map(renderStat)}
             </div>
           </div>

diff --git a/src/app/organizer/Columns.tsx b/src/app/organizer/Columns.tsx
@@ -737,7 +737,7 @@ function PerksCell({
               >
                 <div className={styles.miniPerkContainer}>
                   <DefItemIcon itemDef={p.plugDef} borderless={true} />
-                </div>{' '}
+                </div>
                 {p.plugDef.displayProperties.name}
               </div>
             </PressTip>

diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss
@@ -226,6 +226,7 @@ $content-cells: 5;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  gap: 3px;
 }
 .miniPerkContainer {
   position: relative;
@@ -234,7 +235,6 @@ $content-cells: 5;
   height: 18px;
   width: 18px;
   --item-size: 18px;
-  margin-right: 3px;
   margin-left: -1px;
   flex-shrink: 0;
   > img {

diff --git a/src/app/settings/CustomStatsSettings.tsx b/src/app/settings/CustomStatsSettings.tsx
@@ -134,7 +134,7 @@ function CustomStatEditor({
     content: (
       <div className={styles.classOption}>
         <ClassIcon classType={c} className={styles.classDropdownIcon} />
-        {getClassTypeNameLocalized(c, defs)}
+        {getClassTypeNameLocalized(defs)(c)}
       </div>
     ),
     value: c,