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

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

@ -255,7 +255,7 @@ const MapComponent = ({
feature.setStyle(highlightStyleRed) feature.setStyle(highlightStyleRed)
const geometry = feature.getGeometry() const geometry = feature.getGeometry()
if (geometry) { if (geometry) {
map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 }) map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
} }
@ -846,22 +846,28 @@ const MapComponent = ({
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}> <div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}> <div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
{selectedRegion && selectedDistrict && selectedYear && {selectedRegion && selectedDistrict && selectedYear &&
<div // <div
style={{ // style={{
...mapControlsStyle, // ...mapControlsStyle,
transition: 'width .3s ease', // transition: 'width .3s ease',
display: 'flex', // display: 'flex',
flexDirection: 'column', // flexDirection: 'column',
height: '100%', // height: '100%',
width: leftPaneHidden ? '0px' : '100%', // width: leftPaneHidden ? '0px' : '100%',
overflow: 'hidden' // overflow: 'hidden'
}} // }}
> // >
<TabsPane defaultTab='objects' tabs={objectsPane} /> // <TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider /> // <Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} /> // <TabsPane defaultTab='parameters' tabs={paramsPane} />
</div> // </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 && {!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<Button <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'; import { useState } from 'react';
export interface ITabsPane { export interface ITabsPane {
@ -36,7 +36,9 @@ const TabsPane = ({
}}> }}>
<TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}> <TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
{tabs.map((tab) => ( {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> </TabList>
</div> </div>