Merge pull request #10737 from ShadowLarkens/tgui_fixes_post_update

TGUI fixes post update

code/modules/reagents/machinery/chem_master.dm

@@ -239,7 +239,7 @@
 				if("create_bottle_multiple")
 					if(condi || !reagents.total_volume)
 						return
-					tgui_modal_input(src, id, "Please enter the amount of bottles to make (max [MAX_MULTI_AMOUNT] at a time):", null, arguments, pillamount, 5)
+					tgui_modal_input(src, id, "Please enter the amount of bottles to make (max [MAX_MULTI_AMOUNT] at a time):", null, arguments, pillamount / 5, 5)
 				if("change_bottle_style")
 					var/list/choices = list()
 					for(var/i = 1 to MAX_BOTTLE_SPRITE)

tgui/packages/tgui/interfaces/ICPrinter.js

@@ -1,7 +1,7 @@
 import { round } from 'common/math';
 import { Fragment } from 'inferno';
 import { useBackend, useSharedState } from "../backend";
-import { Box, Button, Flex, Icon, LabeledList, ProgressBar, Section, Divider, Tabs } from "../components";
+import { Box, Button, Flex, Icon, LabeledList, ProgressBar, Section, Divider, Tabs, Stack } from "../components";
 import { Window } from "../layouts";
 import { sortBy, filter } from 'common/collections';
 import { logger } from '../logging';
@@ -21,7 +21,7 @@ export const ICPrinter = (props, context) => {
   } = data;
 
   return (
-    <Window width={500} height={630}>
+    <Window width={600} height={630}>
       <Window.Content scrollable>
         <Section title="Status">
           <LabeledList>
@@ -44,7 +44,6 @@ export const ICPrinter = (props, context) => {
           </Box>
         </Section>
         <ICPrinterCategories />
-        
       </Window.Content>
     </Window>
   );
@@ -76,38 +75,44 @@ const ICPrinterCategories = (props, context) => {
 
   return (
     <Section title="Circuits">
-      <Tabs>
-        {sortBy(cat => cat.name)(categories).map(cat => (
-          <Tabs.Tab
-            selected={categoryTarget === cat.name}
-            onClick={() => setcategoryTarget(cat.name)}
-            key={cat.name}>
-            {cat.name}
-          </Tabs.Tab>
-        ))}
-      </Tabs>
-      {selectedCategory && (
-        <Section title={selectedCategory.name} level={2}>
-          <LabeledList>
-            {sortBy(item => item.name)(selectedCategory.items).map(item => (
-              <LabeledList.Item
-                key={item.name}
-                label={item.name}
-                labelColor={item.can_build ? "good" : "bad"}
-                buttons={
-                  <Button
-                    disabled={!canBuild(item, data)}
-                    icon="print"
-                    onClick={() => act("build", { build: item.path })}>
-                    Print
-                  </Button>
-                }>
-                {item.desc}
-              </LabeledList.Item>
+      <Stack fill>
+        <Stack.Item mr={2}>
+          <Tabs vertical>
+            {sortBy(cat => cat.name)(categories).map(cat => (
+              <Tabs.Tab
+                selected={categoryTarget === cat.name}
+                onClick={() => setcategoryTarget(cat.name)}
+                key={cat.name}>
+                {cat.name}
+              </Tabs.Tab>
             ))}
-          </LabeledList>
-        </Section>
-      ) || "No category selected."}
+          </Tabs>
+        </Stack.Item>
+        <Stack.Item>
+          {selectedCategory && (
+            <Section>
+              <LabeledList>
+                {sortBy(item => item.name)(selectedCategory.items).map(item => (
+                  <LabeledList.Item
+                    key={item.name}
+                    label={item.name}
+                    labelColor={item.can_build ? "good" : "bad"}
+                    buttons={
+                      <Button
+                        disabled={!canBuild(item, data)}
+                        icon="print"
+                        onClick={() => act("build", { build: item.path })}>
+                        Print
+                      </Button>
+                    }>
+                    {item.desc}
+                  </LabeledList.Item>
+                ))}
+              </LabeledList>
+            </Section>
+          ) || "No category selected."}
+        </Stack.Item>
+      </Stack>
     </Section>
   );
 };

tgui/packages/tgui/interfaces/JanitorCart.js

@@ -64,7 +64,7 @@ export const JanitorCart = (props, context) => {
           height="64px"
           position="relative"
           tooltip={myspray ? myspray : "Spray Slot"}
-          tooltipPosition="top-right"
+          tooltipPosition="top-end"
           color={myspray ? "grey" : "transparent"}
           style={{
             border: myspray ? null : "2px solid grey",
@@ -90,7 +90,7 @@ export const JanitorCart = (props, context) => {
           height="64px"
           position="relative"
           tooltip={signs ? signs : "Signs Slot"}
-          tooltipPosition="top-left"
+          tooltipPosition="top-start"
           color={signs ? "grey" : "transparent"}
           style={{
             border: signs ? null : "2px solid grey",

tgui/packages/tgui/interfaces/RapidPipeDispenser.js

@@ -1,7 +1,7 @@
 import { classes } from 'common/react';
 import { capitalize } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, ColorBox, Flex, LabeledList, Section, Tabs } from '../components';
+import { Box, Button, ColorBox, Stack, LabeledList, Section, Tabs } from '../components';
 import { Window } from '../layouts';
 
 const ROOT_CATEGORIES = [
@@ -41,18 +41,127 @@ const TOOLS = [
   },
 ];
 
-export const RapidPipeDispenser = (props, context) => {
+const SelectionSection = (props, context) => {
   const { act, data } = useBackend(context);
   const {
     category: rootCategoryIndex,
-    categories = [],
     selected_color,
-    paint_colors,
-    piping_layer,
-    pipe_layers,
     mode,
   } = data;
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledList.Item
+          label="Category">
+          {ROOT_CATEGORIES.map((categoryName, i) => (
+            <Button
+              key={categoryName}
+              selected={rootCategoryIndex === i}
+              icon={ICON_BY_CATEGORY_NAME[categoryName]}
+              color="transparent"
+              onClick={() => act('category', { category: i })} >
+              {categoryName}
+            </Button>
+          ))}
+        </LabeledList.Item>
+        <LabeledList.Item label="Modes">
+          <Stack fill>
+            {TOOLS.map(tool => (
+              <Stack.Item grow key={tool.bitmask}>
+                <Button.Checkbox
+                  checked={mode & tool.bitmask}
+                  fluid
+                  content={tool.name}
+                  onClick={() => act('mode', {
+                    mode: tool.bitmask,
+                  })} />
+              </Stack.Item>
+            ))}
+          </Stack>
+        </LabeledList.Item>
+        <LabeledList.Item
+          label="Color">
+          <Box
+            inline
+            width="64px"
+            color={data.paint_colors[selected_color]}>
+            {capitalize(selected_color)}
+          </Box>
+          {Object.keys(data.paint_colors)
+            .map(colorName => (
+              <ColorBox
+                key={colorName}
+                ml={1}
+                color={data.paint_colors[colorName]}
+                onClick={() => act('color', {
+                  paint_color: colorName,
+                })} />
+            ))}
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
+
+const LayerSection = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    category: rootCategoryIndex,
+    piping_layer,
+  } = data;
   const previews = data.preview_rows.flatMap(row => row.previews);
+  return (
+    <Section fill width={7.5}>
+      {rootCategoryIndex === 0 && (
+        <Stack vertical mb={1}>
+          {[1, 2, 3, 4, 5].map(layer => (
+            <Stack.Item my={0} key={layer}>
+              <Button.Checkbox
+                checked={layer === piping_layer}
+                content={'Layer ' + layer}
+                onClick={() => act('piping_layer', {
+                  piping_layer: layer,
+                })} />
+            </Stack.Item>
+          ))}
+        </Stack>
+      )}
+      <Box width="120px">
+        {previews.map(preview => (
+          <Button
+            ml={0}
+            key={preview.dir}
+            title={preview.dir_name}
+            selected={preview.selected}
+            style={{
+              width: '40px',
+              height: '40px',
+              padding: 0,
+            }}
+            onClick={() => act('setdir', {
+              dir: preview.dir,
+              flipped: preview.flipped,
+            })}>
+            <Box
+              className={classes([
+                'pipes32x32',
+                preview.dir + '-' + preview.icon_state,
+              ])}
+              style={{
+                transform: 'scale(1.5) translate(9.5%, 9.5%)',
+              }} />
+          </Button>
+        ))}
+      </Box>
+    </Section>
+  );
+};
+
+const PipeTypeSection = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    categories = [],
+  } = data;
   const [
     categoryName,
     setCategoryName,
@@ -60,135 +169,67 @@ export const RapidPipeDispenser = (props, context) => {
   const shownCategory = categories
     .find(category => category.cat_name === categoryName)
     || categories[0];
+  return (
+    <Section fill scrollable>
+      <Tabs>
+        {categories.map((category, i) => (
+          <Tabs.Tab
+            fluid
+            key={category.cat_name}
+            icon={ICON_BY_CATEGORY_NAME[category.cat_name]}
+            selected={category.cat_name === shownCategory.cat_name}
+            onClick={() => setCategoryName(category.cat_name)}>
+            {category.cat_name}
+          </Tabs.Tab>
+        ))}
+      </Tabs>
+      {shownCategory?.recipes.map(recipe => (
+        <Button.Checkbox
+          key={recipe.pipe_index}
+          fluid
+          ellipsis
+          checked={recipe.selected}
+          content={recipe.pipe_name}
+          title={recipe.pipe_name}
+          onClick={() => act('pipe_type', {
+            pipe_type: recipe.pipe_index,
+            category: shownCategory.cat_name,
+          })} />
+      ))}
+    </Section>
+  );
+};
+
+export const RapidPipeDispenser = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    category: rootCategoryIndex,
+  } = data;
   return (
     <Window
-      width={425}
-      height={515}
-      resizable>
-      <Window.Content scrollable>
-        <Section>
-          <LabeledList>
-            <LabeledList.Item
-              label="Category">
-              {ROOT_CATEGORIES.map((categoryName, i) => (
-                <Button
-                  key={categoryName}
-                  selected={rootCategoryIndex === i}
-                  icon={ICON_BY_CATEGORY_NAME[categoryName]}
-                  color="transparent"
-                  content={categoryName}
-                  onClick={() => act('category', { category: i })} />
-              ))}
-            </LabeledList.Item>
-            <LabeledList.Item label="Modes">
-              {TOOLS.map(tool => (
-                <Button.Checkbox
-                  key={tool.bitmask}
-                  checked={mode & tool.bitmask}
-                  content={tool.name}
-                  onClick={() => act('mode', {
-                    mode: tool.bitmask,
-                  })} />
-              ))}
-            </LabeledList.Item>
-            <LabeledList.Item
-              label="Color">
-              <Box
-                inline
-                width="64px"
-                color={paint_colors[selected_color]}>
-                {capitalize(selected_color)}
-              </Box>
-              {Object.keys(paint_colors)
-                .map(colorName => (
-                  <ColorBox
-                    key={colorName}
-                    ml={1}
-                    color={paint_colors[colorName]}
-                    onClick={() => act('color', {
-                      paint_color: colorName,
-                    })} />
-                ))}
-            </LabeledList.Item>
-          </LabeledList>
-        </Section>
-        <Flex m={-0.5}>
-          <Flex.Item m={0.5}>
-            <Section>
-              {rootCategoryIndex === 0 && (
-                <Box mb={1}>
-                  {Object.keys(pipe_layers)
-                    .map(layerName => (
-                      <Button.Checkbox
-                        key={layerName}
-                        fluid
-                        checked={pipe_layers[layerName] === piping_layer}
-                        content={layerName}
-                        onClick={() => act('piping_layer', {
-                          piping_layer: pipe_layers[layerName],
-                        })} />
-                    ))}
-                </Box>
-              )}
-              <Box width="108px">
-                {previews.map(preview => (
-                  <Button
-                    key={preview.dir}
-                    title={preview.dir_name}
-                    selected={preview.selected}
-                    style={{
-                      width: '48px',
-                      height: '48px',
-                      padding: 0,
-                    }}
-                    onClick={() => act('setdir', {
-                      dir: preview.dir,
-                      flipped: preview.flipped,
-                    })}>
-                    <Box
-                      className={classes([
-                        'pipes32x32',
-                        preview.dir + '-' + preview.icon_state,
-                      ])}
-                      style={{
-                        transform: 'scale(1.5) translate(17%, 17%)',
-                      }} />
-                  </Button>
-                ))}
-              </Box>
-            </Section>
-          </Flex.Item>
-          <Flex.Item m={0.5} grow={1}>
-            <Section>
-              <Tabs>
-                {categories.map((category, i) => (
-                  <Tabs.Tab
-                    fluid
-                    key={category.cat_name}
-                    icon={ICON_BY_CATEGORY_NAME[category.cat_name]}
-                    selected={category.cat_name === shownCategory.cat_name}
-                    onClick={() => setCategoryName(category.cat_name)}>
-                    {category.cat_name}
-                  </Tabs.Tab>
-                ))}
-              </Tabs>
-              {shownCategory?.recipes.map(recipe => (
-                <Button.Checkbox
-                  key={recipe.pipe_index}
-                  fluid
-                  ellipsis
-                  checked={recipe.selected}
-                  content={recipe.pipe_name}
-                  title={recipe.pipe_name}
-                  onClick={() => act('pipe_type', {
-                    pipe_type: recipe.pipe_index,
-                    category: shownCategory.cat_name,
-                  })} />
-              ))}
-            </Section>
-          </Flex.Item>
-        </Flex>
+      width={550}
+      height={570}>
+      <Window.Content>
+        <Stack fill vertical>
+          <Stack.Item>
+            <SelectionSection />
+          </Stack.Item>
+          <Stack.Item grow>
+            <Stack fill>
+              <Stack.Item>
+                <Stack vertical fill>
+                  <Stack.Item grow>
+                    <LayerSection />
+                  </Stack.Item>
+                </Stack>
+              </Stack.Item>
+              <Stack.Item grow>
+                <PipeTypeSection />
+              </Stack.Item>
+            </Stack>
+          </Stack.Item>
+        </Stack>
       </Window.Content>
     </Window>
   );
-};
+};

tgui/packages/tgui/interfaces/common/ComplexModal.js

@@ -102,7 +102,7 @@ export const ComplexModal = (props, context) => {
         placeholder="ENTER to submit"
         width="100%"
         my="0.5rem"
-        autofocus
+        autoFocus
         onChange={(_e, val) => {
           curValue = val;
         }}

tgui/packages/tgui/styles/components/Section.scss

@@ -95,7 +95,7 @@ $separator-color: colors.$primary !default;
   overflow-y: hidden;
 
   & > .Section__rest > .Section__content {
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
   }
 }