Fix for strip menu? (#2529)

Not sure why the topic limit is getting nuked by this TGUI component. Tried to update to be close-ish to current tgstation (minus all the new features)
Mojave-Sun · May 18, 2024 · 8c381ce · 8c381ce
1 parent 2e44d97
commit 8c381ce
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 42 deletions.
diff --git a/code/modules/tgui/external.dm b/code/modules/tgui/external.dm
@@ -86,7 +86,7 @@
  */
 /datum/proc/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
 	SHOULD_CALL_PARENT(TRUE)
-	SEND_SIGNAL(src, COMSIG_UI_ACT, usr, action)
+	SEND_SIGNAL(src, COMSIG_UI_ACT, usr, action, params)
 	// If UI is not interactive or usr calling Topic is not the UI user, bail.
 	if(!ui || ui.status != UI_INTERACTIVE)
 		return TRUE

diff --git a/tgui/packages/tgui/interfaces/StripMenu.tsx b/tgui/packages/tgui/interfaces/StripMenu.tsx
@@ -3,7 +3,7 @@ import { BooleanLike } from 'common/react';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Stack } from '../components';
+import { Box, Button, Icon, Image, Stack } from '../components';
 import { Window } from '../layouts';
 
 const ROWS = 5;
@@ -28,8 +28,8 @@ const CornerText = (props: {
       style={{
         position: 'relative',
         left: align === 'left' ? '2px' : '-2px',
-        'text-align': align,
-        'text-shadow': '1px 1px 1px #555',
+        textAlign: align,
+        textShadow: '1px 1px 1px #555',
       }}
     >
       {children}
@@ -72,6 +72,11 @@ const ALTERNATE_ACTIONS: Record<string, AlternateAction> = {
     icon: 'tshirt',
     text: 'Adjust jumpsuit',
   },
+
+  adjust_sensor: {
+    icon: 'microchip',
+    text: 'Adjust sensors',
+  },
 };
 
 const SLOTS: Record<
@@ -107,7 +112,7 @@ const SLOTS: Record<
     image: 'inventory-mask.png',
   },
 
-  corgi_collar: {
+  pet_collar: {
     displayName: 'collar',
     gridSpot: getGridSpotKey([1, 2]),
     image: 'inventory-collar.png',
@@ -236,7 +241,7 @@ type StripMenuItem =
       | {
           icon: string;
           name: string;
-          alternate?: string;
+          alternate?: string[];
         }
       | {
           obscured: ObscuringLevel;
@@ -283,27 +288,20 @@ export const StripMenu = (props) => {
                   const item = data.items[keyAtSpot];
                   const slot = SLOTS[keyAtSpot];
 
-                  let alternateAction: AlternateAction | undefined;
-
-                  let content;
-                  let tooltip;
+                  let content: JSX.Element | undefined;
+                  let alternateActions: JSX.Element[] | undefined;
+                  let tooltip: string | undefined;
 
                   if (item === null) {
                     tooltip = slot.displayName;
                   } else if ('name' in item) {
-                    if (item.alternate) {
-                      alternateAction = ALTERNATE_ACTIONS[item.alternate];
-                    }
-
                     content = (
-                      <Box
-                        as="img"
+                      <Image
                         src={`data:image/jpeg;base64,${item.icon}`}
                         height="100%"
                         width="100%"
                         style={{
-                          '-ms-interpolation-mode': 'nearest-neighbor',
-                          'vertical-align': 'middle',
+                          verticalAlign: 'middle',
                         }}
                       />
                     );
@@ -321,7 +319,7 @@ export const StripMenu = (props) => {
                         ml={0}
                         mt={1.3}
                         style={{
-                          'text-align': 'center',
+                          textAlign: 'center',
                           height: '100%',
                           width: '100%',
                         }}
@@ -361,12 +359,11 @@ export const StripMenu = (props) => {
                             position: 'relative',
                             width: '100%',
                             height: '100%',
-                            padding: 0,
+                            padding: '0',
                           }}
                         >
                           {slot.image && (
-                            <Box
-                              as="img"
+                            <Image
                               className="centered-image"
                               src={resolveAsset(slot.image)}
                               opacity={0.7}
@@ -377,26 +374,7 @@ export const StripMenu = (props) => {
 
                           {slot.additionalComponent}
                         </Button>
-
-                        {alternateAction !== undefined && (
-                          <Button
-                            onClick={() => {
-                              act('alt', {
-                                key: keyAtSpot,
-                              });
-                            }}
-                            tooltip={alternateAction.text}
-                            style={{
-                              background: 'rgba(0, 0, 0, 0.6)',
-                              position: 'absolute',
-                              bottom: 0,
-                              right: 0,
-                              'z-index': 2,
-                            }}
-                          >
-                            <Icon name={alternateAction.icon} />
-                          </Button>
-                        )}
+                        {alternateActions}
                       </Box>
                     </Stack.Item>
                   );