From 8ee3e31d669fc4cb0f9977031942521b96bd431d Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Thu, 19 Dec 2024 06:29:34 -0800 Subject: [PATCH 1/2] feat: selecting Compare from item popup in Compare panel will start a new session Text on button changes to New Compare when this will occur Adding items to Compare session from main inventory now requires selecting Compare instead of being one click --- config/i18n.json | 1 + src/app/compare/CompareItem.tsx | 2 +- src/app/inventory/ItemPopupTrigger.tsx | 16 ++++------------ src/app/item-actions/ActionButtons.tsx | 12 +++++++++--- src/app/item-actions/ItemAccessoryButtons.tsx | 6 +++++- src/app/item-popup/DesktopItemActions.tsx | 3 +++ src/app/item-popup/ItemPopup.tsx | 7 ++++++- src/app/item-popup/item-popup.ts | 1 + 8 files changed, 30 insertions(+), 18 deletions(-) diff --git a/config/i18n.json b/config/i18n.json index c81b403c35..2c427d0cae 100644 --- a/config/i18n.json +++ b/config/i18n.json @@ -99,6 +99,7 @@ "Compare": { "NoModArmor": "Pre-mods", "Button": "Compare", + "New": "New Compare", "Archetype": "Archetype", "ButtonHelp": "Compare Items", "CompareBaseStats": "Show Base Stats", diff --git a/src/app/compare/CompareItem.tsx b/src/app/compare/CompareItem.tsx index 38ff55dbc1..aa2e7e311e 100644 --- a/src/app/compare/CompareItem.tsx +++ b/src/app/compare/CompareItem.tsx @@ -79,7 +79,7 @@ export default memo(function CompareItem({ {item.taggable ? :
}
- + {(ref, onClick) => (
diff --git a/src/app/inventory/ItemPopupTrigger.tsx b/src/app/inventory/ItemPopupTrigger.tsx index 6aa42e7414..5bb7235d76 100644 --- a/src/app/inventory/ItemPopupTrigger.tsx +++ b/src/app/inventory/ItemPopupTrigger.tsx @@ -1,5 +1,3 @@ -import { addCompareItem } from 'app/compare/actions'; -import { compareOpenSelector } from 'app/compare/selectors'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; import { ThunkResult } from 'app/store/types'; import React, { JSX, useCallback, useEffect, useRef } from 'react'; @@ -19,12 +17,9 @@ export default function ItemPopupTrigger({ item, extraData, children, - noCompare, }: { item: DimItem; extraData?: ItemPopupExtraInfo; - /** Don't allow adding to compare */ - noCompare?: boolean; children: ( ref: React.Ref, onClick: (e: React.MouseEvent) => void, @@ -36,9 +31,9 @@ export default function ItemPopupTrigger({ const clicked = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); - dispatch(itemPopupTriggerClicked(item, ref, extraData, noCompare)); + dispatch(itemPopupTriggerClicked(item, ref, extraData)); }, - [dispatch, extraData, item, noCompare], + [dispatch, extraData, item], ); // Close the popup if this component is unmounted @@ -58,14 +53,11 @@ function itemPopupTriggerClicked( item: DimItem, ref: React.RefObject, extraData?: ItemPopupExtraInfo, - noCompare?: boolean, ): ThunkResult { - return async (dispatch, getState) => { + return async (dispatch) => { dispatch(clearNewItem(item.id)); - if (!noCompare && compareOpenSelector(getState())) { - dispatch(addCompareItem(item)); - } else if (ref.current) { + if (ref.current) { showItemPopup(item, ref.current, extraData); } }; diff --git a/src/app/item-actions/ActionButtons.tsx b/src/app/item-actions/ActionButtons.tsx index 739dc3c7cd..c141c44b05 100644 --- a/src/app/item-actions/ActionButtons.tsx +++ b/src/app/item-actions/ActionButtons.tsx @@ -1,4 +1,4 @@ -import { addCompareItem } from 'app/compare/actions'; +import { addCompareItem, endCompareSession } from 'app/compare/actions'; import { settingSelector } from 'app/dim-api/selectors'; import { t } from 'app/i18next-t'; import { showInfuse } from 'app/infuse/infuse'; @@ -25,13 +25,17 @@ import styles from './ActionButtons.m.scss'; interface ActionButtonProps { item: DimItem; label?: boolean; + fromCompare?: boolean; } -export function CompareActionButton({ item, label }: ActionButtonProps) { +export function CompareActionButton({ item, label, fromCompare = false }: ActionButtonProps) { const dispatch = useDispatch(); const openCompare = () => { hideItemPopup(); + if (fromCompare) { + dispatch(endCompareSession()); + } dispatch(addCompareItem(item)); }; @@ -42,7 +46,9 @@ export function CompareActionButton({ item, label }: ActionButtonProps) { return ( - {label && {t('Compare.Button')}} + {label && ( + {fromCompare ? t('Compare.New') : t('Compare.Button')} + )} ); } diff --git a/src/app/item-actions/ItemAccessoryButtons.tsx b/src/app/item-actions/ItemAccessoryButtons.tsx index 86433ff404..91d05fa092 100644 --- a/src/app/item-actions/ItemAccessoryButtons.tsx +++ b/src/app/item-actions/ItemAccessoryButtons.tsx @@ -21,11 +21,13 @@ export default function ItemAccessoryButtons({ mobile, actionsModel, showLabel = true, + fromCompare = false, }: { item: DimItem; mobile: boolean; showLabel: boolean; actionsModel: ItemActionsModel; + fromCompare?: boolean; }) { const streamDeckEnabled = $featureFlags.elgatoStreamDeck ? // eslint-disable-next-line react-hooks/rules-of-hooks @@ -38,7 +40,9 @@ export default function ItemAccessoryButtons({ )} {actionsModel.lockable && } - {actionsModel.comparable && } + {actionsModel.comparable && ( + + )} {actionsModel.canConsolidate && ( )} diff --git a/src/app/item-popup/DesktopItemActions.tsx b/src/app/item-popup/DesktopItemActions.tsx index 9778c69234..b0a9998434 100644 --- a/src/app/item-popup/DesktopItemActions.tsx +++ b/src/app/item-popup/DesktopItemActions.tsx @@ -22,9 +22,11 @@ export const menuClassName = styles.interaction; export default function DesktopItemActions({ item, actionsModel, + fromCompare = false, }: { item: DimItem; actionsModel: ItemActionsModel; + fromCompare?: boolean; }) { const stores = useSelector(sortedStoresSelector); const dispatch = useThunkDispatch(); @@ -80,6 +82,7 @@ export default function DesktopItemActions({ mobile={false} showLabel={!sidecarCollapsed} actionsModel={actionsModel} + fromCompare={fromCompare} /> {!sidecarCollapsed && ( diff --git a/src/app/item-popup/ItemPopup.tsx b/src/app/item-popup/ItemPopup.tsx index 0122096a57..6d03ebbb4d 100644 --- a/src/app/item-popup/ItemPopup.tsx +++ b/src/app/item-popup/ItemPopup.tsx @@ -102,6 +102,7 @@ export default function ItemPopup({ mobile={true} showLabel={false} actionsModel={itemActionsModel} + fromCompare={extraInfo?.fromCompare} />
)} @@ -151,7 +152,11 @@ export default function ItemPopup({ {itemActionsModel.hasControls && (
- +
)} diff --git a/src/app/item-popup/item-popup.ts b/src/app/item-popup/item-popup.ts index 58a8e17606..15b166af26 100644 --- a/src/app/item-popup/item-popup.ts +++ b/src/app/item-popup/item-popup.ts @@ -24,6 +24,7 @@ export interface ItemPopupExtraInfo { canCraftThis?: boolean; // if you completely leveled up the item, it can be crafted with any of its perks. impressive. canCraftAllPlugs?: boolean; + fromCompare?: boolean; } export function showItemPopup( From 5ec162cabb1be3808c48ea25e72411b90899dbca Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Thu, 19 Dec 2024 06:33:26 -0800 Subject: [PATCH 2/2] Tweak to avoid deleting previous session, instead updating initialItemId --- src/app/compare/reducer.ts | 2 +- src/app/item-actions/ActionButtons.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/compare/reducer.ts b/src/app/compare/reducer.ts index 8f93fb64ff..ffc443d990 100644 --- a/src/app/compare/reducer.ts +++ b/src/app/compare/reducer.ts @@ -25,7 +25,7 @@ export interface CompareSession { /** * The instance ID of the first item added to compare, so we can highlight it. */ - readonly initialItemId?: string; + initialItemId?: string; /** * The ID of the character (if any) whose vendor response we should intermingle with owned items diff --git a/src/app/item-actions/ActionButtons.tsx b/src/app/item-actions/ActionButtons.tsx index c141c44b05..437d16dd92 100644 --- a/src/app/item-actions/ActionButtons.tsx +++ b/src/app/item-actions/ActionButtons.tsx @@ -1,4 +1,5 @@ -import { addCompareItem, endCompareSession } from 'app/compare/actions'; +import { addCompareItem } from 'app/compare/actions'; +import { compareSessionSelector } from 'app/compare/selectors'; import { settingSelector } from 'app/dim-api/selectors'; import { t } from 'app/i18next-t'; import { showInfuse } from 'app/infuse/infuse'; @@ -30,11 +31,12 @@ interface ActionButtonProps { export function CompareActionButton({ item, label, fromCompare = false }: ActionButtonProps) { const dispatch = useDispatch(); + const session = useSelector(compareSessionSelector); const openCompare = () => { hideItemPopup(); - if (fromCompare) { - dispatch(endCompareSession()); + if (fromCompare && session) { + session.initialItemId = item.id; } dispatch(addCompareItem(item)); };