From 4fa57b6936812a592e9004b6cce48c2299e53bc1 Mon Sep 17 00:00:00 2001
From: SabreML <57483089+SabreML@users.noreply.github.com>
Date: Mon, 19 Feb 2024 06:50:14 +0000
Subject: [PATCH] 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:
---
 tgui/packages/tgui/interfaces/Changelog.jsx | 84 ++++++++++-----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Changelog.jsx b/tgui/packages/tgui/interfaces/Changelog.jsx
index 5d2fa9447b47..91d107673675 100644
--- 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>
                         );