From a9a73f2a256766adb76527bab29743ccf9e53124 Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Thu, 7 Dec 2023 06:45:04 +0100 Subject: [PATCH] [MIRROR] TGUI Stack Zebra Mode [MDB IGNORE] (#25484) * TGUI Stack Zebra Mode (#79972) ## About The Pull Request TGUI Stack elements can now be zebra-styled (alternating colors for contrast) ![image](https://github.com/goonstation/goonstation/assets/4741640/962d048e-3428-471b-87b3-fc9edd4b134e) ## Why It's Good For The Game readability? i kinda just like horses partial port of https://github.com/goonstation/goonstation/pull/17117 i am the original author and i license my shit under MIT, if you really want me to add to the header authors bug me on discord ![ZebraZebrasGIF](https://github.com/goonstation/goonstation/assets/4741640/8ca53f9d-c6e9-4bf2-86ac-aa4b4a87a306) ## Changelog :cl: add: TGUI Stack elements can now be zebra-styled (alternating colors for contrast) /:cl: --------- Co-authored-by: oranges <email@ oranges.net.nz> * TGUI Stack Zebra Mode --------- Co-authored-by: ZeWaka <zewakagamer@gmail.com> Co-authored-by: oranges <email@ oranges.net.nz> --- tgui/packages/tgui/components/Stack.tsx | 4 +++- tgui/packages/tgui/stories/Stack.stories.jsx | 2 +- tgui/packages/tgui/styles/components/Stack.scss | 6 ++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx index 9abf13e651b..4d0ab75cab5 100644 --- a/tgui/packages/tgui/components/Stack.tsx +++ b/tgui/packages/tgui/components/Stack.tsx @@ -11,16 +11,18 @@ import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, c type StackProps = FlexProps & { vertical?: boolean; fill?: boolean; + zebra?: boolean; }; export const Stack = (props: StackProps) => { - const { className, vertical, fill, ...rest } = props; + const { className, vertical, fill, zebra, ...rest } = props; return ( <div className={classes([ 'Stack', fill && 'Stack--fill', vertical ? 'Stack--vertical' : 'Stack--horizontal', + zebra && 'Stack--zebra', className, computeFlexClassName(props), ])} diff --git a/tgui/packages/tgui/stories/Stack.stories.jsx b/tgui/packages/tgui/stories/Stack.stories.jsx index 9ebdf16c793..d1ac602f5b1 100644 --- a/tgui/packages/tgui/stories/Stack.stories.jsx +++ b/tgui/packages/tgui/stories/Stack.stories.jsx @@ -35,7 +35,7 @@ const Story = (props) => { <Stack fill className="debug-layout"> <SmallStackItems /> <Stack.Item grow={1}> - <Stack fill vertical> + <Stack fill vertical zebra> <SmallStackItems /> <Stack.Item> <Stack fill> diff --git a/tgui/packages/tgui/styles/components/Stack.scss b/tgui/packages/tgui/styles/components/Stack.scss index ab2c6f24931..02d0e8bbe24 100644 --- a/tgui/packages/tgui/styles/components/Stack.scss +++ b/tgui/packages/tgui/styles/components/Stack.scss @@ -6,6 +6,8 @@ @use '../base.scss'; @use './Divider.scss'; +$zebra-background-color: base.$color-bg-section !default; + .Stack--fill { height: 100%; } @@ -26,6 +28,10 @@ } } +.Stack--zebra > .Stack__item:nth-child(even) { + background-color: $zebra-background-color; +} + .Stack--horizontal > .Stack__divider:not(.Stack__divider--hidden) { border-left: Divider.$thickness solid Divider.$color; }