From e7573ea80f8ecd691d7a53bc43ebc6e16b5d90ce Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Tue, 9 Feb 2021 00:49:17 +0100 Subject: [PATCH] [MIRROR] Fix ExoFab UI and Section bugs, improve Tabs, upgrade deps (#3213) * Fix ExoFab UI and Section bugs, improve Tabs, upgrade deps (#56721) Fixes #56237 Unblocks #56704 Besides fixing the above mentioned issue with ExoFab UI, I fixed a few tgui component bugs and added a few improvements. Not really atomizable, sorry. Section changes level property is now gone, section level is automatically calculated. Nested sections automatically become transparent. Nested sections are now properly incapsulated and won't inherit properties of parent sections. This allows using nested non-scrollable sections, while parent is, for example, scrollable. Tabs changes Tabs without a parent section will pretend they are a section (and will look as such, with dark background). Top corners of tabs are a bit rounded to make it look more like a tab. Background color for selected and hovered tabs (previously it was just an underline). 2px margin around the tabs, to make them stand out a bit from the section background. Two new props: fill - Same as
fluid - Tabs use full width of the container. scrollable property was not implemented because it's a bit complicated (requires converting it into a class, registering its scrollable node with tgui, etc). If you need scrollable, just wrap tabs with a Section like a good man. * Fix ExoFab UI and Section bugs, improve Tabs, upgrade deps Co-authored-by: Aleksej Komarov --- tgui/docs/component-reference.md | 38 +- tgui/package.json | 22 +- tgui/packages/tgui-dev-server/package.json | 2 +- tgui/packages/tgui-panel/Panel.js | 2 +- .../tgui-panel/styles/themes/light.scss | 8 +- tgui/packages/tgui-polyfill/package.json | 2 +- tgui/packages/tgui/components/Section.js | 22 +- tgui/packages/tgui/components/Tabs.js | 2 + .../tgui/interfaces/ExosuitFabricator.js | 166 +- tgui/packages/tgui/package.json | 2 +- tgui/packages/tgui/stories/Tabs.stories.js | 81 +- .../tgui/styles/components/Section.scss | 60 +- .../packages/tgui/styles/components/Tabs.scss | 35 + tgui/packages/tgui/styles/themes/paper.scss | 1 - tgui/yarn.lock | 1351 +++++++++-------- 15 files changed, 979 insertions(+), 815 deletions(-) diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index 375322d8acf..29be4ef527c 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -838,10 +838,12 @@ If you want to have a button on the right side of an section title
``` +**New:** Sections can now be nested, and will automatically font size of the +header according to their nesting level. Previously this was done via `level` +prop, but now it is automatically calculated. + - See inherited props: [Box](#box) - `title: string` - Title of the section. -- `level: number` - Section level in hierarchy. Default is 1, higher number -means deeper level of nesting. Must be an integer number. - `buttons: any` - Buttons to render aside the section title. - `fill: boolean` - If true, fills all available vertical space. - `fitted: boolean` - If true, removes all section padding. @@ -1025,25 +1027,41 @@ Notice that tabs do not contain state. It is your job to track the selected tab, handle clicks and place tab content where you need it. In return, you get a lot of flexibility in regards to how you can layout your tabs. -Tabs also support a vertical configuration. This is usually paired with a -[Flex](#flex) component to render tab content to the right. +Tabs also support a vertical configuration. This is usually paired with +[Stack](#stack) to render tab content to the right. ```jsx - - + + ... - - + + Tab content. - - + + +``` + +If you need to combine a tab section with other elements, or if you want to +add scrollable functionality to tabs, pair them with the [Section](#section) +component: + +```jsx +
+ + ... + + ... other things ... +
``` **Props:** - See inherited props: [Box](#box) +- `fluid: boolean` - If true, tabs will take all available horizontal space. +- `fill: boolean` - Similarly to `fill` on [Section](#section), tabs will fill +all available vertical space. Only makes sense in a vertical configuration. - `vertical: boolean` - Use a vertical configuration, where tabs will be stacked vertically. - `children: Tab[]` - This component only accepts tabs as its children. diff --git a/tgui/package.json b/tgui/package.json index a7e81ae305b..db6fbd44123 100644 --- a/tgui/package.json +++ b/tgui/package.json @@ -6,28 +6,28 @@ "packages/*" ], "dependencies": { - "@babel/core": "^7.12.10", - "@babel/eslint-parser": "^7.12.1", - "@babel/plugin-transform-jscript": "^7.12.1", - "@babel/preset-env": "^7.12.11", + "@babel/core": "^7.12.13", + "@babel/eslint-parser": "^7.12.13", + "@babel/plugin-transform-jscript": "^7.12.13", + "@babel/preset-env": "^7.12.13", "babel-loader": "^8.2.2", "babel-plugin-inferno": "^6.1.1", "babel-plugin-transform-remove-console": "^6.9.4", "common": "workspace:*", "css-loader": "^5.0.1", "cssnano": "^4.1.10", - "eslint": "^7.18.0", + "eslint": "^7.19.0", "eslint-plugin-react": "^7.22.0", "file-loader": "^6.2.0", "inferno": "^7.4.7", - "mini-css-extract-plugin": "^1.3.4", - "sass": "^1.32.4", - "sass-loader": "^10.1.1", + "mini-css-extract-plugin": "^1.3.5", + "sass": "^1.32.6", + "sass-loader": "^11.0.0", "style-loader": "^2.0.0", "terser-webpack-plugin": "^5.1.1", "url-loader": "^4.1.1", - "webpack": "^5.15.0", - "webpack-bundle-analyzer": "^4.3.0", - "webpack-cli": "^4.3.1" + "webpack": "^5.21.1", + "webpack-bundle-analyzer": "^4.4.0", + "webpack-cli": "^4.5.0" } } diff --git a/tgui/packages/tgui-dev-server/package.json b/tgui/packages/tgui-dev-server/package.json index f69af69dcba..5a04f61d75e 100644 --- a/tgui/packages/tgui-dev-server/package.json +++ b/tgui/packages/tgui-dev-server/package.json @@ -9,6 +9,6 @@ "glob": "^7.1.6", "source-map": "^0.7.3", "stacktrace-parser": "^0.1.10", - "ws": "^7.4.2" + "ws": "^7.4.3" } } diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js index 9b05abdf03e..4930eb33a04 100644 --- a/tgui/packages/tgui-panel/Panel.js +++ b/tgui/packages/tgui-panel/Panel.js @@ -37,7 +37,7 @@ export const Panel = (props, context) => {
- + diff --git a/tgui/packages/tgui-panel/styles/themes/light.scss b/tgui/packages/tgui-panel/styles/themes/light.scss index 9c867b14d44..41cd8c888b5 100644 --- a/tgui/packages/tgui-panel/styles/themes/light.scss +++ b/tgui/packages/tgui-panel/styles/themes/light.scss @@ -36,13 +36,7 @@ 'text-color': rgba(0, 0, 0, 0.5), 'color-default': rgba(0, 0, 0, 1), )); - @include meta.load-css('~tgui/styles/components/Section.scss', $with: ( - // 'background-color': rgba(0, 0, 0, 0.1), - 'shadow-color': rgba(0, 0, 0, 0.1), - 'shadow-size': 1em, - 'shadow-type': outset, - 'shadow-offset': 0 0.2em, - )); + @include meta.load-css('~tgui/styles/components/Section.scss'); @include meta.load-css('~tgui/styles/components/Button.scss', $with: ( 'color-default': #bbbbbb, 'color-disabled': #363636, diff --git a/tgui/packages/tgui-polyfill/package.json b/tgui/packages/tgui-polyfill/package.json index 4f43bd05ccd..e640d95e14e 100644 --- a/tgui/packages/tgui-polyfill/package.json +++ b/tgui/packages/tgui-polyfill/package.json @@ -3,7 +3,7 @@ "name": "tgui-polyfill", "version": "4.3.0", "dependencies": { - "core-js": "^3.8.2", + "core-js": "^3.8.3", "regenerator-runtime": "^0.13.7", "whatwg-fetch": "^3.5.0" } diff --git a/tgui/packages/tgui/components/Section.js b/tgui/packages/tgui/components/Section.js index 90f5463e0e1..3b6901ea889 100644 --- a/tgui/packages/tgui/components/Section.js +++ b/tgui/packages/tgui/components/Section.js @@ -12,19 +12,19 @@ import { computeBoxClassName, computeBoxProps } from './Box'; export class Section extends Component { constructor(props) { super(props); - this.ref = createRef(); + this.scrollableRef = createRef(); this.scrollable = props.scrollable; } componentDidMount() { if (this.scrollable) { - addScrollableNode(this.ref.current); + addScrollableNode(this.scrollableRef.current); } } componentWillUnmount() { if (this.scrollable) { - removeScrollableNode(this.ref.current); + removeScrollableNode(this.scrollableRef.current); } } @@ -32,7 +32,6 @@ export class Section extends Component { const { className, title, - level = 1, buttons, fill, fitted, @@ -41,21 +40,10 @@ export class Section extends Component { ...rest } = this.props; const hasTitle = canRender(title) || canRender(buttons); - const content = fitted - ? children - : ( -
- {children} -
- ); return (
)}
- {content} +
+ {children} +
); diff --git a/tgui/packages/tgui/components/Tabs.js b/tgui/packages/tgui/components/Tabs.js index 359b00d359d..ca0453f8da3 100644 --- a/tgui/packages/tgui/components/Tabs.js +++ b/tgui/packages/tgui/components/Tabs.js @@ -12,6 +12,7 @@ export const Tabs = props => { const { className, vertical, + fill, fluid, children, ...rest @@ -23,6 +24,7 @@ export const Tabs = props => { vertical ? 'Tabs--vertical' : 'Tabs--horizontal', + fill && 'Tabs--fill', fluid && 'Tabs--fluid', className, computeBoxClassName(rest), diff --git a/tgui/packages/tgui/interfaces/ExosuitFabricator.js b/tgui/packages/tgui/interfaces/ExosuitFabricator.js index f23b1d6fad5..1d3e901607e 100644 --- a/tgui/packages/tgui/interfaces/ExosuitFabricator.js +++ b/tgui/packages/tgui/interfaces/ExosuitFabricator.js @@ -386,20 +386,22 @@ const PartLists = (props, context) => {
- {!!searchText && ( - - ) || ( - Object.keys(partsList).map(category => ( +
+ {!!searchText && ( - )) - )} + name={"Search Results"} + parts={partsList} + forceShow + placeholder="No matching results..." /> + ) || ( + Object.keys(partsList).map(category => ( + + )) + )} +
); @@ -419,77 +421,77 @@ const PartCategory = (props, context) => { const [ displayMatCost, ] = useSharedState(context, 'display_mats', false); + if (!forceShow && parts.length === 0) { + return null; + } return ( - ((!!parts.length || forceShow) && ( -
act("add_queue_set", { - part_list: parts.map(part => part.id), - })} /> - }> - {!parts.length && placeholder} - {parts.map(part => ( - - - -
- )) + )} + + ))} + ); }; diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json index ae10d0785c5..826091661a8 100644 --- a/tgui/packages/tgui/package.json +++ b/tgui/packages/tgui/package.json @@ -7,7 +7,7 @@ "dompurify": "^2.2.6", "inferno": "^7.4.7", "inferno-vnode-flags": "^7.4.7", - "marked": "^1.2.7", + "marked": "^1.2.9", "tgui-dev-server": "workspace:*", "tgui-polyfill": "workspace:*" } diff --git a/tgui/packages/tgui/stories/Tabs.stories.js b/tgui/packages/tgui/stories/Tabs.stories.js index dfedb7f24c7..44ee1218bcb 100644 --- a/tgui/packages/tgui/stories/Tabs.stories.js +++ b/tgui/packages/tgui/stories/Tabs.stories.js @@ -5,7 +5,7 @@ */ import { useLocalState } from '../backend'; -import { Button, Section, Tabs } from '../components'; +import { Box, Button, Divider, Section, Tabs } from '../components'; export const meta = { title: 'Tabs', @@ -20,7 +20,6 @@ const TAB_RANGE = [ ]; const Story = (props, context) => { - const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); const [tabProps, setTabProps] = useLocalState(context, 'tabProps', {}); return ( <> @@ -67,43 +66,59 @@ const Story = (props, context) => { })} /> setTabProps({ ...tabProps, - leftAligned: !tabProps.leftAligned, + centered: !tabProps.centered, })} />
- - {TAB_RANGE.map((text, i) => ( - - )} - rightSlot={tabProps.rightSlot && ( -
+
+ + Some text +
+
+ Section-less tabs appear the same as tabs in a fitted section: +
+ ); }; + +const TabsPrefab = (props, context) => { + const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); + const [tabProps] = useLocalState(context, 'tabProps', {}); + return ( + + {TAB_RANGE.map((text, i) => ( + + )} + rightSlot={tabProps.rightSlot && ( +