tgui: Remove Flex IE fixes, Fix IE8 button clicks (tgstation#61496)

At this point we're fixing a corpse, but at least this removes some IE related code. See changelog. computeFlexProps now properly inherits computeBoxProps, which makes its usage a bit cleaner. Changelog cl fix: tgui: IE8: Removed "iefix" css classes from Flex elements which resulted in unusable layout in complex UIs, such as tgui prefs. fix: tgui: IE8: Fixed button clicks. /cl
Horatio22 · Sep 22, 2021 · b1edd35 · b1edd35
1 parent c2a45ca
commit b1edd35
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 60 deletions.
diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
@@ -46,8 +46,15 @@ export const Button = props => {
       + `'onClick' instead and read: `
       + `https://infernojs.org/docs/guides/event-handling`);
   }
-  // IE8: Use a lowercase "onclick" because synthetic events are fucked.
-  // IE8: Use an "unselectable" prop because "user-select" doesn't work.
+  rest.onClick = e => {
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+  // IE8: Use "unselectable" because "user-select" doesn't work.
+  if (Byond.IS_LTE_IE8) {
+    rest.unselectable = true;
+  }
   let buttonContent = (
     <div
       className={classes([
@@ -67,17 +74,10 @@ export const Button = props => {
         computeBoxClassName(rest),
       ])}
       tabIndex={!disabled && '0'}
-      unselectable={Byond.IS_LTE_IE8}
-      onClick={e => {
-        if (!disabled && onClick) {
-          onClick(e);
-        }
-      }}
       onKeyDown={e => {
         if (props.captureKeys === false) {
           return;
         }
-
         const keyCode = window.event ? e.which : e.keyCode;
         // Simulate a click when pressing space or enter.
         if (keyCode === KEY_SPACE || keyCode === KEY_ENTER) {

diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx
@@ -18,12 +18,10 @@ export type FlexProps = BoxProps & {
 export const computeFlexClassName = (props: FlexProps) => {
   return classes([
     'Flex',
-    Byond.IS_LTE_IE10 && (
-      props.direction === 'column'
-        ? 'Flex--iefix--column'
-        : 'Flex--iefix'
-    ),
     props.inline && 'Flex--inline',
+    Byond.IS_LTE_IE10 && 'Flex--iefix',
+    Byond.IS_LTE_IE10 && props.direction === 'column' && 'Flex--iefix--column',
+    computeBoxClassName(props),
   ]);
 };
 
@@ -37,7 +35,7 @@ export const computeFlexProps = (props: FlexProps) => {
     inline,
     ...rest
   } = props;
-  return {
+  return computeBoxProps({
     style: {
       ...rest.style,
       'flex-direction': direction,
@@ -46,7 +44,7 @@ export const computeFlexProps = (props: FlexProps) => {
       'justify-content': justify,
     },
     ...rest,
-  };
+  });
 };
 
 export const Flex = props => {
@@ -56,9 +54,8 @@ export const Flex = props => {
       className={classes([
         className,
         computeFlexClassName(rest),
-        computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(computeFlexProps(rest))}
+      {...computeFlexProps(rest)}
     />
   );
 };
@@ -77,7 +74,7 @@ export const computeFlexItemClassName = (props: FlexItemProps) => {
   return classes([
     'Flex__item',
     Byond.IS_LTE_IE10 && 'Flex__item--iefix',
-    Byond.IS_LTE_IE10 && (props.grow && props.grow > 0) && 'Flex__item--iefix--grow',
+    computeBoxClassName(props),
   ]);
 };
 
@@ -94,7 +91,7 @@ export const computeFlexItemProps = (props: FlexItemProps) => {
     align,
     ...rest
   } = props;
-  return {
+  return computeBoxProps({
     style: {
       ...style,
       'flex-grow': grow !== undefined && Number(grow),
@@ -104,7 +101,7 @@ export const computeFlexItemProps = (props: FlexItemProps) => {
       'align-self': align,
     },
     ...rest,
-  };
+  });
 };
 
 const FlexItem = props => {
@@ -114,9 +111,8 @@ const FlexItem = props => {
       className={classes([
         className,
         computeFlexItemClassName(props),
-        computeBoxClassName(props),
       ])}
-      {...computeBoxProps(computeFlexItemProps(rest))}
+      {...computeFlexItemProps(rest)}
     />
   );
 };

diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx
@@ -6,7 +6,6 @@
 
 import { classes } from 'common/react';
 import { RefObject } from 'inferno';
-import { computeBoxClassName, computeBoxProps } from './Box';
 import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, computeFlexProps, FlexItemProps, FlexProps } from './Flex';
 
 type StackProps = FlexProps & {
@@ -26,12 +25,11 @@ export const Stack = (props: StackProps) => {
           : 'Stack--horizontal',
         className,
         computeFlexClassName(props),
-        computeBoxClassName(props),
       ])}
-      {...computeBoxProps(computeFlexProps({
+      {...computeFlexProps({
         direction: vertical ? 'column' : 'row',
         ...rest,
-      }))}
+      })}
     />
   );
 };
@@ -48,10 +46,9 @@ const StackItem = (props: StackItemProps) => {
         'Stack__item',
         className,
         computeFlexItemClassName(rest),
-        computeBoxClassName(rest),
       ])}
       ref={innerRef}
-      {...computeBoxProps(computeFlexItemProps(rest))}
+      {...computeFlexItemProps(rest)}
     />
   );
 };
@@ -72,9 +69,8 @@ const StackDivider = (props: StackDividerProps) => {
         hidden && 'Stack__divider--hidden',
         className,
         computeFlexItemClassName(rest),
-        computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(computeFlexItemProps(rest))}
+      {...computeFlexItemProps(rest)}
     />
   );
 };

diff --git a/tgui/packages/tgui/styles/components/Flex.scss b/tgui/packages/tgui/styles/components/Flex.scss
@@ -13,40 +13,19 @@
 }
 
 .Flex--iefix {
-  display: table !important;
-  width: 105%;
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  &:after {
-    content: '';
-    display: table-cell;
-    width: 5%;
-  }
+  display: block;
 }
 
-.Flex--iefix--column {
-  display: table !important;
-  width: 100% !important;
-  height: 100% !important;
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  & > .Flex__item--iefix {
-    display: table-row !important;
-  }
-
-  & > .Flex__item--iefix--grow {
-    height: 100% !important;
-  }
+.Flex--iefix.Flex--inline {
+  display: inline-block;
 }
 
 .Flex__item--iefix {
-  display: table-cell !important;
-  width: 1% !important;
-  min-width: 99%;
+  display: inline-block;
 }
 
-.Flex__item--iefix--grow {
-  width: auto !important;
+.Flex--iefix--column {
+  & > .Flex__item--iefix {
+    display: block;
+  }
 }