cyberpresidentvanellope/VOREStation
1
0
Fork 0
mirror of https://github.com/VOREStation/VOREStation.git synced 2026-08-27 22:18:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make vore panel layout better for long belly descriptions in the insi… (#16556)

Browse Source 
* Make vore panel layout better for long belly descriptions in the inside panel.

* Even more layout tweaks.
This commit is contained in:
ShadowLarkens
2024-11-04 11:41:29 +01:00
committed by GitHub
parent 92c6fc1e5c
commit 5fb49d6f96
4 changed files with 63 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/packages/tgui/interfaces/VorePanel/VoreBellySelectionAndCustomization.tsx
+8 -7
View File
@@ -1,7 +1,8 @@
import { BooleanLike } from 'common/react';
import { Stack } from 'tgui-core/components';
import { useBackend } from '../../backend';
import { Box, Divider, Flex, Icon, Section, Tabs } from '../../components';
import { Box, Divider, Icon, Section, Tabs } from '../../components';
import { digestModeToColor } from './constants';
import { bellyData, hostMob, selectedData } from './types';
import { VoreSelectedBelly } from './VoreSelectedBelly';
@@ -17,8 +18,8 @@ export const VoreBellySelectionAndCustomization = (props: {
const { our_bellies, selected, show_pictures, host_mobtype } = props;
return (
<Flex height="83%">
<Flex.Item shrink basis="30%">
<Stack fill>
<Stack.Item shrink basis="30%">
<Section title="My Bellies" scrollable fill>
<Tabs vertical>
<Tabs.Tab onClick={() => act('newbelly')}>
@@ -54,8 +55,8 @@ export const VoreBellySelectionAndCustomization = (props: {
))}
</Tabs>
</Section>
</Flex.Item>
<Flex.Item grow>
</Stack.Item>
<Stack.Item grow>
{selected && (
<Section title={selected.belly_name} fill scrollable>
<VoreSelectedBelly
@@ -65,7 +66,7 @@ export const VoreBellySelectionAndCustomization = (props: {
/>
</Section>
)}
</Flex.Item>
</Flex>
</Stack.Item>
</Stack>
);
};
tgui/packages/tgui/interfaces/VorePanel/VoreInsidePanel.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const VoreInsidePanel = (props: {
}
return (
<Section title="Inside">
<Section title="Inside" fill scrollable>
<Box color="green" inline>
You are currently {absorbed ? 'absorbed into' : 'inside'}
</Box>
tgui/packages/tgui/interfaces/VorePanel/VoreUserPreferences.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { BooleanLike } from 'common/react';
import { useBackend } from '../../backend';
import { Box, Button, Divider, Flex, Section } from '../../components';
import { Button, Divider, Flex, Section } from '../../components';
import { prefData } from './types';
import { VoreUserPreferencesAesthetic } from './VoreUserPreferencesTabs/VoreUserPreferencesAesthetic ';
import { VoreUserPreferencesMechanical } from './VoreUserPreferencesTabs/VoreUserPreferencesMechanical ';
@@ -442,7 +442,7 @@ export const VoreUserPreferences = (props: {
};
return (
<Box nowrap>
<Section fill scrollable>
<VoreUserPreferencesMechanical
show_pictures={show_pictures}
preferences={preferences}
@@ -472,6 +472,6 @@ export const VoreUserPreferences = (props: {
</Flex.Item>
</Flex>
</Section>
</Box>
</Section>
);
};
tgui/packages/tgui/interfaces/VorePanel/index.tsx
+51 -36
View File
@@ -1,4 +1,5 @@
import { useState } from 'react';
import { Stack } from 'tgui-core/components';
import { useBackend } from '../../backend';
import { Button, Flex, Icon, NoticeBox, Tabs } from '../../components';
@@ -38,42 +39,56 @@ export const VorePanel = (props) => {
return (
<Window width={890} height={660} theme="abstract">
<Window.Content>
{(data.unsaved_changes && (
<NoticeBox danger>
<Flex>
<Flex.Item basis="90%">Warning: Unsaved Changes!</Flex.Item>
<Flex.Item>
<Button icon="save" onClick={() => act('saveprefs')}>
Save Prefs
</Button>
</Flex.Item>
<Flex.Item>
<Button
icon="download"
onClick={() => {
act('saveprefs');
act('exportpanel');
}}
>
Save Prefs & Export Selected Belly
</Button>
</Flex.Item>
</Flex>
</NoticeBox>
)) ||
''}
<VoreInsidePanel inside={inside} show_pictures={show_pictures} />
<Tabs>
<Tabs.Tab selected={tabIndex === 0} onClick={() => setTabIndex(0)}>
Bellies
<Icon name="list" ml={0.5} />
</Tabs.Tab>
<Tabs.Tab selected={tabIndex === 1} onClick={() => setTabIndex(1)}>
Preferences
<Icon name="user-cog" ml={0.5} />
</Tabs.Tab>
</Tabs>
{tabs[tabIndex] || 'Error'}
<Stack fill vertical>
<Stack.Item>
{(data.unsaved_changes && (
<NoticeBox danger>
<Flex>
<Flex.Item basis="90%">Warning: Unsaved Changes!</Flex.Item>
<Flex.Item>
<Button icon="save" onClick={() => act('saveprefs')}>
Save Prefs
</Button>
</Flex.Item>
<Flex.Item>
<Button
icon="download"
onClick={() => {
act('saveprefs');
act('exportpanel');
}}
>
Save Prefs & Export Selected Belly
</Button>
</Flex.Item>
</Flex>
</NoticeBox>
)) ||
''}
</Stack.Item>
<Stack.Item basis={inside?.desc.length > 500 ? '30%' : '20%'}>
<VoreInsidePanel inside={inside} show_pictures={show_pictures} />
</Stack.Item>
<Stack.Item>
<Tabs>
<Tabs.Tab
selected={tabIndex === 0}
onClick={() => setTabIndex(0)}
>
Bellies
<Icon name="list" ml={0.5} />
</Tabs.Tab>
<Tabs.Tab
selected={tabIndex === 1}
onClick={() => setTabIndex(1)}
>
Preferences
<Icon name="user-cog" ml={0.5} />
</Tabs.Tab>
</Tabs>
</Stack.Item>
<Stack.Item grow>{tabs[tabIndex] || 'Error'}</Stack.Item>
</Stack>
</Window.Content>
</Window>
);