Undelete the Layout

tgui/packages/tgui/components/Layout.js

@@ -1,9 +0,0 @@
-/**
- * DELETE ME when you're done moving to Window.
- */
-
-import { Window } from '../layouts';
-
-const Layout = Window;
-
-export { Layout };

tgui/packages/tgui/components/index.js

@@ -15,7 +15,6 @@ export { Icon } from './Icon';
 export { Input } from './Input';
 export { Knob } from './Knob';
 export { LabeledList } from './LabeledList';
-export { Layout } from './Layout';
 export { NoticeBox } from './NoticeBox';
 export { NumberInput } from './NumberInput';
 export { ProgressBar } from './ProgressBar';

tgui/packages/tgui/layouts/Layout.js

@@ -0,0 +1,58 @@
+import { classes } from 'common/react';
+import { tridentVersion } from '../byond';
+
+/**
+ * Brings Layout__content DOM element back to focus.
+ *
+ * Commonly used to keep the content scrollable in IE.
+ */
+export const refocusLayout = () => {
+  // IE8: Focus method is seemingly fucked.
+  if (tridentVersion <= 4) {
+    return;
+  }
+  const element = document.getElementById('Layout__content');
+  if (element) {
+    element.focus();
+  }
+};
+
+export const Layout = props => {
+  const {
+    className,
+    theme = 'nanotrasen',
+    children,
+  } = props;
+  return (
+    <div className={'theme-' + theme}>
+      <div
+        className={classes([
+          'Layout',
+          className,
+        ])}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const LayoutContent = props => {
+  const {
+    className,
+    scrollable,
+    children,
+  } = props;
+  return (
+    <div
+      id="Layout__content"
+      className={classes([
+        'Layout__content',
+        scrollable && 'Layout__content--scrollable',
+        className,
+      ])}>
+      {children}
+    </div>
+  );
+};
+
+Layout.Content = LayoutContent;