popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

smaller tab's text in TabsPane; use Drawer in MapComponent for object view

Browse Source
This commit is contained in:
popovspiridon99
2025-09-25 16:42:19 +09:00
parent 5dd75ead39
commit 2ffd94bd5b
2 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/components/map/MapComponent.tsx
View File

@ -846,22 +846,28 @@ const MapComponent = ({
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
{selectedRegion && selectedDistrict && selectedYear &&
<div
style={{
...mapControlsStyle,
transition: 'width .3s ease',
display: 'flex',
flexDirection: 'column',
height: '100%',
width: leftPaneHidden ? '0px' : '100%',
overflow: 'hidden'
}}
>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
</div>
// <div
// style={{
// ...mapControlsStyle,
// transition: 'width .3s ease',
// display: 'flex',
// flexDirection: 'column',
// height: '100%',
// width: leftPaneHidden ? '0px' : '100%',
// overflow: 'hidden'
// }}
// >
// <TabsPane defaultTab='objects' tabs={objectsPane} />
// <Divider />
// <TabsPane defaultTab='parameters' tabs={paramsPane} />
// </div>
""
}
<Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 9999 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
</Drawer>
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<Button

6
client/src/components/map/TabsPane/TabsPane.tsx
View File

@ -1,4 +1,4 @@
import { Tab, TabList } from '@fluentui/react-components';
import { Tab, TabList, Text } from '@fluentui/react-components';
import { useState } from 'react';
export interface ITabsPane {
@ -36,7 +36,9 @@ const TabsPane = ({
}}>
<TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
{tabs.map((tab) => (
<Tab key={tab.value} value={tab.value}>{tab.title}</Tab>
<Tab key={tab.value} value={tab.value}>
<Text size={200}>{tab.title}</Text>
</Tab>
))}
</TabList>
</div>