diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss new file mode 100644 index 00000000..31f5e0f0 --- /dev/null +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss @@ -0,0 +1,79 @@ +.verticalTabsContainer { + display: flex; + width: 100%; + min-height: 300px; + + :global { + .p-tabview { + width: 100%; + display: flex; + align-items: flex-start; + } + + .p-tabview-panels { + padding: 6px 1rem !important; + flex-grow: 1; + } + + .p-tabview-nav-container { + border-right: none; + height: 100%; + } + + .p-tabview-nav { + flex-direction: column; + width: 150px; + min-height: 100%; + border: none; + + li { + width: 100%; + border-right: 4px solid var(--surface-hover); + background-color: var(--surface-card); + + transition: + background-color 200ms, + border-right-color 200ms; + + &:hover { + background-color: var(--surface-hover); + border-right: 4px solid var(--surface-100); + } + + .p-tabview-nav-link { + transition: color 200ms; + + justify-content: flex-end; + padding: 10px; + //background-color: var(--surface-card); + background-color: initial; + border: none; + color: var(--gray-400); + + border-radius: initial; + font-weight: 400; + margin: 0; + } + + &.p-tabview-selected { + background-color: var(--surface-50); + border-right: 4px solid var(--primary-color); + + .p-tabview-nav-link { + font-weight: 600; + color: var(--primary-color); + } + + &:hover { + //background-color: var(--surface-hover); + border-right: 4px solid var(--primary-color); + } + } + } + } + + .p-tabview-panel { + flex-grow: 1; + } + } +} diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx index 90593002..eb61183f 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx @@ -2,8 +2,10 @@ import { Dialog } from 'primereact/dialog'; import { useCallback, useState } from 'react'; import { Button } from 'primereact/button'; import { Checkbox } from 'primereact/checkbox'; +import { TabPanel, TabView } from 'primereact/tabview'; +import styles from './SystemSignatureSettingsDialog.module.scss'; -export type Setting = { key: string; name: string; value: boolean }; +export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean }; export const COSMIC_SIGNATURE = 'Cosmic Signature'; export const COSMIC_ANOMALY = 'Cosmic Anomaly'; @@ -24,8 +26,12 @@ export const SystemSignatureSettingsDialog = ({ onSave, onCancel, }: SystemSignatureSettingsDialogProps) => { + const [activeIndex, setActiveIndex] = useState(0); const [settings, setSettings] = useState(defaultSettings); + const filterSettings = settings.filter(setting => setting.isFilter); + const userSettings = settings.filter(setting => !setting.isFilter); + const handleSettingsChange = (key: string) => { setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item))); }; @@ -35,23 +41,53 @@ export const SystemSignatureSettingsDialog = ({ }, [onSave, settings]); return ( - +
- {settings.map(setting => { - return ( -
- handleSettingsChange(setting.key)} - /> - -
- ); - })} +
+ setActiveIndex(e.index)} + className={styles.verticalTabView} + > + +
+ {filterSettings.map(setting => { + return ( +
+ handleSettingsChange(setting.key)} + /> + +
+ ); + })} +
+ + +
+ {userSettings.map(setting => { + return ( +
+ handleSettingsChange(setting.key)} + /> + +
+ ); + })} +
+ + +
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx index c6e9d04f..5c6a4e8f 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx @@ -20,23 +20,25 @@ import { PrimeIcons } from 'primereact/api'; import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; -const settings: Setting[] = [ - { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true }, - { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true }, - { key: DEPLOYABLE, name: 'Show Deployables', value: true }, - { key: STRUCTURE, name: 'Show Structures', value: true }, - { key: STARBASE, name: 'Show Starbase', value: true }, - { key: SHIP, name: 'Show Ships', value: true }, - { key: DRONE, name: 'Show Drones And Charges', value: true }, - { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true }, - { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true }, - { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true }, - { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true }, - { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true }, - { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true }, -]; +const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v3'; +export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting'; -const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v1'; +const settings: Setting[] = [ + { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false }, + { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true }, + { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true }, + { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true }, + { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true }, + { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true }, + { key: SHIP, name: 'Show Ships', value: true, isFilter: true }, + { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true }, + { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true }, + { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true }, + { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true }, + { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true }, + { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true }, + { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true }, +]; const defaultSettings = () => { return [...settings]; diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx index 69ad0b07..233ab065 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx @@ -22,6 +22,7 @@ import { getRowColorByTimeLeft, } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers'; import { + renderDescription, renderIcon, renderInfoColumn, renderTimeLeft, @@ -32,7 +33,7 @@ import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/comp import { useMapEventListener } from '@/hooks/Mapper/events'; import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper'; import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog'; - +import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures'; type SystemSignaturesSortSettings = { sortField: string; sortOrder: SortOrder; @@ -90,6 +91,10 @@ export const SystemSignaturesContent = ({ }, []); const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]); + const showDescriptionColumn = useMemo( + () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value, + [settings], + ); const filteredSignatures = useMemo(() => { return signatures @@ -126,26 +131,6 @@ export const SystemSignaturesContent = ({ setSignatures(signatures); }, [outCommand, systemId]); - // const updateSignatures = useCallback( - // async (newSignatures: SystemSignature[], updateOnly: boolean) => { - // const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly); - - // const { signatures: updatedSignatures } = await outCommand({ - // type: OutCommand.updateSignatures, - // data: { - // system_id: systemId, - // added, - // updated, - // removed, - // }, - // }); - - // setSignatures(() => updatedSignatures); - // setSelectedSignatures([]); - // }, - // [outCommand, systemId], - // ); - const handleUpdateSignatures = useCallback( async (newSignatures: SystemSignature[], updateOnly: boolean) => { const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly); @@ -209,7 +194,7 @@ export const SystemSignaturesContent = ({ useHotkey(true, ['a'], handleSelectAll); - useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected); + useHotkey(false, ['Backspace'], handleDeleteSelected); useEffect(() => { if (selectable) { @@ -373,6 +358,16 @@ export const SystemSignaturesContent = ({ style={{ maxWidth: nameColumnWidth }} hidden={compact || medium} > + {showDescriptionColumn && ( + + )} { + return {row?.description}; +};