Skip to content

Commit

Permalink
refactor(renderer): setting layout and scroll behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz committed Jan 28, 2025
1 parent fde5459 commit fa6b978
Showing 1 changed file with 84 additions and 39 deletions.
123 changes: 84 additions & 39 deletions src/renderer/src/pages/settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,48 +101,68 @@ const Settings = () => {
};

return (
<Box
px={4}
py={!isWindows ? 8 : 0}
position="relative"
overflow="auto"
maxH="100vh"
>
<Box h="100vh" display="flex" flexDirection="column">
{!isWindows && (
<Box className="draggable-area" w="100%" h={8} flexShrink={0} />
)}

<Tabs variant="line" display="flex" flexDirection="column" flex={1}>
<Box
className="draggable-area"
w="100%"
h={34}
position="absolute"
borderBottom="1px"
borderColor="gray.200"
bg="white"
position="sticky"
top={0}
/>
)}
<Tabs variant="line">
<TabList>
<Tab>General</Tab>
<Box ml="auto" display="flex" alignItems="center">
{settings?.presetSource?.type === 'remote' && (
<Button
size="sm"
mr={2}
onClick={handleUpdatePreset}
variant="tars-ghost"
>
Update Preset
</Button>
)}
<IconButton
icon={<IoAdd />}
aria-label="Import Preset"
variant="ghost"
onClick={() => setPresetModalOpen(true)}
/>
</Box>
</TabList>
zIndex={1}
px={4}
>
<TabList>
<Tab>General</Tab>
<Box ml="auto" display="flex" alignItems="center">
{settings?.presetSource?.type === 'remote' && (
<Button
size="sm"
mr={2}
onClick={handleUpdatePreset}
variant="tars-ghost"
>
Update Preset
</Button>
)}
<IconButton
icon={<IoAdd />}
aria-label="Import Preset"
variant="ghost"
onClick={() => setPresetModalOpen(true)}
/>
</Box>
</TabList>
</Box>

<TabPanels>
<TabPanel>
<VStack spacing={8} align="stretch">
<TabPanels flex={1} display="flex" flexDirection="column">
<TabPanel
flex={1}
display="flex"
flexDirection="column"
overflowY="auto"
px={4}
css={{
'&::-webkit-scrollbar': {
width: '8px',
},
'&::-webkit-scrollbar-track': {
background: 'transparent',
},
'&::-webkit-scrollbar-thumb': {
background: '#D1D5DB',
borderRadius: '4px',
},
'&::-webkit-overflow-scrolling': 'touch',
// iOS-style bounce effect
overscrollBehavior: 'auto',
}}
>
<VStack spacing={8} align="stretch" flex={1}>
{settings?.presetSource?.type === 'remote' && (
<Box p={4} bg="gray.50" borderRadius="md">
<Text fontSize="sm" color="gray.600">
Expand Down Expand Up @@ -291,7 +311,7 @@ const Settings = () => {
/>
</FormControl>

<HStack spacing={4}>
<HStack spacing={4} justify="flex-start">
<Button
type="submit"
rounded="base"
Expand Down Expand Up @@ -320,7 +340,32 @@ const Settings = () => {
</VStack>
</TabPanel>
</TabPanels>

<Box
p={4}
borderTop="1px"
borderColor="gray.200"
bg="white"
position="sticky"
bottom={0}
zIndex={1}
>
<HStack spacing={4} justify="flex-start">
<Button type="submit" rounded="base" variant="tars-ghost">
Save
</Button>
<Button
onClick={handleCancel}
rounded="base"
variant="ghost"
fontWeight="normal"
>
Cancel
</Button>
</HStack>
</Box>
</Tabs>

<PresetImport
isOpen={isPresetModalOpen}
onClose={() => setPresetModalOpen(false)}
Expand Down

0 comments on commit fa6b978

Please sign in to comment.