From 7e2daea70a074ef2b1a13169bc199ad2bad93c59 Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Thu, 23 Sep 2021 02:45:00 +0200 Subject: [PATCH] tgui: Remove Flex IE fixes, Fix IE8 button clicks (#8315) Co-authored-by: Aleksej Komarov Co-authored-by: Gandalf --- tgui/packages/tgui/components/Button.js | 18 ++++----- tgui/packages/tgui/components/Flex.tsx | 24 +++++------- tgui/packages/tgui/components/Stack.tsx | 12 ++---- .../packages/tgui/styles/components/Flex.scss | 37 ++++--------------- 4 files changed, 31 insertions(+), 60 deletions(-) diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js index fec3153021d..b4b9b905b18 100644 --- 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 = (
{ 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 index 125a4bc40b3..437b58f0480 100644 --- 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 index 1a6ace07f39..54c5e723bce 100644 --- 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 index c813414d0d3..d4b6b8ec388 100644 --- 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; + } }