From 8b63e1acf7b383c20c41b3cddf7cef09659f960b Mon Sep 17 00:00:00 2001
From: Aleksej Komarov <stylemistake@gmail.com>
Date: Fri, 10 Apr 2020 07:41:27 +0300
Subject: [PATCH] Undelete the Layout

---
 tgui/packages/tgui/components/Layout.js |  9 ----
 tgui/packages/tgui/components/index.js  |  1 -
 tgui/packages/tgui/layouts/Layout.js    | 58 +++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 10 deletions(-)
 delete mode 100644 tgui/packages/tgui/components/Layout.js
 create mode 100644 tgui/packages/tgui/layouts/Layout.js

diff --git a/tgui/packages/tgui/components/Layout.js b/tgui/packages/tgui/components/Layout.js
deleted file mode 100644
index 052ac987293..00000000000
--- a/tgui/packages/tgui/components/Layout.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * DELETE ME when you're done moving to Window.
- */
-
-import { Window } from '../layouts';
-
-const Layout = Window;
-
-export { Layout };
diff --git a/tgui/packages/tgui/components/index.js b/tgui/packages/tgui/components/index.js
index 5f5d14b5d1a..a09d333fa1c 100644
--- a/tgui/packages/tgui/components/index.js
+++ b/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';
diff --git a/tgui/packages/tgui/layouts/Layout.js b/tgui/packages/tgui/layouts/Layout.js
new file mode 100644
index 00000000000..7a17612fdeb
--- /dev/null
+++ b/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;