From 4e4e8266acf3eb193194c696c82979066ea77dd8 Mon Sep 17 00:00:00 2001 From: nikothedude <59709059+nikothedude@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:32:51 -0400 Subject: [PATCH] Allows TGUI labelled lists to use tooltips, and enables this behavior on preferencelists + adds descs to most character preferences (#79356) ## About The Pull Request Title. https://github.com/tgstation/tgstation/assets/59709059/c9fa7d41-6ca4-4b8b-97ec-fdfdd437ce25 ## Why It's Good For The Game The inability to use descriptions in character preferences really limits the context you can give to readers, which becomes a big problem when preferences become complicated or laden with policy that must be given to the reader. ## Changelog :cl: qol: Character preferences now have descriptions as tooltips - hover over their names to see them /:cl: --- code/modules/client/preferences/README.md | 2 +- tgui/packages/tgui/components/LabeledList.tsx | 74 +++++++++++++------ .../interfaces/PreferencesMenu/MainPage.tsx | 1 + .../ai_emote_display.tsx | 2 + .../ai_hologram_display.tsx | 1 + .../features/character_preferences/pda.tsx | 2 - .../persistent_scars.tsx | 2 + .../playtime_reward_cloak.tsx | 2 + .../character_preferences/prisoner_crime.tsx | 2 + 9 files changed, 62 insertions(+), 26 deletions(-) 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, };