Move compare headers into CompareItem (#10956)

DestinyItemManager · Feb 18, 2025 · bd4da1e · bd4da1e
1 parent 282fd90
commit bd4da1e
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 131 deletions.
diff --git a/src/app/compare/Compare.m.scss b/src/app/compare/Compare.m.scss
@@ -1,30 +1,5 @@
 @use '../variables' as *;
 
-.statLabel {
-  position: relative;
-  padding-right: 8px;
-  padding-left: 4px;
-  cursor: pointer;
-  height: 16px;
-  img {
-    height: 16px;
-    width: 16px;
-    vertical-align: bottom;
-    margin-right: 2px;
-  }
-}
-
-.sortDesc {
-  color: var(--theme-accent-primary);
-}
-.sortAsc {
-  color: var(--theme-accent-secondary);
-}
-
-.spacer {
-  height: var(--compare-item-height, 48px);
-}
-
 .organizerLink {
   composes: dim-button from global;
   margin-left: auto;
@@ -34,11 +9,6 @@
   }
 }
 
-.statList {
-  display: flex;
-  flex-direction: column;
-}
-
 .bucket {
   white-space: nowrap;
   display: flex;
@@ -77,13 +47,3 @@
     }
   }
 }
-
-.highlightBar {
-  background-color: rgba(255, 255, 255, 0.125);
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100vw;
-  z-index: -1;
-}
diff --git a/src/app/compare/Compare.m.scss.d.ts b/src/app/compare/Compare.m.scss.d.ts
diff --git a/src/app/compare/Compare.tsx b/src/app/compare/Compare.tsx
@@ -1,4 +1,3 @@
-import BungieImage from 'app/dim-ui/BungieImage';
 import { SheetHorizontalScrollContainer } from 'app/dim-ui/SheetHorizontalScrollContainer';
 import { ColumnSort, SortDirection, useTableColumnSorts } from 'app/dim-ui/table-columns';
 import { t } from 'app/i18next-t';
@@ -12,17 +11,14 @@ import {
 import { recoilValue } from 'app/item-popup/RecoilStat';
 import { useD2Definitions } from 'app/manifest/selectors';
 import { showNotification } from 'app/notifications/notifications';
-import { statLabels } from 'app/organizer/Columns';
 import { weaponMasterworkY2SocketTypeHash } from 'app/search/d2-known-values';
 import Checkbox from 'app/settings/Checkbox';
 import { useSetting } from 'app/settings/hooks';
-import { AppIcon, faAngleLeft, faAngleRight, faList } from 'app/shell/icons';
+import { AppIcon, faList } from 'app/shell/icons';
 import { acquisitionRecencyComparator } from 'app/shell/item-comparators';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { emptyArray } from 'app/utils/empty';
-import { useShiftHeld } from 'app/utils/hooks';
 import { DestinyDisplayPropertiesDefinition } from 'bungie-api-ts/destiny2';
-import clsx from 'clsx';
 import { StatHashes } from 'data/d2/generated-enums';
 import { maxBy } from 'es-toolkit';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -32,7 +28,7 @@ import Sheet from '../dim-ui/Sheet';
 import { DimItem, DimSocket, DimStat } from '../inventory/item-types';
 import { chainComparator, Comparator, compareBy, reverseComparator } from '../utils/comparators';
 import styles from './Compare.m.scss';
-import CompareItem from './CompareItem';
+import CompareItem, { CompareHeaders } from './CompareItem';
 import CompareSuggestions from './CompareSuggestions';
 import { endCompareSession, removeCompareItem, updateCompareQuery } from './actions';
 import { CompareSession } from './reducer';
@@ -207,50 +203,16 @@ export default function Compare({ session }: { session: CompareSession }) {
     </div>
   );
 
-  const isShiftHeld = useShiftHeld();
   return (
     <Sheet onClose={cancel} header={header} allowClickThrough>
       <div className={styles.bucket} onPointerLeave={() => setHighlight(undefined)}>
-        <div className={styles.statList}>
-          <div className={styles.spacer} />
-          {allStats.map((s) => {
-            const columnSort = columnSorts.find((c) => c.columnId === s.stat.statHash.toString());
-            return (
-              <div
-                key={s.stat.statHash}
-                className={clsx(
-                  styles.statLabel,
-                  columnSort
-                    ? columnSort.sort === SortDirection.ASC
-                      ? styles.sortDesc
-                      : styles.sortAsc
-                    : undefined,
-                )}
-                onPointerEnter={() => setHighlight(s.stat.statHash)}
-                onClick={toggleColumnSort(
-                  s.stat.statHash.toString(),
-                  isShiftHeld,
-                  s.stat.smallerIsBetter ? SortDirection.DESC : SortDirection.ASC,
-                )}
-              >
-                {s.stat.displayProperties.hasIcon && (
-                  <span title={s.stat.displayProperties.name}>
-                    <BungieImage src={s.stat.displayProperties.icon} />
-                  </span>
-                )}
-                {s.stat.statHash in statLabels
-                  ? t(statLabels[s.stat.statHash as StatHashes]!)
-                  : s.stat.displayProperties.name}{' '}
-                {columnSort && (
-                  <AppIcon
-                    icon={columnSort.sort === SortDirection.ASC ? faAngleRight : faAngleLeft}
-                  />
-                )}
-                {s.stat.statHash === highlight && <div className={styles.highlightBar} />}
-              </div>
-            );
-          })}
-        </div>
+        <CompareHeaders
+          columnSorts={columnSorts}
+          highlight={highlight}
+          setHighlight={setHighlight}
+          toggleColumnSort={toggleColumnSort}
+          allStats={allStats}
+        />
         {items}
       </div>
     </Sheet>

diff --git a/src/app/compare/CompareItem.m.scss b/src/app/compare/CompareItem.m.scss
@@ -1,5 +1,50 @@
 @use '../variables.scss' as *;
 
+/* Row Headers */
+
+.spacer {
+  height: var(--compare-item-height, 48px);
+}
+
+.statList {
+  display: flex;
+  flex-direction: column;
+}
+
+.statLabel {
+  position: relative;
+  padding-right: 8px;
+  padding-left: 4px;
+  cursor: pointer;
+  height: 16px;
+  img {
+    height: 16px;
+    width: 16px;
+    vertical-align: bottom;
+    margin-right: 2px;
+  }
+}
+
+.sortDesc {
+  color: var(--theme-accent-primary);
+}
+.sortAsc {
+  color: var(--theme-accent-secondary);
+}
+
+// The highlight behind each item
+.highlightBar {
+  background-color: rgba(255, 255, 255, 0.125);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100vw;
+  z-index: -1;
+}
+
+/* Items */
+
 .compareItem {
   composes: flexColumn from '../dim-ui/common.m.scss';
   border-left: 1px solid rgba(245, 245, 245, 0.25);
@@ -35,6 +80,7 @@
   }
 }
 
+// The toolbar across the top of each item
 .header {
   display: flex;
   flex-direction: row;
@@ -52,6 +98,31 @@
   }
 }
 
+// The "dismiss" button in the item header
+.close {
+  composes: resetButton from '../dim-ui/common.m.scss';
+  width: 32px;
+  height: 32px;
+  background-size: 16px;
+  background-image: url('images/close.png');
+  background-position: center;
+  background-repeat: no-repeat;
+
+  @include interactive($hover: true) {
+    background-color: var(--theme-accent-primary);
+  }
+}
+
+// The item icon that's floated behind the stats
+.itemAside {
+  position: absolute;
+  padding: 0;
+  right: 4px;
+  cursor: pointer;
+}
+
+/* COLUMN STYLES */
+
 .initialItem {
   color: var(--theme-accent-primary);
   font-weight: bold;
@@ -63,33 +134,25 @@
   overflow: hidden;
   margin-top: 2px;
   margin-bottom: 2px;
-  :global(.app-icon) {
-    font-size: 8px;
-    margin-right: 2px;
-    vertical-align: initial;
-  }
+  // Add the magnifying glass icons to items that can be clicked to find them
   &.isFindable {
     cursor: pointer;
-  }
-}
-
-.itemAside {
-  position: absolute;
-  padding: 0;
-  right: 4px;
-  cursor: pointer;
-}
-
-.close {
-  composes: resetButton from '../dim-ui/common.m.scss';
-  width: 32px;
-  height: 32px;
-  background-size: 16px;
-  background-image: url('images/close.png');
-  background-position: center;
-  background-repeat: no-repeat;
-
-  @include interactive($hover: true) {
-    background-color: var(--theme-accent-primary);
+    &::after {
+      content: '\f002';
+      // Copied from .fas classes:
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: 'Font Awesome 5 Free';
+      font-weight: 900;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: inline-block;
+      font-style: normal;
+      font-variant: normal;
+      text-rendering: auto;
+      line-height: 1;
+      font-size: 8px;
+      margin-left: 4px;
+      vertical-align: initial;
+    }
   }
 }
diff --git a/src/app/compare/CompareItem.m.scss.d.ts b/src/app/compare/CompareItem.m.scss.d.ts