Add setting to toggle display of ornaments, with hover to preview opposite state

config/i18n.json

@@ -1258,6 +1258,9 @@
     "Masterworked": "Masterworked",
     "MaxParallelCores": "Maximum cores for parallel tasks",
     "MaxParallelCoresExplanation": "Controls how many CPU cores DIM can use for intensive tasks like Loadout Optimizer and Loadout Analyzer. Higher values may improve performance but use more system resources.",
+    "OrnamentDisplay": "Show Ornaments on item tiles",
+    "OrnamentDisplayExplanationHide": "Hovering or long-pressing an item will hide its ornament",
+    "OrnamentDisplayExplanationShow": "Hovering or long-pressing an item will show its ornament",
     "ResetToDefault": "Reset",
     "ReverseSort": "Toggle forward/reverse sort",
     "SetSort": "Sort items by:",

src/Index.tsx

@@ -7,6 +7,7 @@ import './app/utils/sentry';
 import { createSaveAccountsObserver } from 'app/accounts/observers';
 import {
   createItemSizeObserver,
+  createOrnamentDisplayObserver,
   createThemeObserver,
   createTilesPerCharColumnObserver,
   setCssVariableEventListeners,
@@ -64,6 +65,7 @@ const i18nPromise = initi18n();
   }
   store.dispatch(observe(createSaveAccountsObserver()));
   store.dispatch(observe(createItemSizeObserver()));
+  store.dispatch(observe(createOrnamentDisplayObserver()));
   store.dispatch(observe(createThemeObserver()));
   store.dispatch(observe(createTilesPerCharColumnObserver()));
   setCssVariableEventListeners();

src/app/css-variables.ts

@@ -1,3 +1,4 @@
+import { OrnamentDisplay } from '@destinyitemmanager/dim-api-types';
 import { settingsSelector } from 'app/dim-api/selectors';
 import { deepEqual } from 'fast-equals';
 import { isPhonePortraitSelector } from './shell/selectors';
@@ -11,7 +12,7 @@ import { StoreObserver } from './store/observerMiddleware';
 const KEYBOARD_THRESHOLD = 50;
 
 function setCSSVariable(property: string, value: { toString: () => string }) {
-  if (value) {
+  if (value !== undefined && value !== null) {
     document.querySelector('html')!.style.setProperty(property, value.toString());
   }
 }
@@ -26,6 +27,24 @@ export function createItemSizeObserver(): StoreObserver<number> {
   };
 }
 
+export function createOrnamentDisplayObserver(): StoreObserver<OrnamentDisplay> {
+  return {
+    id: 'ornament-display-observer',
+    getObserved: (rs) => settingsSelector(rs).ornamentDisplay,
+    sideEffect: ({ current }) => {
+      setCSSVariable('--ornament-display-opacity', current === OrnamentDisplay.All ? 1 : 0);
+      setCSSVariable(
+        '--ornament-display-visibility',
+        current === OrnamentDisplay.All ? 'auto' : 'hidden',
+      );
+      setCSSVariable(
+        '--ornament-display-visibility-inverse',
+        current === OrnamentDisplay.All ? 'hidden' : 'auto',
+      );
+    },
+  };
+}
+
 export function createThemeObserver(): StoreObserver<{ theme: string; isPhonePortrait: boolean }> {
   return {
     id: 'theme-observer',

src/app/inventory/ItemIcon.m.scss

@@ -71,15 +71,55 @@ $commonBg: #366f42;
 }
 
 .animatedBackground {
-  display: none;
+  display: block;
+  opacity: 0;
+  content-visibility: hidden;
 
   @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity 0.2s ease-out,
+      content-visibility 0.2s allow-discrete;
     :global(.item):hover & {
-      display: block;
+      opacity: 1;
+      content-visibility: auto;
     }
   }
 }
 
+.hasAltIcon {
+  display: block;
+  opacity: calc(1 - var(--ornament-display-opacity, 1));
+  content-visibility: var(--ornament-display-visibility-inverse, hidden);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity 0.2s ease-out,
+      content-visibility 0.2s allow-discrete;
+  }
+
+  :global(.item):hover & {
+    opacity: var(--ornament-display-opacity, 1);
+    content-visibility: var(--ornament-display-visibility, auto);
+  }
+}
+
+.altIcon {
+  display: block;
+  opacity: var(--ornament-display-opacity, 1);
+  content-visibility: var(--ornament-display-visibility, auto);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity 0.2s ease-out,
+      content-visibility 0.2s allow-discrete;
+  }
+
+  :global(.item):hover & {
+    opacity: calc(1 - var(--ornament-display-opacity, 1));
+    content-visibility: var(--ornament-display-visibility-inverse, hidden);
+  }
+}
+
 // This is the same size as the item image but shifted up and left by 1px to overlap the border
 .shiftedLayer {
   top: -1 * $item-border-width;

src/app/inventory/ItemIcon.tsx

@@ -113,9 +113,13 @@ export default function ItemIcon({ item, className }: { item: DimItem; className
       : undefined;
 
   // The actual item icon. Use the ornamented version where available.
-  let foreground = (item.ornamentIconDef ?? item.iconDef)?.foreground ?? item.icon;
+  let foreground = (item.iconDef?.foreground ?? item.icon) || '';
+  let altIcon = '';
+  if (item.ornamentIconDef) {
+    altIcon = item.ornamentIconDef.foreground;
+  }
 
-  if (!animatedBackground) {
+  if (!animatedBackground && !altIcon) {
     backgrounds.unshift(foreground);
     foreground = '';
   }
@@ -173,10 +177,16 @@ export default function ItemIcon({ item, className }: { item: DimItem; className
           {animatedBackground && (
             <img src={animatedBackground} className={styles.animatedBackground} />
           )}
+          {foreground && (
+            <div
+              style={bungieBackgroundStyle(foreground)}
+              className={clsx({ [styles.hasAltIcon]: Boolean(altIcon) })}
+            />
+          )}
+          {altIcon && <div style={bungieBackgroundStyle(altIcon)} className={styles.altIcon} />}
           {masterworkGlow && (
             <div style={bungieBackgroundStyle(masterworkGlow)} className={styles.adjustOpacity} />
           )}
-          {foreground && <div style={bungieBackgroundStyle(foreground)} />}
           {seasonBanner && (
             <div style={bungieBackgroundStyle(seasonBanner)} className={styles.shiftedLayer} />
           )}

src/app/main.scss

@@ -82,6 +82,11 @@
     // it was 16px.
     --scrollbar-size: 17px;
 
+    // Whether to display ornament or base icons
+    --ornament-display-opacity: 1;
+    --ornament-display-visibility: auto;
+    --ornament-display-visibility-inverse: hidden;
+
     // prevents content shift with persistent scroll-y bar
     overflow-y: scroll;
   }

src/app/settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types';
+import { OrnamentDisplay, VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types';
 import { currentAccountSelector, hasD1AccountSelector } from 'app/accounts/selectors';
 import { clarityDiscordLink, clarityLink } from 'app/clarity/about';
 import { settingsSelector } from 'app/dim-api/selectors';
@@ -81,8 +81,12 @@ export default function SettingsPage() {
     (i) => i.bucket.inWeapons && !i.isExotic && i.masterwork && !i.deepsightInfo,
   );
   const exampleArmor = allItems.find((i) => i.bucket.inArmor && !i.isExotic);
+  const exampleOrnament =
+    allItems.find(
+      (i) => i !== exampleArmor && i.bucket.inArmor && i.isExotic && i.ornamentIconDef,
+    ) || allItems.find((i) => i !== exampleArmor && i.ornamentIconDef);
   const exampleArchivedArmor = allItems.find(
-    (i) => i !== exampleArmor && i.bucket.inArmor && !i.isExotic,
+    (i) => i !== exampleArmor && i !== exampleOrnament && i.bucket.inArmor && !i.isExotic,
   );
   const godRoll = {
     wishListPerks: new Set<number>(),
@@ -472,6 +476,13 @@ export default function SettingsPage() {
                   autoLockTagged={settings.autoLockTagged}
                 />
               )}
+              {exampleOrnament && (
+                <InventoryItem
+                  item={exampleOrnament}
+                  isNew={settings.showNewItems}
+                  autoLockTagged={settings.autoLockTagged}
+                />
+              )}
               {exampleArchivedArmor && (
                 <InventoryItem
                   item={exampleArchivedArmor}
@@ -504,6 +515,22 @@ export default function SettingsPage() {
               </div>
             )}
 
+            <div className={styles.setting}>
+              <Checkbox
+                label={t('Settings.OrnamentDisplay')}
+                name="ornamentDisplay"
+                value={settings.ornamentDisplay === OrnamentDisplay.All}
+                onChange={(checked, name) =>
+                  setSetting(name, checked ? OrnamentDisplay.All : OrnamentDisplay.None)
+                }
+              />
+              <div className={styles.fineprint}>
+                {settings.ornamentDisplay === OrnamentDisplay.All
+                  ? t('Settings.OrnamentDisplayExplanationHide')
+                  : t('Settings.OrnamentDisplayExplanationShow')}
+              </div>
+            </div>
+
             {$featureFlags.newItems && (
               <div className={styles.setting}>
                 <Checkbox

src/locale/en.json

@@ -1241,6 +1241,9 @@
     "Masterworked": "Masterworked",
     "MaxParallelCores": "Maximum cores for parallel tasks",
     "MaxParallelCoresExplanation": "Controls how many CPU cores DIM can use for intensive tasks like Loadout Optimizer and Loadout Analyzer. Higher values may improve performance but use more system resources.",
+    "OrnamentDisplay": "Show Ornaments on item tiles",
+    "OrnamentDisplayExplanationHide": "Hovering or long-pressing an item will hide its ornament",
+    "OrnamentDisplayExplanationShow": "Hovering or long-pressing an item will show its ornament",
     "ResetToDefault": "Reset",
     "RestoreVaultSide": "Show vaulted items in their own column",
     "ReverseSort": "Toggle forward/reverse sort",