diff --git a/tgui-next/packages/tgui/components/Box.js b/tgui-next/packages/tgui/components/Box.js index 93b8e6f2fa..5fa678681c 100644 --- a/tgui-next/packages/tgui/components/Box.js +++ b/tgui-next/packages/tgui/components/Box.js @@ -57,6 +57,13 @@ const mapColorPropTo = attrName => (style, value) => { const styleMapperByPropName = { // Direct mapping position: mapRawPropTo('position'), + overflow: mapRawPropTo('overflow'), + overflowX: mapRawPropTo('overflow-x'), + overflowY: mapRawPropTo('overflow-y'), + top: mapUnitPropTo('top'), + bottom: mapUnitPropTo('bottom'), + left: mapUnitPropTo('left'), + right: mapUnitPropTo('right'), width: mapUnitPropTo('width'), minWidth: mapUnitPropTo('min-width'), maxWidth: mapUnitPropTo('max-width'), @@ -68,6 +75,7 @@ const styleMapperByPropName = { lineHeight: mapUnitPropTo('line-height'), opacity: mapRawPropTo('opacity'), textAlign: mapRawPropTo('text-align'), + verticalAlign: mapRawPropTo('vertical-align'), // Boolean props inline: mapBooleanPropTo('display', 'inline-block'), bold: mapBooleanPropTo('font-weight', 'bold'), diff --git a/tgui-next/packages/tgui/components/Button.js b/tgui-next/packages/tgui/components/Button.js index 031098efe1..5ed0c8648b 100644 --- a/tgui-next/packages/tgui/components/Button.js +++ b/tgui-next/packages/tgui/components/Button.js @@ -1,11 +1,14 @@ import { classes, pureComponentHooks } from 'common/react'; -import { tridentVersion } from '../byond'; +import { tridentVersion, act } from '../byond'; import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from '../hotkeys'; import { createLogger } from '../logging'; import { refocusLayout } from '../refocus'; import { Box } from './Box'; import { Icon } from './Icon'; import { Tooltip } from './Tooltip'; +import { Input } from './Input'; +import { Component, createRef } from 'inferno'; +import { Grid } from './Grid'; const logger = createLogger('Button'); @@ -21,6 +24,8 @@ export const Button = props => { tooltipPosition, ellipsis, content, + iconRotation, + iconSpin, children, onclick, onClick, @@ -78,7 +83,7 @@ export const Button = props => { }} {...rest}> {icon && ( - + )} {content} {children} @@ -105,3 +110,148 @@ export const ButtonCheckbox = props => { }; Button.Checkbox = ButtonCheckbox; + +export class ButtonConfirm extends Component { + constructor() { + super(); + this.state = { + clickedOnce: false, + }; + this.handleClick = () => { + if (this.state.clickedOnce) { + this.setClickedOnce(false); + } + }; + } + + setClickedOnce(clickedOnce) { + this.setState({ + clickedOnce, + }); + if (clickedOnce) { + setTimeout(() => window.addEventListener('click', this.handleClick)); + } + else { + window.removeEventListener('click', this.handleClick); + } + } + + render() { + const { + confirmMessage = "Confirm?", + confirmColor = "bad", + color, + content, + onClick, + ...rest + } = this.props; + return ( +