diff --git a/code/modules/client/preferences/README.md b/code/modules/client/preferences/README.md index 00899536398..fabfb779c90 100644 --- a/code/modules/client/preferences/README.md +++ b/code/modules/client/preferences/README.md @@ -28,7 +28,7 @@ export const savefile_key_here: Feature = { // Necessary for game preferences, unused for others category: "CATEGORY", - // Optional, only shown in game preferences + // Optional, shown as a tooltip description: "This preference will blow your mind!", } ``` diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx index 283c0a2b912..d89423aded2 100644 --- a/tgui/packages/tgui/components/LabeledList.tsx +++ b/tgui/packages/tgui/components/LabeledList.tsx @@ -8,6 +8,7 @@ import { BooleanLike, classes, pureComponentHooks } from 'common/react'; import { InfernoNode } from 'inferno'; import { Box, unit } from './Box'; import { Divider } from './Divider'; +import { Tooltip } from './Tooltip'; type LabeledListProps = { children?: any; @@ -20,19 +21,20 @@ export const LabeledList = (props: LabeledListProps) => { LabeledList.defaultHooks = pureComponentHooks; -type LabeledListItemProps = { - className?: string | BooleanLike; - label?: string | InfernoNode | BooleanLike; - labelColor?: string | BooleanLike; - labelWrap?: boolean; - color?: string | BooleanLike; - textAlign?: string | BooleanLike; - buttons?: InfernoNode; +type LabeledListItemProps = Partial<{ + className: string | BooleanLike; + label: string | InfernoNode | BooleanLike; + labelColor: string | BooleanLike; + labelWrap: boolean; + color: string | BooleanLike; + textAlign: string | BooleanLike; + buttons: InfernoNode; /** @deprecated */ - content?: any; - children?: InfernoNode; - verticalAlign?: string; -}; + content: any; + children: InfernoNode; + verticalAlign: string; + tooltip: string; +}>; const LabeledListItem = (props: LabeledListItemProps) => { const { @@ -46,20 +48,46 @@ const LabeledListItem = (props: LabeledListItemProps) => { content, children, verticalAlign = 'baseline', + tooltip, } = props; + + let innerLabel; + if (label) { + innerLabel = label; + if (typeof label === 'string') innerLabel += ':'; + } + + if (tooltip !== undefined) { + innerLabel = ( + + + {innerLabel} + + + ); + } + + let labelChild = ( + + {innerLabel} + + ); + return ( - - {label ? (typeof label === 'string' ? label + ':' : label) : null} - + {labelChild} {randomSetting && ( diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_emote_display.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_emote_display.tsx index 348ab4183e9..c8a59a5d9a4 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_emote_display.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_emote_display.tsx @@ -2,5 +2,7 @@ import { FeatureIconnedDropdownInput, FeatureWithIcons } from '../base'; export const preferred_ai_emote_display: FeatureWithIcons = { name: 'AI emote display', + description: + 'If you are the AI, the default image displayed on all AI displays on station.', component: FeatureIconnedDropdownInput, }; diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_hologram_display.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_hologram_display.tsx index b933933b812..423fcea8ed2 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_hologram_display.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/ai_hologram_display.tsx @@ -2,5 +2,6 @@ import { FeatureIconnedDropdownInput, FeatureWithIcons } from '../base'; export const preferred_ai_hologram_display: FeatureWithIcons = { name: 'AI hologram display', + description: 'The holographic form you will take when you use a holopad.', component: FeatureIconnedDropdownInput, }; diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/pda.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/pda.tsx index 0e1ba0c05a5..72a82a4a9fa 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/pda.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/pda.tsx @@ -3,12 +3,10 @@ import { Feature, FeatureChoiced, FeatureDropdownInput, FeatureShortTextInput } export const pda_theme: FeatureChoiced = { name: 'PDA Theme', category: 'GAMEPLAY', - description: 'The theme of your PDA.', component: FeatureDropdownInput, }; export const pda_ringtone: Feature = { name: 'PDA Ringtone', - description: "The ringtone you'll hear when someone sends you a PDA message.", component: FeatureShortTextInput, }; diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/persistent_scars.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/persistent_scars.tsx index fba6a65232b..fdf450f71a3 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/persistent_scars.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/persistent_scars.tsx @@ -2,5 +2,7 @@ import { CheckboxInput, FeatureToggle } from '../base'; export const persistent_scars: FeatureToggle = { name: 'Persistent Scars', + description: + 'If checked, scars will persist across rounds if you survive to the end.', component: CheckboxInput, }; diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/playtime_reward_cloak.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/playtime_reward_cloak.tsx index ec6411e88eb..d4e13e78ddc 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/playtime_reward_cloak.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/playtime_reward_cloak.tsx @@ -2,5 +2,7 @@ import { CheckboxInput, FeatureToggle } from '../base'; export const playtime_reward_cloak: FeatureToggle = { name: 'Don gamer cloak', + description: + 'Your reward for playing 5k+ hours. Don a fancy cloak only wearable by fellow super-veterans.', component: CheckboxInput, }; diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/prisoner_crime.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/prisoner_crime.tsx index 0da53d21948..2ca17aa4e36 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/prisoner_crime.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/prisoner_crime.tsx @@ -2,5 +2,7 @@ import { FeatureChoiced, FeatureDropdownInput } from '../base'; export const prisoner_crime: FeatureChoiced = { name: 'Prisoner crime', + description: + 'When a prisoner, this will be added to your records as the reason for your arrest.', component: FeatureDropdownInput, };