@@ -172,7 +185,7 @@ export class NumberInput extends Component {
{contentElement}
{
- const { value, content, color, children } = props;
+ const {
+ value,
+ minValue = 0,
+ maxValue = 1,
+ ranges = {},
+ content,
+ children,
+ } = props;
+ let { color } = props;
+ const scaledValue = (value - minValue) / (maxValue - minValue);
const hasContent = content !== undefined || children !== undefined;
+ if (!color) {
+ // Cycle through ranges in key order to determine progressbar color.
+ for (let rangeName of Object.keys(ranges)) {
+ const range = ranges[rangeName];
+ if (range && value >= range[0] && value <= range[1]) {
+ color = rangeName;
+ break;
+ }
+ }
+ }
return (
{
{hasContent && content}
{hasContent && children}
- {!hasContent && toFixed(value * 100) + '%'}
+ {!hasContent && toFixed(scaledValue * 100) + '%'}
);
diff --git a/tgui-next/packages/tgui/components/ProgressBar.scss b/tgui-next/packages/tgui/components/ProgressBar.scss
index 17a9e03670d..8d331a5df98 100644
--- a/tgui-next/packages/tgui/components/ProgressBar.scss
+++ b/tgui-next/packages/tgui/components/ProgressBar.scss
@@ -13,7 +13,7 @@
top: 0;
left: 0;
bottom: 0;
- transition: background-color, width 500ms;
+ transition: background-color 500ms, width 500ms;
background-color: $bar-color-normal;
}
diff --git a/tgui-next/packages/tgui/components/TitleBar.scss b/tgui-next/packages/tgui/components/TitleBar.scss
index 9335ed5211e..0eefd27e000 100644
--- a/tgui-next/packages/tgui/components/TitleBar.scss
+++ b/tgui-next/packages/tgui/components/TitleBar.scss
@@ -9,12 +9,12 @@
.TitleBar__clickable {
color: rgba(255, 255, 255, 0.5);
background-color: darken($titlebar-color-background, 0%);
- transition: color, background-color 250ms;
+ transition: color 250ms, background-color 250ms;
&:hover {
color: rgba(255, 255, 255, 1.0);
background-color: #c00;
- transition: color, background-color 0ms;
+ transition: color 0ms, background-color 0ms;
}
}
diff --git a/tgui-next/packages/tgui/components/index.js b/tgui-next/packages/tgui/components/index.js
index 3aa79f0b4fa..e49260c0d90 100644
--- a/tgui-next/packages/tgui/components/index.js
+++ b/tgui-next/packages/tgui/components/index.js
@@ -1,9 +1,11 @@
export { AnimatedNumber } from './AnimatedNumber';
+export { BlockQuote } from './BlockQuote';
export { Box } from './Box';
export { Button } from './Button';
export { Flex } from './Flex';
export { Grid } from './Grid';
export { Icon } from './Icon';
+export { Input } from './Input';
export { LabeledList } from './LabeledList';
export { NoticeBox } from './NoticeBox';
export { NumberInput } from './NumberInput';
diff --git a/tgui-next/packages/tgui/interfaces/KitchenSink.js b/tgui-next/packages/tgui/interfaces/KitchenSink.js
index 23290e1093d..8e4c0dfd8e9 100644
--- a/tgui-next/packages/tgui/interfaces/KitchenSink.js
+++ b/tgui-next/packages/tgui/interfaces/KitchenSink.js
@@ -1,5 +1,8 @@
-import { Fragment, Component } from 'inferno';
-import { Section, Tabs, Box, Button, Flex, ProgressBar, Tooltip } from '../components';
+import { Component, Fragment } from 'inferno';
+import {
+ Box, Button, Flex, Input, LabeledList, NumberInput,
+ ProgressBar, Section, Tabs, Tooltip,
+} from '../components';
const COLORS_ARBITRARY = [
'black',
@@ -44,6 +47,7 @@ export const KitchenSink = props => {
);
};
@@ -116,7 +120,16 @@ class KitchenSinkProgress extends Component {
const { progress } = this.state;
return (