Merge pull request #10716 from DestinyItemManager/close-button

DestinyItemManager · Sep 3, 2024 · 4288947 · 4288947
2 parents 549be33 + fd34921
commit 4288947
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 46 deletions.
diff --git a/src/app/destiny1/loadout-drawer/LoadoutDrawerItem.tsx b/src/app/destiny1/loadout-drawer/LoadoutDrawerItem.tsx
@@ -23,7 +23,7 @@ export default function LoadoutDrawerItem({
 
   return (
     <div onClick={(e) => equip(resolvedLoadoutItem, e)} className="loadout-item">
-      <ClosableContainer onClose={onClose} showCloseIconOnHover={true}>
+      <ClosableContainer onClose={onClose}>
         <ConnectedInventoryItem item={item} />
         {item.bucket.hash === BucketHashes.Subclass && (
           <ClassIcon classType={item.classType} className="loadout-item-class-icon" />

diff --git a/src/app/dim-ui/ClosableContainer.m.scss b/src/app/dim-ui/ClosableContainer.m.scss
@@ -9,7 +9,7 @@
   width: calc(var(--item-size) / 3);
   height: calc(var(--item-size) / 3);
   background-size: calc(var(--item-size) / 3);
-  display: inline-block;
+  display: none;
   position: absolute;
   top: 2px;
   right: 2px;
@@ -20,15 +20,10 @@
     background-color: var(--theme-accent-primary);
     outline: none;
   }
-}
 
-.showCloseOnHover {
-  @include interactive($hover: true) {
-    .close {
-      display: inline-block;
-    }
-  }
-  .close {
-    display: none;
+  // This intentionally doesn't use the interactive mixin because it relies on
+  // hover emulation to show the button on mobile.
+  .container:hover & {
+    display: inline-block;
   }
 }
diff --git a/src/app/dim-ui/ClosableContainer.m.scss.d.ts b/src/app/dim-ui/ClosableContainer.m.scss.d.ts
diff --git a/src/app/dim-ui/ClosableContainer.tsx b/src/app/dim-ui/ClosableContainer.tsx
@@ -10,20 +10,14 @@ import styles from './ClosableContainer.m.scss';
 export default function ClosableContainer({
   children,
   className,
-  showCloseIconOnHover = false,
   onClose,
 }: {
   children: React.ReactNode;
   className?: string;
-  showCloseIconOnHover?: boolean;
   onClose?: (e: React.MouseEvent) => void;
 }) {
   return (
-    <div
-      className={clsx(className, styles.container, {
-        [styles.showCloseOnHover]: showCloseIconOnHover,
-      })}
-    >
+    <div className={clsx(className, styles.container)}>
       {children}
       {Boolean(onClose) && (
         <div className={styles.close} onClick={onClose} role="button" tabIndex={0} />

diff --git a/src/app/loadout-builder/filter/ExoticArmorChoice.tsx b/src/app/loadout-builder/filter/ExoticArmorChoice.tsx
@@ -47,13 +47,7 @@ export default function ExoticArmorChoice({
 
   return (
     <div className={styles.exoticArmorChoice}>
-      {onClose ? (
-        <ClosableContainer showCloseIconOnHover={true} onClose={onClose}>
-          {icon}
-        </ClosableContainer>
-      ) : (
-        icon
-      )}
+      {onClose ? <ClosableContainer onClose={onClose}>{icon}</ClosableContainer> : icon}
       <span>{name}</span>
     </div>
   );

diff --git a/src/app/loadout/fashion/FashionDrawer.tsx b/src/app/loadout/fashion/FashionDrawer.tsx
@@ -520,10 +520,7 @@ function FashionSocket({
       ).length > 0);
 
   return (
-    <ClosableContainer
-      onClose={plug ? () => onRemovePlug(bucketHash, plug.hash) : undefined}
-      showCloseIconOnHover
-    >
+    <ClosableContainer onClose={plug ? () => onRemovePlug(bucketHash, plug.hash) : undefined}>
       {plug && canSlotOrnament ? (
         <PlugDef
           onClick={handleOrnamentClick}

diff --git a/src/app/loadout/ingame/InGameLoadoutIdentifiersSelectButton.tsx b/src/app/loadout/ingame/InGameLoadoutIdentifiersSelectButton.tsx
@@ -31,10 +31,7 @@ export default function InGameLoadoutIdentifiersSelectButton({
 
   return (
     <>
-      <ClosableContainer
-        onClose={identifiers ? handleClearIdentifiers : undefined}
-        showCloseIconOnHover
-      >
+      <ClosableContainer onClose={identifiers ? handleClearIdentifiers : undefined}>
         <button
           className={styles.button}
           type="button"

diff --git a/src/app/loadout/loadout-edit/LoadoutEditBucket.tsx b/src/app/loadout/loadout-edit/LoadoutEditBucket.tsx
@@ -263,11 +263,7 @@ function DraggableItem({
   onToggleEquipped: () => void;
 }) {
   return (
-    <ClosableContainer
-      key={resolvedLoadoutItem.item.id}
-      onClose={onRemoveItem}
-      showCloseIconOnHover
-    >
+    <ClosableContainer key={resolvedLoadoutItem.item.id} onClose={onRemoveItem}>
       <DraggableInventoryItem item={resolvedLoadoutItem.item}>
         <ItemPopupTrigger
           item={resolvedLoadoutItem.item}

diff --git a/src/app/loadout/loadout-ui/PlugDef.tsx b/src/app/loadout/loadout-ui/PlugDef.tsx
@@ -49,11 +49,5 @@ export default function PlugDef({
     </div>
   );
 
-  return onClose ? (
-    <ClosableContainer onClose={onClose} showCloseIconOnHover={true}>
-      {contents}
-    </ClosableContainer>
-  ) : (
-    contents
-  );
+  return onClose ? <ClosableContainer onClose={onClose}>{contents}</ClosableContainer> : contents;
 }