Merge pull request #9853 from DestinyItemManager/description-styles

Clean up description styles
DestinyItemManager · Sep 12, 2023 · e02cdf1 · e02cdf1
2 parents a4d9d54 + 776ef74
commit e02cdf1
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 98 deletions.
diff --git a/config/i18n.json b/config/i18n.json
@@ -1359,7 +1359,7 @@
     "Untitled": "Untitled Wish List",
     "Voltron": "voltron (default)",
     "VoltronDescription": "voltron is an auto-updated collection of PvE and PvP wish list rolls from across the Destiny community. We ship with this by default.",
-    "WishListNotes": "Wish List Notes: {{notes}}",
+    "WishListNotes": "Wish List Notes:",
     "CopyLine": "Copy Selected Perks as Wish List Roll",
     "CopiedLine": "Wish List roll copied to clipboard"
   },

diff --git a/src/app/armory/Links.tsx b/src/app/armory/Links.tsx
@@ -1,7 +1,7 @@
 import { languageSelector } from 'app/dim-api/selectors';
 import ExternalLink from 'app/dim-ui/ExternalLink';
+import { t } from 'app/i18next-t';
 import { DimItem } from 'app/inventory/item-types';
-import { LoreLink } from 'app/item-popup/ItemDescription';
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import { getSocketsWithStyle, isWeaponMasterworkSocket } from 'app/utils/socket-utils';
 import { DestinySocketCategoryStyle } from 'bungie-api-ts/destiny2';
@@ -10,62 +10,55 @@ import destinysets from 'images/destinysets.svg';
 import destinytracker from 'images/destinytracker.png';
 import logo from 'images/dimlogo.svg';
 import foundry from 'images/foundry.png';
+import ishtarLogo from 'images/ishtar-collective.svg';
 import lightgg from 'images/lightgg.png';
 import _ from 'lodash';
 import { useSelector } from 'react-redux';
 import styles from './Links.m.scss';
 
-// TODO: permalink for sharing
-const links = [
-  {
-    name: 'DIM',
-    icon: logo,
-    link: (item: DimItem) => `/armory/${item.hash}?perks=${buildSocketParam(item)}`,
-  },
-  {
-    name: 'Light.gg',
-    icon: lightgg,
-    link: (item: DimItem, language: string) =>
-      `https://www.light.gg/db/${language}/items/${item.hash}${buildLightGGSockets(item)}`,
-  },
-  { name: 'DestinyTracker', icon: destinytracker, link: destinyDBLink },
-  {
-    name: 'Foundry',
-    icon: foundry,
-    link: (item: DimItem) => `https://d2foundry.gg/w/${item.hash}${buildFoundrySockets(item)}`,
-    weaponsOnly: true,
-  },
-  {
-    name: 'data.destinysets.com',
-    icon: destinysets,
-    link: (item: DimItem, language: string) =>
-      `https://data.destinysets.com/i/InventoryItem:${item.hash}?lang=${language}`,
-    hideOnPhone: true,
-  },
-];
-
 export default function Links({ item }: { item: DimItem }) {
   const language = useSelector(languageSelector);
   const isPhonePortrait = useIsPhonePortrait();
+
+  const links = [
+    {
+      name: 'DIM',
+      icon: logo,
+      link: `/armory/${item.hash}?perks=${buildSocketParam(item)}`,
+    },
+    {
+      name: 'Light.gg',
+      icon: lightgg,
+      link: `https://www.light.gg/db/${language}/items/${item.hash}${buildLightGGSockets(item)}`,
+    },
+    { name: 'DestinyTracker', icon: destinytracker, link: destinyDBLink(item) },
+    item.bucket.inWeapons && {
+      name: 'Foundry',
+      icon: foundry,
+      link: `https://d2foundry.gg/w/${item.hash}${buildFoundrySockets(item)}`,
+    },
+    !isPhonePortrait && {
+      name: 'data.destinysets.com',
+      icon: destinysets,
+      link: `https://data.destinysets.com/i/InventoryItem:${item.hash}?lang=${language}`,
+    },
+    item.loreHash && {
+      name: t('MovePopup.ReadLoreLink'),
+      icon: ishtarLogo,
+      link: `http://www.ishtar-collective.net/entries/${item.loreHash}`,
+    },
+  ];
+
   return (
     <ul className={styles.links}>
-      {links.map(
-        ({ link, name, icon, hideOnPhone, weaponsOnly }) =>
-          (!weaponsOnly || item.bucket.inWeapons) &&
-          !(isPhonePortrait && hideOnPhone) && (
-            <li key={name}>
-              <ExternalLink href={link(item, language)}>
-                <img src={icon} height={16} width={16} />
-                {name}
-              </ExternalLink>
-            </li>
-          )
-      )}
-      {item.loreHash !== undefined && (
-        <li>
-          <LoreLink loreHash={item.loreHash} />
+      {_.compact(links).map(({ link, name, icon }) => (
+        <li key={name}>
+          <ExternalLink href={link}>
+            <img src={icon} height={16} width={16} />
+            {name}
+          </ExternalLink>
         </li>
-      )}
+      ))}
     </ul>
   );
 }

diff --git a/src/app/item-popup/ItemDescription.m.scss b/src/app/item-popup/ItemDescription.m.scss
@@ -5,27 +5,10 @@
   white-space: pre-wrap;
 }
 
-.officialDescription {
-  composes: description;
-  overflow: auto;
-}
-
-.flavorText {
-  composes: description;
-  font-style: italic;
-  overflow: auto;
-}
-
-.wishListLabel {
+.label {
   font-weight: bold;
 }
-.wishListTextContent {
+
+.secondaryText {
   font-style: italic;
 }
-.loreLink {
-  white-space: nowrap;
-  img {
-    vertical-align: text-bottom;
-    margin-right: 0.2em;
-  }
-}
diff --git a/src/app/item-popup/ItemDescription.m.scss.d.ts b/src/app/item-popup/ItemDescription.m.scss.d.ts
diff --git a/src/app/item-popup/ItemDescription.tsx b/src/app/item-popup/ItemDescription.tsx
@@ -1,11 +1,10 @@
 import { ExpandableTextBlock } from 'app/dim-ui/ExpandableTextBlock';
-import ExternalLink from 'app/dim-ui/ExternalLink';
 import RichDestinyText from 'app/dim-ui/destiny-symbols/RichDestinyText';
 import { t } from 'app/i18next-t';
 import { DimItem } from 'app/inventory/item-types';
 import { wishListSelector } from 'app/wishlists/selectors';
+import clsx from 'clsx';
 import { useSelector } from 'react-redux';
-import ishtarLogo from '../../images/ishtar-collective.svg';
 import styles from './ItemDescription.m.scss';
 import NotesArea from './NotesArea';
 
@@ -21,42 +20,24 @@ export default function ItemDescription({ item }: { item: DimItem }) {
       {showFlavor && (
         <>
           {Boolean(item.description?.length) && (
-            <div className={styles.officialDescription}>
+            <div className={styles.description}>
               <RichDestinyText text={item.description} ownerId={item.owner} />
-              {item.loreHash !== undefined && <LoreLink loreHash={item.loreHash} />}
             </div>
           )}
           {Boolean(item.displaySource?.length) && (
-            <div className={styles.flavorText}>
+            <div className={clsx(styles.description, styles.secondaryText)}>
               <RichDestinyText text={item.displaySource} ownerId={item.owner} />
             </div>
           )}
         </>
       )}
       {!$featureFlags.triage && wishlistItem && Boolean(wishlistItem?.notes?.length) && (
         <ExpandableTextBlock linesWhenClosed={3} className={styles.description}>
-          <span className={styles.wishListLabel}>
-            {t('WishListRoll.WishListNotes', { notes: '' })}
-          </span>
-          <span className={styles.wishListTextContent}>{wishlistItem.notes}</span>
+          <span className={styles.label}>{t('WishListRoll.WishListNotes')}</span>
+          <span className={styles.secondaryText}>{wishlistItem.notes}</span>
         </ExpandableTextBlock>
       )}
       <NotesArea item={item} className={styles.description} />
     </>
   );
 }
-
-export function LoreLink({ loreHash }: { loreHash: number }) {
-  if (!loreHash) {
-    return null;
-  }
-
-  const loreLink = `http://www.ishtar-collective.net/entries/${loreHash}`;
-
-  return (
-    <ExternalLink className={styles.loreLink} href={loreLink} title={t('MovePopup.ReadLore')}>
-      <img src={ishtarLogo} height="16" width="16" />
-      {t('MovePopup.ReadLoreLink')}
-    </ExternalLink>
-  );
-}
diff --git a/src/app/item-triage/ItemTriage.tsx b/src/app/item-triage/ItemTriage.tsx
@@ -117,7 +117,7 @@ function WishlistTriageSection({ item }: { item: DimItem }) {
           className={popupStyles.description}
           alreadyOpen={alreadyOpen}
         >
-          <span className={popupStyles.wishListTextContent}>{wishlistItem.notes}</span>
+          <span className={popupStyles.secondaryText}>{wishlistItem.notes}</span>
         </ExpandableTextBlock>
       )}
     </CollapsibleTitle>

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -1346,7 +1346,7 @@
     "UpdateExternalSource": "Update Wish List Source",
     "Voltron": "voltron (default)",
     "VoltronDescription": "voltron is an auto-updated collection of PvE and PvP wish list rolls from across the Destiny community. We ship with this by default.",
-    "WishListNotes": "Wish List Notes: {{notes}}",
+    "WishListNotes": "Wish List Notes:",
     "WorstRatedTip": "This perk exactly matches a weapon roll on your trashlist.",
     "WorstRatedTip_plural": "These perks exactly match a weapon roll on your trashlist."
   },