Adds tooltips to changelog icons (#5713)

# About the pull request Adds tooltips to the changelog icons. # Explain why it's good for the game While some of the icons are easy to understand at a glance, others like those for 'qol', 'refactor', 'mapadd' and 'config' are pretty much just meaningless glyphs. They work fine if you've also read the discord changelog or checked recent github merges, but if you're just going off of the ingame one it can sometimes be a little confusing. # Testing Photographs and Procedure <details> <summary>Screenshots & Videos</summary> https://github.com/cmss13-devs/cmss13/assets/57483089/cc7935e6-da77-4c1f-b2e9-ab38c37aaaf9 </details> # Changelog :cl: ui: Added tooltips to entry icons in the changelog. /:cl:
cmss13-devs · Feb 19, 2024 · 4fa57b6 · 4fa57b6
1 parent f3cca04
commit 4fa57b6
Showing 1 changed file with 41 additions and 43 deletions.
diff --git a/tgui/packages/tgui/interfaces/Changelog.jsx b/tgui/packages/tgui/interfaces/Changelog.jsx
@@ -1,39 +1,39 @@
 import { classes } from 'common/react';
 import { useBackend } from '../backend';
 import { Component, Fragment } from 'react';
-import { Box, Button, Dropdown, Icon, Section, Stack, Table } from '../components';
+import { Box, Button, Dropdown, Icon, Section, Stack, Table, Tooltip } from '../components';
 import { Window } from '../layouts';
 import { resolveAsset } from '../assets';
 import dateformat from 'dateformat';
 import yaml from 'js-yaml';
 
-const icons = {
-  bugfix: { icon: 'bug', color: 'green' },
-  fix: { icon: 'bug', color: 'green' },
-  wip: { icon: 'hammer', color: 'orange' },
-  qol: { icon: 'hand-holding-heart', color: 'green' },
-  soundadd: { icon: 'tg-sound-plus', color: 'green' },
-  sounddel: { icon: 'tg-sound-minus', color: 'red' },
-  add: { icon: 'check-circle', color: 'green' },
-  expansion: { icon: 'check-circle', color: 'green' },
-  rscadd: { icon: 'check-circle', color: 'green' },
-  rscdel: { icon: 'times-circle', color: 'red' },
-  imageadd: { icon: 'tg-image-plus', color: 'green' },
-  imagedel: { icon: 'tg-image-minus', color: 'red' },
-  spellcheck: { icon: 'spell-check', color: 'green' },
-  experiment: { icon: 'radiation', color: 'yellow' },
-  balance: { icon: 'balance-scale-right', color: 'yellow' },
-  code_imp: { icon: 'code', color: 'green' },
-  refactor: { icon: 'tools', color: 'green' },
-  config: { icon: 'cogs', color: 'purple' },
-  admin: { icon: 'user-shield', color: 'purple' },
-  server: { icon: 'server', color: 'purple' },
-  tgs: { icon: 'toolbox', color: 'purple' },
-  tweak: { icon: 'wrench', color: 'green' },
-  ui: { icon: 'desktop', color: 'blue' },
-  mapadd: { icon: 'earth-africa', color: 'yellow' },
-  maptweak: { icon: 'map-location-dot', color: 'green' },
-  unknown: { icon: 'info-circle', color: 'label' },
+const changeTypes = {
+  bugfix: { icon: 'bug', color: 'green', desc: 'Fix' },
+  fix: { icon: 'bug', color: 'green', desc: 'Fix' },
+  wip: { icon: 'hammer', color: 'orange', desc: 'WIP' },
+  qol: { icon: 'hand-holding-heart', color: 'green', desc: 'QOL' },
+  soundadd: { icon: 'tg-sound-plus', color: 'green', desc: 'Sound add' },
+  sounddel: { icon: 'tg-sound-minus', color: 'red', desc: 'Sound del' },
+  add: { icon: 'check-circle', color: 'green', desc: 'Addition' },
+  expansion: { icon: 'check-circle', color: 'green', desc: 'Addition' },
+  rscadd: { icon: 'check-circle', color: 'green', desc: 'Addition' },
+  rscdel: { icon: 'times-circle', color: 'red', desc: 'Removal' },
+  imageadd: { icon: 'tg-image-plus', color: 'green', desc: 'Sprite add' },
+  imagedel: { icon: 'tg-image-minus', color: 'red', desc: 'Sprite del' },
+  spellcheck: { icon: 'spell-check', color: 'green', desc: 'Spellcheck' },
+  experiment: { icon: 'radiation', color: 'yellow', desc: 'Experiment' },
+  balance: { icon: 'balance-scale-right', color: 'yellow', desc: 'Balance' },
+  code_imp: { icon: 'code', color: 'green', desc: 'Code improvement' },
+  refactor: { icon: 'tools', color: 'green', desc: 'Code refactor' },
+  config: { icon: 'cogs', color: 'purple', desc: 'Config' },
+  admin: { icon: 'user-shield', color: 'purple', desc: 'Admin' },
+  server: { icon: 'server', color: 'purple', desc: 'Server' },
+  tgs: { icon: 'toolbox', color: 'purple', desc: 'Server (TGS)' },
+  tweak: { icon: 'wrench', color: 'green', desc: 'Tweak' },
+  ui: { icon: 'desktop', color: 'blue', desc: 'UI' },
+  mapadd: { icon: 'earth-africa', color: 'yellow', desc: 'Map add' },
+  maptweak: { icon: 'map-location-dot', color: 'green', desc: 'Map tweak' },
+  unknown: { icon: 'info-circle', color: 'label', desc: 'Unknown' },
 };
 
 export class Changelog extends Component {
@@ -273,29 +273,27 @@ export class Changelog extends Component {
                   <Box ml={3}>
                     <Table>
                       {changes.map((change) => {
-                        const changeType = Object.keys(change)[0];
+                        const changeKey = Object.keys(change)[0];
+                        const changeType =
+                          changeTypes[changeKey] || changeTypes['unknown'];
                         return (
-                          <Table.Row key={changeType + change[changeType]}>
+                          <Table.Row key={changeKey + change[changeKey]}>
                             <Table.Cell
                               className={classes([
                                 'Changelog__Cell',
                                 'Changelog__Cell--Icon',
                               ])}>
-                              <Icon
-                                color={
-                                  icons[changeType]
-                                    ? icons[changeType].color
-                                    : icons['unknown'].color
-                                }
-                                name={
-                                  icons[changeType]
-                                    ? icons[changeType].icon
-                                    : icons['unknown'].icon
-                                }
-                              />
+                              <Tooltip
+                                position="right"
+                                content={changeType.desc}>
+                                <Icon
+                                  color={changeType.color}
+                                  name={changeType.icon}
+                                />
+                              </Tooltip>
                             </Table.Cell>
                             <Table.Cell className="Changelog__Cell">
-                              {change[changeType]}
+                              {change[changeKey]}
                             </Table.Cell>
                           </Table.Row>
                         );